前端组件模块化思考与实践

前端组件模块化思考与实践

Transcript

1. 前端组件模块化思考与实践 ——requirejs VS seajs 13年2月22⽇日星期五
2. 思考 ✦为什么需要模块化 ✦模块化的优缺点 实践 ✦模块定义规范 ✦AMD VS CMD ✦requirejs VS seajs 13年2月22⽇日星期五
3. 思考 ✦为什么需要模块化 ✦模块化的优缺点 实践 ✦模块定义规范 ✦AMD VS CMD ✦requirejs VS seajs 13年2月22⽇日星期五
4. 13年2月22⽇日星期五
5. 原因 ⽷为什么需要模块化⽺ 13年2月22⽇日星期五
6. 原因 ⽷为什么需要模块化⽺ ✦前端开发流程规范化 13年2月22⽇日星期五
7. 原因 ⽷为什么需要模块化⽺ ✦前端开发流程规范化 ✦业务与需求更复杂 13年2月22⽇日星期五
8. 原因 ⽷为什么需要模块化⽺ ✦前端开发流程规范化 ✦业务与需求更复杂 ✦代码复⽤用、架构升级 13年2月22⽇日星期五
9. 思考 ✦为什么需要模块化 ✦模块化的优缺点 实践 ✦模块定义规范 ✦AMD VS CMD ✦requirejs VS seajs 13年2月22⽇日星期五
10. 优缺点 ⽷模块化的优缺点⽺ 13年2月22⽇日星期五
11. 优缺点 ⽷模块化的优缺点⽺ ✓代码复⽤用强、提⾼高开发效率 ✓有利于开发规范与⽂文档系统 ✓模块依赖关系系统解决使开发更专注 13年2月22⽇日星期五
12. 优缺点 ⽷模块化的优缺点⽺ ✓代码复⽤用强、提⾼高开发效率 ✓有利于开发规范与⽂文档系统 ✓模块依赖关系系统解决使开发更专注 ✦模块粒度过⾼高不利于管理 ✦额外的学习成本 13年2月22⽇日星期五
13. 13年2月22⽇日星期五
14. 思考 ✦为什么需要模块化 ✦模块化的优缺点 实践 ✦模块定义规范 ✦AMD VS CMD ✦requirejs VS seajs 13年2月22⽇日星期五
15. CommonJS模块规范 13年2月22⽇日星期五
16. CommonJS模块规范 CommonJS 是⼀一个有志于构建 JavaScript ⽣生态圈的组 织。它有⼀一个 邮件列表，很多开发者参与其中。 整个社 区致⼒力于提⾼高 JavaScript 程序的可移植性和可交换性， ⽆无论是在服务端还是浏览器端。——lifesinger 13年2月22⽇日星期五
17. CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition CommonJS 13年2月22⽇日星期五
18. CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition CommonJS 13年2月22⽇日星期五
19. CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition CommonJS 13年2月22⽇日星期五
20. CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition CommonJS 13年2月22⽇日星期五
21. CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition requirejs CommonJS 13年2月22⽇日星期五
22. CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition requirejs CommonJS 13年2月22⽇日星期五
23. CommonJS的两个字规范 Module/AMD Asynchronous Module Definition Module/Wrappings Common Module Definition requirejs seajs CommonJS 13年2月22⽇日星期五
24. AMD模块规范 define require 13年2月22⽇日星期五
25. 定义⼀一个模块 define(id?, deps?, factory) 13年2月22⽇日星期五
26. 定义⼀一个模块 define(id?, deps?, factory) string 模块标识 13年2月22⽇日星期五
27. 定义⼀一个模块 define(id?, deps?, factory) string 模块标识 string/array 依赖数组 13年2月22⽇日星期五
28. 定义⼀一个模块 define(id?, deps?, factory) string 模块标识 string/array 依赖数组 function ⼯工⼚厂函数 13年2月22⽇日星期五
29. 加载⼀一个模块 require([‘modules’], callback) 13年2月22⽇日星期五
30. 加载⼀一个模块 require([‘modules’], callback) string/array 加载数组 13年2月22⽇日星期五
31. 加载⼀一个模块 require([‘modules’], callback) string/array 加载数组 function 加载成功回调函数 13年2月22⽇日星期五
32. define⽤用例 define(‘fp’, [‘jquery’, ‘trimpath’], function() { var footPrint = function() { // code here } // 模块对外开放的变量、⽅方法、对象 return footPrint; }); 13年2月22⽇日星期五
33. require⽤用例 require([‘jquery’, ‘fp’], function(jquery, footprint) { // dom加载完成后初始化脚印模块 $(function() { var fp = new footPrint(); }); }); 13年2月22⽇日星期五
34. SeaJS ? 13年2月22⽇日星期五
35. SeaJS ? coming soon... 13年2月22⽇日星期五
36. RequireJS 对⽐比 SeaJS requirejs(15kb) seajs (7kb) AMD应⽤用⼲⼴广泛，对AMD⽀支持 良好 另辟蹊径选择 Wrappings⾃自⽴立 ⻔门户，语法优雅、更适合浏览 器端 脚本加载器+模块加载器 纯粹的模块加载器 AMD天然⽀支持JSONP模块 模块内部按需异步加载 13年2月22⽇日星期五
37. 引⽤用： https://github.com/amdjs/amdjs-api/wiki/AMD https://github.com/seajs/seajs https://github.com/jrburke/requirejs 13年2月22⽇日星期五
38. END 13年2月22⽇日星期五