這次帶給大家require.js的模組化開發，require.js模組化開發的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、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.jsdefine(function () { return {
add: function (a, b) {
alert("传参没用上，哈哈");
}
}
});//页面代码$(function () {
require(["/scripts/plus/test.js"], function (h) {
h.add(1, 2);
);
})[2] 全域載入
//plusMain.jsrequire.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需要依賴字典才可以正常轉換。
1 require.config({ 2 paths: { 3 jquery: "jquery", 4 pinyin_dict_firstletter: "pinyin/dict/pinyin_dict_firstletter", 5 pinyin_dict_withtone: "pinyin/dict/pinyin_dict_withtone", 6 pinyin: "pinyin/pinyinUtil" 7 }, 8 shim: { 9 pinyin: {10 deps: ["pinyin_dict_firstletter", "pinyin_dict_withtone"],// 依赖模块集合11 }12 }13 });14 15 //可以简写成16 shim: {17 pinyin: ["pinyin_dict_firstletter", "pinyin_dict_withtone"]18 }也可以依賴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('当然是我');
});##我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 推薦閱讀：
#navigator.clipboard瀏覽器怎麼製作原生剪貼簿
#
以上是require.js的模組化開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
