jquery基础学习之变量命名不污染的方法总结

变量命名不污染主要分两种情况：

1、jquery/$命名不冲突

2、普通变量

1）虽然是分两种情况但是实质还是一种，都是变量的命名冲突，jquery本身的设计者已经有了解决方案，采用沙箱设计。

看一下jquery的源码，就会发现：

1.外层沙箱以及命名空间$

为了避免声明了一些全局变量而污染，把代码放在一个“沙箱执行”，然后在暴露出命名空间（可以为API，函数，对象）：

(function(xxx111){

典型的沙箱设计

})(xxx)

(function( window, undefined ) {

//用一个函数域包起来，就是所谓的沙箱

//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局

//把当前沙箱需要的外部变量通过函数参数引入进来

//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数

“use strict”;

window.jQuery = window.$ = jQuery;

})( window );

有人会疑问，为什么要第二个参数undefined 。在这里，jquery中有一个针对压缩的小小策略。

先看以下代码：

(function( window, undefined ) {

var a = undefined;

if (a == undefined){blabla…}

….

if (c == undefined) return;

})( window );

经过压缩后，可以变成：

(function(w, u) {

var a = u;

if (a == u){blabla…}

….

if (c == u) return;

})(w);

因为这个外层函数只传了一个参数，因此沙箱执行时，u自然会undefined，把9个字母缩成1个字母，可以看出压缩后的代码减少一些字节数。 评论中nodejser对undefined的补充中也给出了另一种解答：

在ECMAScript5之前undefined都是可写的，也就是undefined可以赋值的。jQuery作者这么做的目的还有防止2B程序员对undefined进行赋值后使得代码出现了不可预料的bug。

沙箱中第一句”use strict”;是表示使用javascript的严格模式，对于低级的浏览器，这里相当一字符串，所以兼容性是没问题的，详细的话，在阮一峰的文章Javascript 严格模式详解有介绍。

最后jQuery暴露一个全局的命名空间jQuery（为了书写更简单，一个简写就是，幸好Javascript用，幸好Javascript用来做变量命名是合法的）

实际上jQuery是一个函数，为什么要这样设计呢，是因为：

函数也是对象，于是在jQuery这个命名空间上可以绑定工具方法

函数可以有原型prototype，每当通过dom = $(“#id”)取得的所谓jQuery对象，本质就是dom = new jQuery(‘#id’); 如果懂得原型的话，就知道如果在jQuery的原型上绑定方法，像上边那样生成的实例dom可以调用这些方法。

简单来说，就是把jQuery看成是一个类，

在原型上绑定方法就相当于成员方法

，在jQuery上绑定工具方法，相当于类的静态方法，

举例如下：

jQuery.A = function(){};

jQuery.prototype.B = function(){};

相当于：

Class jQuery{

public static A(){}

public B(){}

}

2）

沙箱设计师可以解决所有的变量命名冲突的，还有一种是专门设计为jquery服务的，是 调用jQuery.noConflict() 函数，把控制权还原给jquery。

1.Query.noConflict(); //将变量$的控制权让渡给prototype.js
2.var $j = jQuery.noConflict(); //自定义一个比较短快捷方式，使用自定义法符号代表$，在本页面之内不会有冲突。