JQuery JavaScript 设计：自执行函数还是对象字面量？ [关闭]

Question

我很好奇在构建封装代码块时是否有任何与 JQuery 相关的最佳实践。

通常，当我构建一个页面时，我喜欢将该页面中使用的函数封装在一个对象中。这允许我在构建应用程序时进行一些封装。没有什么比看到包含一堆这样的 JavaScript 文件更让我讨厌的了

function doSomethingOnlyRelevantOnThisPage() {
    // do some stuff
}

这会导致设计混乱，并不能很好地封装功能。

通常在许多框架中，都有一个标准用于执行这种封装。

在 Mootools 中，他们偏爱 Object Literal Notation：

var Site = {        
    // properties and methods
}

在 YUI 中，他们偏爱自执行函数符号：

(function() { // properties and methods })()

第二个例子的好处是创建了一个闭包，因此允许您定义私有属性和方法。

我的问题是：是否有任何 JQuery 爱好者有任何最佳实践来创建这些干净封装的结构？使用它们的理由是什么？

Answer 1

由于我使用 jQuery 已经有一段时间了，我决定采用一种适合我的标准模式。

它是 YUI 模块模式和一些 jQuery 插件模式的结合。。我们最终使用了自执行闭包模式。这在几个方面是有益的：

1. 它将代码保持在最低限度
2. 它强制将行为与表示分离
3. 它提供了一个防止命名冲突的闭包

这就是它的样子：

;(function($) {        
    var myPrivateFunction = function() {
    };

    var init = function() {
        myPrivateFunction();
    };

    $(init);
})(jQuery);

我们意识到，与 YUI 模块模式类似，分配函数执行的结果会暴露可能从表示代码中调用的代码。我们想防止这种情况发生，所以这种模式适合。

当然，我们可以内联编写 init 方法，而无需为函数定义变量。我们一致认为明确定义 init 函数可使代码对读者更清晰。

如果我们想在页面/外部 js 文件之间共享函数会发生什么？我们只是简单地挂钩到 jQuery 提供的用于扩展 jQuery 对象本身的现有机制 - 扩展函数。

如果函数是静态的，我们使用 $.extend，如果它们对包装集进行操作，我们使用 $.fn.extend 函数。

希望这对某人有所帮助。

Answer 2

我在开发时使用 YUI 和 jQuery（YUI 小部件和一些便利功能，jQuery 选择器和 javascript“扩展”），我使用的通用 javascript 模板是这样的：

/*global YAHOO, $ */

// Create the public-scope accessable namespace for this page
YAHOO.namespace('Project');

YAHOO.Project.page = function() {
    // Private members

    var self = {};

    // Public members
    var pub = {};

    pub.init = function() {

    };

    return pub;
} ();

// When the DOM is loaded, initialize this module
$(document).ready(YAHOO.Project.page.init);

现在很明显，如果您不想使用 YUI，可以删除 YAHOO.namespace() 调用，但这是基本大纲。它使用对象字面量表示法，但也允许您定义私有属性和方法。

请记住，在调用私有成员或引用私有变量时将它们引用为self.funcName()。您可以在 self 对象之外定义它们，但是在您的对象中到处都会出现错误，您试图确定 size_of() 是私有方法还是在其他地方全局定义。

Answer 3

我通常遵循原型模式：

MyFunction = function(param1, param2)
{
   this.property1 = param1;
   // etc.
}

MyFunction.prototype =
{
    memberOne: function(param1)
    {
       // ...
    },

    memberTwo: function(param2)
    {
    }
}

你会得到一个“构造函数”（函数本身）和封装的“方法”和“字段”。

对于习惯于基于类的 OO 语言的人来说更容易:)