第六屆360前端星計劃_前端工程化

前端工程化

主講人

田東東
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