javascript - 私有(private)范围 Javascript 的最佳方式？

Question

我目前正在 JQuery 的 document.ready 处理程序中编写某个页面的所有 javascript 功能:

$(document).ready(function() {
    var one, two, three;
    function f1(par1) {}
    function f2() {}
        ...
});

我觉得这不是最佳的，也不符合 Javascript 最佳实践。我需要的是页面功能的私有(private)范围，不需要从外部调用任何内容。

我见过很多不同的方法:

jQuery source

(function(window) { 
    var anObj = {};
    ... 
    window.functionality = anObj;
}(window));

一个以window作为参数自调用的函数，然后在其上设置应用程序的功能对象。

Codemirror source

window.functionality = (function() {
   var functionality = {};
   ...
   return functionality;
}());

与 jQuery 的做法非常相似，但通过让自调用函数首先返回一些内容来间接在 window 上设置功能对象。

This question

var functionality = {};
(function(obj) { obj.f1 = ... }(functionality));

创建一个局部变量(而不是在窗口上)，并在自调用函数中设置其内容(为什么？)

How do I declare a namespace in JavaScript?

var functionality = { 
    f1: function(){}, 
    f2: function(){}
}

与之前的内容基本相同，但设置内容时没有使用自调用函数(为什么使用或不使用自调用函数？)。

那么...哪种方式最好？

Answer 1

我建议使用模块模式，其中页面被视为模块。网络上有很多关于 javascript 模块模式的信息。看看http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html .

我使用了 link 中的示例并对其进行了一些修改:

var MyApp = MyApp || {};
MyApp.PageX = (function () {
    var my = {},
        privateVariable = 1;

    function privateMethod() {
        // ...
    }

    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };

    return my;
}());

这里发生的是，定义了一组属性和方法并将其命名为 MyApp.PageX，MyApp 是全局 。所以这会起作用:

MyApp.PageX.moduleProperty; // 1
MyApp.PageX.moduleMethod();