首页 > 代码库 > AMD模块化JS

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="http://www.mamicode.com/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