中级 JavaScript 程序员编写更好代码的技巧

Question

所以我是一个相当不错的 JavaScript 程序员，最近我刚刚完成了一个相当大的 Web 应用程序的工作，其中涉及编写相当多的 JavaScript。当我调试脚本时，我遇到的一件事是，与我在整个脚本中使用的各种全局变量存在一些命名空间冲突。本质上，我的 javascript 文件的结构如下：

global var a
global var b
global var c
function1(){}
function2(){}
function3(){}

使用 jQuery 文档就绪函数将各种事件绑定到我的 html 中的按钮，并将我的函数作为事件处理程序回调调用。

有些人建议将我的整个脚本封装在一个巨大的函数中，以防止任何与范围相关的错误。我不太清楚这到底意味着什么。任何提示都值得赞赏，因为我即将创建另一个 Web 应用程序，该应用程序将涉及相当多的 AJAX 页面加载，以避免浏览器刷新和绑定到各种事件的 DOM 操作。谢谢！

Answer 1

我建议阅读 jQuery 插件创作指南（如果您不是，我也建议您考虑使用 jQuery）

http:// /docs.jquery.com/Plugins/Authoring

顺便说一句，这个问题已经被问过很多次了（不是对重新问的批评）

• jQuery：全局变量命名空间问题
• 避免 JavaScript 依赖项污染全局命名空间
• JavaScript 命名空间

我还强烈建议您阅读有关注册 DOM 事件的 jQuery live 插件（我猜它现在是内置的）：
http://api.jquery.com/live/
（这将最大限度地减少对解除绑定和重新绑定 DOM 节点的状态管理的讨厌需求）。

Answer 2

Michael 和 nnnnnn 版本的类似替代方案是

var YourApp = {
    a: 1234,
    b: 5678,
    function1: function () {

    },
    etc
};

YourApp 是唯一的全局变量，并且可以像

YourApp.function1();

或一样访问其属性

YourApp.a;

Answer 3

我喜欢将每个文件的内容包装在匿名函数中。然后，您可以将 window 作为参数传递给它，并有选择地选择从每个文件中导出的内容。

(function(exports) {

var MyClass = function() {

};

MyClass.prototype.method = function() {

};

// this won't be visible outside this file
var helperFunction = function() {

};

exports.module = exports.module || {};
exports.module.MyClass = MyClass;

})(window);

另外，您可以按以下方式构造它，以使用 this 作为全局对象，如果这更适合您的编码风格：

(function() {

this.Thing = function() { };

}).call(window);

Answer 4

我预计会遭到 OO 纯粹主义者的反对，但是...

解决命名空间冲突的一个非常简单的解决方案是将变量和函数放入一个类中，即使它没有可用的构造函数或执行其自己的任何内部处理。

function YourApp() {} // empty constructor...
YourApp.a = 1234;
YourApp.b = 5678;
YourApp.function1 = function() {};
YourApp.function2 = function() {};

function YourOtherApp() {} // empty constructor...
YourOtherApp.a = 1234;
YourOtherApp.b = 5678;
YourOtherApp.function1 = function() {};
YourOtherApp.function2 = function() {};

// Then you call it like:
YourApp.function1();

// And you have no more namespace collisions with other globals

Answer 5

根据您过去对大量全局变量和函数所做的操作，最快的第一步是简单地获取所有这些变量和函数并使它们成为单个对象的属性。该单个对象被声明为全局变量，但它是您唯一的全局变量，并且实际上是您的新命名空间，因此您只需担心一个名称可能与其他库发生冲突。

因此，将其直接与您给出的 a、b 等示例联系起来：

var SNS = {}; // create some namespace object

SNS.a = "something";
SNS.b = "something else";
SNS.c = 17;
SNS.method1 = function(x) {
   alert(SNS.a + x);
};
SNS.method2 = function() {
   SSN.method1(12); // call another function
};

SNS.SUB = {};
SNS.SUB.property1 = "sub namespace prop 1";
SNS.SUB.method1 = function() {};
// etc.

我的示例使用“SNS”表示“某个名称空间”；我相信您可以立即看到如何轻松地将其应用到您刚刚完成的项目中。您可能还可以看到一个缺点，即为了让您的方法相互引用以及变量，您必须在它们前面加上对象名称的前缀。如果你有子命名空间，情况会变得更糟。幸运的是，有一些方法可以解决这个问题，但我声明它们超出了本答案的范围。

话虽如此，您可以在（Google）上阅读“揭示模块模式” - 将帮助您更多地面向对象（如果这就是您想要的）。

您的问题的真正深入的答案可以在这里找到：http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/

进一步阅读：
http://www.adequatelygood.com/2010/3/JavaScript -模块模式深入