前端工程化之路-語法檢查

小黎也發表於2019-03-02

javascript作為前端的利器，上可擼AI，下可寫驅動，（好吧，我承認我瞎編的），但是js作為一門弱型別的動態語言，在給我們帶來方便的同時，也會悄悄的埋下坑，尤其是在大型專案中，一不小心，就要加班填坑，所以為了愉(早)快(下)工(班)作，我們選擇使用eslint作為javascript的語法檢查工具，tslint作為TypeScript 的語法檢查工具，我們的目標是

提高程式碼質量，避免低階的bug

規範化編碼，統一程式碼風格

eslint官方地址

tslint官方地址

配置規則

eslint 和 tslint 的規則網上介紹已經非常多，配置項也簡單易懂，為了避免該文章篇幅過長，配置規則檔案另起一篇語法檢查-配置規則

eslint

`extends`: [
        "eslint:recommended",
        "standard",
        "plugin:react/recommended",
        "plugin:vue/base",
    ],
複製程式碼

推薦這幾個外掛，都是業內流行的規範，外掛地址如下

standard

react檢查規範 plugin:react/recommended

vue檢查規範 plugin:vue/base

tslint

開啟如下外掛

"extends": [
        "tslint:recommended"
    ]
複製程式碼

搭配vscode使用

推薦兩個外掛

tslint外掛地址

eslint外掛地址

可共享的配置

當有多個專案的時候，我們就可以考慮將配置獨立出來，統一管理，可以通過npm來管理的配置檔案，將配置檔案獨立為一個專案維護，如果是內網專案，可使用 npm install <git remote url> 進行安裝
詳細使用方法如下：

npm install <git remote url>: <protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

tip：專案名稱需要按照這樣的格式 eslint-config-mylint

在配置檔案.eslintrc.js中，改為如下

module.exports = {
    "extends": [
        "mylint"
    ]
};
複製程式碼

填坑

行內規則

在某些情況下需要對個別檔案和某行程式碼特殊處理時，使用註釋的形式

eslint

該檔案不參與語法校驗 /* eslint-disable */

允許使用 console /* eslint no-console: 0 */ or /* eslint-disable no-console */

tslint

該檔案不參與語法校驗 /* tslint:disable */

允許使用 console /* tslint:disable:no-console */

jquery 與箭頭函式

因為箭頭函式的優勢和其簡潔，所以我們在專案中推薦使用箭頭函式，箭頭函式有個特性

箭頭函式沒有它自己的this值，箭頭函式內的this值繼承自外圍作用域，沒有區域性this的繫結，即this不在是動態改變的

因部分專案還是基於jquery的，所以避免不了在dom元素上繫結事件監聽函式，在使用 function的時候，dom事件被觸發，回撥函式中的this指向該dom，可當我們換成箭頭函式時，this就不在是dom，而是上下文，舉個例子

<div class="outer">
    <div class="inner">ww</div>
</div>
複製程式碼

    $(`.outer`).on(`click`, (event) => {
        console.log(this) // 不再是dom物件
        console.log(event.target) // 這個才是dom物件
    })
複製程式碼

因此在修改dom元素的監聽事件回撥的時候，記得要同步將 this 一同修改

currentTarget 與 target 的區別與使用
在監聽的節點裡面還有巢狀節點的情況下，使用 event.target 將會有問題，栗子如下

<div class="outer">
    <div class="inner">cc</div>
</div>
複製程式碼

 // 在需要監聽的節點裡，還有巢狀節點的情況下，需要注意
$(`.outer`).on(`click`, (event) => {
    console.log(event.target) // 獲取的是點選的物件 inner
    console.log(event.currentTarget) // 獲取的監聽的物件 outer
})
複製程式碼

所以在點選 cc的時候，event.target獲取到的是點選的元素物件，而監聽的物件就需要改成這樣獲取 event.currentTarget，這個才是function 下的 this