在javascript中定义全局变量有2种方式，本质上是等价的，都是向window对象注入属性或者方法。

// global.js

var g_name = "aty";

window.g_age = 25;

当global.js加载的时候，浏览器的全局对象window就会多出2个属性:g_name和g_age。

我们编写一个js工具类或者是js框架，通常有2种方式：
方式1：dateUtil.js

(function(window) {

	var DateUtils = {};

	DateUtils.toString = function(){

		alert("toString");

	};

	// 全局变量

	window.DateUtils = DateUtils;

})(window);

这种方式是最常用的，比如JQuery、Underscore等框架都是采用这种结构编写的。

方式2：stringUtil.js

// 全局变量

var StringUtils = {};

StringUtils.toUpperCase = function(input){

	alert("toUpperCase");

}

很显然stringUtil.js和dateUtil.js都不符合AMD规范，现在我们看看如何通过requireJS进行加载。工程目录结构如下：

index.html

main.js

libs

	--dateUtil.js

	--stringUtil.js

index.html和main.js的实现代码如下：

<!doctype html>

<html>

    <head>

        <title>shim</title>

        <meta charset="utf-8">

        <script data-main="main.js" src="./../requirejs-2.1.15.js"></script>

    </head>

    <body>

		<div id="div1" style="width:200px;height:200px;"></div>

    </body>

</html>
requirejs.config({

    baseUrl: 'libs'

});

require(["dateUtil","stringUtil"], function(dateUtil,stringUtil) {

	alert(dateUtil===undefined);//true

});

运行index.html，通过F12观察:

很明显dateUtil.js和stringUtil.js能够被requireJS正常加载，但是不能获取到这2个模块的返回值。我们修改下index.html，给div注册事件处理函数，并在事件处理函数中调用stringUtil.js提供的方法:

<!doctype html>

<html>

    <head>

        <title>shim</title>

        <meta charset="utf-8">

        <script data-main="main.js" src="./../requirejs-2.1.15.js"></script>

		<script>

			function test()

			{

				StringUtils.toUpperCase();

			}

		</script>

    </head>

    <body>

		<div id="div1" style="width:200px;height:200px;" onclick="test();"></div>

    </body>

</html>

点击div1，可以发现test()函数不会报错。也就是说，requireJS加载不符合AMD规范的js文件，跟我们直接在html通过<script>标签加载，没有太大的差别。js文件中引入的全局变量，依然会存在，依然能够正常使用。

下面我们看下shim参数的使用方式，我们将main.js修改如下:

requirejs.config({

    baseUrl: 'libs',

	shim:{

		dateUtil:{

			  deps:[],

			  exports: 'DateUtils'

		},

		stringUtil:{

			  deps:[],

			  exports: 'StringUtils'

		}

	}

});

require(["dateUtil","stringUtil"], function(dateUtil,stringUtil) {

	stringUtil.toUpperCase();

	dateUtil.toString();

});

这段代码可以正常运行，可以看到：shim参数能够帮助我们以AMD模块的方式，使用那些不符合AMD规范的模块。下面接介绍下：deps和exports的含义。exports很好理解，就是模块的返回值。main.js中exports的值，一定要与dateUtil.js和stringUtil.js中暴露出的全局变量名称一致。很显然dateUtil.js和stringUtil.js这2个模块的返回值，就是暴露出的全局变量window.DateUtils和window.StringUtils，requireJS框架就是将这些全局变量的值返回，作为模块的返回结果。如果dateUtil.js或stringUtil.js中暴露了多个全局变量，那么exports可以指定其中任何的一个，作为模块的返回结果。不过一般的框架，都只会使用1个全局变量，这样冲突的可能性会减少，毕竟全局变量越少越好。

上面我们编写的dateUtil.js和stringUtil.js，都不依赖于其他js模块，所以指定的deps是空数组。下面我们编写的aplugin.js和bplugin.js都依赖于模块util.js。

//aplugin.js

