Что это за шаблон в javaScript и где я могу узнать больше об этом?

105
12

У меня есть коды, похожие на следующие:


 (function(MyHelper, $, undefined){

var selectedClass = "selected";

MyHelper.setImageSelector = function(selector) {
var container = $(selector);

setSelected(container, container.find("input:radio:checked"));
container.find("input:radio").hide().click(function() {
setSelected(container, $(this));
});
};

MyHelper.enableIeFix = function(selector) {
var container = $(selector);
container.find("img").click(function() {
$("#" + $(this).parents("label").attr("for")).click();
});
};

function setSelected(container, selected) {
container.find("label").removeClass(selectedClass);
selected.siblings("label").addClass(selectedClass);
}

}( window.MyHelper = window.MyHelper || {}, $))


Я новичок в JS, и мне интересно, является ли это определенным шаблоном в программировании javascript. Я определенно задаюсь вопросом, что означает последняя строка:


   }( window.MyHelper = window.MyHelper || {}, $))

Это шаблон модуля?

спросил(а) 2012-04-19T13:59:00+04:00 8 лет, 10 месяцев назад
1
Решение
61

Он расширяет глобальный объект MyHelper, когда он существует, в противном случае создайте новый. Jquery global передается и undefined указывается как аргумент, поэтому его можно сжать с помощью js minimizers.


Похоже на модульный шаблон. Также см:
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjquery

ответил(а) 2012-04-19T14:07:00+04:00 8 лет, 10 месяцев назад
95

Да, это в основном шаблон модуля.


Краткое описание того, как модули создаются с использованием шаблона модуля:


    Создайте область видимости модуля, как правило, с помощью выражения, вызванного немедленно вызываемой функцией (IIFE), чтобы создать закрытие. Это создает ваше "личное пространство" для вашего модуля, предотвращает глобальное загрязнение и сохраняет ваш код модульным и изолированным.


    Имейте пространство имен, чтобы присоединить ваши общедоступные методы. Разработчики имеют разные методы выполнения этой процедуры "вложения". Некоторые разработчики "вводят" объекты в модуль, а другие "возвращают" объект, который должен храниться в переменной. В любом случае, это то же самое.


В этом случае это "ручная" версия шаблона модуля


(function(MyHelper, $, undefined){

var selectedClass = "selected";

MyHelper.setImageSelector = function(selector) {};

function setSelected(container, selected) {}

}(window.MyHelper = window.MyHelper || {}, $))


В последней строке он немедленно вызывает вашу функцию и отправляет эти аргументы


(window.MyHelper = window.MyHelper || {}, $)

Это похоже на это, но без использования имен функций:


function anonymous(MyHelper, $, undefined){...}
anonymous(window.MyHelper = window.MyHelper || {}, $);

    Первый аргумент window.MyHelper = window.MyHelper || {} - это комбинация операций. Независимо от того, что возвращает эта операция, в аргументе MyHelper содержится модуль.


      || - это операция по умолчанию. Если значение, оставшееся от ||, является "ложным", тогда значение, принятое выражением "по умолчанию", соответствует значению справа. Таким образом, в вашем коде, если window.MyHelper не существует, то по умолчанию используется объект {}.


      При операции "по умолчанию" window.MyHelper будет назначен либо существующий window.MyHelper, либо если он не существует, новый экземпляр объекта {}


      Операции присваивания в JavaScript возвращают значения. Значение, возвращаемое операцией присваивания, - это значение, присвоенное переменной. Это также дает возможность для всей операции предоставить значение модулю.



    второй аргумент - это любой $ (я предполагаю jQuery?)


    третий аргумент не передается, а изнутри он undefined. это сделано так, поскольку, насколько я знаю, undefined является изменяемым. поэтому, чтобы иметь чисто undefined undefined, мы ничего не отправляем, и поэтому переменная undefined равна undefined.


Что делает этот код:


MyHelper.setImageSelector = function(selector) {};

был добавлен в MyHelper метод setImageSelector, и поскольку ваш MyHelper находится снаружи, каждый, кто его использует, теперь имеет метод MyHelper.setImageSelector().


другие функции и переменные внутри IFFE, которые не добавлены к MyHelper, вы называете членами "private". JavaScript имеет функциональную область действия, что означает, что он создает новую область описания каждой функции. Говоря простым языком, то, что внутри, может видеть снаружи, но снаружи не видно внутри. Это также один из способов не загрязнять глобальную область с помощью множества функций и переменных

ответил(а) 2012-04-19T14:19:00+04:00 8 лет, 10 месяцев назад
62

Это класс JavaScript. Подробнее о них вы можете узнать здесь:

http://javascript.about.com/library/bltut35.htm

ответил(а) 2012-04-19T14:03:00+04:00 8 лет, 10 месяцев назад
44

Анонимная функция немедленно вызывается/вызывается после ее определения, например


(
function(arg1,arg2){
}
)(xarg1,xarg2);

Последняя строка вызывает определенную анонимную функцию.
Аргументы вашей анонимной функции:


    window.MyHelper = window.MyHelper || {}    /* MyHelper глобальный объект или пустой объект, если он undefined */
    $/*   jQuery или Prototype. С jquery обычно это глобальный объект jQuery, чтобы избежать конфликтов с другими библиотеками */

Третий параметр анонимной функции " undefined" гарантирует, что никто не переопределяет или не изменяет тени undefined.


Это определяет безопасную функцию самозапуска в javascript.

ответил(а) 2012-04-19T14:23:00+04:00 8 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема