注意点:
1/IIFE是现代js框架最主要的基础设施,保证变量不被污染。
2/基本上我们把命名空间等同于框架的名字。
内容
一、简单的命名空间
<input type="button" value="test" onclick="(new namespace()).alert();"/> <script type="text/javascript"> function namespace(){ this.alert=function(){ console.log('test'); } } </script>
说明:再这里可以看到,namespace方法存在一个函数对象属性,调用时还需要先实例化namespace再调用其自身的alert方法,似乎存在写法略显复杂
测验结果:在这里我曾理解为 onclick 调用mm()方法 function mm(){ namespace().alert(); } 这样写会报错的 ,而且namespace()句话就报错,不存在
分析看到这段代码中存在this对象,让我想起了一篇文章什么情况下使用this,其中需要理解一下,什么是构造函数,需要用到关键字 new,所以这的namespance应该写成Namespance
二、简单的命名空间的进化
<input type="button" value="test" onclick="NS.alert();"/> <script type="text/javascript"> (function namespace(){ this.alert=function(){ console.log('test'); } window.NS=this; })(); </script>
说明:在这里可以看到 使用了window.NS全局变量,同时使用了IIFE,使得调用变得简便一些
三、简单的命名空间的再次美化
(function (){ this.alert=function(){ console.log('test'); } window.NS=this; })();
在这里使用了匿名函数,namespance是可以拿掉的 (function(){ var _NS=function(){ } _NS.prototype.alert=function(){ console.log('test'); } window.NS=new _NS(); })();
在写看扩展方法的时候,可以写在prototype里面