(function(window,util) {

	var a = {};

	a.toString = function(){

		alert("a="+util.add(1,2));

	};

	// 全局变量

	window.a = a;

})(window,util);
//bplugin.js

var b = {};

b.toString = function(){

	alert("b="+util.add(1,2));

}
//util.js

var util = {};

util.add = function(v1,v2){

	return v1+v2;

};

main.js代码如下，只有设置正确的依赖顺序，使用的时候才不会出问题。

requirejs.config({

    baseUrl: 'libs',

	shim:{

		dateUtil:{

			  deps:[],

			  exports: 'DateUtils'

		},

		stringUtil:{

			  deps:[],

			  exports: 'StringUtils'

		},

		aplugin:{

			  deps:["util"],

			  exports: 'a'

		},

		bplugin:{

			  deps:["util"],

			  exports: 'b'

		}

	}

});

require(["stringUtil","dateUtil","aplugin","bplugin"], function(string,date) {

	//string.toString();

	//date.toString();

	var aPl = require("aplugin");

	var bPl = require("bplugin");

	aPl.toString();

	bPl.toString();

});

很显然util.js也不符合AMD规范，如果A模块依赖于B模块，A模块不符合AMD规范(使用的是全局变量)，那么B模块也必须是使用全局变量，否则会报错。即如果将util.js改成符合AMD规范的写法，那么aplugin.js和bplugin.js都会因找不到util对象而报错。

// 符合AMD规范的util.js

define(function(){

	function add(v1,v2)

	{

		return v1+v2;

	}

	return {"add":add};

});

最后我们看下shim配置参数中init的作用。init可以指定一个函数主要就是用来避免类库之间的冲突。由于不符合AMD规范的js文件，会使用全局变量。所以当加载多个模块的时候存在名字冲突的可能。比如JQuery、UnderScore等框架都会提供一个noConflict()函数来避免名字冲突，noConflict()的实现原理可以参考这篇文章。

我们编写一个不符合AMD规范的模块conflict.js，使用了全局变量$E，并提供noConflict方法。

(function(window) {

	// 保存之前数据

	var _$E = window.$E;

	var myplugin = {"name":"aty"};

	myplugin.noConflict = function(){

		window.$E = _$E;

		return myplugin;

	};

	// 向全局对象注册$E

	window.$E = myplugin;

})(window);

将index.html修改如下，在requireJS加载之前，先定义一个全局变量$E。

<!doctype html>

<html>

    <head>

        <title>shim</title>

        <meta charset="utf-8">

		<script>

			var $E = "before";

		</script>

        <script data-main="main.js" src="./../requirejs-2.1.15.js"></script>

    </head>

    <body>

		<div id="div1" style="width:200px;height:200px;" onclick="test();"></div>

    </body>

</html>

main.js中代码如下：

requirejs.config({

    baseUrl: 'libs',

	shim:{

		conflict:{

			  deps:[],

			  exports: '$E',

			  init:function(){

				 return $E.noConflict();

			  }

		}

	}

});

require(["conflict"], function(mayConflict) {

	alert(mayConflict.name);

	alert(window.$E);//before

});

运行index.html，可以发现conflict.js能够与之前定义的全局变量$E共存，避免了冲突，这就是通过init实现的。如果没有定义init，可以看到alert(window.$E)打印的值是undefined。

原文：http://blog.csdn.net/aitangyong/article/details/44225859

