data-main属性：

<script src="script/require.js" data-main="script/app.js"></script>

这里指定了根是app.js，只有直接或间接与app.js有关的依赖关系的模块才会被插入到html中。

require.config() 配置

其参数为一个配置对象，配置项及含义如下：

  baseUrl --> 用于加载模块的根路径

  paths --> 用于映射不存在根路径下面的模块路径

  shims --> 配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用requireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。

  deps --> 加载依赖关系数组

requirejs.config({// 默认情况下从这个文件开始去拉取资源baseUrl: 'script/app',// 如果你的依赖模块以pb头，会从script/pb加载模块path: {pb: '../pb'},// load backone as a shim，所谓就是将没有采用的requirejs方式定义// 模块的东西转变为requirejs模块shim: {'backone':{deps:['underscore'],exports:'Backone'}}
});

define()函数：

该函数用于定义模块，形式如下：

// logger.jsdefine(['a', function(a){'use strict';function info(){ console.log('我是个私有函数'); }return {name: '一个属性',test: function(a){console.log(a + '你好！');a.f();info();}};
}]);

define函数接受两个参数。

第一个参数 --> 是一个字符串数组，表示你定义的模块依赖的模块，这是依赖模块a。

第二个参数 --> 是一个函数，参数是注入前面依赖模块，顺序同第一个参数顺序。在函数中可做逻辑处理，通过return一个对象暴露模块的属性和方法，不再return中的可认为是私有方法和私有属性。

require()函数：

该函数用于调用定义好的模块，可以是用define函数定义的，也可以是一个shim，形式如下：

// app.jsrequire(['logger'], function(logger){logger.test('大熊');console.log(logger.name);
});// 输出结果：
// 大熊你好！
// 不确定（取决于a模块的f方法）
// 我是私有函数
// 一个属性

依赖一个不适用requirejs方式的库：

hello.js如下：

function helloFun(){console.log('hello,world~');
}

配置方式如下：

requirejs.config({baseUrl: '/public/js',path: {hello: 'hello'},shim: {hello: { exports: 'helloFun'}}
});

引入方式如下：

requirejs(['hello'], function(hello){hello();
});

暴露多个变量：init

hello.js如下：

function fun1(){console.log('111111');
}function fun2(){console.log('22222');
}

配置如下：

requirejs.config({baseUrl: '/public/js',path: {hello: 'hello'},shim: {hello: {init:function(){return {fun1: fun1,fun2: fun2,};}}}
});

引入方式如下：

requirejs(['hello'], function(hello){hello.fun1();hello.fun2();
});

当exports与init同时存在的时候，exports将被忽略。

无主的与有主的模块：

define('jquery', [], function(){ ... });

这里的jquery表示给当前这个模块起了名字jquery，它已经是有主的了，只能属于jquery

在使用一个第三方的时候，一定要注意它是否声明了一个确定的模块名。

define([...], function(){ ... });

上面这个是无主模块。可以在 requirejs.config 里，使用任意一个模块名来引用它。大部分的模块就是无主的。

挖墙脚：

对于有主的模块，不把它们当做满足 requirejs 规范的模块，而当作普通js库，然后在 shim 中导出它们定义的全局变量。

requirejs.config({baseUrl: '/public/js',path: {myjquery: 'lib/jquery/jquery'},shim: {myjquery: { exports: 'jQuery' }}
});requirejs(['myjquery'], function(jq){console.log(jq);
});

如何不让jquery污染全局的$：

requirejs.config({baseUrl: '/public/js',path: {jquery: 'lib/jquery/jquery','jquery-private': 'jquery-private'},map: {'*': { 'jquery':'jquery-private' },'jquery-private': { 'jquery':'jquery' }}
});requirejs(['jquery'], function(jq){console.log($);
});

Map参数 -- Map参数是用来解决同一个模块不同版本的问题，比如在项目开发中，开发初期使用了jquery1.7版本，但是由于业务的需求需要引入jquery1.9以上的版本时候，但是又担心有些依赖于jquery1.7的代码升级到1.9以上的时候会有问题，因此可以让一部分代码还是依赖于jquery1.7，新增的代码依赖于jquery1.9。

现在在入口文件 app.js 添加如下代码：

requirejs.config({map:{'app/a':{ 'jquery':'js/lib/jquery1.7.js'},'app/b':{ 'jquery':'js/lib/jquery1.9.1.js'}},
});require(['app/a'], function(jq){ ... });require(['app/b'], function(jq){ ... });

然后在 app/a.js 添加如下代码：

// a.jsdefine(function(require, exports, module){var a = require(['jquery']);
});

在 app/b.js 添加如下代码：

// b.jsdefine(function(require, exports, module){var b = require(['jquery']);
});

在app.js中

require(['app/a'], function(jq){ });时候，在加载 app/a.js 的时候回加载jquery1.7.js文件，在加载app/b.js的时候会加载jquery1.9.1.js。

config参数 -- config是指需要将配置信息传给一个模块，这些配置往往是 application 级别的信息，需要一个手段将他们向下传递个模块。在requireJS中，基于require.config()的config配置项来实现。要获取这些信息的模块可以加载特殊的依赖“module”，并调用module.config()。

app.js代码如下：

requirejs.config({config:{'app/c':{ size':'large'},'app/d':{ color:'blue'}},
});require(['app/c'], function(c){console.log(c);
});require(['app/d'], function(d){console.log(d);
});

在 c.js 里面的代码：

define(function(require, exports, module){// 其值是 'large'var size = module.config().size;return size;
});

d.js代码：

define(['module'], function(module){// Will be the value 'blue'var color = module.config().color;return color;
});

本文链接：https://my.lmcjl.com/post/7333.html