首页 > 代码库 > 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