web前端工程化-刘晓林.ppt

《web前端工程化-刘晓林.ppt》由会员上传分享，免费在线阅读，更多相关内容在PPT专区-天天文库。

1、WEB前端工程化创建者：刘晓林时间：2017.02.14目录前言前端模块化前端组件化前端规范化前端自动化2前言一近年来，前端领域 风云变幻，各种技术栈层出不穷。React、Angular2、Vue2逐步三分天下，Webpack+Babel+ES6模式如日中天，PostCSS大有取代SASS、LESS、Stylus的趋势，还有HTTP2、WebComponents、WebAssembly、函数式编程等新概念不断涌现。让我们这些前端工程师应接不暇、感叹不已：“今年一个技术还没学会，明年可能就不用学了。”回顾前端发展

2、历史，按照@xufei《前端开发技术的发展》一文中的观点，大概可以分为三个阶段：刀耕火种： 典型特征是服务器语言（ASP、JSP、PHP）为主，结合简单的CSS和JS代码片段。是最早期的WebPage模式；手工工场： 典型特征是Ajax的出现，它使得WebApp模式成为可能。这期间jQuery、Prototype和Mootools几个库占主导地位，并出现了初步的模块加载方式；工业革命： 典型特征是各种MV*框架的不断出现，各种开发模式的不断演进，各种自动化工具的不断革新，各种标准的不断确立。3前言二目前来说，W

3、eb业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？前端工程化是前端架构中重要的一环，就是为了解决上述各种效率方面的问题的。而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。那么前端工程化需要考虑哪些因素？我认为前端工程化主要应该从模块化、组件化、规

4、范化、自动化四个方面来思考。4模块化“分工产生效能”模块化是“刀耕火种”和“手工工场”的分界线。它的作用是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载 ，这为多人协作提供了可能。5模块化-js的模块化社区制定的模块加载方案，如CommonJS、AMD和CMD，兼容几种规范的UMD。代表性的有requireJs、seaJS.CommonJS规范：模块的标识应遵循的规则（书写规范）定义全局函数require，通过传入模块标识来引入其它模块，执行的结果即为别的模块暴露出来的API如果require函数引

5、入的模块中包含依赖，那么依次加载这些依赖如果引入模块失败，那么require函数应该报一个异常模块通过变量exports来暴露API，exports只能是一个对象，暴露的API须作为此对象属性。6模块化-js的模块化AMD执行输出结果如下：a.js执行b.js执行main.js执行hello,a.jsa.Js和b.js被预先执行了7模块化-js的模块化CMD执行输出结果如下：main.js执行a.js执行hello,a.jsa.Js和b.js都会预先下载，但是b.js中的代码却没有预先执行，点击按钮后输出b.j

6、s执行、hello,b.js8模块化-js的模块化UMD9模块化-js的模块化框架自带的模块化，angular2、reactjs等。Es6原生模块化，技术选型webpack+Babel+ES610模块化-CSS的模块化虽然SASS、LESS、STYLUS等预处理器实现了对css的文件拆分，但并没有解决CSS模块化的一个重要问题：选择器的全局污染问题。为了避免全局选择器的冲突，各个公司都制定了自己的CSS命名风格，有BEM风格、Bootstrap风格、Semantic风格等。BEM风格11模块化-CSS的模块化C

7、SS从工具层面有ShadowDOM、CSSinJS和CSSModules三种解决方案ShadowDOM是WebComponents的标准。它能解决全局污染问题，但目前很多浏览器不兼容，对我们来说还很久远；ShadowDOM是一个HTML的新规范，其允许开发者封装自己的HTML标签、CSS样式和JavaScript代码。12模块化-CSS的模块化CSSinJS是彻底抛弃CSS，使用JS或JSON来写样式。这种方法很激进，不能利用现有的CSS技术，而且处理伪类等问题比较困难；React13模块化-CSS的模块化CS

8、SModules仍然使用CSS，只是让JS来管理依赖。它能够最大化地结合CSS生态和JS模块化能力，目前来看是最好的解决方案。Vue的scopedstyle14组件化组件化不等于模块化，模块化只是在语言层面上，对代码的拆分；而组件化是基于模块化，在设计层面上，对UI的拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。传统前端