百度技术沙龙第29期 易维护的前端框架

在 8 月 18 日由 @百度 主办、 @InfoQ 负责策划组织和实施的第 29 期百度技术沙龙活动上，来自百度高级工程师，前端通用组 FIS 业务框架技术负责人沈洪顺（@walterShen），淘宝旅行资深前端工程师魏凡哲（@魏凡哲 - 陶清）分别分享了各自在前端开发中的经验与实践，话题涉及“百度前端集成开发业务框架”，以及“复杂表单与解耦”等。本文将对他们各自的分享做下简单的回顾，同时提供相关资料的下载。

主题一：百度前端集成开发业务框架（下载讲稿，观看演讲视频）

来自百度高级工程师，前端通用组 FIS 业务框架技术负责人沈洪顺第一个为大家分享，内容主要涉及业务框架的由来、设计原则、核心设计与实现三部分。

随着产品的快速增长和需求的快速迭代，工程师的抱怨也逐渐出现，代码命名的潜在冲突，单文件过大以及大量冗余代码，模块复用也变得越来越复杂，合并静态资源变得繁琐且耗费较大的工作量，静态资源加载也出现了性能问题，于是在这种情况下，工程师们就有了以下的期望：

简单的开发、维护、部署

减少重复劳动

团队高效协作

高性能的代码

于是业务集成框架便出现了，主要的设计原则为方案集成化、工具智能化和流程自动化，核心设计与实现主要包括模块化和自动化部分，主要模块由 Template 模块、JavaScript 模块、CSS 模块、文件及目录模块组成。此外，沈洪顺还对比了静态加载与动态加载的优劣：

静态加载：编译时分析页面使用到的组件，将组件引用添加到页面 

o优点：适用范围广，编译时处理，不依赖线上处理；

o缺点：获取不到运行时组件调用信息，不能调用其他子系统组件，打包合并不能动态调整；

动态加载：编译时在页面增加 Smarty function 标记，线上运动时动态分析组件引用，给页面添加组件调用 

o优点：加载方式灵活，线上动态调整打包合并信息，可以调用其他子系统组件；

o缺点：适用于有后端模板项目，运行时处理依赖和加载

同时，还针对模块加载中的同步加载和异步加载进行了比较：

同步加载：编译时在 head 里插入 script 标签 

o优点：适用于 ie hack 等类型的文件，加载基础库可以全局使用

o缺点：阻塞浏览器

异步加载：浏览器运行时在 head 里插入 script 标签 

o优点：并行加载，性能高，更适用于模块化思想，可以实现按需加载的效果；

o缺点：有一定的学习成本和调试成本

最后，沈洪顺进行了总结，良好的业务框架提供了开发框架和集成开发工具的集合，为产品线提供前端开发的底层支持，可提高开发和沟通协作的效率，最终快速实现需求并达到代码的最优化。

主题二：复杂表单与解耦（下载讲稿，观看演讲视频）

淘宝旅行资深前端工程师魏凡哲（花名陶清）分享复杂表单与解耦的实践，在介绍架构时陶清提到：

如果说架构模式只有一种的话，那就只有分层模式算是架构，只能上层依赖下层，下层不能依赖上层。

模块化的解决方式主要有利用事件广播和组件解耦，事件广播主要有同步（提供数据）和异步（知会状态）两种形式，在使用事件广播时尤其要区分场景地使用，同时也不易太频繁，过多使用将会带来广播风暴，影响性能。

在前端领域中，AOP 是继 OOP 以后又一个解耦工具，适合解决某个功能被多种跨模块对象需要的场景，在前端表单类应用可以看到的使用场景有提示类、富控件输入类以及校验类功能。陶清还提到，YUI3 是一套很棒，但是被严重低估的前端库，主要可通过 YUI.do 实现 AOP，通过 YUI Event 实现广播，YUI Loader 实现模块加载，此外，YUI3 也已经运用 AOP 模式创造了大量组件，可参考YUI 网站。

Open Space（开放式讨论环节）

为了促进参会者与我们每期的嘉宾以及讲师近距离交流，深入探讨在演讲过程中的疑问，本次活动依然设置了 Open ​Space（开放式讨论）环节。除了讲师沈洪顺和魏凡哲分享文件打包的性能和校验这些事儿外，现场的参会者还一起交流了 JS MVC 框架、校验适配和用户体验权衡等话题。在 Open Space 的总结环节，几位话题小组长​分别对讨论的内容进行了总结。

会后，一些参会者也通过新浪微博分享了他们的参会感受：​​

池建强：值得借鉴，尤其是企业应用的表单，简直是噩梦。

LiHongxi_：昨天，参加了百度技术沙龙，很愉快，在那个大会议室，传来程序员们的开心的笑声。

闪联 - 云朋：# 百度技术沙龙 #这次模块化的分享很不错，一方面将平时的技术积累连起来形成一种思路，另外一种是为逐渐成型并扩大的团队提供了一个高效开发的思路

_ 而乐 _：# 百度技术沙龙 # 淘宝的前端探索有比较多积累，复杂的应用场景代码的解耦。成熟的设计模式：MVC,MVP. 模块通讯尝试：master/slave ，pubsub。

一玉无痕一：第一次参加# 百度技术沙龙 #，内容设计的很好。第一位讲师先给我们个概念，后一位讲师为我们详细讲解内部处理的方法。

MeteorX：应用解耦分层，都是为了将复杂简单化，尽可能让每层的职责单一。以前的面向过程是自底向上，逐层分解；面向对象则是粒度放大，按人的思维行事；到了 SOA，粒度明显更大了，按公司单位的行为方式协同做事。再往下呢？