滴滴WebApp实践：多业务线并行技术方案

"滴滴的WebApp实践经验主要集中在构建一个能够容纳多条业务线，并且各业务线能够独立迭代和接入的高效系统。他们通过模块化、组件化和事件驱动的架构设计，实现了业务线之间的隔离和协同。" 滴滴在开发WebApp的过程中面临了几个关键需求： 1. **业务线隔离**：确保各个业务线在同一页面内运行时互不干扰，允许独立迭代和上线。 2. **业务线一致性与定制性**：虽然多数业务线遵循相同的发单流程，但某些业务线需要支持自定义功能。 3. **快速接入**：新业务线需能快速便捷地接入首页，减少公共团队的介入。 为满足这些需求，滴滴采取了以下解决方案： 1. **模块化JS**：每个业务线提供自己的`biz.js`文件，首页在加载时异步请求这些文件，实现了业务线的独立加载。 2. **全局注册方法**：通过全局`dd.registerBiz(option)`方法，业务线的`biz.js`可以注册并提供`init`、`onEnter`、`onExit`和`orderRecover`等钩子函数，实现接入。 3. **页面区块拆分**：将页面分为公共区块（如导航菜单和地址选择）和业务线区块（如ETA、发单、自定义区块），公共区块根据注册的业务线动态创建子区块，业务线填充子区块内容。 4. **公共管理切换**：公共层负责业务线的切换，控制区块的显示和隐藏，业务线只需关注自身逻辑，无需关心切换细节。 5. **事件通讯**：通过事件机制（如`location.success`）进行公共层和业务线间的通信，方便数据交互。 6. **公共方法与组件**：提供公共方法（如`sendOrder`）和封装好的通用组件，供业务线调用。 7. **业务线自主配置**：业务线可以通过服务端渲染时传入的JS地址自行配置，实现自主上线。 8. **文档支持**：提供完整Wiki，便于新业务线接入。 技术栈方面，滴滴采用了以下工具和框架： 1. **Scrat**：用于模块化管理和构建。 2. **Zepto + GMU**：利用这两个库实现组件化开发，提升代码复用性和性能。 3. **Handlebar**：前端模板引擎，简化HTML结构的动态生成。 4. **Combo服务**：合并多个小文件为一个大文件，减少HTTP请求，提高加载速度。 通过上述技术实践，滴滴成功构建了一个灵活、可扩展且高度解耦的WebApp平台，既能保证业务线的独立性，又能有效提升开发效率和用户体验。