前端工程化
主講人
- 田東東
- 360前端技術(shù)專家
- 奇舞團
一、什么是前端工程化？
- 目標(biāo)
- 技術(shù)
- 原因
目標(biāo)：
在前端領(lǐng)域，利用不斷進步經(jīng)驗積累帶來的各種方案，來解決在項目中的開發(fā)測試維護階段遇到的種種抵消和繁瑣的問題
各種工具如下：
- ?程化里的技術(shù)
?程化是?種思想，技術(shù)是?種實踐。技術(shù)會隨著時代進步不斷地演進和改變，在不同的時期，都會有不同的技術(shù)來承載和踐?著?程化思想。
思想的落地離不開?動和實踐，技術(shù)雖然會過時，但是實踐必須立?當(dāng)下。 - 為什么前端要做?程化
歷史原因使我們?多數(shù)?后知后覺，用?句?白話來說，前端?程化就是為了提效。這個提效體現(xiàn)在項目的開發(fā)、測試及維護階段。
二、工程化主要包括：
-
規(guī)范化
- 規(guī)范化：是項?可維護性的基?。
- 版本管理及開發(fā)流程規(guī)范
- 編寫規(guī)范
- 腳本
- 樣式
- ?錄結(jié)構(gòu)
git：版本管理、代碼倉庫
git flow：基于git / 簡化操作、活動模型 / ?為規(guī)范
git flow 的使用
git開發(fā)流程示意圖：
[圖片上傳失敗...(image-308759-1586611609866)]
參考：
? https://git-scm.com/docs
?https://www.atmarkit.co.jp/ait/articles/1708/01/news015.html
?https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow
? https://danielkummer.github.io/git-flow-cheatsheet/
注：安裝git和git flow，參考?檔，遵循git flow工作流模擬?次從開發(fā)到打Tag上線的全過程。
-
模塊化
分類：CSS模塊化 v/s JS模塊化
我們?般邏輯相關(guān)的代碼放在同?個?件中，當(dāng)做?個模塊。
只需關(guān)注模塊內(nèi)邏輯的實現(xiàn)，?需考慮變量污染等問題，模塊之間可互相調(diào)?。
css模塊化解決?案
1）核?思想：通過樣式?效規(guī)則來避免沖突。
scoped：DOM節(jié)點添加data-v-version屬性，.selector => .selector[data-v-version]
例子：https://juejin.im/
Css in JS：以腳本模塊來寫樣式，甚?有封裝好的樣式模塊可直接調(diào)?。
樣式 => 按規(guī)則?成的唯?selector
https://codepen.io/dongtianee/pen/ZZvYQo
https://github.com/4Catalyzer/astroturf
CSS MODULES ：借助預(yù)編譯使樣式成為腳本中的變量
.selector => Object.selector | .selector => .main__sub__hash
https://css-modules.github.io/webpack-demo/
BEM ：Block__Element—Modifier
按照規(guī)則，?寫css，并在模版內(nèi)增加相應(yīng)class
BEM https://element.eleme.cn/#/zh-CN/component/alert
優(yōu)雅地使?BEM —— 可編程的CSS
2）為元素建? shadow root，內(nèi)部樣式與外部樣式完全隔離
js模塊化解決?案
本章參考
https://huangxuan.me/2015/07/09/js-module-7day/
? https://github.com/seajs/seajs/issues/588
? https://juejin.im/post/5aaa37c8f265da23945f365c
? https://yuguo.us/weblog/javascript-module-development-history/
? http://es6.ruanyifeng.com/#docs/module-loader
? https://juejin.im/post/5bb6c5195188255c9e02e6f3
? https://juejin.im/entry/59a5538b6fb9a02481206f22
? https://dom.spec.whatwg.org/#shadow-trees
? https://www.w3.org/TR/shadow-dom/
-
組件化
組件化和模塊化的核?思想都在于分治，實際帶來的好處就是團隊協(xié)作效率和項?可維護性的提升。
組件化開發(fā)是Web開發(fā)的趨勢。
什么是組件？
UI為主
??上的?個UI塊可以封裝成?個組件。?如??的頭部，封裝成?個Header組件后，我希望它的腳本、樣式和模版可以放在?個?件夾中，到時候便于維護。
邏輯為主
某?個功能邏輯也可以封裝成?個組件。?如AutoComplete組件，封裝成?個組件后，我希望它的腳本、樣式和模版可以放在?個?件夾中，可以?處封裝，多處任意使?。
組件
在Web前端領(lǐng)域，我們可以將由特定邏輯和UI進?的?內(nèi)聚，低耦合的封裝體稱為?個組件。
1）側(cè)重UI進?封裝的組件：代碼結(jié)構(gòu)清晰，組件內(nèi)的模塊就近放置，?便進?修改和維護。這種組件具備?內(nèi)聚，低耦合的特性，但普適性不?。
2）側(cè)重邏輯進?封裝的組件：除了具備上述優(yōu)點外，還具有很?的普適性，更?便組件重?。
3）組件內(nèi)可以包含組件，?如偏UI的組件往往都是包含有偏邏輯的組件。
規(guī)范化、模塊化、組件化是否符合前端?程化的?的——提效
本章參考
? https://jiongks.name/slides/css-scoping/
? https://zhuanlan.zhihu.com/p/42370005
? https://zhuanlan.zhihu.com/p/48811872
? https://www.webcomponents.org/introduction
-
?動化
核?思想：能由機器?動完成的事情，絕不讓?來做。?動化是前端?程化核?。
? ?動初始化 eg. : vue-cli
? ?動構(gòu)建（打包） eg.: webpack
? ?動測試 eg.: karma, jest
? ?動部署 eg.: Jenkins
?動化測試
?動化部署
?動化初始化
自動化構(gòu)建
webpack
papcel
本章參考
?https://juejin.im/entry/5b286a126fb9a00e45113435
? https://ithelp.ithome.com.tw/articles/10192300
? http://fis.baidu.com/fis3/index.html
