简单的命名空间
由于JavaScript没有文件作用域,不同的函数分散在不同的文件中,甚至由不同的人编写,重名的概率大大增加。是不是足够小心就可以了呢?也不尽然,还有些意外情况,比如经常会用到继承,于是写了一个没出现过的函数名extend,不料在EcmaScript5中加入了extend函数,命名空间的必要性就体现出来了。
JavaScript有函数的作用域,可以利用这点把自定义的函数写到一个函数体内,这样函数内的变量、对象、函数就像在一个命名空间内一样和外部隔离。
代码如下:
<input type="button" value="test" οnclick="(new namespace()).alert();"/>
<script type="text/javascript">
function namespace(){
this.alert=function(){
console.log('test');
}
}
</script>
这样自定义的alert方法就不会和window的alert冲突了。
简单进化
这样可以是可以,但也有问题,最大的问题在于调用方式复杂而丑陋!每次调用的时候都要实例化对象,然后调用其方法,简单修改代码让其实现自动实例化。
代码如下:<input type="button" value="test" οnclick="NS.alert();"/>
<script type="text/javascript">
(function namespace(){
this.alert=function(){
console.log('test');
}
window.NS=this;
})();
</script>
要看明白上面代码首先要了解一下“立即执行函数”(江湖人是这么称呼的)的技巧结构类似这样 代码如下:
(function xxx(){
//function body
})();
function xxx(){
//function body
}
xxx();就是定义一个函数,然后使用括号语法调用,而函数定义外面的一层括号只起到将函数声明转为函数定义表达式,因为只有表达式才可以使用括号调用。看明白这些妖蛾子之后上面代码就简单了,在自定义namespace函数最后把this赋值为window的NS属性,在调用的时候直接使用NS.xx就可以了。看起来好了很多。
美化一下
上面的写法看起来不错了,但是函数名namespace貌似是多余的了,可以美化一下
代码如下:(function (){
this.alert=function(){
console.log('test');
}
window.NS=this;
})();
变成了一个立即执行的匿名函数,美化了一些,不过看起来还是怪怪的,对呀,明明是实例化的function,为什么方法定义不写到prototype中呢,匿名函数怎么写prototype。。。,还得动动脑筋
代码如下:
(function(){
var _NS=function(){
}
_NS.prototype.alert=function(){
console.log('test');
}
window.NS=new _NS();
})();
这样一个带有命名空间的简单JavaScript库就写成了,不用担心命名冲突了,但是用起来很不方便啊。