私有范围Javascript的最佳方式？

Question

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

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

我认为这不是最佳的或根据Javascript最佳做法。我需要的是页面功能的私有范围，不需要在外部调用。

我见过很多不同的方法：

jQuery source

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

使用window作为参数自行调用的函数，然后在其上设置应用程序的functionality对象。

Codemirror source

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

与jQuery非常相似，但是通过使自调用函数首先返回某些内容，在window上间接设置功能对象。

This question

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

创建局部变量（而不是window），并在自调用函数内设置其内容（为什么？）

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();