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

一位计算机前辈曾说过：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负责包装页面资源。可以认为是一个“合”的过程，使浏览器能够更快地加载典型的过程

以上就是关于介绍美团组件化开发的实践过程的相关介绍，更多介绍美团组件化开发的实践过程相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对介绍美团组件化开发的实践过程有更深的了解和认识。