<dfn id="hx5t3"><strike id="hx5t3"><em id="hx5t3"></em></strike></dfn>

    <thead id="hx5t3"></thead><nobr id="hx5t3"><font id="hx5t3"><rp id="hx5t3"></rp></font></nobr>

    <listing id="hx5t3"></listing>

    <var id="hx5t3"></var>
    <big id="hx5t3"></big>

      
      

      <output id="hx5t3"><ruby id="hx5t3"></ruby></output>
      <menuitem id="hx5t3"><dfn id="hx5t3"></dfn></menuitem>

      <big id="hx5t3"></big>

        帶你入門前端工程(二):統一規范

        譚光志

        代碼規范

        代碼規范是指程序員在編碼時要遵守的規則,規范的目的就是為了讓程序員編寫易于閱讀、可維護的代碼。

        試想一下,一個幾十萬行代碼的項目,存在幾種不同的代碼規范,閱讀起來是什么感受?連代碼縮進使用空格還是 Tab 都能引發不少程序員的爭論,可以說統一代碼規范是非常重要的事情。

        統一代碼規范除了剛才所說的兩點外,還有其他好處:

        • 規范的代碼可以促進團隊合作
        • 規范的代碼可以降低維護成本
        • 規范的代碼有助于 code review(代碼審查)
        • 養成代碼規范的習慣,有助于程序員自身的成長

        當團隊的成員都嚴格按照代碼規范來寫代碼時,可以保證每個人的代碼看起來都像是一個人寫的,看別人的代碼就像是在看自己的代碼(代碼一致性),閱讀起來更加順暢。更重要的是我們能夠認識到規范的重要性,并堅持規范的開發習慣。

        如何制訂代碼規范

        代碼規范一般包含了代碼格式規范、變量和函數命名規范、文檔注釋規范等等。

        代碼格式

        一般是指代碼縮進使用空格還是 Tab、每行結尾要不要加分號、左花括號需不需要換行等等。

        命名規范

        命名規范一般指命名是使用駝峰式、匈牙利式還是帕斯卡式;用名詞、名詞組或動賓結構來命名。

        const smallObject = {} // 駝峰式,首字母小寫
        const SmallObject = {} // 帕斯卡式,首字母大寫
        const strName = 'strName' // 匈牙利式,前綴表示了變量是什么。這個前綴 str 表示了是一個字符串

        變量命名和函數命名的側重點不同。

        變量命名的重點是表明這個變量“是什么”,傾向于用名詞命名。而函數命名的重點是表明這個函數“做什么”,傾向于用動賓結構來命名(動賓結構就是 doSomething)。

        // 變量命名示例
        const appleNum = 1
        const sum = 10
        
        // 函數命名示例
        function formatDate() { ... }
        function toArray() { ... }

        由于拼音同音字太多,千萬不要使用拼音來命名。

        文檔注釋

        文檔注釋比較簡單,例如單行注釋使用 //,多行注釋使用 /**/。

        /**
         * 
         * @param {number} a 
         * @param {number} b 
         * @return {number}
         */
        function add(a, b) {
            return a + b
        }
        
        // 單行注釋
        const active = true

        如果要讓團隊從頭開始制訂一份代碼規范,工作量會非常大,也不現實。所以強烈建議找一份比較好的開源代碼規范,在此基礎上結合團隊的需求作個性化修改。

        下面列舉一些比較出名的 JavaScript 代碼規范:

        CSS 代碼規范也有不少,例如:

        注釋規范

        有同學可能會聽過這樣一種說法:好的代碼是不需要寫注釋的。其實這種說法有點片面。

        如果你寫的函數類似于以下這種:

        function timestampToDate(timestamp = 0) {
            if (/\s/.test(timestamp)) {
                return timestamp
            }
        
            let date = new Date(timestamp)
            return date.toLocaleDateString().replace(/\//g, '-') + ' ' + date.toTimeString().split(' ')[0]
        }
        
        function objToUrlParam(obj = {}) {
            let param = ''
            for (let key in obj) {
                param += '&' + key + '=' + obj[key]
            }
            
            return param? '?' + param.substr(1) : ''
        }

        那不寫注釋很正常,代碼邏輯簡單,變量、函數命名完全契合代碼邏輯。

        但在工作中還有很多業務邏輯很復雜的需求,很有可能一個函數要寫很多代碼,再好的函數命名、變量命名也不一定能看懂代碼邏輯。并且有些業務邏輯會跨多個模塊,需要跟不同模塊的函數打交道。

        像這種復雜的代碼,還有繞來繞去的業務邏輯,如果不寫注釋,分分鐘變成傳說中的“屎山”。

        我們平時強調的代碼規范、項目規范、重構等等,不就是為了減少溝通,提高開發效率嗎。寫注釋的目的也是為了讓代碼更加容易理解,以后出問題了,也能快速定位問題,從而解決問題。

        所以我覺得這個說法應該這樣理解:不是不寫注釋,而是不寫垃圾注釋。

        什么是垃圾注釋?羅里吧嗦一大堆講不到重要的就是垃圾注釋,注釋應該著重描述“做了什么”而不是“怎么做”。

        function objToUrlParam(obj = {}) {
            let param = ''
            for (let key in obj) {
                param += '&' + key + '=' + obj[key]
            }
            
            return param? '?' + param.substr(1) : ''
        }

        例如上面這個函數,你可以這樣寫注釋:“將對象轉化為 URL 參數”。也可以這樣寫:“首先遍歷對象,獲取每一個鍵值對,將它們拼在一起,最后在前面補個問號,變成 URL 參數”。

        第一個注釋雖然描述做了什么,但對于這么簡單的函數來說是不用注釋的。第二個注釋是垃圾注釋的典型示例,描述了怎么做。

        下面再看一個辣眼睛的:

        public class Program  
        {  
            static void Main(string[] args)  
            {  
                /* 這個程序是用來在屏幕上  
                 * 循環打印1百萬次”I Rule!”  
                 * 每次輸出一行。循環計數  
                 * 從0開始,每次加1。  
                 * 當計數器等于1百萬時,  
                 * 循環就會停止運行*/  
         
                for (int i = 0; i < 1000000; i++)  
                {  
                    Console.WriteLine(“I Rule!”);  
                }  
            }  
        }

        總的來說,注釋是必要的,并且要寫好注釋,著重描述代碼做了什么。如果還有人說不寫注釋,讓他看看 linux 項目去,每一個文件都有注釋。

        如何檢查代碼規范

        規范制訂下來了,那怎么確保它被嚴格執行呢?目前有兩個方法:

        1. 使用工具校驗代碼格式。
        2. 利用 code review 審查變量命名、注釋。

        建議使用這兩個方法雙管齊下,確保代碼規范被嚴格執行。

        下面讓我們來看一下,如何使用工具來校驗代碼格式。

        ESLint

        ESLint最初是由Nicholas C. Zakas 于2013年6月創建的開源項目。它的目標是提供一個插件化的javascript代碼檢測工具。
        1. 下載依賴
        // eslint-config-airbnb-base 使用 airbnb 代碼規范
        npm i -D babel-eslint eslint eslint-config-airbnb-base eslint-plugin-import
        1. 配置 .eslintrc 文件
        {
            "parserOptions": {
                "ecmaVersion": 2019
            },
            "env": {
                "es6": true,
            },
            "parser": "babel-eslint",
            "extends": "airbnb-base",
        }
        1. package.jsonscripts 加上這行代碼 "lint": "eslint --ext .js test/ src/"。然后執行 npm run lint 即可開始驗證代碼。代碼中的 test/ src/ 是要進行校驗的代碼目錄,這里指明了要檢查 test、src 目錄下的代碼。

        不過這樣檢查代碼效率太低,每次都得手動檢查。并且報錯了還得手動修改代碼。

        為了改善以上缺點,我們可以使用 VSCode。使用它并加上適當的配置可以在每次保存代碼的時候,自動驗證代碼并進行格式化,省去了動手的麻煩(下一節講如何使用 VSCode 自動格式化代碼)。

        stylelint

        stylelint 是一個開源的、用于檢查 CSS 代碼格式的開源工具。具體如何使用請看下一節。

        使用 VSCode 自動格式化代碼

        格式化 JavaScript 代碼

        安裝 VSCode,然后安裝插件 ESLint。

        選擇 File -> Preference-> Settings(如果裝了中文插件包應該是 文件 -> 選項 -> 設置),搜索 eslint,點擊 Edit in setting.json。

        在這里插入圖片描述

        將以下選項添加到配置文件

            "editor.codeActionsOnSave": {
                "source.fixAll": true,
            },

        配置完之后,VSCode 會根據你當前項目下的 .eslintrc 文件的規則來驗證和格式化代碼。

        TypeScript

        下載插件

        npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

        .eslintrc 配置文件,添加以下兩個配置項:

        module.exports = {
            parser: '@typescript-eslint/parser',
            plugins: ['@typescript-eslint'],
        }

        在根目錄下的 package.json 文件的 scripts 選項里添加以下配置項:

        "scripts": {
          "lint": "eslint --ext .js,.ts,.tsx test/ src/",
        },

        test/ src/ 是你要校驗的目錄。修改完后,現在 ts 文件也可以自動格式化了。

        擴展

        如何格式化 HTML、Vue(或其他后綴) 文件中的 HTML 和 CSS?

        這需要利用 VSCode 自帶的格式化,快捷鍵是 shift + alt + f。假設當前 VSCode 打開的是一個 Vue 文件,按下 shift + alt + f 會提示你選擇一種格式化規范。如果沒提示,那就是已經有默認的格式化規范了(一般是 vetur 插件),然后 Vue 文件的所有代碼都會格式化,并且格式化規則還可以自己配置。

        具體規則如下圖所示,可以根據自己的喜好來選擇格式化規則。

        在這里插入圖片描述

        因為之前已經設置過 ESlint 的格式化規則了,所以 Vue 文件只需要格式化 HTML 和 CSS 中的代碼,不需要格式化 JavaScript 代碼,所以我們需要禁止 vetur 格式化 JavaScript 代碼:

        在這里插入圖片描述

        根據上圖配置完成后,回到剛才的 Vue 文件。隨意打亂代碼的格式,再按下 shift + alt + f ,會發現 HTML 和 CSS 中的代碼已經格式化了,但是 JavaScript 的代碼并沒格式化。沒關系,因為已經設置了 ESlint 格式化,所以只要執行保存操作,JavaScript 的代碼也會自動格式化。

        同理,其他類型的文件也可以這樣設置格式化規范。

        格式化 CSS 代碼

        下載依賴

        npm install --save-dev stylelint stylelint-config-standard

        在項目根目錄下新建一個 .stylelintrc.json 文件,并輸入以下內容:

        {
            "extends": "stylelint-config-standard"
        }

        VSCode 添加 stylelint 插件:

        在這里插入圖片描述

        然后就可以看到效果了。

        在這里插入圖片描述

        如果你想修改插件的默認規則,可以看官方文檔,它提供了 170 項規則修改。例如我想要用 4 個空格作為縮進,可以這樣配置:

        {
            "extends": "stylelint-config-standard",
            "rules": {
                "indentation": 4
            }
        }

        Code Review 代碼審查

        代碼審查是指讓其他人來審查自己代碼的一種行為。審查有多種方式:例如結對編程(一個人寫,一個人看)或者統一某個時間點大家互相做審查(單人或多人)。

        代碼審查的目的是為了檢查代碼是否符合代碼規范以及是否有錯誤,另外也能讓評審人了解被審人所寫的功能。經?;ハ鄬彶?,能讓大家都能更清晰地了解整個項目的功能,這樣就不會因為某個核心開發人員離職了而引起項目延期。

        當然,代碼審查也是有缺點的:一是代碼審查非常耗時,二是有可能引發團隊成員爭吵。據我了解,目前國內很多開發團隊都沒有代碼審查,包括很多大廠。

        個人建議在找工作時,可以詢問一下對方團隊是否有測試規范、測試流程、代碼審查等。如果同時擁有以上幾點,說明是一個靠譜的團隊,可以優先選擇。

        git 規范

        git 規范一般包括兩點:分支管理規范和 git commit 規范。

        分支管理規范

        一般項目分主分支(master)和其他分支。

        當有團隊成員要開發新功能或改 BUG 時,就從 master 分支開一個新的分支。例如項目要從客戶端渲染改成服務端渲染,就開一個分支叫 SSR,開發完了再合并回 master 分支。

        如果要改一個重大的 BUG,也可以從 master 分支開一個新分支,并用 BUG 號命名。

        # 新建分支并切換到新分支
        git checkout -b test
        # 切換回主分支,合并新分支
        git checkout master
        git merge test

        注意,在將一個新分支合并回 master 分支時,如果新分支中有一些意義不明確的 commit,建議先對它們進行合并(使用 git rebase)。合并后,再將新分支合并回 master 分支。

        git commit 規范

        git 在每次提交時,都需要填寫 commit message。

        git commit -m 'this is a test'

        commit message 就是對你這次的代碼提交進行一個簡單的說明,好的提交說明可以讓人一眼就明白這次代碼提交做了什么。

        既然明白了 commit message 的重要性,那我們就更要好好的學習一下 commit message 規范。下面讓我們看一下 commit message 的格式:

        <type>(<scope>): <subject>
        <BLANK LINE>
        <body>
        <BLANK LINE>
        <footer>

        我們可以發現,commit message 分為三個部分(使用空行分割):

        1. 標題行(subject): 必填, 描述主要修改類型和內容。
        2. 主題內容(body): 描述為什么修改, 做了什么樣的修改, 以及開發的思路等等。
        3. 頁腳注釋(footer): 可以寫注釋,放 BUG 號的鏈接。

        type

        commit 的類型:

        • feat: 新功能、新特性
        • fix: 修改 bug
        • perf: 更改代碼,以提高性能
        • refactor: 代碼重構(重構,在不影響代碼內部行為、功能下的代碼修改)
        • docs: 文檔修改
        • style: 代碼格式修改, 注意不是 css 修改(例如分號修改)
        • test: 測試用例新增、修改
        • build: 影響項目構建或依賴項修改
        • revert: 恢復上一次提交
        • ci: 持續集成相關文件修改
        • chore: 其他修改(不在上述類型中的修改)
        • release: 發布新版本
        • workflow: 工作流相關文件修改

        scope

        commit message 影響的功能或文件范圍, 比如: route, component, utils, build...

        subject

        commit message 的概述

        body

        具體修改內容, 可以分為多行.

        footer

        一些備注, 通常是 BREAKING CHANGE 或修復的 bug 的鏈接.

        示例

        fix(修復BUG)

        每次 git commit 最好加上范圍描述。

        例如這次 BUG 修復影響到全局,可以加個 global。如果影響的是某個目錄或某個功能,可以加上該目錄的路徑,或者對應的功能名稱。

        // 示例1
        fix(global):修復checkbox不能復選的問題
        // 示例2 下面圓括號里的 common 為通用管理的名稱
        fix(common): 修復字體過小的BUG,將通用管理下所有頁面的默認字體大小修改為 14px
        // 示例3
        fix(test): value.length -> values.length
        feat(添加新功能或新頁面)
        feat: 添加網站主頁靜態頁面
        
        這是一個示例,假設對任務靜態頁面進行了一些描述。
         
        這里是備注,可以是放 BUG 鏈接或者一些重要性的東西。
        chore(其他修改)

        chore 的中文翻譯為日常事務、例行工作。顧名思義,即不在其他 commit 類型中的修改,都可以用 chore 表示。

        chore: 將表格中的查看詳情改為詳情

        其他類型的 commit 和上面三個示例差不多,在此不再贅述。

        驗證 git commit 規范

        利用 git hook 能在特定的重要動作發生時觸發自定義腳本。

        驗證 git commit 規范也不例外,我們需要通過 git 的 pre-commit 鉤子函數來進行。當然,你還需要下載一個輔助插件 husky 來幫助你進行驗證。

        pre-commit 鉤子在鍵入提交信息前運行,它用于檢查即將提交的快照。

        husky 是一個開源的工具,使用它我們可以在 package.json 里配置 git hook 腳本。下面讓我們看一下如何使用:

        下載

        npm i -D husky

        package.json 加上下面的代碼:

        "husky": {
          "hooks": {
            "pre-commit": "npm run lint",
            "commit-msg": "node script/verify-commit.js",
            "pre-push": "npm test"
          }
        }

        然后在你項目根目錄下新建一個文件夾 script,并在下面新建一個文件 verify-commit.js,輸入以下代碼:

        const msgPath = process.env.HUSKY_GIT_PARAMS
        const msg = require('fs')
        .readFileSync(msgPath, 'utf-8')
        .trim()
        
        // 提前定義好 commit message 的格式,如果不符合格式就退出程序。
        const commitRE = /^(feat|fix|docs|style|refactor|perf|test|workflow|build|ci|chore|release|workflow)(\(.+\))?: .{1,50}/
        
        if (!commitRE.test(msg)) {
            console.error(`
                不合法的 commit 消息格式。
                請查看 git commit 提交規范:https://github.com/woai3c/Front-end-articles/blob/master/git%20commit%20style.md
            `)
        
            process.exit(1)
        }

        現在來解釋下各個鉤子的含義:

        1. "pre-commit": "npm run lint",在 git commit 前執行 npm run lint 檢查代碼格式。
        2. "commit-msg": "node script/verify-commit.js",在 git commit 時執行腳本 verify-commit.js 驗證 commit 消息。如果不符合腳本中定義的格式,將會報錯。
        3. "pre-push": "npm test",在你執行 git push 將代碼推送到遠程倉庫前,執行 npm test 進行測試。如果測試失敗,將不會執行這次推送。

        通過工具,我們可以很好的管理團隊成員的 git commit 格式,無需使用人力來檢查,大大提高了開發效率。

        另外,我提供了一個簡單的工程化 DEMO。它包含了自動格式化代碼和 git 驗證,如果看完文章還是不知道如何配置,可以參考一下。

        項目規范

        項目規范主要是指項目文件的組織方式和命名方式。統一項目規范是為了方便管理與修改,不會出現同樣性質的文件出現在不同的地方。例如同樣是圖片,一個出現在 assets 目錄,一個出現在 img 目錄。

        創建目錄,需要按照用途來劃分。例如較常見的目錄有:文檔 doc、資源 src、測試 test...

        ├─doc
        ├─src
        ├─test

        src 資源目錄又可以細分:

        ├─api
        ├─asset
        ├─component
        ├─style
        ├─router
        ├─store
        ├─util
        └─view

        現在文件命名有很多種方式(是否簡寫 img image、是否復數 img imgs、文件名過長是用駝峰還是用-連接 oneTwo one-two)。其實用哪種方式不重要,最重要的是命名方式一定要統一。

        例如團隊成員有人命名目錄喜歡用復數形式(apis),有人喜歡用單數(api),這樣是不允許的,一定要統一。

        UI 規范

        注意,這里的 UI 規范是指項目里常用 UI 組件的表現方式以及組件的命名方式,而不是指 UI 組件如何設計。

        表現方式

        現在開源的 UI 組件庫有很多,不同的組件庫的組件表現方式也不一樣。例如有些按鈕組件點擊時顏色變深,有些組件則是變淺。所以建議在 PC 端和移動端都使用統一的 UI 組件庫(PC 端、移動端各一個),或者同一個項目里只使用一個 UI 組件庫。

        另外,項目里常用的組件表現方式也需要通過文檔確定下來。例如收縮展開的動畫效果,具體到動畫持續時間、動畫是緩進快出還是快進緩出等等。

        如果不把這些表現方式的規范確定下來,就有可能出現以下這種情況:

        1. 同樣的組件,在不同的頁面有不同的表現方式(例如動畫效果)。因為沒有規范,開發根據個人喜好添加表現效果。
        2. 同樣的二次確認彈窗,提示語不一樣,按鈕類型也不一樣。

        統一命名

        統一命名,也是為了減少溝通成本。

        舉個例子,現在的日期組件可以選單個日期、也可以選擇范圍日期,有的還可以選擇時間。這樣一來,一個日期組件就有四種情況:

        1. 單個日期帶時間
        2. 單個日期不帶時間
        3. 日期范圍帶時間
        4. 日期范圍不帶時間

        如果這種情況不區分好,開發在看產品文檔的時候就會疑惑,從而增加了開發與產品的溝通成本。

        綜上所述,我們可以發現制定 UI 規范的好處有兩點:

        1. 統一頁面 UI 標準,節省 UI 設計時間。
        2. 減少溝通成本,提高前端開發效率。

        小結

        其實統一規范的最根本目的就是為了保證團隊成員的一致性,從而減少溝通成本,提高開發效率。我以前就經歷過因為規范不標準,造成產品與開發理解有偏差、開發各寫各的代碼,導致各種 BUG 不斷,最后項目延期的事。

        所以說為了提高開發效率,減少加班,請一定要統一規范。

        參考資料

        帶你入門前端工程 全文目錄:

        1. 技術選型:如何進行技術選型?
        2. 統一規范:如何制訂規范并利用工具保證規范被嚴格執行?
        3. 前端組件化:什么是模塊化、組件化?
        4. 測試:如何寫單元測試和 E2E(端到端) 測試?
        5. 構建工具:構建工具有哪些?都有哪些功能和優勢?
        6. 自動化部署:如何利用 Jenkins、Github Actions 自動化部署項目?
        7. 前端監控:講解前端監控原理及如何利用 sentry 對項目實行監控。
        8. 性能優化(一):如何檢測網站性能?有哪些實用的性能優化規則?
        9. 性能優化(二):如何檢測網站性能?有哪些實用的性能優化規則?
        10. 重構:為什么做重構?重構有哪些手法?
        11. 微服務:微服務是什么?如何搭建微服務項目?
        12. Severless:Severless 是什么?如何使用 Severless?
        閱讀 1.2k
        5.6k 聲望
        10.3k 粉絲
        0 條評論
        5.6k 聲望
        10.3k 粉絲
        宣傳欄
        一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