首页 > 代码库 > requirejs 模块化编程

requirejs 模块化编程

2024-07-09 09:50:18   220人阅读

       在介绍 require.js 之前，先介绍下 AMD ( Asynchronous Module Definition ), 意思是“异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。实现 AMD 规范的加载器其实很多，不过多数人还是使用 require.js 。

       所以，为避免以下问题而使用 require.js：

       1）实现js文件的异步加载，避免网页失去响应；

       2）管理模块之间的依赖性，便于代码的编写和维护。

 

使用说明：

1. require.js 加载

<script src="http://www.mamicode.com/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;
});

 


联系
我们