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

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

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

课课家iOS游客发布于 2017-11-23 10:02查看:8985回复:1

        组件化 2.0:趋于成熟

        组件化 1.0 上线后,由于简单易用,很快得到工程师的认可,并开始在各项业务中应用起来。新的需求接踵而来,一直持续到 2014 年底,这个阶段我们称之为组件化 2.0。下面介绍下主要的几个改进。

        Lifecycle

        组件在高内聚的同时,往往需要暴露一些接口供外界调用,从而能够适应复杂的页面需求,例如提交订单页面需要在支付密码组件启动完成后绑定提交时的检查。Web Components、React 等都选择了生命周期事件/方法,我们也是一样。

        组件的生命周期:

image.png

        一个组件的完整生命周期包括:

            init,初始化组件根节点和配置

            fetch,加载 css 和 js 资源

            render,内容渲染,默认的渲染内容方式是 BigRender

            ready,进行数据绑定等操作

            update,数据更新

            destroy,解除所有事件监听,删除所有组件节点

        组件提供 pause、resume 方法以方便进行生命周期控制。各个阶段使用 Promise 串行进行,异步的管理更清晰。使用自定义语义事件,在修改默认行为、组件间通信上充分利用了 YUI 强大的自定义事件体系,有效降低了开发维护成本。

        举个例子,页面初始化时组件的启动过程实际也是借助生命周期实现的:

image.png   

        回过头来看,引入生命周期除了带来扩展性外,更重要的是理顺了组件的各个阶段,有助于更好的理解和运用。

        Data Binding

        数据绑定是我们期盼已久的功能,将 View 和 ViewModel 之间的交互自动化无疑会节省工程师的大量时间。在组件化减少关注点和降低复杂度后,实现数据绑定变得更加可能。

        我们最终实现的数据绑定方案主要参考了 Angular,通过在 html 节点上添加特定的属性声明绑定逻辑,js 扫描这些内容并进行相应的渲染和事件绑定。当数据发生变化时,对应的内容全部重新渲染。

image.png

        使用属性声明绑定逻辑的好处是可以同时支持后端渲染,这对于美团团购这样的偏展现型业务是非常必要的,用户可以很快看到页面内容。

        Flux

        实现数据绑定后,我们不得不面对另外一个问题:如何协同多个组件间的数据。因为某个组件的数据变化,很有可能引起其他组件的变化。例如当修改购买数量,总金额会变化,而总金额超过 500 后,还需要展示大额消费提醒。

        为了解决这个问题,我们引入了 Flux,使用全局消息总线的思路进行跨组件交互。

        例如因为交互复杂而一直让我们非常头疼的项目购买页,在应用组件 + Flux 重构后,各模块之间的互动更加清晰:

image.png

        其他方面的改进还有很多,包括引入模板引擎 LightnCandy 约束模板逻辑、支持组件任意嵌套、支持异步加载并自动初始化等。

        随着组件化 2.0 的逐步完善,基本已经可以从容应对日常开发,在效率和质量方面都上了一个台阶。

        组件化 3.0:重启征程

        时间的车轮滚滚前行,2014 年底,我们遇到一些新的机遇和挑战:

            基于 Node 的全栈开发模式开始应用,前后端渲染有了更多的可能性

            YUI 停止维护,需要一套新的资源管理方案

            新业务不断增加,需要找到一种组件共享的方式,避免重复造轮子


        结合之前的实践,以及在这一过程中逐渐积累的对业内方案的认知,我们提出了新的组件化方案:

        基于 React 开发页面组件,使用 NPM 进行分发,方便共建共享

        基于 Browserify 二次开发,建设资源打包工具 Reduce,方便浏览器加载

        建设适应组件化开发模式的工程化开发方案 Turbo,方便工程师将组件应用于业务开发中

        React

        在组件化 2.0 的过程中,我们发现很多功能和 React 重合,例如 Data Binding、Lifecycle、前后端渲染,甚至直接借鉴的 Flux。除此之外,React 的函数式编程思想、增量更新、兼容性良好的事件体系也让我们非常向往。借着前端全栈开发的契机,我们开始考虑基于 React 进行组件化 3.0 的建设。

        NPM + Reduce

        NPM + Reduce 构成了我们新的资源管理方案,其中:

            NPM 负责组件的发布和安装。可以认为是“分”的过程,粒度越小,重用的可能性越大

            Reduce 负责将页面资源进行打包。可以认为是“合”的过程,让浏览器更快地加载


        一个典型的组件包:        

image.png

        NPM 默认只支持 js 文件的管理,我们对 NPM 中的 package.json 进行了扩展,增加了 style 字段,以使打包工具 Reduce 也能够对 css 和 css 中引用的 image、font 进行识别和处理:

image.png

        只要在页面中 require 了 smart-box,经过 Reduce 打包后,js、css 甚至图片、字体,都会出现在浏览器中。

image.png

        整体思路和组件化 1.0 如出一辙,却又那么不同。

        Turbo

        单单解决分发和打包的问题还不够,业务开发过程如果变得繁琐、难以 Debug、性能低下的话,恐怕不会受到工程师欢迎。

        为了解决这些问题,我们在 Node 框架的基础上,提供了一系列中间件和开发工具,逐步构建对组件友好的前端工程化方案 Turbo。主要有:

        支持前后端同构渲染,让用户更早看到内容

        简化 Flux 流程,数据流更加清晰易维护

        引入 ImmutableJS,保证 Store 以外的数据不可变

        采用 cursor 机制,保证数据修改/获取同步

        支持 Hot Module Replacement,改进开发流自动化

        通过这些改进,一线工程师可以方便的使用各种组件,专注在业务本身上。开发框架层面的支持也反过来促进了组件化的发展,大家更乐于使用一系列组件来构建页面功能。

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

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

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

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: