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

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

1. 提升代碼質量，避免低級的bug
2. 規範化編碼，統一代碼風格

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 與箭頭函數

1. 由於箭頭函數的優點和其簡潔，因此咱們在項目中推薦使用箭頭函數，箭頭函數有個特性

箭頭函數沒有它本身的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 一同修改

2. 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

typescript 自定義聲明文件

TypeScript 是javascript的超集，用起來那是一個爽啊，誰用都說好

公司內部研發了一套UI框架，在配合ts使用的時候，發現不少方法缺乏聲明，因此咱們須要編寫聲明文件，官方地址以下

typescript-聲明文件

鵝外話

css的格式化，咱們推薦使用 csscomb ，且它還支持在線生成規則，不能在人性化了，目前對主流編輯器和構建工具都支持良好

參考文章

Configuring ESLint

通俗的方式理解動態類型，靜態類型；強類型，弱類型

currentTarget 與 target 的區別