主讲人
- 田东东
- 燕山大学硕士研究生
- 360搜索前端团队
- 首届前端星计划毕业生
一、什么是前端工程化?
- ⼯程化的目标
在前端领域,利用技术不断进步和经验逐步积累带来的各种⽅案,来解决在项目的开发、测试、维护阶段中遇到的种种低效和繁琐的问题。 - ⼯程化里的技术
⼯程化是⼀种思想,技术是⼀种实践。技术会随着时代进步不断地演进和改变,在不同的时期,都会有不同的技术来承载和践⾏着⼯程化思想。
思想的落地离不开⾏动和实践,技术虽然会过时,但是实践必须立⾜当下。 - 为什么前端要做⼯程化
历史原因使我们⼤多数⼈后知后觉,用⼀句⼤白话来说,前端⼯程化就是为了提效。这个提效体现在项目的开发、测试及维护阶段。
二、规范化
- 规范化:是项⽬可维护性的基⽯。
- 版本管理及开发流程规范
- 编写规范
脚本
样式
⽬录结构
-
git:版本管理、代码仓库
-
git flow:基于git / 简化操作、活动模型 / ⾏为规范
-
git flow 的使用
-
本章参考
‣ 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工作流模拟⼀次从开发到打Tag上线的全过程。
三、模块化
-
分类:CSS模块化 / JS模块化
-
我们⼀般逻辑相关的代码放在同⼀个⽂件中,当做⼀个模块。
只需关注模块内逻辑的实现,⽆需考虑变量污染等问题,模块之间可互相调⽤。 -
css模块化解决⽅案
1)核⼼思想:通过样式⽣效规则来避免冲突。
-
scoped:DOM节点添加data-v-version属性,.selector => .selector[data-v-version]
例子:https://juejin.im/ -
Css in JS:以脚本模块来写样式,甚⾄有封装好的样式模块可直接调⽤。
样式 => 按规则⽣成的唯⼀selector
https://codepen.io/dongtianee/pen/ZZvYQo
https://github.com/4Catalyzer/astroturf -
CSS MODULES :借助预编译使样式成为脚本中的变量
.selector => Object.selector | .selector => .main__sub__hash
https://css-modules.github.io/webpack-demo/ -
BEM :Block__Element—Modifier
按照规则,⼿写css,并在模版内增加相应class
BEM https://element.eleme.cn/#/zh-CN/component/alert
优雅地使⽤BEM —— 可编程的CSS
2)为元素建⽴ shadow root,内部样式与外部样式完全隔离
- 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/
四、组件化
- 组件化和模块化的核⼼思想都在于分治,实际带来的好处就是团队协作效率和项⽬可维护性的提升。
组件化开发是Web开发的趋势。 - 什么是组件?
- UI为主
⻚⾯上的⼀个UI块可以封装成⼀个组件。⽐如⻚⾯的头部,封装成⼀个Header组件后,我希望它的脚本、样式和模版可以放在⼀个⽂件夹中,到时候便于维护。 - 逻辑为主
某⼀个功能逻辑也可以封装成⼀个组件。⽐如AutoComplete组件,封装成⼀个组件后,我希望它的脚本、样式和模版可以放在⼀个⽂件夹中,可以⼀处封装,多处任意使⽤。 - 组件
在Web前端领域,我们可以将由特定逻辑和UI进⾏的⾼内聚,低耦合的封装体称为⼀个组件。
1)侧重UI进⾏封装的组件:代码结构清晰,组件内的模块就近放置,⽅便进⾏修改和维护。这种组件具备⾼内聚,低耦合的特性,但普适性不⾼。
2)侧重逻辑进⾏封装的组件:除了具备上述优点外,还具有很⾼的普适性,更⽅便组件重⽤。
3)组件内可以包含组件,⽐如偏UI的组件往往都是包含有偏逻辑的组件。
-
规范化、模块化、组件化是否符合前端⼯程化的⽬的——提效
-
本章参考
‣ 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
‣ ⾃动构建(打包) eg.: webpack
‣ ⾃动测试 eg.: karma, jest
‣ ⾃动部署 eg.: Jenkins -
⾃动化测试
-
⾃动化部署
-
⾃动化初始化
-
自动化构建
- webpack
- papcel
- 本章参考
‣https://juejin.im/entry/5b286a126fb9a00e45113435
‣ https://ithelp.ithome.com.tw/articles/10192300
‣ http://fis.baidu.com/fis3/index.html
六、总结
- 将技术分类放置依次介绍只是为了显得条理清晰,但技术的划分没那么清晰,⽐如Babel既为⾃动化服务,
也为模块化服务。 - 除标准⽂档和技术⽤法外,⽂中所下定义和说法均带有浓郁的主观看法。⽐如“⼯程化是思想,webpack等
技术为实践,技术践⾏了思想”。说实话webpack的作者可能没想这么多,只是单纯为了⾃⼰写代码时不那
么累。 - 前端优秀技术和框架层出不穷,⽂中所提及的技术⽴⾜于公元2020年且仅为作者个⼈以为的代表性技术。
带着⼯程化的思考去做事