Требуется помощь по шаблонам JavaScript: слабое расширение модулей

Отредактируйте для ясности - @Qantas94Heavy - я понимаю, что он "говорит" или должен делать, но я не понимаю, почему и, что более важно, как это работает:

Я читал расширенный учебник по шаблону модуля JS, и он дал этот пример:

var MODULE = (function (my) {
// add capabilities...

return my;
}(MODULE || {}));

Что меня беспокоит (и мне нужна ваша помощь), так это последнее утверждение:

(MODULE || {}));

У меня проблемы с пониманием синтаксических правил, которые делают это возможным. После некоторого поиска по ключевым словам, "Синтаксис модуля JavaScript" и "Сокращение шаблона модуля" я обнаружил, что до сих пор не совсем понимаю основы, стоящие за этим.

Кто-нибудь, пожалуйста, объясните или укажете мне правильное направление, чтобы понять это или получить более глубокое понимание?

С уважением, GGGI

Источник

2 ответа

Решение
(function(){

})();

является вызывающей себя анонимной функцией. В вашем случае он обрабатывает объектный параметр "my": он что-то делает с "my", а затем возвращает его обратно.

В вашем случае параметр "my", который получает функция - "(MODULE || {})".

&& и || операторы называются операторами короткого замыкания. || возвратит, если объект "MODULE" существует, объект "MODULE", в противном случае будет создан пустой объект для использования внутри функции. Функция будет делать то, что она делает с этим объектом, который станет возвращаемым объектом "MODULE".

Он работает путем создания замыкания: до тех пор, пока существует MODULE (он не является сборщиком мусора), так же как и самопризывающаяся анонимная функция вместе с ее состоянием во время присваивания. Это делает любые добавленные возможности постоянными.

Источник

Правая сторона называется непосредственной функцией. Чтобы понять, как это работает, давайте разберемся немного:

  1. (...)() мы можем вызвать функцию по имени, т.е. f(), Но вместо имени функции мы можем поместить любое выражение, которое разрешается, в переменную типа function. В нашем случае первый набор скобок просто включает в себя выражение. Второй набор - оператор вызова функции. В конечном счете, (f)() в точности соответствует f()

  2. Второй шаг - предоставить анонимную функцию в первом наборе скобок. Результат: (function(){})(), Анонимная функция идеально подходит для функции типа. Это приводит к тому, что функция создается, выполняется и отбрасывается в одном выражении.

  3. Второй набор скобок, который является оператором вызова функции, может принимать параметры внутри него, что в нашем случае MODULE || {}, Это выражение означает: если MODULE определяется, используйте его, в противном случае создайте новый пустой.

  4. Параметр передается анонимной функции в качестве аргумента my и анонимная функция возвращает, гм, my, Это вызывает анонимную функцию для оценки my и в действительности: (my)(MODULE || {}),

  5. Эффект MODULE является самодостаточным и не вызывает конфликтов имен с внешними переменными. В то же время он имеет доступ к внешним переменным.

Я надеюсь, что это очищает это:)

Источник

редко, особенно для больших проектов, мы собираемся иметь весь наш код в одном файле, сначала достаточно легко поместить ваш код в разные файлы и разбить их вместе в определенном порядке, однако это быстро становится неуправляемым, используя неизвестный шаблон, называемый "Потеряв приумножение", мы действительно можем воспользоваться преимуществами асинхронной среды выполнения javascript.

Чтобы реализовать этот шаблон, мы собираемся немного логики. Мы скажем, существует ли awesomeNewModule, а затем импортировали его, иначе awesomeNewModule - это просто новый объект:

    var awesomeNewModule = (function(){
        var exports={
            foo:5,
            bar:10
        };
        exports.helloMars = function(){
            console.log("Hello Mars!");
        };
        exports.goodbye = function(){
            console.log("Goodbye!");
        }
        return exports;
    }(awesomeNewModule || {}));

и здесь, поскольку мы используем ключевое слово exports, мы собираемся сказать, что awesomeNewModule - это экспорт внутри функции, теперь все эти значения экспорта {foo:5, bar:10} будут присвоены пустому объекту {}, если это был первый файл или он будет назначен и расширит awesomeNewModule, если этот файл был загружен после того, как модуль уже был создан.

var awesomeNewModule = (function(exports){
    var exports={
        foo:5,
        bar:10
    };
    exports.helloMars = function(){
        console.log("Hello Mars!");
    };
    exports.goodbye = function(){
        console.log("Goodbye!");
    }
    return exports;
}(awesomeNewModule || {}));

важно помнить, что если awesomeNewModule уже существует, то вы должны убедиться, что ни один из этих ключей {foo:5, bar:10} уже не существует в awesomeNewModule, а также ни один из этих методов: exports.helloMars, exports.goodbye, если да, то любой файл, загруженный последним, переопределит любые методы или значения, которые были названы так же в предыдущих файлах.

по этой причине вы не можете совместно использовать значения между модулями, если какой-либо аспект одного модуля зависит от другого, тогда вы не можете быть уверены, что мы зависим от этих значений, но в конце дня весь смысл написания модуля или кода что вы разделяете свое приложение на части, которые не зависят друг от друга, таким образом, если один модуль вводит критическую ошибку в приложение, это не влияет на скорость выполнения кода. Кроме того, есть способы обезопасить карты, чтобы убедиться, что один модуль не переопределяет шаблоны или методы, созданные из других модулей.

источник: мастер-класс по основам модульного шаблона в javascript
Источник
Другие вопросы по тегам