RequireJS 2.0 学习笔记一
以下加载代码都是基于RequireJS 2.0写的。
最近在学习AMD模块开发，RequireJS确实很不错，功能比那啥的“全”。由于是初级阶段，先介绍一下模块加载。
目录结构：
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Beginning Require.JS</title> 6 <script data-main="js/main" src="lib/requirejs/require.js"></script> 7 </head> 8 <body> 9 10 </body> 11 </html>
main.js
1 //路径别名 2 require({ 3 paths:{ 4 "lib":"../lib" 5 } 6 }); 7 //shim是原order插件的替代，shim是RequireJS 2.0的产物，而order只能在1.0中使用 8 //加载app.js之前必须先加载jquery.js、underscore.js、backbone.js 9 require.config({ 10 shim:{ 11 "app":['lib/jquery/jquery', 'lib/underscore/underscore', 'lib/backbone/backbone'] 12 } 13 }); 14 15 //下面是模块加载项，后面的function是callback的函数 16 //App参数是app.js内的，并且调用initialize()方法，必须牢记加载顺序 17 require([ 18 'app', 19 'lib/jquery/jquery', 20 'lib/underscore/underscore', 21 'lib/backbone/backbone' 22 ], function (App) { 23 App.initialize(); 24 console.log(App); 25 console.log($.fn.jquery); 26 console.log(_.VERSION); 27 console.log(Backbone.VERSION); 28 });
app.js
1 define(function () { 2 return { 3 initialize:function () { 4 console.log($); 5 var Model = Backbone.Model.extend({}); 6 var View = Backbone.View.extend({}); 7 var model = new Model(); 8 var view = new View({ 9 model:model 10 }); 11 } 12 } 13 });
加载顺序截图
未加载 shim 功能的加载顺序
加了 shim 功能的加载顺序
app.js明显就最后一个加载了
附上:RequireJS 2.0更新内容
http://www.cnblogs.com/snandy/archive/2012/06/04/2532997.html
