一, 常用的方法与命令
require
define
其中 define 是用于定义模块, 而 require 是用于载入模块以及载入配置文件.
通过 <script> 标签, 将 require.JS 文件引入到当前的 html 页面中
<script src="js/require.js"></script>
二, 参数配置
在 RequireJS 中一个文件就是一个模块, 其表现则是以 key/value 的键值对格式, key 即模块的名称 (模块 ID), 而 value 则是文件(模块) 的地址
基本参数配置:
- //index.HTML
- <script>
- require.config({
- baseUrl:'js/',
- paths:{
- 'jquery':'http://xxxx.xxx.com/js/jquery.min',
- 'index':'index'
- },
- shim:{
- }
- });
- require(['index']);
- </script>
require.config() 是用于配置参数的核心方法, 它接收一个有固定格式与属性的对象作为参数, 这个对象便是我们的配置对象.
在配置对象中 baseUrl 定义了基准目录, 它会与 paths 中模块的地址自动进行拼接, 构成该模块的实际地址, 并且当配置参数是通过 script 标签嵌入到 HTML 文件中时, baseUrl 默认的指向路径就是该 HTML 文件所处的地址.
paths 属性的值也是一个对象, 该对象保存的就是模块 key/value 值. 其中 key 便是模块的名称与 ID, 一般使用文件名来命名, 而 value 则是模块的地址, 在 RequireJS 中, 当模块是一个 JS 文件时, 是可以省略 .JS 的扩展名, 比如 "index.js" 就可以直接写成 "index" . 而当定义的模块不需要与 baseUrl 的值进行拼接时, 可以通过 "/" 与 http:// 以及 .JS 的形式来绕过 baseUrl 的设定.
shim 属性
它的值是一个对象, 可以用于声明非标准模块的依赖和返回值.
所谓的 "非标准模块" 指的是那些不符合 AMD 规范的 JS 插件.
- require.config({
- baseUrl:'js/',
- paths:{
- 'jquery':'http://xxx.xxxx.com/js/jquery.min',
- 'index':'index',
- 'say':'say',
- 'bar':'bar',
- 'tools':'tools'
- },
- shim:{
- 'tools':{
- deps:['bar'],
- exports:'tool'
- },
- 'say':{
- deps:['./a','./b'],
- init:function(){
- return {
- 'sayBye':sayBye,
- 'sayHellow':sayHellow
- }
- }
- }
- }
- });
- require(['index']);
这里需要注意的是如果所加载的模块文件是符合 AMD 规范, 比如通过 define 进行定义的, 那么 require 默认的优先级将是标准的, 只有在不符合标准的情况下才会采用 shim 中定义的参数.
在 index 模块执行时:
- define(['jquery','tool','say'],function($,tool,say){
- tool.drag();
- say.sayHellow();
- say.sayBye();
- })
上面的示例中, 关于 shim 中有三个重要的属性, 它们分别是:
deps: 用于声明当前非标准模块所依赖的其它模块, 值是一个数组, 数组元素是模块的名称或者是 ID.
exports: 用于定义非标准模块的全局变量或者方法. 值一般是一个字符串.
init: 用于初始, 处理, 非标准模块的全局变量或者是方法, 常用于当非标准模块存在多个全局变量以及方法, 值是一个函数.
- // 示例:
- require.config({
- baseUrl:'js/',
- paths:{
- 'jquery':'http://xxx.xxxx.com/js/jquery.min',
- 'index':'index'
- }
- });
- require(['index']);
三, 加载配置文件
<script src="js/require.js"></script>
四, 定义模块
在我们选择 RequireJS 来模块化开发我们的项目或者页面时, 就要明确的知道我们以后所编写的代码或者是某段功能, 都是要放在一个个定义好的模块中.
下面是 RequireJS 定义模块的方法格式:
define([id,deps,] callback);
ID: 模块的 ID, 默认的便是文件名, 一般无需使用者自己手动指定.
deps: 当前模块所以依赖的模块数组, 数组的每个数组元素便是模块名或者叫模块 ID.
callback: 模块的回调方法, 用于保存模块具体的功能与代码, 而这个回调函数又接收一个或者多个参数, 这些参数会与模块数组的每个数组元素一一对应, 即每个参数保存的是对应模块返回值.
- // 示例
- //index.JS
- define(['jquery','./utils'], function($) {
- $(function() {
- alert($);
- });
- });
从上面的示例中我们可以看出 index 模块中, 依赖了'jquery' 模块, 并且在模块的回调函数中, 通过 $ 形参来接收 jQuery 模块返回的值, 除了 jQuery 模块, index 模块还依赖了 utils 模块, 因为该模块没有在配置文件中定义, 所以这里以附加路径的形式单独引入进来的.
五, 载入模块
在说载入模块之前, 我们先聊聊 "模块依赖". 模块与模块之间存在着相互依赖的关系, 因此就决定了不同的加载顺序, 比如模块 A 中使用到的一个函数是定义在模块 B 中的, 我们就可以说模块 A 依赖模块 B, 同时也说明了在载入模块时, 其顺序也是先模块 A, 再模块 B.
在 require 中, 我们可以通过 require() 方法去载入模块. 其使用格式如下:
require(deps[,callback]);
deps: 所要载入的模块数组.
callback: 模块载入后执行的回调方法.
- require.config({
- paths:{
- 'index':'index'
- }
- });
- require(['index']);
RequireJS 通过 require([]) 方法去载入模块, 并执行模块中的回调函数, 其值是一个数组, 数组中的元素便是要载入的模块名称也就是模块 ID, 这里我们通过 require(['index']) 方法载入了 index 这个模块, 又因为该模块依赖了 jQuery 模块, 所以接着便会继续载入 jQuery 模块, 当 jQuery 模块加载完成后, 便会将自身的方法传递给形参 $ 最后执行模块的回调方法, alert 出 $ 参数具体内容
六, 模块的返回值
require 中定义的模块不仅可以返回一个对象作为结果, 还可以返回一个函数作为结果.
- // utils.JS
- define(function(require,exports,modules){
- function sayHellow(params){
- alert(params);
- }
- return sayHellow
- });
- // index.JS
- define(function(require,exports,modules){
- var sayHellow = require('utils');
- sayHellow('hellow World');
- })
如果通过 return 返回多种结果的情况下:
- // utils.JS
- define(function(require,exports,modules){
- function sayHellow(params){
- alert(params);
- }
- function sayBye(){
- alert('bye-bye!');
- }
- return { //return 一个对象出来
- 'sayHellow':sayHellow,
- 'sayBye':sayBye
- }
- });
- // index.JS
- define(function(require,exports,modules){
- var utils = require('utils');
- utils.sayHellow('hellow World');
- })
这里有一个注意的地方, 那就是非依赖性的模块, 可以直接在模块的回调函数中, 加入以下三个参数:
require: 加载模块时使用.
exports: 导出模块的返回值.
modules: 定义模块的相关信息以及参数.
总结:
1, 在首页通过 < script src="js/require.js"></script > 引入 require.JS
2, 通过 define([id,deps,] callback); 定义模块,
ID: 模块的 ID, 默认的便是文件名, 一般无需使用者自己手动指定. 即 ID 不用管
deps: 当前模块所以依赖的模块数组, 数组的每个数组元素便是模块名或者叫模块 ID.
callback: 模块的回调方法, 用于保存模块具体的功能与代码, 而这个回调函数又接收一个或者多个参数, 这些参数会与模块数组的每个数组元素一一对应, 即每个参数保存的是对应模块返回值.
模块的返回值
3, 通过 require.config 配置模块的路径,
4, 通过 require(deps[,callback]); 引入模块
deps: 所要载入的模块数组.
callback: 模块载入后执行的回调方法.
来源: http://www.bubuko.com/infodetail-2984664.html