Upgrade to Pro — share decks privately, control downloads, hide ads and more …

模块化HTML5移动应用开发:jQuery Mobile + BackboneJS+Requi...

Avatar for dong dong
June 15, 2012

模块化HTML5移动应用开发:jQuery Mobile + BackboneJS+RequireJS

2012年W3CTech开发者活动上的一次讲座。

Avatar for dong

dong

June 15, 2012
Tweet

More Decks by dong

Other Decks in Programming

Transcript

  1. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    1 ଆॶ߄၍׮ႋႨषؿBackboneJS + jQuery Mobile + RequireJS ׬੃٦]"EPCF࠯ඌࣜ৘]@javascriptdev | [email protected] 1 12年6月16日星期六
  2. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    主题 § ۀေࢺക § jQuery Mobile၍׮षؿॿࡏ § JavaScript MVCॿࡏ § ".%ބSFRVJSF+4 § DEMOဆൕ:jQuery Mobile + BackboneJS + RequireJS § ଆॶ߄၍׮ႋႨषؿBackboneJS + jQuery Mobile + RequireJS 2 2 12年6月16日星期六
  3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    JavaScript MVC框架 3 http://codebrief.com/2012/01/the- top-10-javascript-mvc-frameworks- reviewed/ The Top 10 Javascript MVC Frameworks Reviewed 3 12年6月16日星期六
  4. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Backbone.js § Model and Collection § Router and History § View § Events 4 4 12年6月16日星期六
  5. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    模块化开发:IIFE ( Immediately Invoke Function Express ) § 自执行的匿名函数 5 (function() { // code to be immediately invoked }()); (function() { // code to be immediately invoked })(); (function( window, document, undefined ){ //code to be immediately invoked })( this, this.document); (function( global, undefined ){ //code to be immediately invoked })( this ); 5 12年6月16日星期六
  6. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    模块化开发:Module Pattern 6 var booksModule = (function() { var books = []; //private return { //exposed to public addBook: function(values) { // codes ; }, getCount: function() { //codes }, getTotal: function(){ //codes } } }()); § ൐Ⴈ**'&Էࡹ඲ႵэਈđᆺᄝNPEVMFᇏॖၛ ٠໙ § ْ߭0CKFDUğQVCMJD 6 12年6月16日星期六
  7. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    模块化开发:AMD(Asynchronous Module Definition) 7 /* wrapper */ define( /*module id*/ 'myModule', /*dependencies*/ ['foo','bar','foobar'], /*definition for the module export*/ function (foo, bar, foobar) { /*module object*/ var module = {}; /*module methods go here*/ module.hello = foo.getSomething(); module.world = bar.doSomething(); /*return the defined module object*/ return module; } ); /* top-level: the module exports (one, two) are passed as function args to the callback.*/ require(['one', 'two'], function (one, two) { }); /* inside: complete example */ define('three', ['one', 'two'], function (one, two) { /*require('string') can be used inside the function to get the module export of a module that has already been fetched and evaluated.*/ var temp = require('one'); /*This next line would fail*/ var bad = require('four'); /* Return a value to define the module export */ return function () {}; }); 7 12年6月16日星期六
  8. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    模块化开发:Require.js 8 requirejs.config({ //By default load any module IDs from js/lib baseUrl: 'js/lib', //except, if the module ID starts with "app", //load it from the js/app directory. paths //config is relative to the baseUrl, and //never includes a ".js" extension since //the paths config could be for a directory. paths: { app: '../app' } }); 8 12年6月16日星期六
  9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    模块化开发:Require.js 9 //my/shirt.js now has some dependencies, a cart and inventory //module in the same directory as shirt.js define(["./cart", "./inventory"], function(cart, inventory) { //return an object to define the "my/shirt" module. return { color: "blue", size: "large", addToCart: function() { inventory.decrement(this); cart.add(this); } } } ); 9 12年6月16日星期六
  10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    移动开发框架:jQuery Mobile 10 jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets 10 12年6月16日星期六
  11. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    View 和 Page 11 http://jquerymobile.com/demos/ 1.1.0/docs/pages/multipage- template.html 11 12年6月16日星期六
  12. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step1: Index.html 14 当require.js加载执行后,将自动加载data-main设定的属性值 JS文件,并执行。js/main成为应用的入口。 14 12年6月16日星期六
  13. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step2: js/main.js 15 配置require加载AMD适配的JS库的 Path,映射为module id。 requireJS默认加载的是.js,因此无需 指明.js文件后缀。 15 12年6月16日星期六
  14. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step2: js/main.js 15 加载并执行app.js 加载并执行jqm-config.js来配置jQuery Mobile 初始化应用 15 12年6月16日星期六
  15. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Backbone Router 和 jQuery Mobile Ajax navigator 16 Single Page Application ( SPA ) : AJAX + # 16 12年6月16日星期六
  16. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Backbone Router 和 jQuery Mobile Ajax navigator 16 Single Page Application ( SPA ) : AJAX + # Backbone routers are used for routing your applications URL's when using hash tags(#). Backbone.Router provides methods for routing client- side pages, and connecting them to actions and events. 16 12年6月16日星期六
  17. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Backbone Router 和 jQuery Mobile Ajax navigator 16 Single Page Application ( SPA ) : AJAX + # Backbone routers are used for routing your applications URL's when using hash tags(#). Backbone.Router provides methods for routing client- side pages, and connecting them to actions and events. jQuery Mobile: “All navigation within jQuery Mobile is based on changes and updates to location.hash. Whenever possible, page changes will use a smooth transition between the current "page" and the next, whether it is either already present in the DOM, or is automatically loaded via Ajax.” 16 12年6月16日星期六
  18. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step3:配置jQuery Mobile 与 Backbone.js兼容 - jqm-config.js 17 17 12年6月16日星期六
  19. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step3:配置jQuery Mobile 与 Backbone.js兼容 - jqm-config.js 17 1. 监听document上的jqm mobileinit事件,覆盖jqm的默认设 置。 2. 禁用jqm的AJAX Navigation系统,使用BackboneJS的 Router系统 3. 移除不用的视图(jqm page) 17 12年6月16日星期六
  20. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step4:app.js : 初始化应用 19 19 12年6月16日星期六
  21. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step4:app.js : 初始化应用 19 创建BackboneJS Router对象; 启动应用; 19 12年6月16日星期六
  22. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step4:app.js : 初始化应用 19 创建BackboneJS Router对象; 启动应用; Backbone Router: router.js 19 12年6月16日星期六
  23. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    router.js 20 ൐Ⴈ#BDLCPOF֥3PVUFS༢๤টഡᇂႋႨਫ਼Ⴎ SPVUFSKT 20 12年6月16日星期六
  24. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step5:设置Router - router.js 21 21 12年6月16日星期六
  25. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step5:设置Router - router.js 21 קၬBackbone Router 21 12年6月16日星期六
  26. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step5:设置Router - router.js 21 21 12年6月16日星期六
  27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step5:设置Router - router.js 21 קၬBackbone Router:hash和action的 映射: #home 对应 showHome方法 21 12年6月16日星期六
  28. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    22 ֻ၂۱7JFXčKRN1BHFĎ IPNFKT 22 12年6月16日星期六
  29. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    22 ֻ၂۱7JFXčKRN1BHFĎ IPNFKT 22 12年6月16日星期六
  30. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step6:编写HomeView - home.js 23 23 12年6月16日星期六
  31. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step6:编写HomeView - home.js 23 使用Underscore template引擎。 23 12年6月16日星期六
  32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step6:编写HomeView - home.js 23 定义Backbone View:指定tagName, 声明 View内的事件侦听器,覆盖render方法 23 12年6月16日星期六
  33. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step6:编写HomeView - home.js 23 每个view就是⼀一个DOM元素,基于tagName 等属性创建, 缺省是Div。 view.el代表了该元素。 尚未被插入到DOM中。 在Render方法中使用模板来更新el(通常使 用model/collection数据来编译模板)。 23 12年6月16日星期六
  34. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step6:编写HomeView - home.js 23 23 12年6月16日星期六
  35. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    24 )PNF7JFX֥ଆϰ IPNF7JFX5FNQMBUFIUNM 24 12年6月16日星期六
  36. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step7: HomeView的模板 - homeViewTemplate.js 25 25 12年6月16日星期六
  37. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step7: HomeView的模板 - homeViewTemplate.js 25 本例中为静态模板 25 12年6月16日星期六
  38. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step7: HomeView的模板 - homeViewTemplate.js 25 本例中为静态模板 jqm的data-attribute 25 12年6月16日星期六
  39. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    26 ߭֞SPVUFSđཁൕ)PNF7JFX SPVUFSKT 26 12年6月16日星期六
  40. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step8: router.js 显示HomeView 27 27 12年6月16日星期六
  41. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step8: router.js 显示HomeView 27 创建HomeView对象,并渲染。此时尚 未插入到DOM中。View的DOM元素已 经准备好。 27 12年6月16日星期六
  42. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step8: router.js 显示HomeView 27 为View添加jqm的data-attribute,声明其为 ⼀一个jqm Page。jqm会自动显示并enhance该 页面。 添加其到DOM中显示。 27 12年6月16日星期六
  43. 小结 29 © 2012 Adobe Systems Incorporated. All Rights Reserved.

    Adobe Confidential. 小结 29 12年6月16日星期六
  44. JOEFYIUNM 小结 29 © 2012 Adobe Systems Incorporated. All Rights

    Reserved. Adobe Confidential. 小结 29 12年6月16日星期六
  45. 小结 29 NBJOKT © 2012 Adobe Systems Incorporated. All Rights

    Reserved. Adobe Confidential. 小结 29 12年6月16日星期六
  46. 小结 29 KRNDPOGJHKT © 2012 Adobe Systems Incorporated. All Rights

    Reserved. Adobe Confidential. 小结 29 12年6月16日星期六
  47. 小结 29 BQQKT © 2012 Adobe Systems Incorporated. All Rights

    Reserved. Adobe Confidential. 小结 29 12年6月16日星期六
  48. 小结 29 SPVUFSKT © 2012 Adobe Systems Incorporated. All Rights

    Reserved. Adobe Confidential. 小结 29 12年6月16日星期六
  49. 小结 29 IPNFKT © 2012 Adobe Systems Incorporated. All Rights

    Reserved. Adobe Confidential. 小结 29 12年6月16日星期六
  50. 小结 29 SPVUFSKT © 2012 Adobe Systems Incorporated. All Rights

    Reserved. Adobe Confidential. 小结 29 12年6月16日星期六
  51. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    30 .PEFM $PMMFDUJPO ׮෿ଆϰđ&WFOUT 30 12年6月16日星期六
  52. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    30 .PEFM $PMMFDUJPO ׮෿ଆϰđ&WFOUT 30 12年6月16日星期六
  53. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step9: 为List准备数据 31 31 12年6月16日星期六
  54. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    32 .PEFMބ$PMMFDUJPO 32 12年6月16日星期六
  55. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step10: Model - Book.js 33 33 12年6月16日星期六
  56. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step11: Collection- BookCollection.js 34 34 12年6月16日星期六
  57. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step11: Collection- BookCollection.js 34 Book是Collection的item类型。 34 12年6月16日星期六
  58. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step11: Collection- BookCollection.js 34 34 12年6月16日星期六
  59. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step11: Collection- BookCollection.js 34 34 12年6月16日星期六
  60. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step11: Collection- BookCollection.js 34 AJAX获取数据,填充Collection。 34 12年6月16日星期六
  61. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step11: Collection- BookCollection.js 34 AJAX获取数据,填充Collection。 为每⼀一个json节点创建Book对象,并 插入到collection。 34 12年6月16日星期六
  62. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step11: Collection- BookCollection.js 34 AJAX获取数据,填充Collection。 为每⼀一个json节点创建Book对象,并 插入到collection。 Dispatch事件,通知数据已经准备完毕。 34 12年6月16日星期六
  63. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    35 ູ#PPL-JTU7JFXሙС)5.-ଆϰ 35 12年6月16日星期六
  64. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step12: 动态模板 - BookViewTemplate.js 36 36 12年6月16日星期六
  65. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step12: 动态模板 - BookViewTemplate.js 36 36 12年6月16日星期六
  66. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step12: 动态模板 - BookViewTemplate.js 36 变量data代表传入的数据 36 12年6月16日星期六
  67. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step12: 动态模板 - BookViewTemplate.js 36 变量data代表传入的数据 Underscore.js的模板引擎将会执行<% %> 中嵌入的所有JavaScript脚本。 36 12年6月16日星期六
  68. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    37 קၬ#PPL-JTU֥൪๭ 37 12年6月16日星期六
  69. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: BookList的View - Books.js 38 38 12年6月16日星期六
  70. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: BookList的View - Books.js 38 38 12年6月16日星期六
  71. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: BookList的View - Books.js 38 BookCollection在获取数据成功后会派发事件 fetchCompleted:Books,绑定render方法在该事件 上,⼀一旦获取数据,即生成View。 38 12年6月16日星期六
  72. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: BookList的View - Books.js 38 38 12年6月16日星期六
  73. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: BookList的View - Books.js 38 使用获取的数据编译模板。 38 12年6月16日星期六
  74. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: BookList的View - Books.js 38 派发事件,通知View已经准备完成。 38 12年6月16日星期六
  75. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    39 ཙႋႨ޼Ҡቔđཁൕ#PPL-JTU 39 12年6月16日星期六
  76. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: 更新router.js 40 40 12年6月16日星期六
  77. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: 更新router.js 40 #list/categoryId 映射到action:showBooks( categoryId) 40 12年6月16日星期六
  78. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: 更新router.js 41 41 12年6月16日星期六
  79. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: 更新router.js 41 使用BookCollection对象初始化BookListView。 41 12年6月16日星期六
  80. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: 更新router.js 41 ⼀一旦BookListVIew准备完毕,即插入到DOM中,并手动执行jqm页面切换。 41 12年6月16日星期六
  81. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: 更新router.js 41 update成功则会派发renderCompleted:Books事件,继而执行changePage方法。 41 12年6月16日星期六
  82. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Step13: 更新router.js 41 调用jqm的changePage方法执行手动换页。 41 12年6月16日星期六
  83. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    More 43 ▪ Marionette ▪ Geppetto (based on Marionette) ▪ Chaplin ▪ Vertebrae ▪ LayoutManager ▪ Thorax 43 12年6月16日星期六
  84. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

    Backbone.Marrionett 44 https://github.com/derickbailey/backbone.marionette 44 12年6月16日星期六