前端工程化及相關技術理解

前端在發展，那不是一點快啊，如今的前端項目再也不是拼湊幾個html頁面和寫上一堆Jquery就能完成的，web業務正在變得日益複雜，一個Web App的開發難度，相似於開發一個簡易型的native app，隨之帶來了一系列的問題，如何進行高效的多人開發，如何保證優秀的性能，還有如何減小加班時間等等。

前端工程化的內容有哪些？

模塊化
規範化
自動化
組件化

1、模塊化

模塊化是多人協做的基礎。

簡單來講，模塊化就是將一個大文件拆分紅相互依賴的小文件，再進行統一的拼裝和加載。只有這樣，纔有多人協做的可能。

想想，爲何模塊很重要？
由於有了模塊，咱們就能夠更方便地使用別人的代碼，想要什麼功能，就加載什麼模塊。
可是，這樣作有一個前提，那就是你們必須以一樣的方式編寫模塊，不然你有你的寫法，我有個人寫法，豈不是亂了套！

js的模塊化

在es6以前，有commonJS，AMD，CMD規範，如今有es6的模塊系統

commonJS規範

根據CommonJS規範，一個單獨的文件就是一個模塊。每個模塊都是一個單獨的做用域，也就是說，在一個文件定義的變量（還包括函數和類），都是私有的，對其餘文件是不可見的

並且：CommonJS 加載模塊是同步的，因此只有加載完成才能執行後面的操做

服務端NodeJS採用了commonJS規範

AMD規範

服務端模塊有了，那麼客戶端模塊呢，

可commonJS規範不適用瀏覽器，問題出在了同步，若是在瀏覽器端加載模塊是同步的，若是當模塊加載慢(多是網速致使)，整個瀏覽器就好像處於未響應狀態，因此不能採用"同步加載"，因此AMD規範就誕生了。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

參考：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

ES6模塊系統

ES6模塊的運行機制與CommonJS不同，它遇到模塊加載命令import時，不會去執行模塊，而是隻生成一個動態的只讀引用。等到真的須要用到時，再到模塊裏面去取值，而且不會緩存值，模塊裏面的變量綁定其所在的模塊。

ES6模塊化負責處理不一樣模塊間的耦合關聯，具體到編譯時處理全部的模塊依賴，將模塊打包成文件傳輸等工做能夠用打包工具webpack等來完成，

css的模塊化

SASS、LESS、Stylus等預處理器實現了CSS的文件拆分，但沒有解決CSS模塊化的一個重要問題：選擇器的全局污染問題。

怎麼解決選擇器衝突問題，通常有兩點：

1.指定命名規則，
2.CSS Modules css的模塊化。

css Modules 是什麼？
顧名思義：css模塊化。

CSS的規則都是全局的，任何一個組件的樣式規則，都對整個頁面有效。

產生局部做用域的惟一方法，就是使用一個獨一無二的class的名字，不會與其餘選擇器重名。這就是 CSS Modules 的作法。

CSS Modules仍然使用CSS，只是讓JS來管理依賴。它可以最大化地結合CSS生態和JS模塊化能力，目前來看是最好的解決方案。Vue的scoped style也算是一種。

學習css Modules：http://www.ruanyifeng.com/blog/2016/06/css_modules.html

2、規範化

目錄結構的制定
編碼規範
先後端接口規範
文檔規範
組件管理
Git分支管理
Commit描述規範
按期CodeReview
視覺圖標規範

編碼規範

編碼規範通常採用ESLint

ESLint是一個用來識別 ECMAScript 而且按照規則給出報告的代碼檢測工具，使用它能夠避免低級錯誤和統一代碼的風格。

3、自動化

前端工程化的不少髒活累活都應該交給自動化工具來完成。

持續集成
自動化構建
自動化部署
自動化測試

前端自動化測試可以提升代碼質量、減小人肉測試等，這些優勢是不言而喻的。

參考：https://www.zhihu.com/question/24558375