在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. 【百度之星】-IP聚合

    问题描述: Problem Description 当今世界,网络已经无处不在了,小度熊由于犯了错误,当上了度度公司的网络管理员,他手上有大量的 IP列表,小度熊想知道在某个固定的子网掩码下,有多少个 ...

  2. Elasticsearch之CURL命令的UPDATE

    对于,Elasticsearch之CURL命令的UPDATE包括局部更新和全部更新.可以去看我写的另一篇博客. Elasticsearch之更新(全部更新和局部更新) 总结: ES全部更新,使用PUT ...

  3. C#中 分层 显示数据库中多表的数据信息

    如下图,要实现将三个表中的内容加载到同一个窗体中,该怎么来实现呢? 要实现上面的查询结果,我们就要从Student表中拿到学生姓名,从Subject表中拿到科目名称,从StudentResult表中拿 ...

  4. 通过yum命令搭建lamp环境(centos6.5)

    centos 6.5 1.yum安装和源代码编译在使用的时候没啥区别,但是安装的过程就大相径庭了,yum只需要3个命令就可以完成,源代码需要13个包,还得加压编译,步骤很麻烦,而且当做有时候会出错,源 ...

  5. 移动web——touch事件介绍

    基本概念 1.在移动web端点击事件或者滑动屏幕.捏合等动作都是由touchstar.touchmove.touchend这三个事件组合在一起使用的 2.click事件在移动端会有0.2秒的延迟,下面 ...

  6. TensorFlow: Could not load requested Qt binding.

    使用Eclipse 引入tensorflow,出现 Could not load requested Qt binding.  问题 ImportError: Could not load reque ...

  7. Scroll / Jump to id without jQuery

    <scripttype="text/javascript"> function scroll(element){var ele = document.getElemen ...

  8. 有赞 MySQL 自动化运维之路 — ZanDB

    转自:https://tech.youzan.com/youzan-mysql-auto-ops-road/ 一.前言 在互联网时代,业务规模常常出现爆发式的增长.快速的实例交付,数据库优化以及备份管 ...

  9. Codeforces Round #469 Div. 2题解

    A. Left-handers, Right-handers and Ambidexters time limit per test 1 second memory limit per test 25 ...

  10. Entertainment Box Gym100781E(数据结构+贪心)

    Entertainment Box 题意: 有n个节目,每个节目给出开始时间(st)和结束时间(en): 有k个内存条这k个内存条可以同时存储节目.如果节目j的开始时间stj  大于等于节目i的结束时 ...