这是防止 JavaScript 中的命名空间污染的好方法吗？答案

【问题标题】：Is this a good way to prevent namespace pollution in JavaScript?这是防止 JavaScript 中的命名空间污染的好方法吗？
【发布时间】：2014-02-24 20:49:40
【问题描述】：

我正在设计一个 HTML5 在线视频游戏的结构，我想使用一些命名空间来组织我的所有函数和类，所以这个想法是在几分钟前才想到的，但我不知道如果是最好的：

(
    function () 
    {
        var xhr = new XMLHttpRequest();

        function load (file) 
        {
            xhr.open('GET', file, false);
            xhr.send();

            return xhr.responseText;
        }

        eval // Imported files
        (
            load('func.js') + 
            load('class.js')
        );

        function main () 
        {
            func();
            var instance = new Class();
            alert(instance.getMessage());
        }

        window.addEventListener('load', main, false);
    }
)();

func.js:

function func () 
{
    alert('This is an imported function.');
}

类.js

function Class () 
{
    this.getMessage = function () 
    {
        return "This is an imported class.";
    }
}

我喜欢这个，因为它看起来像 PHP 的文件导入模型，当我需要调用每个函数时，我避免了这么多冗长的事情，但我不确定，你怎么看？

【问题讨论】：

你不需要eval。这似乎不是一个好的做法。查看 RequireJS 和 Browserify。
嘿，谢谢你的评论，我正在努力:)

标签： javascript namespaces global-variables

【解决方案1】：

我建议使用已经实现的模型，例如 RequireJS。这处理了 JS 文件的加载和将代码模块化到类结构中。它还附带大量实用程序的额外好处，可让您合并文件以进行生产，这非常棒，因为您通常希望通过 HTTP 加载更少的文件以提高速度。

对于上面的示例，您仍然会遇到污染全局命名空间的问题。不这样做的好方法如下：

(function(){

  // private
  var thoughts = 'meow';
  var say = function(sound) {
    console.log(thoughts);
  };

  // public
  var feet = ['left', 'right'];
  var talk = function(){
    say(thoughts);
  };

  // expose
  window.cat = {
    talk: talk,
    feet: feet
  };

}()); // self running function

console.log('My cat has ' + cat.feet.length + ' feet');
console.log(cat.talk);

【讨论】：