Web应用的组件化开发（一）.pptVIP

Web应用的组件化开发（一）基本思路 徐飞 @民工精髓V 怎样减少软件产品的成本 部署成本 去IOE，使用Linux等开源产品 开发成本 采用更先进的集成开发技术 变更成本 更好的设计，松耦合 为什么要组件化 看看传统制造行业的例子 汽车行业如何造汽车 工人如何修理汽车 可替换部件 软件行业里的可替换部件是什么？ 组件 后端的组件化 场景 服务 流程 规则 模型 理念 不同粒度的组件化 可配置 松耦合 Web1.0时代整体架构 UI由服务端负责输出 主要业务逻辑在服务端 主要交互方式是提交数据然后刷新 Web1.0时代的前端组件化 界面跟行间逻辑一起切分 组件是端到端的，每个组件包括自己的界面和逻辑 组件的集成较为方便 Web2.0时代整体架构 HTML、CSS、JavaScript静态化 客户端逻辑复杂度增加 不刷新，通过AJAX等方式调用服务 Web2.0时代的新问题 单页应用的流行 浏览器端不仅有界面，还有大量逻辑 前端复杂度大为提升 需要引入在客户端开发过程中普遍使用的一些设计模式 服务端的MVC MVC三者都在服务端 视图的生成和运行不在同一个地方 事件跟控制器也不在一个地方 单页应用的客户端MVC 只把服务端当作数据源 MVC三者都在客户端 控制器有时候可以退化 前端模式的应用 模式 MVC，MVP，MVVM，MVW等等 框架 BackBone Knockout，Avalon Angular 核心思想 前端的职能分离 依赖注入 依赖注入 缺点 会牺牲一些性能 在跟踪调试的便利性等方面也会有所损失 优点 通过配置来实例化所依赖的组件，易变更 松耦合和可替代性 组件易测试 MV*框架的原理 主流程 初始化自身 解析定义在HTML上的规则 异步加载可能尚未引入的JavaScript代码 实例化模型 创建模型和DOM的关联关系 支线流程 解析url的search字符串，恢复状态 加载HTML部件模板 部件模板和模型的关联 如何切分组件 垂直切分 每个组件是端到端的 组件声明式引入，容易使用 Shadow DOM和Web Components Polymer 横向分层 模型等业务逻辑和界面交互的分离 代码有全局的视图 便于分工协作 Web App的组件化模式 总体原则 宏观上分层 层内切分 界面片段化，模版化 业务逻辑模块化 模型层保持独立 只有视图层才能操作界面 如何实际操作 HTML 片段化，模板化 JavaScript 分文件 异步载入 分模块，分清职责，消灭全局变量 CSS 源码与发布的分离 LESS，SASS，Stylus 组件化之后的工作流程 逻辑层 设计业务模型 编写模型层的代码 进行单元测试 展示层 设计界面 将界面分解为可重用的片段，编写为HTML和CSS 集成 编写视图层代码，把以上这些组装起来 外围管理平台 界面模板的包含关系 逻辑模块的依赖关系 样式的模块化管理 JavaScript的单元测试 国际化资源字符串的管理 代码版本管理 文档管理 Demo管理 最小化发布 界面定制 Q A Thank you * *