RequireJS使用注意细节
RequireJS介绍
RequireJS由James Burke创建，他也是AMD规范的创始人。
RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件，以及不用通过script标签顺序去管理依赖关系。
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。
使用RequireJS做异步模块加载，有几点值得注意的地方：
1.模块定义两种写法
1. 存在依赖的函数式定义
如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块，因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表一一对应。
define(['a'], function(aJ) {
var hello = function(){
aJ.hello('i am c.js');
}
return {
hello : hello
}
});
PS: 对模块的返回值类型并没有强制为一定是个object，任何函数的返回值都是允许的。
2. CommonJS模块格式定义
require ： 用来引入依赖其他模块方法。
exports ： 导出模块变量或方法的对象。
module ：包含该模块的信息。
require.config({
baseUrl: "",
config: {
'b': {
size: 'large'
}
},
paths: {
a : 'base/a',
b : 'base/b',
c : 'base/c'
}
});
define(function(require, exports, module) {
var aJ = require("a");
var hello = function(){
aJ.hello('i am b.js');
}
var hello2 = function(){
aJ.hello('i am b.js22');
}
exports.hello = hello;
console.log("b.js : exports", exports);
console.log("b.js : module", module);
console.log("b.js : config", module.config());
//不能一起用，return会覆盖调前面的exports
/*return {
hello : hello2
}*/
});
PS：return 对象和exports不能一起用，return会覆盖调前面的exports。
下面是调用后打印的信息：
exports：可以看出exports是module的一个属性。
module ：里面包括了该模块的别名、uri、导出对象、config信息方法。
config ：我们常常需要将配置信息传给一个模块。这些配置往往是application级别的信息，需要一个手段将它们向下传递给模块。
在RequireJS中，基于requirejs.config()的config配置项来实现。
2. 警惕单例变量
警惕单例里变量，因为RequireJS在require一次后，之后的require都是使用之前的缓存。所以当模块里面定义了一个变量后，只要在此require改变后，其他require也是保持一致的。
define(function() {
var index = 0;
var hello = function(msg){
console.log(msg);
}
var addIndex = function(){
index++;
}
var getIndex = function(){
return index;
}
return {
hello : hello,
addIndex : addIndex,
getIndex : getIndex
}
});
调用：
require(['a',], function (A) {
require(['a'], function (A) {
console.log(A.getIndex());
A.addIndex();
A.addIndex();
});
require(['a'], function (A) {
console.log(A.getIndex());
});
});
上面分别打印的是：
0
2
3. 清除缓存
因为RequireJS有缓存的功能，但是在开发的时候我们不希望它缓存，就可以在require.config设置urlArgs。
urlArgs：RequireJS获取资源时附加在URL后面的额外的query参数。
示例：
urlArgs: "bust=" + (new Date()).getTime()
在开发中这很有用，但记得在部署到生成环境之前移除它。
4. 从其他包中加载模块
RequireJS支持从CommonJS包结构中加载模块，但需要一些额外的配置。
package config可为特定的包指定下述属性：
1. name : 包名（用于模块名/前缀映射）。
2. location : 磁盘上的位置。位置是相对于配置中的baseUrl值，除非它们包含协议或以“/”开头。
3. main : 当以“包名”发起require调用后，所应用的一个包内的模块。
默认为“main”，除非在此处做了另外设定。
该值是相对于包目录的。
例子：
main.js
require.config({
baseUrl: "",
packages: [{
name: "student",
location: "package-stu"
},{
name: "teacher",
location: "package-tea"
}],
urlArgs: "bust=" + (new Date()).getTime()
});
require(["student/store", "teacher/tea"], function (Sto, Tea) {
Sto.hello();
Tea.hello();
});
tea.js：
define(function(require, exports, module) {
exports.hello = function(){
console.log('i am a teacher.');
}
});
stu.js:
define(function(require, exports, module) {
exports.name = '海角';
});
store.js:
define(function(require, exports, module) {
var stu = require("student/stu");
exports.hello = function(){
console.log('i am ' + stu.name);
}
});
这种从其他包加载模块的方式，我感觉有两个怪异地方（我不是很明白）：
1. 其他包里面的模块引用其他模块的写法，使用者反而影响模块的写法？
2. 其他包里面的main.js好像没有用了，没内容都没问题。
以上内容是小编给大家介绍的RequireJS使用注意细节，希望对大家有所帮助！
相关文章
这篇文章主要介绍了微信小程序引入Vant组件库过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
数组是几乎所有编程语言的基础语法，本文将不会介绍数组的基础语法和用法，而是从JavaScript中数组的一些特殊之处入手，通过这些少有特性的详细介绍，加深我们对数组的理解2023-02-02
这篇文章主要为大家详细介绍了js实现select选择框效果，及美化select选择框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了JavaScript Canvas绘制圆形时钟效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
微信小程序 组件的外部样式externalClasses使用详解
这篇文章主要介绍了微信小程序里 组件的外部样式externalClasses使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
众所周知,小程序文件上传还是有点麻烦的,其实主要还是小程序对的接口有诸多的不便,比如说,文件不能批量提交,只能一个个的提交,小程序的上传需要专门的接口,现在给大家分享小程序多文件上传 Tdesign的方法,感兴趣的朋友一起看看吧2023-11-11
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
这篇文章主要为大家详细介绍了三款不错的图片压缩上传插件，webuploader、移动端上传插件localResizeIMG4以及LUploader)2017-04-04
分享5个小技巧让你写出更好的 JavaScript 条件语句
在使用 JavaScript 时，我们常常要写不少的条件语句。这里有五个小技巧，可以让你写出更干净、漂亮的条件语句。需要的朋友跟随小编一起学习吧2018-10-10
这篇文章主要为大家详细介绍了原生JS实现点击数字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章介绍了Ajax实现省市区三级联动的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
最新评论