介绍美团组件化开发的实践过程

一位计算机前辈曾说过：Controllingcomplexityistheessenceofcomputerprogramming.随着前端开发复杂度的不断提高，组件开发应运而生，FIS、React等优秀框架的出现遍地开花。这一过程也发生在美团。面对业务规模的快速发展和工程师团队的不断扩张，美团通过引入组件解决资源整合问题，逐步提高组件功能，提高开发效率，重建新一代组件解决方案，适应全栈开发、共享建设，努力“controllingcomplexity”。本文将介绍美团组件开发的实践过程。组件化1.0：在美团早期，前端资源是以页面或类似业务页面的形式组织的。比如order.js对应订单相关页面的交互，account.与账户相关页面相对应的css样式。在过去的很长一段时间里，这种方法继续支持整个项目的正常进展，并取得了突出的成就。随着业务规模的增加和开发团队的扩大，这种机制逐渐显示出一些不足：1。资源冗余页面的逐渐增加，交互的逐渐复杂，导致相应的css和js显著增长，然后出现需要加载整个模块来依赖js中的函数，或者使用css中的部分风格来依赖整个css，冗余资源较多。2.对应关系不直观，没有明显的对应规则。一个问题是，在修改某个业务模块的css或js时，几乎只能依靠grep。依靠人来维护页面模块html、css和js之间的依赖关系容易出错，内容经常被删除，但css或js仍存在问题。依靠人来维护页面模块html、css和js之间的依赖关系容易出错，内容经常被删除，但css或js仍然存在问题。3.单元测试很难以页面为最小粒度集成资源。不同功能的业务模块相互影响，复杂性太高，难以推进自动化测试。自2013年以来，对FIS进行了调查、经过BEM等方案，结合美团开发框架的实际情况，美团初步实现了一套轻量级组件开发方案。主要改进如下:1。以页面功能组件为单位聚合前端资源；2.自动加载符合约定的css、js资源3.将业务数据转换为渲染数据。例如，美团顶部的搜索框实现为一个组件。代码组成：复制代码代码如下：www/component/smart-box/├──smart-box.js  #交互├──smart-box.php #渲染数据生产、组件配置├──smart-box.scss #样式├──smart-box.tpl #内容└──test  ├──default.js #自动化测试  └──default.php#调用组件变得非常简单：JavaScriptcode将内容复制到剪贴板echo View::useComponent('smart-box', [      'keyword' => $keyword  ]);  对比之前，我们可以看到组件化的一些特点：1。根据需要加载所需的前端资源；2.对应关系非常明确。组件所需的前端资源在同一目录中，责任明确且唯一，对应关系明显；3.易于测试的组件是具有独立显示和交互的最小单元，可以使用Phantom和其他工具进行自动测试。此外，由于前端资源的集中调度，组件化也为高级性能优化提供了空间。例如，实现组件级别的BigRender、资源合并加载是通过数据分析进行的。例如，实现组件级别的BigRender、资源合并加载通过数据分析等。组件化2.0：成熟组件化1.0上线后，由于使用方便，很快得到工程师的认可，并开始应用于各种业务。新的需求接踵而至，一直持续到2014年底，美团在这个阶段称之为组件化2.0。下面介绍几个主要的改进。在高内聚的同时，Lifecycle组件通常需要暴露一些接口供外部调用，以满足复杂的页面需求。例如，在支付密码组件启动后，需要在绑定提交时检查提交订单页面。WebComponents、React等都选择了生命周期事件/方法，美团也是如此。组件的生命周期：一个组件的完整生命周期包括：1.init，初始组件根节点及配置2.fetch，加载css和js资源3.render，内容渲染，默认渲染内容是Bigrender4.ready，数据绑定等操作5.update，数据更新6.destroy，解除所有事件监听，删除所有组件节点组件提供pausee、方便生命周期控制的resume方法。Promise串行用于各个阶段，异步管理更加清晰。各阶段采用Promise串行，异步管理更加清晰。YUI强大的自定义事件系统用于修改默认行为和组件间通信，有效降低了开发维护成本。举个例子，当页面初始化时，组件的启动过程实际上是在生命周期的帮助下实现的：JavaScriptcode将内容复制到剪贴板var afterLoadList = [];  Y.all('[data-component]').each(function (node) {      var component = new Y.mt.Component(node);      // 绑定 init 生命周期事件，在 init 默认行为完成后，执行回调    component.after('init', function (e) {          // 若配置了延迟启动        if (e.config.afterLoad) {              // 暂停组件的生命周期            e.component.pause();              // 压入延迟启动数组            afterLoadList.push(e.component);          }      });      // 开始进入生命周期    component.start();  });  Y.on('load', function () {      // 在页面 load 当事件发生时，恢复组件的生命周期    afterLoadList.forEach(function (component) {          component.resume();      });  });  回过头来看，除了带来可扩展性外，引入生命周期更重要的是理顺组件的各个阶段，有助于更好地理解和应用。DataBinding数据绑定是美团期待已久的功能。自动化View和ViewModel之间的交互无疑会节省工程师大量时间。DataBinding数据绑定是美团期待已久的功能。View和ViewModel之间的交互自动化无疑将节省工程师大量时间。在组件化中减少注意力和复杂性后，更有可能实现数据绑定。美团最终实现的数据绑定方案主要是指Angular，JS扫描这些内容，并通过在html节点上添加特定的属性声明绑定逻辑进行相应的渲染和事件绑定。当数据发生变化时，所有相应的内容都被重新渲染。JavaScriptcode复制内容<ul class="addressList">      <li          mt-bind-repeat="addr in addrList"        mt-bind-html="addr.text"    >    使用属性声明绑定逻辑的好处是可以同时支持后端渲染，对于美团团购等偏展业务来说，这是非常必要的，用户可以很快看到页面内容。在Flux实现数据绑定后，美团不得不面对另一个问题：如何协调多个组件之间的数据。Flux实现数据绑定后，美团不得不面对另一个问题：如何协调多个组件之间的数据。由于某个组件的数据变化，其他组件很可能会发生变化。举例来说，当购买数量发生变化时，总金额会发生变化，而总金额超过500后，还需要显示大量的消费提醒。为了解决这个问题，美团引入了Flux，利用全球新闻总线的思路进行跨组件交互。例如，在应用组件中，由于交互复杂，美团一直头疼的项目购买页面 Flux重建后，模块之间的互动更加清晰：还有许多其他方面的改进，包括引入模板引擎Lightncandy约束模板逻辑、支持组件任意嵌套、支持异步加载和自动初始化。随着组件化2.0的逐步完善，基本上可以从容应对日常开发，提高效率和质量。组件化3.0：2014年底，美团遇到了一些新的机遇和挑战:基于Node的全栈开发模式开始应用，前后端渲染更有可能停止维护YUI，需要一套新的资源管理方案和新的业务不断增加，需要找到一种组件共享的方式，避免重复造轮结合之前的实践。以及在这个过程中逐渐积累的对行业解决方案的认知，美团提出了一个新的组件解决方案：基于React开发页面组件，使用NPM分发，方便基于Browserify二次开发的共建共享，建设资源包装工具Reduce，方便浏览器加载工程开发解决方案Turbo，以适应组件开发模式，在组件化2.0的过程中，美团发现许多功能与React重叠，如DataBinding等，方便工程师在业务开发中应用组件。、Lifecycle、Flux，前后渲染，甚至直接借鉴。此外，React的函数编程理念、增量更新、兼容性好的事件系统也让美团向往。此外，React的函数编程理念、增量更新、兼容性好的事件系统也让美团向往。借此机会开发前端全栈，美团开始考虑基于React构件3.0。NPM ReduceNPM Reduce构成了美团新的资源管理方案，其中NPM负责组件的发布和安装。可以认为是“分割”的过程。粒度越小，重用的可能性越大。Reduce负责包装页面资源。可以认为是一个“合”的过程，使浏览器能够更快地加载典型的过程