RequireJS全面讲解
异步模块定义(AMD)
谈起RequireJS,你无法绕过提及JavaScript模块是什么,以及AMD是什么。
JavaScript模块只是遵循SRP(Single Responsibility Principle单一职责原则)的代码段,它暴露了一个公开的API。在现今JavaScript开发中,你可以在模块中封装许多功能,而且在大多数项目中,每个模块都有其自己的文件。这使得JavaScript开发者日子有点难过,因为它们需要持续不断的关注模块之间的依赖性,按照一个特定的顺序加载这些模块,否则运行时将会放生错误。
当你要加载JavaScript模块时,就会使用script标签。为了加载依赖的模块,你就要先加载被依赖的,之后再加载依赖的。使用script标签时,你需要按照此特定顺序安排它们的加载,而且脚本的加载是同步的。可以使用async和defer关键字使得加载异步,但可能因此在加载过程中丢失加载的顺序。另一个选择是将所有的脚本捆绑打包在一起,但在捆绑的时候你仍然需要把它们按照正确的顺序排序。
AMD就是这样一种对模块的定义,使模块和它的依赖可以被异步的加载,但又按照正确的顺序。
RequireJS?
RequireJS是一个Javascript 文件和模块框架,可以从 http://requirejs.org/下载,如果你使用Visual Studio也可以通过Nuget获取。它支持浏览器和像node.js之类的服务器环境。使用RequireJS,你可以顺序读取仅需要相关依赖模块。
RequireJS所做的是,在你使用script标签加载你所定义的依赖时,将这些依赖通过head.appendChild()函数来加载他们。当依赖加载以后,RequireJS计算出模块定义的顺序,并按正确的顺序进行调用。这意味着你需要做的仅仅是使用一个“根”来读取你需要的所有功能,然后剩下的事情只需要交给RequireJS就行了。为了正确的使用这些功能,你定义的所有模块都需要使用RequireJS的API,否者它不会像期望的那样工作。
RequireJS API 存在于RequireJS载入时创建的命名空间requirejs下。其主要API主要是下面三个函数:
1、define – 该函数用于创建模块。每个模块拥有一个唯一的模块ID,它被用于RequireJS的运行时函数,define函数是一个全局函数,不需要使用requirejs命名空间。
2、require – 该函数用于读取依赖。同样它是一个全局函数,不需要使用requirejs命名空间
3、config – 该函数用于配置RequireJS
在后面,我们将学习如果使用这些函数,但首先让我们先了解下RequireJS的加载流程。
data-main属性
当你下载RequireJS之后,你要做的第一件事情就是理解RequireJS是怎么开始工作的。当RequireJS被加载的时候,它会使用data-main属性去搜寻一个脚本文件(它应该是与使用src加载RequireJS是相同的脚本)。
data-main 需要给所有的脚本文件设置一个根路径。根据这个根路径,RequireJS将会去加载所有相关的模块。
下面的脚本是一个使用data-main例子:
<script src="scripts/require.js" data-main="scripts/app.js"></script>
另外一种方式定义根路径是使用配置函数,后面我们将会学到。requireJS假设所有的依赖都是脚本,那么当你声明一个脚本依赖的时候你不需要使用.js后缀。
配置函数
如果你想改变RequireJS的默认配置来使用自己的配置,你可以使用require.configh函数。
config函数需要传入一个可选参数对象,这个可选参数对象包括了许多的配置参数选项。下面是一些你可以使用的配置:
1、baseUrl——用于加载模块的根路径。
2、paths——用于映射不存在根路径下面的模块路径。
3、shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。
4、deps——加载依赖关系数组
下面是使用配置的一个例子:
require.config({
//By default load any module IDs from scripts/app
baseUrl: 'scripts/app',
//except, if the module ID starts with "lib"
paths: {
lib: '../lib'
},
// load backbone as a shim
shim: {
'backbone': {
//The underscore script dependency should be loaded before loading backbone.js
deps: ['underscore'],
// use the global 'Backbone' as the module name.
exports: 'Backbone'
}
}
});
在这个例子中把根路径设置为了scripts/app,由lib开始的每个模块都被配置在scripts/lib文件夹下面,backbone 加载的是一个shim依赖。
用RequireJS定义模块
模块是进行了内部实现封装、暴露接口和合理限制范围的对象。
ReuqireJS提供了define函数用于定义模块。按惯例每个Javascript文件只应该定义一个模块。define函数接受一个依赖数组和一个包含模块定义的函数。通常模块定义函数会把前面的数组中的依赖模块按顺序做为参数接收。例如,下面是一个简单的模块定义:
define(["logger"], function(logger) {
return {
firstName: "John",
lastName: "Black",
sayHello: function () {
logger.log("hello");
}
}
}
我们看,一个包含了logger的模块依赖数组被传给了define函数,该模块后面会被调用。同样我们看所定义的模块中有一个名为logger的参数,它会被设置为logger模块。
每一个模块都应该返回它的API。这个示例中我们有两个属性(firstName和lastName)和一个函数(sayHello)。然后,只要你后面定义的模块通过ID来引用这个模块,你就可以使用其暴露的API。
使用require函数
在RequireJS中另外一个非常有用的函数是require函数。
require函数用于加载模块依赖,但并不会创建一个模块。例如:下面就是使用require定义了能够使用jQuery的一个函数。
require(['jquery'], function ($) {
//jQuery was loaded and can be used now
});
RequireJS全面讲解的更多相关文章
- requirejs基础教程
一.初识requirejs 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用. ...
- requirejs中 shim
使用requireJS的shim参数,完成jquery插件的加载 时间 2014-10-31 13:59:10 CSDN博客 原文 http://blog.csdn.net/aitangyong/ ...
- 基于RequireJS和JQuery的模块化编程——常见问题解析
由于js的代码逻辑越来越重,一个js文件可能会有上千行,十分不利于开发与维护.最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是seajs的时候,最终还是偏向于requirej ...
- JS模块化工具requirejs教程(一):初识requirejs
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...
- “requireJs前传”之为什么要用前端模块化?
对于没有接触过后台的前端同学想要理解模块化是很困难的,鉴于未来的趋势,以下是我转载的一篇文章,希望对大家有用! 特此声明:转载文章,不喜勿喷.和谐前端,世界和平!0.0 模块的写法 随着网站逐渐变成” ...
- 将requirejs进行到底(一)
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用.单元测试等等一系列复杂的需求 ...
- RequireJS和JQuery的模块化编程
基于RequireJS和JQuery的模块化编程 由于js的代码逻辑越来越重,一个js文件可能会有上千行,十分不利于开发与维护.最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还 ...
- requireJS 从概念到实战
requireJS 可以很轻易的将一个项目中的JavaScript代码分割成若干个模块(module).并且requireJS推荐一个模块就是一个文件,所以,你将获得一些零碎的具有互相依赖关系的JS文 ...
- 从 RequireJs 源码剖析脚本加载原理
引言 俗话说的好,不喜欢研究原理的程序员不是好的程序员,不喜欢读源码的程序员不是好的 jser.这两天看到了有关前端模块化的问题,才发现 JavaScript 社区为了前端工程化真是煞费苦心.今天研究 ...
随机推荐
- syntax error near unexpected token `then'问题的解决
http://blog.csdn.net/gongmin856/article/details/7690917 #!/bin/bash #if program test echo 'a:' read ...
- 记一次CUDA编程任务
这个月6号开始,着手解决一个具有实际意义的计算任务.任务数据有9879896条,每条包含30个整数,任务是计算每两条数据之间的斯皮尔相关系数及其P值.原始数据只有500+MB,因此我并不认为这是个多么 ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- 【Android开发日记】之入门篇(十四)——Button控件+自定义Button控件
好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...
- python3的leetcode题,两个数求和等于目标值,返回这两个数的索引组成的列表(三种方法)
给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为gai目标值的 两个 整数. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元素. 示例: 给定 ...
- python基础之初识python
Python的发展史 1989年圣诞节期间,吉多·范罗苏姆为了打发时间,开发了python这门语言.真他妈牛逼. Python崇尚优美.清晰.简单,是一门优秀并广泛使用的语言.2007年在TIOBE榜 ...
- IE67下去掉input边框
除了 border:none;之外 需要 border-color:#fff; overflow:hidden;
- sublime text3中使用Emmet部分标签无法闭合
转载自:http://geek100.com/2490/ 不过很早就发现br,input, img在sublime text中是没有闭合标签 / 的. 我一般都是手动补上的, 今天突然想起这个问题, ...
- cvCalcOpticalFlowPyrLK的使用--基于高斯金字塔的稀疏光流特征集求解
void cvCalcOpticalFlowPyrLK( const CvArr* prev, const CvArr* curr, CvArr* prev_pyr, CvArr* curr_pyr, ...
- 奶牛与农夫John与oj
当蒟蒻的我悲惨的发现oj出现大量的奶牛与农夫时,觉得早晚usaco要占领oj,于是绝望的开始记录农夫与奶牛的题目……. 一道usaco月赛的题…在oj用作练习二维数组,虽然数据的大量字符确实很让人不爽 ...