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
这例子可以看出这几个require都是共用一个index变量。
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好像没有用了,没内容都没问题。
参考文献
1. RequireJS 中文网
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :http://www.cnblogs.com/lovesong/p/5495177.html
更多专业前端知识,请上 【猿2048】www.mk2048.com
RequireJS使用注意地方相关推荐
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- 30分钟 带你浅入requirejs源码
因为最近项目想现实一个单页功能,用的是react ,然后看了一下react route,挖槽 gzip后16k? 然后我简单写了一个纯单页(不支持多页的单页,所有入口都经过rewrite跑到index ...
- 模块化以及requirejs和seajs
我们用模块化的思想进行网页的编写是为了更好的管理我们的项目 模块与模块之间是独立存在的,每个模块可以独立的完成一个子功能. 模块化所涉及的规范commonjs,AMD,CMD,UMD 其中的commo ...
- 菜鸟requireJS教程---2、基本知识
菜鸟requireJS教程---2.基本知识 一.总结 一句话总结: 1.requireJS中的api就define(比如定义自己的函数)和require 2.requireJS使用的话就是配置req ...
- 使用 RequireJS 优化 Web 应用前端
基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...
- requireJS 从概念到实战
requireJS 可以很轻易的将一个项目中的JavaScript代码分割成若干个模块(module).并且requireJS推荐一个模块就是一个文件,所以,你将获得一些零碎的具有互相依赖关系的JS文 ...
- 抛开vue-cli 利用requireJS搭建一个vue项目
---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp ins ...
- JS模块化工具requirejs教程
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用Re ...
- requirejs加载顺序_前端模块化之AMD — Requirejs的使用
前言 随着Ajax技术的兴起,前后端分离的开发模式逐渐占领了几乎整个市场,现在的服务器带宽也足够完成大量数据交互,于是很多以前在服务器端的逻辑也可以移植到前端来处理了,从而减轻服务器的压力,当然,这样 ...
最新文章
- 2022-2028年中国塑料导爆管行业市场调查研究及前瞻分析报告
- C++ Stack Queue priority_queue
- 10岁宝宝制作的三国演义题材的海报
- jvm优化_镜像镜像–使用反射在运行时查看JVM内部
- 吴恩达机器学习笔记:(三)梯度下降法
- python写一个自动登录脚本_Python 脚本登录交换机实现自动配置备份
- 为什么不用ZK来做服务发现?
- oracle异机恢复 open resetlogs 报:ORA-00392
- 【工程项目经验】查看gcc arch编译选项
- PostMan 之 Mock 接口测试
- gdb调试程序函数名为问号,什么原因?step by step解决方案
- 【Bug】解决 java.sql.SQLSyntaxErrorException 异常
- html移动端缩放解决方案
- Leetcode 刷题笔记(三) —— 数组类型解题方法三:滑动窗口
- 《中文分词算法研究》
- python 爬虫遇到br网页压缩
- 国家AAAAA级旅游景区数量统计
- ADOConnection 打开EXCEL
- 浅谈SRAM与DRAM的异同
- 逃出你的肖申克(二):仁者见仁智者见智?从视觉错觉到偏见
热门文章
- 最优化理论与算法笔记
- mysql8.0设置用户权限_mysql8.0建立用户授予权限报错解决方法
- android+4.4+jni闪退,native2.1 安卓退到后台时,概率闪退
- 仪征市第二中学计算机老师,静心倾听花自开 ——仪征市第二中学徐丞老师
- 牛客网 2018年全国多校算法寒假训练营练习比赛(第五场) H.Tree Recovery-完全版线段树(区间更新、区间求和)...
- golang linux安装
- python自动化之正则
- [你必须知道的.NET] 第一回:恩怨情仇:is和as
- ubuntu ls命令
- matlab zeros初始化为0矩阵