组件化开发实践.pdf

Web UI组件化开发 孟志昂孟志昂 大纲大纲 一．组件化组件化开发背景发背景 二二．．组件开发框架组件开发框架 三．组件开发示例和规范 四．组件可视化装配 一：组件化开发背景组件化开发背景 划分组件划分组件 二二：组件开发框架组件开发框架 组件分类组件分类 11. JJavascriiptt 组件组件 – 由javascript ，html和css组成。 – Ajax获取数据 – 适合于：动态数据组件。 2. Velocity静态组件 – 由由velocityvelocity模板在后台生成静态模板在后台生成静态htmlhtml – 适用于：数据不经常变化的组件 3. JSTL 组件 –– 由由jstljstl标签组成的组件标签组成的组件。 – 适用于：在目前开发阶段，以上两个不适合情况下的补充。 后面讲的组件默认是指javascript组件。 另外两个组件这次暂不作介绍。 组件框架解决的问题组件框架解决的问题 1. 组件的加载组件的加载 22. 组件继承组件继承 3. 组件组合 4. 组件主题 组件加载组件加载 1. 按需加载按需加载 组件C 2.2. 依赖管理依赖管理 组件B 组件D 组件组件AA 组件组件EE 模块加 载器载器 传统开发的问题传统开发的问题 a.jsa.js a1.js a2a2.jsjs a1.js a2.js a7.js a5.jsa5.js a3.jsa3.js a4.js a6.js a3.js an.js • Script列表越来越长，难以维护。 • 依赖关系非常复杂依赖关系非常复杂。 V61V61 电子销售电子销售scriptscript列表列表 如何解决如何解决？？ • 1：很长的很长的script列表列表 • 22：：复杂的依赖关系复杂的依赖关系 • 为什么有这两个问题？ • JavaJava和和csscss为什么没有为什么没有？？ JavaJava 如何处理依赖如何处理依赖 • Import – 类加载器会处理依赖类加载器会处理依赖