深入了解require.js学习笔记

那么,让我们来看看require.js有什么牛逼的特性吧!
与CommonJS兼容

AMD (异步模块定义规范) 出现自CommonJS工作组。CommonJS旨在创造Javascript的生态系统。 CommonJS的一个重要部分是transport/c, 即AMD的前身,而require.js则是该规范的一个实现。

CommonJS模块和AMD模块的语法差异,主要由于AMD需要支持浏览器的异步特性。而CommonJS模块则需要同步进行,例如:

 代码如下 复制代码

var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
 
exports.asplode = function() {
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};

AMD模块是异步加载模块的,故而模块定义需要一个数组作为第一个参数,而模块加载完毕后回调的函数作为第二个参数传入。

 代码如下 复制代码

define( [ "someModule"], function( someModule ) {
return {
asplode: function() {
someModule.doTehAwesome();
 
// 这将会异步执行
require( [ "anotherModule" ], function( anotherModule ) {
anotherModule.doMoarAwesome();
});
}
};
});

然而,在require.js中AMD亦能兼容CommonJS语法。通过AMD的define函数包装CommonJS模块,你也可以再AMD中拥有一个CommonJS模块,例如:

 代码如下 复制代码

define(function( require, exports, module )
var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
 
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
 
exports.asplode = function() {
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
});

实际上,require.js通过函数.toString解释回调函数的模块内容,找到其正确的依赖,将其变成一个通常的AMD模块。需要注意,如果你使用这种方式编写模块,可能会发生与其他AMD加载器不兼容的情况,因为这违背了AMD规范,但它能很好的理解这种格式的写法。

这里发生了什么,require.js实际上做了function.toString的回调函数解析模块的内容,找到正确的依赖,就像它,如果它是一个正常的AMD模块。重要的是要注意,如果您选择这样写模块,他们将最有可能不兼容与其他AMD模块装载机,因为这违背了AMD规范,但它是很好的了解这个格式存在!

 
CDN回退

另一个隐藏的require.js瑰宝是,其支持当CDN加载不正确时,回退加载本地相应的库。我们可以通过require.config达到这个目的:

requirejs.config({
paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});

 
没有依赖?对象字面量?没问题!

当你写一个没有任何依赖的模块,并且只是返回一个对象包含一些功能函数,那么我们可以使用一种简单的语法:

define({
forceChoke: function() {
 
},
forceLighting: function() {
 
},
forceRun: function() {
 
}
});

很简单,也很有用,如果该模块仅仅是功能的集合,或者只是一个数据包。

 
循环依赖

在一些情况中,我们可能需要模块moduleA和moduleA中的函数需要依赖一些应用。这就是循环依赖。

// js/app/moduleA.js
define( [ "require", "app/app"],
function( require, app ) {
return {
foo: function( title ) {
var app = require( "app/app" );
return app.something();
}
}
}
);

得到模块的地址

如果你需要得到模块的地址,你可以这么做……

var path = require.toUrl("./style.css");

 
BaseUrl

通常,在进行的单元测试时,你的源代码可能放在类似src的文件夹里,同时,可能你的测试放在类似tests的文件夹里。这可能比较难让测试配置正确。

