requirejs的作用:
1.实现js文件的异步加载,防止页面失去响应;
2.管理模块与模块之间的依赖性,以便于开发人员的编写与维护
如何引用
方式一,放在网页底部进行加载
方式二,
<script src="js/require.js" defer async="true"></script>
如何加载自己的文件
如果我们的文件为main.js
<script src="js/require.js" data-main="js/main"></script>
如何编写主模块
1.不依赖其他模块 直接写js代码 2.依赖其他模块 require(['A','B', 'C'], function(A, B, C)){ //类似于angularjs中的DI依赖注入 // });
require()函数有两个参数,第一个参数是数组,为所依赖的模块;第二个参数为回调函数,当前面指定的模块都加载成功后,它将会被调用,加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
加载模块
require.config({ paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } }); 路径可以直接改变基目录baseUrl,也可直接指定网址。
这个配置写在main.js头部
如何编写AMD模块
1.如果不依赖其他模块,那么可直接定义在define()函数中 // math.js define(function (){ var add = function (x,y){ return x+y; }; return { add: add }; }); 加载方式 // main.js require(['math'], function (math){ alert(math.add(1,1)); }); 2.如果这个模块还依赖其他模块,那么define()函数的第一个参数须是一个数组,致命该模块的依赖性 define(['myLib'], function(myLib){ function foo(){ myLib.doSomething(); } return { foo : foo }; });
加载非规范的模块
require.config({ shim: { 'underscore':{ exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } });
require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块,具体来说,每个模块要定义,exports值输出的变量名,表明这个模块外部调用时的名称,deps数组,表明该模块的依赖性。