• javascript 之 命名空间


    注意点:

    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里面

      

  • 相关阅读:
    3、Find and run the whalesay image
    1、docker初涉
    Java之ThreadLocal原理分析
    Java之Synchronized和ReentrantLock锁机制的比较
    Java之动态代理的实现及原理
    Java之atomic包的原理及分析
    深入理解Java内存模型-volatile
    Java WeakReference
    JavaScript 事件的冒泡,委派
    JavaScript Date删除添加员工信息练习
  • 原文地址:https://www.cnblogs.com/zmztya/p/11326009.html
Copyright © 2020-2023  润新知