第六届360前端星计划_前端工程化浅析

主讲人

• 田东东
• 燕山大学硕士研究生
• 360搜索前端团队
• 首届前端星计划毕业生

一、什么是前端工程化？

1. ⼯程化的目标
   在前端领域，利用技术不断进步和经验逐步积累带来的各种⽅案，来解决在项目的开发、测试、维护阶段中遇到的种种低效和繁琐的问题。
2. ⼯程化里的技术
   ⼯程化是⼀种思想，技术是⼀种实践。技术会随着时代进步不断地演进和改变，在不同的时期，都会有不同的技术来承载和践⾏着⼯程化思想。
   思想的落地离不开⾏动和实践，技术虽然会过时，但是实践必须立⾜当下。
3. 为什么前端要做⼯程化
   历史原因使我们⼤多数⼈后知后觉，用⼀句⼤白话来说，前端⼯程化就是为了提效。这个提效体现在项目的开发、测试及维护阶段。

二、规范化

1. 规范化：是项⽬可维护性的基⽯。

• 版本管理及开发流程规范
• 编写规范
  脚本
  样式
  ⽬录结构

2. git：版本管理、代码仓库

3. git flow：基于git / 简化操作、活动模型 / ⾏为规范
   

4. git flow 的使用

5. 本章参考
   ‣ 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/

6. 小建议
   安装git和git flow，参考⽂档，遵循git flow工作流模拟⼀次从开发到打Tag上线的全过程。

三、模块化

1. 分类：CSS模块化 / JS模块化

2. 我们⼀般逻辑相关的代码放在同⼀个⽂件中，当做⼀个模块。
   只需关注模块内逻辑的实现，⽆需考虑变量污染等问题，模块之间可互相调⽤。

3. 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，内部样式与外部样式完全隔离
  

4. js模块化解决⽅案
   
5. 本章参考
   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/

四、组件化

1. 组件化和模块化的核⼼思想都在于分治，实际带来的好处就是团队协作效率和项⽬可维护性的提升。
   组件化开发是Web开发的趋势。
2. 什么是组件？

• UI为主
  ⻚⾯上的⼀个UI块可以封装成⼀个组件。⽐如⻚⾯的头部，封装成⼀个Header组件后，我希望它的脚本、样式和模版可以放在⼀个⽂件夹中，到时候便于维护。
• 逻辑为主
  某⼀个功能逻辑也可以封装成⼀个组件。⽐如AutoComplete组件，封装成⼀个组件后，我希望它的脚本、样式和模版可以放在⼀个⽂件夹中，可以⼀处封装，多处任意使⽤。
• 组件
  在Web前端领域，我们可以将由特定逻辑和UI进⾏的⾼内聚，低耦合的封装体称为⼀个组件。
  1）侧重UI进⾏封装的组件：代码结构清晰，组件内的模块就近放置，⽅便进⾏修改和维护。这种组件具备⾼内聚，低耦合的特性，但普适性不⾼。
  2）侧重逻辑进⾏封装的组件：除了具备上述优点外，还具有很⾼的普适性，更⽅便组件重⽤。
  3）组件内可以包含组件，⽐如偏UI的组件往往都是包含有偏逻辑的组件。

3. 规范化、模块化、组件化是否符合前端⼯程化的⽬的——提效

4. 本章参考
   ‣ https://jiongks.name/slides/css-scoping/
   ‣ https://zhuanlan.zhihu.com/p/42370005
   ‣ https://zhuanlan.zhihu.com/p/48811872
   ‣ https://www.webcomponents.org/introduction

五、⾃动化

1. 核⼼思想：能由机器⾃动完成的事情，绝不让⼈来做。⾃动化是前端⼯程化核⼼。
   ‣ ⾃动初始化 eg. : vue-cli
   ‣ ⾃动构建（打包） eg.: webpack
   ‣ ⾃动测试 eg.: karma, jest
   ‣ ⾃动部署 eg.: Jenkins

2. ⾃动化测试
   

3. ⾃动化部署
   

4. ⾃动化初始化
   

5. 自动化构建

• webpack
• papcel

6. 本章参考
   ‣https://juejin.im/entry/5b286a126fb9a00e45113435
   ‣ https://ithelp.ithome.com.tw/articles/10192300
   ‣ http://fis.baidu.com/fis3/index.html

六、总结

1. 将技术分类放置依次介绍只是为了显得条理清晰，但技术的划分没那么清晰，⽐如Babel既为⾃动化服务，
   也为模块化服务。
2. 除标准⽂档和技术⽤法外，⽂中所下定义和说法均带有浓郁的主观看法。⽐如“⼯程化是思想，webpack等
   技术为实践，技术践⾏了思想”。说实话webpack的作者可能没想这么多，只是单纯为了⾃⼰写代码时不那
   么累。
3. 前端优秀技术和框架层出不穷，⽂中所提及的技术⽴⾜于公元2020年且仅为作者个⼈以为的代表性技术。

带着⼯程化的思考去做事