序言
1位测算机老前辈曾说过：
Controlling complexity is the essence of computer programming.
伴随着前端开发开发设计繁杂度的日趋提高，组件化开发设计应运而生，并伴随着 FIS、React 等出色架构的出現满地盛开。这1全过程一样产生在美团，遭遇业务流程经营规模的迅速发展趋势和工程项目师精英团队的持续扩大，美团经历引进组件化处理資源整合难题、逐渐提高组件作用推动开发设计高效率、再次打造新1代组件化计划方案融入全栈开发设计和共享资源共建等环节，勤奋“controlling complexity”。本文将详细介绍美团组件化开发设计的实践活动全过程。
组件化 1.0：資源资产重组
在美团初期，前端开发資源是依照网页页面或相近业务流程网页页面结合的方式开展机构的。比如 order.js 对应定单有关网页页面的互动，account.css 对应账户有关网页页面的款式。这类方法在以往的较长1段時间内，不断支撑点了全部新项目的一切正常推动，荣誉出众。
伴随着业务流程经营规模的提升和开发设计精英团队的扩大，这套体制慢慢显示信息出它的1些不够：
1.資源冗余
网页页面的慢慢提升，互动的慢慢繁杂化，致使对应的 css 和 js 都有大力度提高，进而出現以便依靠某个 js 中的1个涵数，必须载入全部控制模块，或以便应用某个 css 中的一部分款式依靠全部 css，冗余資源较多
2.对应关联不直观
沒有不言而喻的对应标准，致使的1个难题是改动某个业务流程控制模块的 css 或 js 时，基本上只能借助 grep。靠人来维护保养网页页面控制模块 html、css 和 js 之间的依靠关联，非常容易犯错误，经常出現內容早已删掉可是 css 或 js 还存在的难题。
3.难于模块检测
以网页页面为最少粒度开展資源整合，不一样作用的业务流程控制模块互相危害，繁杂度太高，全自动化检测无法推动。
2013 年刚开始，在调查了 FIS、BEM 等计划方案以后，融合美团开发设计架构的具体，美团基本完成了1套轻量级的组件化开发设计计划方案。关键的改善是：
1.以网页页面作用组件为企业汇聚前端开发資源
2.全自动载入合乎承诺的 css、js 資源
3.将业务流程数据信息到3D渲染数据信息的变换全过程单独出来
举例来讲，美团顶部的检索框就被完成为1个组件。
编码组成：
比照以前，能够看到组件化的1些特性：
1.按需载入
只载入必要的前端开发資源
2.对应关联十分清楚
组件所必须的前端开发資源都在同1文件目录，岗位职责确立且唯1，对应关联明显
3.易于检测
组件是具有单独呈现和互动的最少模块，可运用 Phantom 等专用工具全自动化检测
另外，因为前端开发資源集中化开展生产调度，组件化也为高级特性提升出示了室内空间。比如完成组件级別的 BigRender、根据数据信息剖析开展資源的合拼载入这些。
组件化 2.0：趋于完善
组件化 1.0 上线后，因为简易易用，很快获得工程项目师的认同，并刚开始在各项业务流程中运用起来。新的要求相继而来，1直不断到 2014 年末，这个环节美团称之为组件化 2.0。下面详细介绍下关键的几个改善。
Lifecycle
组件在高内聚的另外，常常必须曝露1些插口供外部启用，从而可以融入繁杂的网页页面要求，比如递交定单网页页面必须在付款登陆密码组件起动进行后关联递交时的查验。Web Components、React 等都挑选了性命周期恶性事件/方式，美团也是1样。
组件的性命周期：
1个组件的详细性命周期包含：
1.init，原始化组件根连接点和配备
2.fetch，载入 css 和 js 資源
3.render，內容3D渲染，默认设置的3D渲染內容方法是 BigRender
4.ready，开展数据信息关联等实际操作
5.update，数据信息升级
6.destroy，消除全部恶性事件监视，删掉全部组件连接点
组件出示 pause、resume 方式以便捷开展性命周期操纵。各个环节应用 Promise 串行通信开展，多线程的管理方法更清楚。应用自定词义恶性事件，在改动默认设置个人行为、组件间通讯上充足运用了 YUI 强劲的自定恶性事件管理体系，合理减少了开发设计维护保养成本费。
举个事例，网页页面原始化时组件的起动全过程具体也是依靠性命周期完成的：
转过头看来，引进性命周期除带来拓展性外，更关键的是理顺了组件的各个环节，有助于更好的了解和应用。
Data Binding
数据信息关联是美团盼望已久的作用，将 View 和 ViewModel 之间的互动全自动化无疑会节约工程项目师的很多時间。在组件化降低关心点和减少繁杂度后，完成数据信息关联变得更为将会。
美团最后完成的数据信息关联计划方案关键参照了 Angular，根据在 html 连接点上加上特殊的特性申明关联逻辑性，js 扫描仪这些內容并开展相应的3D渲染和恶性事件关联。当数据信息产生转变时，对应的內容所有再次3D渲染。
应用特性申明关联逻辑性的益处是能够另外适用后端开发3D渲染，这针对美团团购这样的偏呈现型业务流程是是非非常必要的，客户能够很快看到网页页面內容。
Flux
完成数据信息关联后，美团迫不得已应对此外1个难题：怎样协作好几个组件间的数据信息。由于某个组件的数据信息转变，很有将会引发别的组件的转变。比如当改动选购数量，总额度会转变，而总额度超出 500 后，还必须展现大额消費提示。
以便处理这个难题，美团引进了 Flux，应用全局性信息系统总线的思路开展跨组件互动。
比如由于互动繁杂而1直让美团十分头疼的新项目选购页，在运用组件 + Flux 重构后，各控制模块之间的互动交流更为清楚：
别的层面的改善也有许多，包含引进模版模块 LightnCandy 管束模版逻辑性、适用组件随意嵌套循环、适用多线程载入并全自动原始化等。
伴随着组件化 2.0 的逐渐健全，基础早已能够坦然解决平常开发设计，在高效率和品质层面都到了1个台阶。
组件化 3.0：重新启动征程
時间的车轮滚滚向前，2014 年末，美团遇到1些新的机会和挑戰：
根据 Node 的全栈开发设计方式刚开始运用，前后左右端3D渲染有了更多的将会性
YUI 终止维护保养，必须1套新的資源管理方法计划方案
新业务流程持续提升，必须寻找1种组件共享资源的方法，防止反复造轮子
融合以前的实践活动，和在这1全过程中慢慢累积的对业内计划方案的认知能力，美团提出了新的组件化计划方案：
根据 React 开发设计网页页面组件，应用 NPM 开展派发，便捷共建共享资源
根据 Browserify 2次开发设计，基本建设資源装包专用工具 Reduce，便捷访问器载入
基本建设融入组件化开发设计方式的工程项目化开发设计计划方案 Turbo，便捷工程项目师将组件运用于业务流程开发设计中
React
在组件化 2.0 的全过程中，美团发现许多作用和 React 重叠，比如 Data Binding、Lifecycle、前后左右端3D渲染，乃至立即效仿的 Flux。除此以外，React 的涵数式程序编写观念、增加量升级、适配性优良的恶性事件管理体系也让美团十分憧憬。借着前端开发全栈开发设计的契机，美团刚开始考虑到根据 React 开展组件化 3.0 的基本建设。
NPM + Reduce
NPM + Reduce 组成了美团新的資源管理方法计划方案，在其中：
NPM 负责组件的公布和安裝。能够觉得是“分”的全过程，粒度越小，重用的将会性越大
Reduce 负责将网页页面資源开展装包。能够觉得是“合”的全过程，让访问器更快地载入
1个典型的组件包：
要是在网页页面中 require 了 smart-box，历经 Reduce 装包后，js、css 乃至照片、字体样式，都会出現在访问器中。
总体思路和组件化 1.0 如出1辙，却又那末不一样。
Turbo
单是处理派发和装包的难题还不足，业务流程开发设计全过程假如变得繁琐、无法 Debug、特性不高的话，恐怕不容易遭受工程项目师欢迎。
以便处理这些难题，美团在 Node 架构的基本上，出示了1系列正中间件和开发设计专用工具，逐渐搭建对组件友善的前端开发工程项目化计划方案 Turbo。关键有：
1.适用前后左右端同构3D渲染，让客户更早看到內容
2.简化 Flux 步骤，数据信息流更为清楚易维护保养
3.引进 ImmutableJS，确保 Store 之外的数据信息不能变
4.选用 cursor 体制，确保数据信息改动/获得同歩
5.适用 Hot Module Replacement，改善开发设计流全自动化
6.根据这些改善，1线工程项目师能够便捷的应用各种各样组件，潜心在业务流程自身上。开发设计架构层面的适用也反过来推动了组件化的发展趋势，大伙儿更乐于应用1系列组件来搭建网页页面作用。
小结
发现痛点、剖析调查、运用改善的处理难题思路在组件化开发设计实践活动中持续应用。经历3个大版本号的演进，组件化开发设计方式合理减缓了业务流程发展趋势带来的繁杂度提高的工作压力，并塑造工程项目师具有小而美的工程项目观念，产生共建共享资源的优良氛围。没什么疑惑，组件化这类“分而治之”的观念可能长期地危害和推动前端开发开发设计方式。美团如今早已提前准备好，迎接新的机会和挑戰，用技术性的持续创新提高工程项目师的幸福快乐感。