RequireJS使用注意细节


Posted in Javascript onMay 15, 2016

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使用注意细节,希望对大家有所帮助!

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 #Javascript
jQuery插件开发汇总
May 15 #Javascript
Javascript的无new构建实例详解
May 15 #Javascript
Javascript基础知识盲点总结之函数
May 15 #Javascript
深入理解$.each和$(selector).each
May 15 #Javascript
js中最容易被忽视的事件问题大总结
May 15 #Javascript
jquery点击改变class并toggle的实现代码
May 15 #Javascript
You might like
生成缩略图
2006/10/09 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
查看django版本的方法分享
2018/05/14 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python中while和for的区别总结
2019/06/28 Python
django如何通过类视图使用装饰器
2019/07/24 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Python turtle库的画笔控制说明
2020/06/28 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
GC是什么?为什么要有GC?
2013/12/08 面试题
工厂厂长的职责
2013/12/12 职场文书
家长给老师的道歉信
2014/01/13 职场文书
硕士生工作推荐信
2014/03/07 职场文书
租房协议书
2014/04/10 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript