Дизайн JQuery JavaScript: самозаполняющаяся функция или литерал объекта?

Обычно я следую шаблону прототипа:

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

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

    memberTwo: function(param2)
    {
    }
}

Вы получаете нечто вроде «конструктора» (самой функции) и инкапсулированных «методов» и «полей».

Это проще для тех, кто привык к объектно-ориентированным языкам на основе классов :)

Я использую 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);

Теперь ясно, что вы можете удалить вызов YAHOO.namespace (), если не хотите использовать YUI, но это основная схема. Он использует буквальную нотацию объекта, но также позволяет определять частные свойства и методы.

Просто помните, что при вызове закрытых членов или обращении к закрытым переменным нужно ссылаться на них как на self.funcName(). Вы можете определить их вне объекта self, но тогда вы получите несоответствие повсюду в вашем объекте, где вы пытаетесь выяснить, является ли size_of() частным методом или определен глобально где-то еще.

Поскольку я уже некоторое время работаю с 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.

Надеюсь, это кому-то поможет.