测量全局命名空间的污染

时间:2012-08-20 14:07:28

标签: javascript namespaces refactoring

背景

我正在尝试重构一些冗长,丑陋的Javascript(可耻,这是我自己的)。我开始学习Javascript时开始了这个项目;这是一次很棒的学习经历,但是我的代码中有一些垃圾,我使用了一些相当糟糕的做法,其中主要是全局命名空间/对象(在我的例子中是window对象)的严重污染。在我努力减轻污染的过程中,我认为衡量它会有所帮助。

方法

我的直觉是在加载任何代码之前简单地计算附加到window对象的对象的数量,再次在加载第三方库之后,最后在我的代码执行之后。然后,当我重构时,我会尝试减少与加载我的代码相对应的增加量。要做到这一点,我正在使用:

console.log(Object.keys(window).length)

在我的代码的各个地方。这似乎工作,我看到数字增长,特别是在我自己的代码加载后。但...

问题

只需查看Chrome Developer控制台中window对象的内容,我就可以看到它不包含附加到对象的所有内容。我怀疑它不包括一些更基本的属性或对象类型,无论它们属于浏览器,库还是我自己的代码。无论哪种方式,任何人都可以想到一种更好,更准确的方法来衡量有助于重构的全局命名空间污染吗?

提前致谢!

2 个答案:

答案 0 :(得分:7)

因此,在Felix KlingLèse majesté留下的一些评论之后,我找到了一个效果很好的解决方案。在加载任何库或我自己的代码之前,我创建了dashboard全局对象(我唯一有意的对象),并通过以下方式存储附加到window的对象列表:

var dashboard = {
    cache: {
        load: Object.getOwnPropertyNames(window)
    }
};

然后,在我加载所有库之后但在加载任何我自己的代码之前,我修改了dashboard对象,添加了pollution方法(在新的debug命名空间内) ):

dashboard.debug = {
    pollution: (function() {
        var pollution,                                     
            base = cache.load, // window at load         
            filter = function(a,b) { // difference of two arrays
                return a.filter(function(i) {
                    return !(b.indexOf(i) > -1);
                });
            },                          
            library = filter(Object.getOwnPropertyNames(window), base), 
            custom = function() { 
                return filter(Object.getOwnPropertyNames(window),
                        base.concat(library)); 
            };       

        delete cache.load;

        pollution = function() {
            console.log('Global namespace polluted with:\n ' + 
                    custom().length + ' custom objects \n ' +
                    library.length + ' library objects');

            return {custom: custom().sort(), library: library.sort()};
        };

        return pollution;
    }())  
};

在任何时候,我都可以从控制台调用此方法并查看

  

全局命名空间受到污染:
   53个自定义对象
   44个图书馆对象

以及列出与这些对象关联的键的两个数组。 baselibrary快照是静态的,而当前的自定义测量(通过custom)是动态的,这样如果我通过AJAX加载任何自定义javascript,那么我可以重新测量并查看任何新的习俗“污染”。

答案 1 :(得分:5)

您选择的一般模式可以从经验中运作。但是,您可能需要考虑两件事(作为补充或替代):

  1. JsLint.comJSHint.com与现有代码一起使用,并查看产生的错误。它应该可以帮助您快速,轻松地发现大多数(如果不是全部)全局变量的使用(例如,您会看到“未定义”变量的错误)。这是一个很简单的方法。因此,在这种情况下的测量只是查看问题的总数。
  2. 我们发现Chrome可以检测窗口对象上的泄漏资源是否棘手(因为在运行页面的过程中会添加内容)。我们需要检查一些例子,看看返回的某些属性是否是本机的,使用RegExs:/\s*function \w*\(\) {\s*\[native code\]\s*}\s*/来查找本机代码。在我们编写的一些代码“泄漏检测”代码中,我们还尝试(在try catch中)获取属性的值以验证它是否设置为值(而不仅仅是未定义)。但是,在您的情况下,这不应该是必要的。