前端工程化

download:https://www.sisuoit.com/2764....

课成下崽链接:https://www.sisuoit.com/2764.html

最晚期写前端代码时,往往一个页面就是一个文件,HTML/CSS/JS全副写在一起,起初晓得应该把结构层、体现层和行为层拆散;
再起初随着工程复杂化,产生的诸多问题,比方:如何进行高效的多人合作?如何保障我的项目的可维护性?如何进步我的项目的开发效率?
前端工程化思维就在这时利用而生。所谓前端工程化,我认为就是将前端我的项目当成一项系统工程进行剖析、组织和构建从而达到我的项目构造清晰、分工明确、团队配合默契、开发效率进步的目标。

前端模块化

模板化是在文件层面上,对代码和资源的拆分。就是将一个大文件拆分成相互依赖的小文件,再进行对立的拼装和加载。
那具体什么是模块化呢,举一个简略的例子,咱们要写一个实现A性能的JS代码,这个性能在我的项目其余地位也须要用到,那么咱们就能够把这个性能看成一个模块采纳肯定的形式进行模块化编写,既能实现复用还能够分而治之,同理在写款式的时候,如果咱们须要某种非凡的款式,会在很多中央利用,那么咱们也能够采纳肯定的形式进行CSS的模块化。具体说来,JS模块化计划很多有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin个性反对下实现的。
模块化不难理解,重点是要学习相干的技术并且灵活运用。
前端组件化
组件化是在设计层面上,对于UI的拆分。
组件化将页面视为一个容器,页面上各个独立局部例如:头部、导航、焦点图、侧边栏、底部等视为独立组件,不同的页面依据内容的须要,去盛放相干组件即可组成残缺的页面。
组件具备独立性,因而组件与组件之间能够自由组合;当不须要某个组件,或者想要替换组件时,能够整个目录删除/替换。

前端自动化

“简略反复的工作交给机器来做”,自动化也就是有很多自动化工具(glup、webpack)代替咱们来实现,例如继续集成、自动化构建、自动化部署、自动化测试等等。之后的文章中作具体介绍
前端规范化
在我的项目布局初期制订的好坏对于前期的开发有肯定影响。包含的标准有:
目录构造的制订、编码标准、前后端接口标准、文档标准、组件治理、代码包治理(SVN、Git)、commit提交代码备注形容标准、定期codeReview、视觉图标标准.......
总之: 这些概念在软件工程里都是很根底的常识,次要是前端倒退快,需要大,变动灵便,才从简略的前端页面倒退成前端工程化,开发人员还是须要一直的学习,逆水行舟。