在我最初开始写 JavaScript 函数时，通常是这样的：

function fun1() { // some code here}function fun2() { // some other code here}...

函数全写在全局环境中，项目很小时，通常不会有什么冲突问题。

但代码多了后，渐渐就发现，函数名称（英文词汇）有点不够用了。于是引入命名空间的概念，开始模块化代码。

命名空间下的函数

在命名空间下，我的代码这样写：

var com = com || {};com.zfanw = com.zfanw || {};com.zfanw.module1 = (function() { // some code here return { func1: func1, ... };}());com.zfanw.module2 = (function() { // some other code here return { func1: func1, ... };}());...

本着要面向对象的原则，执行函数通常我要这么写的：

com.zfanw.module1.func1.apply({},['arg1',arg2]);...

当然，为了少打些字符，我还会在闭包中导入1公共 API 接口： exports: 'jQuery' // <= 这个值需要稍加注意，稍后会提及 }, 'libs/jquery-throttle-debounce.min': { // <= jQuery 插件 deps: ['jquery-1.4.1'] //无需 exports，因为我们只是在增强 jQuery 功能 } },});require(['jquery-1.4.1', 'libs/jquery-throttle-debounce.min'], function($){ console.log($.debounce);});

写完 shim，发现 jquery-1.4.1、libs/jquery-throttle-debounce.min 这样的名称有点长。这里我们又有两种选择，一是直接打开修改 js 文件名，或者使用 require.js 提供的配置项 paths 给模块 ID 指定对应的真实文件路径：

require.config({ paths: { 'jquery': 'jquery-1.4.1', // <= 模块 jquery 指向 js/jquery-1.4.1.js 文件 'debounce': 'libs/jquery-throttle-debounce.min' }, shim: { 'jquery': { exports: '$' }, 'debounce': { deps: ['jquery'] } }});require(['jquery', 'debounce'], function($){ console.log($.debounce);});

这样，引用起来就方便多了。

另外，需要注意 shim 中的 exports 项，它的概念更接近 imports，即把全局变量导入。我们如果把 exports 值改成非全局变量名，就会导致传入回调的对象变成 undefined，举个例子：

require.config({ paths: { 'jquery': 'jquery-1.4.1', }, shim: { 'jquery': { exports: 'hellojQuery' // 这里我把 exports 值设置为 jQuery/$ 以外的值 } }});require(['jquery'], function($){ console.log($);// 这里，会显示 undefined});

其他模块在做 shim 时同理，比如 underscore 需要 exports 成 _。

Require.js 的好处

说了这么多，Require.js 到底有什么好处？

并行加载

我们知道，<script></script> 标签会阻塞页面，加载 a.js 时，后面的所有文件都得等它加载完成并执行结束后才能开始加载、执行。而 require.js 的模块可以并行下载，没有依赖关系的模块还可以并行执行，大大加快页面访问速度。

不愁依赖

在我们定义模块的时候，我们就已经决定好模块的依赖 – c 依赖 b，b 又依赖 a。当我想用 c 模块的功能时，我只要在 require函数的依赖里指定 c：

require(['c'], function(c) {...});

至于 c 依赖的模块，c 依赖的模块的依赖模块… 等等，require.js 会帮我们打理。

而传统的 script 办法，我们必须明确指定所有依赖顺序：

<script src="js/a.js"></script> <script src="js/b.js"></script> <script src="js/c.js"></script>

换句话说，传统的 script 方法里，我们极可能要靠记忆或者检查模块内容这种方式来确定依赖 – 效率太低，还费脑。

减少全局冲突

通过 define 的方式，我们大量减少了全局变量，这样代码冲突的概率就极小极小 – JavaScript 界有句话说，全局变量是魔鬼，想想，我们能减少魔鬼的数量，我想是件好事。

关于全局变量

有一点需要说明的是，require.js 环境中并不是只有 define 和 require 几个全局变量。许多库都会向全局环境中暴露变量，以 jQuery 为例，1.7版本后，它虽然注册自己为 AMD 模块，但同时也向全局环境中暴露了 jQuery 与 $。所以以下代码中，虽然我们没有向回调函数传入一份引用，jQuery/$ 同样是存在的：

require(['jquery'], function(){ console.log(jQuery); console.log($);});

以上这篇JavaScript中Require调用js的实例分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。