百度技术沙龙听后感

8月18日参加了第29期百度技术沙龙，感觉收获颇丰，在此记录一下。这次沙龙主题是易维护的前端开发框架，分别请到了百度前端通用组FIS业务框架技术负责人沈洪顺以及淘宝旅行资深前端工程师魏凡哲。更详细的内容大家可以参见百度技术沙龙网站。

前端业务框架之集成化策略（沈洪顺）

1. 为什么要建立业务框架？

因为产品快速增长，需求快速迭代带来了一些问题：

• 代码命名潜在冲突
• 单文件过大，大量冗余代码
• 模块复用复杂
• 合并静态资源繁琐，工作量大
• 静态资源加载性能问题

希望通过建立业务框架而达到的目标：

• 简单的开发、维护、部署
• 减少重复劳动
• 团队高效协作
• 代码高性能

2. 业务框架的设计原则？

• 方案集成化
• 工具智能化
• 流程自动化

3. 核心设计与实现？

• 模块化：
• Template模块（.tpl文件）
• JavaScript模块（.js文件）
• CSS模块（.css文件）

后面关于自动化部分深入到框架的某些细节，还有词法分析等处理，这一部分我没太听懂。

另外还有两个点我觉得挺重要的需要区分，就是静态加载VS动态加载，异步加载VS同步加载：

4. 静态加载VS动态加载？

• 静态加载：编译时分析页面使用到的组件，将组件引用调用添加到页面。
• 优点：
• 适用范围广
• 编译时处理，不依赖线上处理
• 缺点：
• 获取不到运行时组件调用信息
• 不能调用其他子系统组件
• 打包合并不能动态调整
• 动态加载：编译时在页面添加smarty function标记，线上运行时动态分析组件引用，给页面添加组件调用。
• 优点：
• 加载方式灵活
• 线上动态调整打包合并信息
• 可以调用其他子系统组件
• 缺点：
• 适用于有后端模版项目
• 运行时处理依赖和加载

5. 异步加载VS同步加载？

• 同步加载：编译时在head里插入script标签
• 优点：
• 适用于ie hack等类型的文件
• 加载基础库可以全局使用
• JS Loader
• 缺点：
• 阻塞浏览器
• 异步加载：浏览器运行时在head里插入script标签
• 优点：
• 并行加载，性能高
• 更适用于模块化思想
• 按需加载
• 缺点：
• 有一定的学习成本和调试成本

淘宝旅行之复杂表单应用实践（魏凡哲）

1. 什么是分层模式？

非常重要的一种架构，只能上层依赖下层，下层不能依赖上层。

2. 模块划分之后模块的通讯如何完成？

• 使用全能模块：统一管理模块间的沟通协作
• 问题：复杂难维护，易耦合，影响扩展
• 使用事件广播：广播模块与接收模块。有同步（请大家为我提供数据）与异步（知会大家我的状态）两种情形。
• 注意：要根据不同场景决定是否要使用广播。作为模块级的解耦工具，广播不适合太频繁使用，因为过多使用会带来广播风暴，影响性能。

3. 组件如何解耦？

以表单组件组织思路为例：

• 深层次组件树：类似于传统的GUI组件。
• 优点：架构严谨，层级清晰，容易支持字段级扩展
• 缺点：不够灵活，字段对象很臃肿，适应细节的调整能力不够
• 扁平化组件+AOP：用前端模版管理字段，前端模版兼顾架构稳定性与灵活性。AOP包括基础展现、富展现、校验，额外引入整块代码处理业务逻辑。使用过程中定义切点（执行时机）、切面（业务逻辑），最终实现文件级隔离。

4. AOP是什么？

它是一种编程范式或方法论，起源于上世纪90年代施乐公司（Xerox PARC）。它解决在使用面向对象的方法或者是面向过程的方法开发系统中，某功能为多种跨模块对象或过程所需要，同时又需要保证该功能独立性的设计问题。

通常在需求分析后期、架构设计初期，就应当考虑是采用OOP思路还是AOP思路。

==================================================

后记：之前参加百度技术沙龙的时候填了份问卷，结果今天就收到一份意外的惊喜！谢谢百度技术沙龙的礼物，好喜欢！