解决全局变量污染问题

Posted 2020-06-27

      什么是污染-------->全局变量就是污染。常用的解决污染的几种方式a.函数b.对象c.命名空间d.立即函数

      函数和对象就是我们把变量放到函数或者对象里，成为局部变量，通过访问函数内的变量来获取想要得到的内容，这个就不详细解释了。

这里引入一个命名空间的例子：这样进行访问会很大程度降低污染问题了。

 /*顶级 一级*/
    var demo={};//根部

    /*二级*/
    demo.web={
        sum:10,
        tab:function(){}
    };

    demo.finance = {
        sum:20,
        tab:function(){}
    };


    /*三级*/
    demo.web.default = {
        sum:30
    }; 
    demo.web.product = {
        sum:40
    };
    demo.web.account = {}; 

    /*如何使用*/
    console.log(demo.web.sum);
    console.log(demo.finance.sum);
    console.log(demo.web.default.sum);
    console.log(demo.web.product.sum);

这里在说一下立即函数：也就是将定义和调用合二为一，不需要调用也能执行，立即函数的后面必须加分号，否则后面的立即函数会出错。

(function(){
        var sum = 1;
        console.log(sum);  //1
    })();

    (function(){
        var sum = 2;
        console.log(sum);  //2
    })();
    console.log(sum);   //sum is not defined

不过要访问立即函数中的某些变量，是访问不到的，通常通过以下三种方式访问立即函数中的变量。第一种window，第二种全局变量形式，第三种return形式。

window方式：

 (function (w) {
        var sum = 10;
        w.sum = sum;
    })(window);
    console.log(sum);  //10此时sum为全局变量了

如果要访问多个立即函数中的值，那么上面的方法就不行了，会产生大量污染
以下解决方案：json

 (function (w) {
        var sum=10;
        json = {
            sum : sum,
            fn:function(){
                console.log("fn");
            }
        }

        w.$ = json;
    })(window);

    $.fn();  //fn
    console.log($.sum);  //10