$30 off During Our Annual Pro Sale. View Details »

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

keelii
March 08, 2013

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

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

keelii

March 08, 2013
Tweet

More Decks by keelii

Other Decks in Programming

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⽇日星期五