RequireJS使用注意细节_javascript技巧

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索requirejs使用
requirejs使用教程
javascript requirejs、装修注意事项及细节、验房注意事项及细节、家装注意事项及细节、装修细节注意事项,以便于您获取更多的相关知识。

时间: 2024-10-03 21:55:05

RequireJS使用注意细节_javascript技巧的相关文章

html5+javascript实现简单上传的注意细节_javascript技巧

简单记录下今早做H5上传中一些代码还有坑 一.展示 因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有 解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的.所以最后采用的办法还是用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示

个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节_javascript技巧

变量转换 var myVar = "3.14159", str = ""+ myVar,// to string int = ~~myVar, // to integer float = 1*myVar, // to float bool = !!myVar, /* to boolean - any string with length and any number except 0 are true */ array = [myVar]; // to array

Javascript实现关联数据(Linked Data)查询及注意细节_javascript技巧

前言 自由百科全书不仅仅应当可以自由编写,而更应该可以自由获得. DBpedia对Wikipedia的数据变成Linked Data形式,使得机器也能读懂并自由获得这些数据. 本文的主要目的是利用Javascript从DBpedia中获取我们想要的数据. 对Linked Data不太了解的请参考:关联数据入门--RDF. SPARQL Trying to use the Semantic Web without SPARQL is like trying to use a relational

javascript parseInt() 函数的进制转换注意细节_javascript技巧

parseInt(string, radix) 有2个参数,第一个string 是传入的数值,第二个radix是 传入数值的进制,参数radix 可以忽略,默认为 10,各种进制的数转换为 十进制整数(如果不是整数,向下取整). radix 的取值范围是 2~36,如果 radix 为 1 或 radix>36 ,转换结果将是 NaN ,如果 radix 为 0 或其它值将被忽略,radix 默认为 10 . 该函数要求第一个参数是字符串,如果不是字符串将被转换成字符串,而且,在进行转换之前,字

奉献给JavaScript初学者的编写开发的七个细节_javascript技巧

(1)简化代码 JavaScript定义对象和数组非常简单,我们想要创建一个对象,一般是这样写的: 复制代码 代码如下: var car = new Object(); car.colour = 'red'; car.wheels = 4; car.hubcaps = 'spinning'; car.age = 4; 下面的写法可以达到同样的效果: 复制代码 代码如下: var car = { colour:'red', wheels:4, hubcaps:'spinning', age:4 }

jQuery $.data()方法使用注意细节_javascript技巧

前段时间同事在群里对jQuery里的.data()方法大发牢骚: XXX(NNNNNNN) 15:11:34 <a id="a" data-xxx="00123" /> alert($('#a').data('xxx'));//123 data方法不靠谱 XXX(NNNNNNN) 15:13:17 老老实实用attr('data-xxx')吧细研究了下jQuery文档对.data()方法的描述: 复制代码 代码如下: As of jQuery 1.4.3

记录几个javascript有关的小细节_javascript技巧

很多很多的事都容易在不经意间忘却,所以我选择记录下来. Firefox 不支持 obj.innerText 属性.  obj.innerText alert()显示的值是 undefined. Firefox 支持 innerHTML 属性却不支持 innerText,如果不想用innerHTML 替代,可以用如下代码 由于Firefox不支持document.all,所以考虑兼容的时候获取对象通常用 document.getelementbyid('yourid'). if (document

用PS给人物照保细节磨皮技巧

  教你用PS给人物照保细节磨皮技巧给大家,教程非常简单实用哦!!学会了,提高你的P图技能! 分类: PS图片处理 ps磨皮教程

Javascript 数组添加一个 indexOf 方法的实现代码_javascript技巧

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 运行以上代码,即可.如果大家想看的是 javascript indexOf的使用方法,请看下面的文章javascript indexOf函数使用说明JavaScript indexOf忽略大小写_javascript技巧