以前页面js文件很多,所以很多js依次写在页面中加载
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护
require.js的加载:所有的js都放在js子目录下面
<script src="js/require.js" data-main="js/main"></script>
data-main属性的作用是指定网页程序的主模块,require一个js文件的时候,默认加载路径就是data-main指定的目录,即js/main.js文件所在的目录,也可以通过配置文件修改
主模块的写法:
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone){ //some code here });
require()函数接受两个参数,第一个是数组表示所依赖的模块,第二个参数是一个回调函数
模块的加载:
require.config({ baseUrl: "js/lib", //直接改变及目录,如果在js/lib目录下面 paths: { "jquery": "jquery.min",//如果某个模块在另一台主机上也可以直接指定网址 "underscore": "underscore.min", "backbone": "backbone.min" } });
AMD模块的写法:
require.js加载的模块采用AMD规范,就是模块必须采用define()函数来定义依赖myLib模块
define(['myLib'], function(myLib){ function foo(){ myLib.doSomething(); } return { foo : foo }; });
加载非规范的模块:
再用require()加载之前,要先用require.config()方法定义它们的一些特征
exports值表明这个模块外部调用时的名称,deps数组表明该模块的依赖性
require.config({ shim: { 'underscore':{exports:'_'}, 'backbone':{deps: ['underscore', 'jquery']} 'exports': 'Backbone' } });