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插件模式的组合。~~。我们最终使用自执行闭包模式。这在某些方面是有益的：

将代码保持在最低限度
强制执行行为与呈现分离
它提供了一个阻止命名冲突的闭包

这就是它的样子：

;(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()是私有方法还是在其他地方全局定义。< / p>

Answer 3

我通常遵循原型模式：

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

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

    memberTwo: function(param2)
    {
    }
}

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

习惯于基于类的OO语言的人更容易：）

JQuery JavaScript设计：自我执行功能还是对象文字？

3 个答案: