AMD模块化JS

参考http://ourjs.com/detail/52ad26ff127c76320300001f

Offcial Site http://requirejs.org/

下载http://requirejs.org/docs/download.html  需要require.js才能正确执行require 和 define

 

为什么需要模块化JS  下面是ourJS的说法

这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

 

有了<script src="js/require.js"></script>这个  接下来JS就能使用 defined 和 require了

不过我们一般这么用

<script src="js/require.js" data-main="js/main"></script>

 

main理解为主函数  表示的是在加载了require.js之后就去加载的函数(这里main.js的后缀js是可以省去的  因为使用require的话 默认加载的是js)

既然我希望main作为主函数 那么它一定要调用很多其他的函数(模块)  也就是说它依赖于很多模块  所以一般来说 main.js 是这样的形式

　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　　　// some code here

　　});

如果main.js依赖jquery underscore backbone这三个模块  main.js 可以这样写

　　require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　　　// some code here
　　});

这里默认jquery underscore backbone 这三个模块的文件名字就是 jquery.js  underscore.js  backbone.js 且和main.js在同一目录下  

（[]中就是路径  不过可以省去js扩展后缀）

同时这三个库都有返回值  在require的回调函数中可以调用这个返回的对象  

回调函数中参数的顺序和require的顺序一样  所以这里写为$ _ Backbone 

 

 

 

 

 

 

=================================================

//require([moduleID,...],function(...){});
//指定模块的时候 无需指定.js后缀 因为默认是加载js文件
//这里在寻找文件的时候 默认根据baseUrl + paths的方式
//baseUrl已经在index.html中指定
//如果是以 .js结尾 / "http"开头 将会以index.html文件为baseUrl

//依赖一个原始的库 //比如jQuery
//这里会根据moduleID去加载文件 也根据这个名字去寻找模块
//所以文件中应当将模块命名和这里一致
//比如当前目录下有个jQuery库 文件名为jQuery2.1.1
//你可能想要这么做
// require(["jQuery2.1.1"],function($){
// console.log('jQuery2.1.1=============');
// console.log($);//undefined
// });
//这样错误 因为jQuery库自己定义自己的模块名为jquery(全部是小写)

//所以很容易想到把文件名改为jquery.js
require(["jquery"],function($){
console.log('jquery=============');
console.log($);
});

//但是这样的规定太限制不是嘛 如果jQuery不在同级目录下 而是在别的地方怎么办？
//可以使用path来指定路径 其中的key就是模块名
//我还是想引用jquery这个模块 但是我甚至连模块名都想换！ 使用shim
//参考http://www.zfanw.com/blog/require-js.html && http://requirejs.org/docs/jquery.html
//所以我们需要一个配置 这样jQuery的库的文件名就比较随意了

require.config({
paths: {
'jquery2': 'lib/jQuery2.1.1',
'jquery':'lib/jQuery'
},
shim: {
'jquery2': {
exports: 'jQuery' //设置可以选择全局变量名 $或者 jQuery
}
}
});

require(['jquery'],function($){
console.log('path jquery=================================');
console.log($);
});
//在config中为jQuery库设置了模块名
require(["jquery2"],function(jQuery){
console.log('shim jQuery2.1.1=============');
console.log(jQuery);//undefined//这里jQ文件就是原始的jquery库 名字必须是jquery//即使是jQuery也不行
});

 

//依赖一个define的模块
//[]中是模块的文件路径 写了.js后缀的话 表示baseDir是index.html文件所在路径
//PS ./表示当前目录 可以省去 所以没必要写为./lib/zepto
//这里路径为lib/zepto 也就是加载lib/zepto.js
//且zepto.js中定义的模块名也是lib/zepto

//PS Require JS 会自动根据文件名（不含后缀名，即不含 ".js"）来给定义的模块命名
//如果zepto.js没有写模块名的话 默认模块名就是lib/zepto
//如果zepto.js中定义的模块名不是lib/zepto 虽然zepto.js文件被加载
//但是回调函数参数得不到值 因为require是在lib/zepto.js 中加载lib/zepto模块

//PS 这个函数在所依赖的模块加载完成之前不会执行
require(['lib/zepto'], function ($) {
console.log('zepto=============================');
console.log($);
});

//PS define会在require之前执行
//PS 一个JS中只能有一个define
//如果当前目录下存在jQuery2.1.1文件
// define(["jQuery2.1.1"],function($){
// console.log('jQuery2.1.1==def===========');
// console.log($);//undefined//原因和上面一样 模块名字不对
// });

//如果当前目录下存在jquery
// define(["jquery"],function($){
// console.log('jquery==def===========');
// console.log($);//ok
// });

// define(["lib/zepto"],function($){
// console.log('zepto===def==========');
// console.log($);
// });

 

//带有模块名字的define
//如果该文件是index中data-main中引用的文件 而且还想使用define来定义一个非匿名模块的话
//模块的名字要和文件名相同
//否则不执行模块
// define('main2',["jquery"],function($){
// console.log('my jquery===========');
// console.log($);
// });

//你肯定会想 这样的话 define 和 require有什么区别
//define总共有三步 参考http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html
// Loads the specified dependencies
// Calls the callback function
// Registers the return value from the callback function as the module
//require就是前2个