比如我们在tests文件夹有一个index.html文件,并需要本地加载tests/spec/*.js。并假设,所有源代码在为src/js/*.js,并有一个main.js在该文件夹。

index.html中,不在加载require.js时设置data-main。

<script src="src/js/vendor/require.js"></script>
<script>
require( [ "../src/js/main.js" ], function() {
require.config({
baseUrl: "../src/js/"
});
 
require([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], function() {
// start your test framework
});
});
</script>

你可以发现main.js被加载。然而由于没有设置data-main,所欲我们需要制定一个baseUrl。而当使用data-main时,baseUrl会根据其设定的文件来自动设置。

在这里,你可以看到main.js被载入。然而,由于它没有加载数据主要脚本标记,那么您必须指定一个base即可。当数据主要是用于baseURL时从主文件中的位置推断。通过自定义baseUrl我们可以很容易将测试代码和应用代码分开存放。

 
JSONP

我们可以这样处理JSONP终端:

require( [
"http://someapi.com/foo?callback=define"
], function (data) {
console.log(data);
});

对于非AMD库,使用shim来解决

在很多请款下,我们需要使用非AMD库。例如Backbone和Underscore并未适应AMD规范。而jQuery实际上只是将自己定义成一个名为jQuery全局变量,所以对于jQuery什么都不用做。

幸运的是,我们可以使用shim配置来解决这一问题。

 代码如下 复制代码

require.config({
paths: {
"backbone": "vendor/backbone",
"underscore": "vendor/underscore"
},
shim: {
"backbone": {
deps: [ "underscore" ],
exports: "Backbone"
},
"underscore": {
exports: "_"
}
}
});

 

时间: 2024-10-27 14:07:34

深入了解require.js学习笔记的相关文章

node.js学习笔记(9) 和谐模式

众所周知,ECMAScript 是一种开放的.国际上广为接受的脚本语言规范. 它本身并不是一种脚本语言.正如在 Web 应用程序中执行有用操作的 bean 集合(例如,Netscape 的 AWT)是 Sun 的 JavaBean 规范的一种实现一样,JavaScript 是 ECMAScript 规范的一种实现. 2015年6月17日,ECMA国际发布了EcmaScript2015,即EcmaScript6(以下简称ES6)草案的正式版.ES6是继ES5之后的一次主要改进,语言规范由ES5.1

ArcGIS JS 学习笔记3 实现百度风格的BubblePopup

原文:ArcGIS JS 学习笔记3 实现百度风格的BubblePopup 1. 开篇 模仿是最好的学习,这次我们继续山寨百度,通过自定义Infowindow来实现百度风格的BubblePopup   2.准备 2.1 Copy模板 先打开百度地图,按下f12吧BubblePopup的HTML代码和CSS代码拷贝下来,这里我无耻的把类名改了,大家不要在意细节. HTML模板 1 <div class="dextra-bubble-pop-center" style="z

ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆

原文:ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆 一.前言       吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半径进行搜索(也就是缓冲区╮(╯_╰)╭).   这次的目标,就是要山寨这个拖拽画圆的功能,我先放一个效果图.   二.开始山寨 我们先想一想要实现这个功能需要哪些步骤. 拖拽 画圆 通知拖拽结束 2.1 实现拖拽     关于拖

ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

原文:ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测 一.开篇      在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择      在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不在是一个控件,而真的只是一张"图",Map(4.0版本)需要在一个View里面来展示,在MapView里面就是一张平面图,在SceneView里面就一张三维地图.同一张地图在

ArcGIS JS 学习笔记4 实现地图联动

原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇       守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而且鼠标也有联动,我就照着这个目标进行山寨. 2.准备       地图联动其实就是当一张的extent发生了变化,另一张图的extent也要同步变化,这样就可以两张图的范围同步了.同理,这样就可以扩展到N张图进行联动.所以这次的目标就是实现添加任意的地图都要可以联动.首先依然是先看一下官

Node.js 学习笔记之简介、安装及配置

 本文是Node.js学习笔记系列文章的第一篇,主要给大家讲解的是在Windows和Linux上安装Node.js的方法.软件安装版本以0.12.0为例.希望大家能够喜欢.     简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好. 谁适合阅

vue.js学习笔记之绑定style样式和class列表_javascript技巧

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

node.js学习笔记(0) 前记

学习笔记原本是从1开始的,然而为了永远"怀念"已经离职的钱童鞋,我决定补上一篇.话说,程序员的数数不都是从0开始的吗. 初识node.js大概是一年前的这个时候,钱童鞋来单位面试,简历上的其中一项技能是node.js.当时我还傻傻的以为又是一个类似jquery的js框架-- 过完年,钱童鞋入职,然后慢慢得熟悉,交流得越来越多,也就慢慢得知node.js的众多优点. google的V8引擎 高速IO 非阻塞 异步回调 单线程 事件驱动 ... 然并卵,吸引我的却是javascript.在

Vue.js学习笔记之 helloworld_其它

Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. 先来看一个简单的示例,Hello,World! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue学习</title> <script src="/vue/1.0.11/vue.m