一、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/
├─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、引入require.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"],// 依赖模块集合
}
}
});
可以简化成
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": ["pinyin_dict_firstletter", "pinyin_dict_withtone"]
}
});
另一个是，加载非AMD模块输出，将非标准的AMD模块"垫"成可用的模块。
4、调用require
require(["jquery", "pinyin"], function ($, pinyin) {
$("span").html("谁最可爱?");
var dl = pinyin.getPinyin('当然是我');
});
如对本文有疑问， 点击进行留言回复！！
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论