requireJS使用shim注入非标准模块详解的更多相关文章

  1. (转)python标准库中socket模块详解

    python标准库中socket模块详解 socket模块简介 原文:http://www.lybbn.cn/data/datas.php?yw=71 网络上的两个程序通过一个双向的通信连接实现数据的 ...

  2. python之sys模块详解

    python之sys模块详解 sys模块功能多,我们这里介绍一些比较实用的功能,相信你会喜欢的,和我一起走进python的模块吧! sys模块的常见函数列表 sys.argv: 实现从程序外部向程序传 ...

  3. Spring学习(一)-----Spring 模块详解

    官方下载链接:http://repo.spring.io/release/org/springframework/spring/ Spring 模块详解: Core 模块 spring-beans-3 ...

  4. (转)python之os,sys模块详解

    python之sys模块详解 原文:http://www.cnblogs.com/cherishry/p/5725184.html sys模块功能多,我们这里介绍一些比较实用的功能,相信你会喜欢的,和 ...

  5. Kali linux 2016.2（Rolling）中的payloads模块详解

    不多说,直接上干货! 前期博客 Kali linux 2016.2(Rolling)中的Exploits模块详解 payloads模块,也就是shellcode,就是在漏洞利用成功后所要做的事情.在M ...

  6. Python中操作mysql的pymysql模块详解

    Python中操作mysql的pymysql模块详解 前言 pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持 ...

  7. python time模块详解

    python time模块详解 转自:http://blog.csdn.net/kiki113/article/details/4033017 python 的内嵌time模板翻译及说明  一.简介 ...

  8. 小白的Python之路 day5 time,datatime模块详解

    一.模块的分类 可以分成三大类: 1.标准库 2.开源模块 3.自定义模块 二.标准库模块详解 1.time与datetime 在Python中,通常有这几种方式来表示时间:1)时间戳 2)格式化的时 ...

  9. Ansible安装部署及常用模块详解

    Ansible命令使用 Ansible语法使用ansible <pattern_goes_here> -m <module_name> -a <arguments> ...

随机推荐

  1. 使用Quartz2.2.3做持久化，启动程序后，控制台报错问题

    该错误是由mysql-connector-java.jar版本太低导致. MLog clients using log4j logging. Initializing c3p0-0.9.1.1 [bu ...

  2. vmware workstation 14 黑屏处理方法

    从12升级到14以后,所有老的虚拟系统全部黑屏.进行了一波操作,例如:虚拟机-管理-更改硬件兼容性,选择14.黑屏将加速3D图形勾选去掉:启动,关闭,再勾选上,启动.黑屏将显示器选择为指定监视器,黑屏 ...

  3. Nginx一个实现负载均衡的强大web server

    <转>nginx 这个轻量级.高性能的 web server 主要可以干两件事情: 〉直接作为http server(代替apache,对PHP需要FastCGI处理器支持): 〉另外一个 ...

  4. Android通过透明度设置背景变暗

    变暗 WindowManager.LayoutParams lp=getWindow().getAttributes(); lp.alpha=0.3f; getWindow().addFlags(Wi ...

  5. 整合springboot,angular2,可以前后台交互数据

    改造了一下angular2官方文档中的hero项目,让其可以进行后台的交互, https://github.com/DACHUYIN 源码在上面...博客就不写了....

  6. SQL基本操作——row_number() over()

    row_number() 与over()是在一起使用的,作用就是对表进行排序并记数. 语法: ROW_NUMBER ( ) OVER ( [ PARTITION BY value_expression ...

  7. Java_Web三大框架之Struts2

    今天正式接触Java_Web三大框架之Struts2框架.对于初学者来说,先来了解什么是框架技术: 一.“框架技术”帮我们更快更好地构建程序: 1.是一个应用程序的半成品 2.提供可重用的公共结构 3 ...

  8. cookie和sessionStorage 、localStorage 对比

    相同点:都存储在客户端 不同点:1.存储大小 cookie数据大小不能超过4k. sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或 ...

  9. BZOJ 4520: [Cqoi2016]K远点对 KDtree + 估价函数 + 堆

    Code: #include<bits/stdc++.h> #define ll long long #define maxn 200000 #define inf 10000000000 ...

  10. 哈夫曼树（Huffman Tree）

    Date:2019-06-21 14:42:04 做题时更多的是用到哈夫曼树的构造思想,即按照问题规模从小到大,依次解决问题,可以得到最优解 Description: 在一个果园里,多多已经将所有的果 ...