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

赞 (0)

相关推荐

  • 详解RequireJs官方使用教程

    § 1.使用 § 1.1 加载 JavaScript 文件 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代码,但其主要目的还是为了代码的模块化. RequireJS以一个相对于baseUrl的地址来加载所有的代码. 页面顶层<script>标签含有一个特殊的属性data-main,require.js使用它来启动脚本加载过程,而baseUrl一般设置到与该属性相一致的目录. baseUrl亦可通过Requir

  • 在JavaScript应用中使用RequireJS来实现延迟加载

    在JavaScript应用中使用RequireJS来实现延迟加载

    无论简单还是复杂的Web应用,都由一些HTML.JavaScript.CSS文件组成.通常开发者会通过JQuery.Knockout.Underscore等等这样的第三方JavaScript框架来提高开发速度.由于这些JavaScript框架都针对特定的用途开发而且已经得到了"验证",所以直接使用它们就比自己从头实现所需要的功能显得更为合适.然而,伴随着应用的复杂度不断上升,写出干净.低耦合.可维护的代码变得越来越重要.在这篇文章里,我将解释 RequireJS框架如何帮助应用开发者写

  • RequireJs的使用详解

    一.为什么使用RequireJS? <script src="a.js"></script> <script src="b.js"></script> <script src="c.js"></script> 上述多个js文件加载的时候,浏览器会停止网页渲染(JS阻塞浏览器渲染),加载文件越多,网页失去响应的时间就会越长:另外各文件的依赖关系很难管理. RequireJs的作

  • 在ASP.NET MVC项目中使用RequireJS库的用法示例

    RequireJS 是一个前端模块化开发的流行工具,本身是一个Javascript的库文件,即require.js . RequireJs的主要功能: (1)实现js文件的异步加载,避免网页失去响应: (2)管理模块之间的依赖性,便于代码的编写和维护. 前端模块化开发现在有好多的工具,大体上分为两类,一类是像dojo之类的高大全,dojo v1.8之后已经内置了模块化开发组件:另一类是像require.js,sea.js 这种专心做模块化开发的工具. 从模块化划分的规则来区分,主要分为AMD.C

  • 使用RequireJS优化JavaScript引用代码的方法

    RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护. 在本文中,我会为你介绍RequireJS和应该如何使用它.我们讨论引入文件和定义模块,甚至还会接触优化方面的知识. 简单的说,require.js是一个脚本载入程序,允许你把你的javascript代码独立成文件和模块,同时管理每个模块间的依赖关系. 引入文件 在开始使用RequireJS前,我们需要先下载它的库和Asynchronous Module Definition(AMD

  • 使用RequireJS库加载JavaScript模块的实例教程

    js通过script标签的默认加载方式是同步的,即第一个script标签内的js加载完成后,才开始加载第二个,以此类推,直至js文件全部加载完毕.且js的依赖关系必须通过script的顺序才能确保:而在js加载期间,浏览器将停止响应,这大大影响了用户体验,基于此,很多解决js以来和加载的方案出现,require js就是其中之一. requirejs加载的模块,一般为符合AMD标准的模块,即用define定义,用ruturn返回暴露方法.变量的模块:requirejs也可以加载飞AMD标准的模块

  • 在Html中使用Requirejs进行模块化开发实例详解

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Reuqirejs有一个text的插件,它可以读取指定文件的内容,读取到的内容就是文本. 如何下载text插件 第一种方法,可以通过npm下载: npm install requirejs/text 第二种方法,也可以直接去官方github上面直接下载. 直接拷贝内容到text.js中即可. 如何安装t

  • RequireJS使用注意细节

    RequireJS介绍 RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系. RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端

  • LABjs、RequireJS、SeaJS的区别

    一.LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行.LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化.LABjs 是一个文件加载器. 二.RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然.模块加载器也可降级为文件加载器用,因此使用 RequireJS 和 SeaJS,

  • 一篇文章掌握RequireJS常用知识

    一篇文章掌握RequireJS常用知识

    本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,加以例证和分析,分享给大家供大家参考,具体内容如下 1. 模块化 相信每个前端开发人员在刚开始接触js编程时,都写过类似下面这样风格的代码: <script type="text/javascript"> var a = 1; var b = 2; var c = a * a + b * b; if(c> 1)

  • SQLite中的B-Tree实现细节分析

    SQLite在存储在外部的数据库是以B-Tree来组织的.关于B-tree的细节,参考 ** ** Donald E. Knuth, THE ART OF COMPUTER PROGRAMMING, Volume 3: ** "Sorting And Searching", pages 473-480. Addison-Wesley ** Publishing Company, Reading, Massachusetts. ** 基本思想是文件包含的每一页都包括N个数据库入口和N+1

  • requireJS使用指南

    项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受. AMD:一种基于模块的异步加载JavaScript代码的机制,它推荐开发人员将JavaScript代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无须再声明一大堆的全局变量.通过延迟和按需加载来解决各个模块的依赖关系.模块化的JavaScript代码好处很明显,各

  • 探索angularjs+requirejs全面实现按需加载的套路

    在进行有一定规模的项目时,通常希望实现以下目标:1.支持复杂的页面逻辑(根据业务规则动态展现内容,例如:权限,数据状态等):2.坚持前后端分离的基本原则(不分离的时候,可以在后端用模版引擎直接生成好页面):3.页面加载时间短(业务逻辑复杂就需要引用第三方的库,但很可能加载的库和用户本次操作没关系):4,还要代码好维护(加入新的逻辑时,影响的文件尽量少). 想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载.最近都是基于angula

  • 使用requirejs模块化开发多页面一个入口js的使用方式

    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多.理论这样其实也没什么,但是到后面用grunt进行合并压缩就会有很多入口js,虽然这个入口js都把配置的模块内容都压缩到里面了,但是各个入口合并压缩后的文件中其实都有很多重合的代码,所以考虑到这个就想到把所以的入口文件都统一了,使用一个,到时候用grunt合并压缩也只有这么一个入口文件,也很方便. 实

  • 二维码的生成细节和原理

    二维码的生成细节和原理

    二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字,日文,中文等等.这两天学习了一下二维码图片生成的相关细节,觉得这个玩意就是一个密码算法,在此写一这篇文章 ,揭露一下.供好学的人一同学习之. 关于QR Code Specification,可参看这个PDF:http://raidenii.net/files/datasheets/misc/qr_c

  • 关于jquery ajax 调用带参数的webservice返回XML数据一个小细节

    后来在一个不起眼的小站找到一个帖子,某个人的一个建议提醒了我. 我原来的代码是这样写的: 错误代码 复制代码 代码如下: $.ajax({ type: "post", url: "_service.asmx/getDataFromATable", data:" { tablename: temp }", dataType: "XML" ... WS是这样写的: webservice 复制代码 代码如下: [WebMethod]

随机推荐