正文

【require.js】模块化开发

IP云
IP云V管理员/0 阅读
11/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、Require.js及AMD

Require.js ：是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。

AMD（ Asynchronous Module Definition）：异步模块定义规范（AMD）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。 

// AMD规范

// 第一个参数，id，是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。

// 第二个参数，dependencies，是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。

// 第三个参数，factory，为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

define(id?, dependencies?, factory);

二、 Require.js使用

1、目录结构

举例中用到了个中文转换拼音的插件（GitHub地址：https://github.com/sxei/pinyinjs/），这个插件挺好用的，但由于中文中存在多音字，经常会出现不符合常规的拼音，比如（贾宝玉 => "gu bao yu"） 

  ├─scripts

     │─plus

        ├─pinyin

        │ ├─dist

        │ │  ├─pinyin_dict_firstletter.js

        │ │  ├─pinyin_dict_notone.js

        │ │  ├─pinyin_dict_polyphone.js

        │ │  └─pinyin_dict_withtone.js

        │ └─pinyinUtil.js

        ├─jquery.js

        ├─plusMain.js

        ├─require.js

        └─test.js

2、引入r equire. js 

<script src="/scripts/plus/require.js"></script>

3、挂载模块

[1] 局部加载 

//test.js

define(function () {

    return {

        add: function (a, b) {

            alert("传参没用上，哈哈");

        }

    }

});

//页面代码

$(function () {

    require(["/scripts/plus/test.js"], function (h) {

        h.add(1, 2);

    );

})

[2] 全局加载 

//plusMain.js

require.config({

    paths: {

        jquery: "jquery",

    }

});

//页面引用

<script src="/scripts/plus/require.js" data-main="/scripts/plus/plusMain" defer async="true></script>

以这种方法加载时，会默认以“ /scripts/plus ”为根目录，参数 baseUrl 可以重置根目录。 

//效果相同

require.config({

    baseUrl: "/scripts/plus",

    paths: {

        jquery: "jquery"

    }

});

还可引用远端文件，也可以同时引用本地文件，当远端文件加载失败时就会加载本地文件了。 

require.config({

    paths: {

        jquery: ["http://libs.baidu.com/jquery/2.0.3/jquery", "jquery"],

    }

});

通过 require 加载的模块一般都需要符合AMD规范即使用 define 来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能： shim。

shim 解释起来也比较难理解，shim直接翻译为"垫"，其实也是有这层意思的，目前我主要用在两个地方：

一个是，配置模块的依赖关系：例如，拼音插件pinyinUtil.js需要依赖字典才可以正常转换。 

 require.config({

     paths: {

         jquery: "jquery",

         pinyin_dict_firstletter: "pinyin/dict/pinyin_dict_firstletter",

         pinyin_dict_withtone: "pinyin/dict/pinyin_dict_withtone",

         pinyin: "pinyin/pinyinUtil"

     },

     shim: {

         pinyin: {

             deps: ["pinyin_dict_firstletter", "pinyin_dict_withtone"],// 依赖模块集合

         }

     }

 });

 //可以简写成

 shim: {

     pinyin: ["pinyin_dict_firstletter", "pinyin_dict_withtone"]

 }

也可以依赖css文件 

require.config({

    paths: {

        select2: "select2/select2.min"

    },

    shim: {

        select2: ["/scripts/plus/select2/select2.min.css"]

    },

});

另一个是，加载非AMD模块输出，将非标准的AMD模块"垫"成可用的模块。 

// test.js

(function () {

    var NGY = {

        Hi: function() {

            alert("跨越过去之后");

        }

    }

    window.NGY = NGY;

})();

//配置

require.config({

    paths: {

        ngy: "test"

    },

    shim: {

        ngy: { exports: "NGY" }

    },

});

//使用，不需要声明变量就可以直接使用

require(["ngy"], function () {

    NGY.Hi();

});

4、使用require 

require(["jquery", "pinyin"], function ($, pinyin) {

    $("span").html("谁最可爱?");

    var dl = pinyin.getPinyin('当然是我');

});

三、总结

1、更好的分离；

2、更好的代码组织方式；

3、按需加载；

4、避免命名冲突；

5、更好的依赖处理；

相关阅读

目录[+]