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 vvorld 在线加密破解方法
Nov 13 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
php学习笔记 数组遍历实现代码
2011/06/09 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
拖动时防止选中
2017/02/03 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
Python中除法使用的注意事项
2014/08/21 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python ftplib模块使用代码实例
2019/12/31 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
行政经理的岗位职责
2013/11/23 职场文书
销售部主管岗位职责
2013/12/18 职场文书
企业消防安全制度
2014/02/02 职场文书
中班幼儿评语大全
2014/04/30 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL