扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >编程语言 >前端组件化开发实践(1)

前端组件化开发实践(1)

课课家iOS游客发布于 2017-11-23 09:40查看:10384回复:1

        前言

        一位计算机前辈曾说过:

image.png

        随着前端开发复杂度的日益提升,组件化开发应运而生,并随着 FIS、React 等优秀框架的出现遍地开花。这一过程同样发生在美团,面临业务规模的快速发展和工程师团队的不断扩张,我们历经引入组件化解决资源整合问题、逐步增强组件功能促进开发效率、重新打造新一代组件化方案适应全栈开发和共享共建等阶段,努力“controlling complexity”。本文将介绍我们组件化开发的实践过程。

        组件化 1.0:资源重组

        在美团早期,前端资源是按照页面或者类似业务页面集合的形式进行组织的。例如 order.js 对应订单相关页面的交互,account.css 对应账户相关页面的样式。这种方式在过去的较长一段时间内,持续支撑了整个项目的正常推进,功勋卓著。

image.png

        随着业务规模的增加和开发团队的扩张,这套机制逐渐显示出它的一些不足:

        资源冗余页面的逐渐增加,交互的逐渐复杂化,导致对应的 css 和 js 都有大幅度增长,进而出现为了依赖某个 js 中的一个函数,需要加载整个模块,或者为了使用某个 css 中的部分样式依赖整个 css,冗余资源较多

        对应关系不直观没有显而易见的对应规则,导致的一个问题是修改某个业务模块的 css 或者 js 时,几乎只能依靠 grep。靠人来维护页面模块 html、css 和 js 之间的依赖关系,容易犯错,常常出现内容已经删除但是 css 或 js 还存在的问题

        难于单元测试以页面为最小粒度进行资源整合,不同功能的业务模块相互影响,复杂度太高,自动化测试难以推进

        2013 年开始,在调研了 FIS、BEM 等方案之后,结合美团开发框架的实际,我们初步实现了一套轻量级的组件化开发方案。主要的改进是:

        以页面功能组件为单位聚合前端资源

        自动加载符合约定的 css、js 资源

        将业务数据到渲染数据的转换过程独立出来


image.png

        举例来说,美团顶部的搜索框就被实现为一个组件。

image.png

        代码构成:

image.png

        调用组件变得十足简单:

image.png

        对比之前,可以看到组件化的一些特点:

        按需加载只加载必要的前端资源

        对应关系非常清晰组件所需要的前端资源都在同一目录,职责明确且唯一,对应关系显著

        易于测试组件是具备独立展现和交互的最小单元,可利用 Phantom 等工具自动化测试

        此外,由于前端资源集中进行调度,组件化也为高阶性能优化提供了空间。例如实现组件级别的 BigRender、通过数据分析进行资源的合并加载等等。

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: