在介绍 require.js 之前,先介绍下 AMD ( Asynchronous Module Definition ), 意思是“异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。实现 AMD 规范的加载器其实很多,不过多数人还是使用 require.js 。
所以,为避免以下问题而使用 require.js:
1)实现js文件的异步加载,避免网页失去响应;
2)管理模块之间的依赖性,便于代码的编写和维护。
使用说明:
1. require.js 加载
<script src="js/require.js" defer async="true" ></script>
2. 模块调用
(1) 如果我们的代码不依赖任何其他模块,那么我们就没有必要使用 require.js .
(2) 如果我们的代码依赖其他的模块,那么就需要requrie.js , 例如:
require([‘jquery‘, ‘underscore‘, ‘backbone‘], function ($, _, Backbone){ // code here 主模块代码 });
require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。
3. 模块加载
require.js 在 js 目录下,其他标准库置于 js目录下 lib 文件夹中,自定义模块置于 app 文件夹中。
按微擎系统的js目录结构。使用 require.config() 方法,我们可以对模块的加载行为进行定义。可以将 require.config() 方法置于模块文件头部,或抽离单独的 js文件(config.js)。
require.config({ paths: { "jquery": "lib/jquery.min", "underscore": " lib/underscore.min" } });
或使用 baseUrl 来改变基路径
require.config({ baseUrl: "js/app", // 设置为自定义模块路径。 paths: { // require.js要求,每个模块是一个单独的js文件。 ‘jquery‘: ‘../lib/jquery-1.11.1.min‘, // ‘模块名称‘: ’相对 baseUrl 的路径 ‘ ‘underscore‘: ‘../lib/underscore-min‘, } });
4. 加载非规范模块
require.config({ shim: { ‘colorpicker‘: { // (输出的变量名),表明这个模块外部调用时的名称; exports: ‘$‘, // 依赖项, css! 依赖外部css deps: [‘css!../../components/colorpicker/spectrum.css‘] }, } });
5. 加载插件
require.js还提供一系列插件,实现一些特定的功能。
(1) domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
require([‘domready!‘], function (doc){ // called once the DOM is ready });
(2) text和image插件,则是允许require.js加载文本和图片文件。
define([‘text!review.txt‘, ‘image!cat.jpg‘], function(review,cat){ console.log(review); document.body.appendChild(cat); });
其他插件地址:https://github.com/jrburke/requirejs/wiki/Plugins
6. 定义模块
// [‘jquery’, ‘underscore’] 数组的元素是 require.config() 中声明的模块名,回调函数中会使用
// ‘$’ 为 ‘jquery‘ 模块的输出变量,’_’ 为 ’underscroe’模块的输出变量; // $, _ 可以在回调function 中直接使用。 define([‘jquery’, ‘underscore’], function($, _ ){
var mod = {};
// code-segment
return mod;
});