web---模块化、组件化、⼯程化理解（代码规范）
1. 什么是前端⼯程化
⾃有前端⼯程师这个称谓以来，前端的发展可谓是⽇新⽉异。相⽐较已经⾮常成熟的其他领域，前端虽是后起之秀，但其野蛮⽣长是其他领域不能⽐的。虽然前端技术飞快发展，但是前端整体的⼯程⽣态并没有同步跟进。⽬前绝⼤多数的前端团队仍然使⽤⾮常原始的“切图（FE）->套模板（RD）”的开发模式，这种模式下的前端开发虽说不是⼑耕⽕种的原始状态，但是效率⾮常低下。
前端的⼯程化问题与传统的软件⼯程虽然有所不同，但是⾯临的问题是⼀样的。我们⾸先回顾⼀下传统的软件开发流程模型：
上图中的运⾏和维护并不是串⾏关系，也并⾮绝对的并⾏关系。维护贯穿从编码到运⾏的整个流程。
如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是⾯向编码的，那么⼯程化要解决的是如何提⾼整个系统⽣产效率。所以，与其说软件⼯程是⼀门科学，不如说它更偏向于管理学和⽅法论。
软件⼯程是个很宽泛的话题，每个⼈都有⾃⼰的理解。以上是笔者个⼈的理解，仅供参考。
具体到前端⼯程化，⾯临的问题是如何提⾼编码->测试->维护阶段的⽣产效率。
可能会有⼈认为应该包括需求分析和设计阶段，上图展⽰的软件开发模型中，这两个阶段具体到前端开发领域，更恰当的称谓应该是功能需求分析和UI设计，分别由产品经理和UI⼯程师完成。⾄于API需求分析和API设计，应该包括在编码阶段。
2. 前端⼯程化⾯临的问题
要解决前端⼯程化的问题，可以从两个⾓度⼊⼿：开发和部署。
从开发⾓度，要解决的问题包括：
1. 提⾼开发⽣产效率；
2. 降低维护难度。
这两个问题的解决⽅案有两点：
1. 制定开发规范，提⾼团队协作能⼒；
2. 分治。软件⼯程中有个很重要的概念叫做模块化开发其中⼼思想就是分治。
从部署⾓度，要解决的问题主要是资源管理，包括：
1. 代码审查；
2. 压缩打包；
3. 增量更新；
4. 单元测试；
要解决上述问题，需要引⼊构建/编译阶段。
2.1 开发规范
开发规范的⽬的是统⼀团队成员的编码规范，便于团队协作和代码维护。开发规范没有统⼀的标准，每个团队可以建⽴⾃⼰的⼀套规范体系。
值得⼀提的是JavaScript的开发规范，尤其是在ES2015越来越普及的局⾯下，保持良好的编码风格是⾮常必要的。笔者推荐Airbnb的eslint规范。
2.2 模块/组件化开发
2.2.1 模块还是组件？
很多⼈会混淆模块化开发和组件化开发。但是严格来讲，组件（component）和模块（module）应该是两个不同的概念。两者的区别主要在颗粒度⽅⾯。《Documenting Software Architectures》⼀书中对于component和module的解释如下：
A module tends to refer first and foremost to a design-time entity. ... information hiding as the criterion for allocating
responsibility to a module.
A component tends to refer to a runtime entity. ... The emphasis is clearly on the finished product and not on the
design considerations that went into it.
In short, a module suggests encapsulation properties, with less emphasis on the delivery medium and what goest on at runtime. Not so with components. A delivered binary maintains its "separateness" throughout execution. A component suggests independently deployed units of software with no visibility into the development process.
简单讲，module侧重的是对属性的封装，重⼼是在设计和开发阶段，不关注runtime的逻辑。module是⼀个⽩盒；⽽component是⼀个可以独⽴部署的软件单元，⾯向的是runtime，侧重于产品的功能性。component是⼀个⿊盒，内部的逻辑是不可见的。
⽤通俗的话讲，模块可以理解为零件，⽐如轮胎上的螺丝钉；⽽组件则是轮胎，是具备某项完整功能的⼀个整体。具体到前端领域，⼀个button是⼀个模块，⼀个包括多个button的nav是⼀个组件。
模块和组件的争论由来已久，甚⾄某些编程语⾔对两者的实现都模糊不清。前端领域也是如此，使⽤过bower的同⾏知道bower安装的第三⽅依赖⽬录是bower_component；⽽npm安装的⽬录是node_modules。也没必要为了这个争得头破⾎流，⼀个团队只要统⼀思想，保证开发效率就可以了。⾄于是命名为module还是component都⽆所谓。
笔者个⼈倾向组件⿊盒、模块⽩盒这种思想。
模块化/组件化详情：
模块化
就是将⼀个⼤⽂件拆分成相互依赖的⼩⽂件，再进⾏统⼀的拼装和加载。在⼯程化之前，⼀直是使⽤js、jquery、ajax，这没有模块概念，对于开发⼤型且复杂的系统会有⼀定的限制。
组件化
⾸先，组件化≠模块化。好多⼈对这两个概念有些混淆。
模块化只是在⽂件层⾯上，对代码或资源的拆分；⽽组件化是在设计层⾯上，对UI（⽤户界⾯）的拆分。
从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
组件：页⾯是个⼤型组件，可以拆成若⼲个中型组件，然后中型组件还可以再拆，拆成若⼲个⼩型组件，⼩型组件也可以再拆，直到拆成DOM元素为⽌。DOM元素可以看成是浏览器⾃⾝的组件，作为组件的基本单元。
传统前端框架/类库的思想是先组织DOM，然后把某些可复⽤的逻辑封装成组件来操作DOM，是DOM优先；⽽组件化框架/类库的思想是先来构思组件，然后⽤DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者本质的区别。
2.2.2 模块/组件化开发的必要性
随着web应⽤规模越来越⼤，模块/组件化开发的需求就显得越来越迫切。模块/组件化开发的核⼼思想是分治，主要针对的是开发和维护阶段。
关于组件化开发的讨论和实践，业界有很多同⾏做了⾮常详细的介绍，本⽂的重点并⾮关注组件化开发的详细⽅案，便不再赘述了。笔者收集了⼀些资料可供参考：
1. Web应⽤的组件化开发；
2. 前端组件化开发实践;
3. ⼤规模的前端组件化与模块化。
3. 构建&编译
jquery是什么功能组件严谨地讲，构建（build）和编译（compile）是完全不⼀样的两个概念。两者的颗粒度不同，compile⾯对的是单⽂件的编译，build是建⽴在compile的基础上，对全部⽂件进⾏编译。在很多Java IDE中还有另外⼀个概念：make。make也是建⽴在compile的基础上，但是只会编译有改动的⽂件，以提⾼⽣产效率。本⽂不探讨build、compile、make的深层运⾏机制，下⽂所述的前段⼯程化中构建&编译阶段简称为构建阶段。
3.1 构建在前端⼯程中的⾓⾊
在讨论具体如何组织构建任务之前，我们⾸先探讨⼀下在整个前端⼯程系统中，构建阶段扮演的是什么⾓⾊。
⾸先，我们看看⽬前这个时间点（2016年），⼀个典型的web前后端协作模式是什么样的。请看下图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。