Шаблон модуля JavaScript с примером

Я не могу найти доступных примеров, показывающих, как два (или более) разных модуля подключаются для совместной работы.

Итак, я хотел бы спросить, есть ли у кого есть время, чтобы написать пример, объясняющий, как модули работают вместе.

ОТВЕТЫ

Ответ 1

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

Выражение немедленной функции (IIFE):

(function() {
      // Your code goes here 
}());

Есть два способа использования функций. 1. Объявление функции 2. Выражение функции.

Здесь используются функции выражения.

Что такое пространство имен? Теперь, если мы добавим пространство имен к приведенному выше коду, то

var anoyn = (function() {
}());

Что такое закрытие в JS?

Это означает, что если мы объявим какую-либо функцию с любой переменной scope/внутри другой функции (в JS мы можем объявить функцию внутри другой функции!), То она всегда будет считать эту область действия. Это означает, что любая переменная во внешней функции будет читаться всегда. Он не будет читать глобальную переменную (если есть) с тем же именем. Это также одна из целей использования шаблона модульного проектирования, позволяющего избежать конфликта имен.

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

Теперь мы применим эти три понятия, которые я упомянул выше, чтобы определить наш первый шаблон модульного дизайна:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

jsfiddle для кода выше.

Цель состоит в том, чтобы скрыть переменную доступность от внешнего мира.

Надеюсь это поможет. Удачи.

Ответ 2

Я бы порекомендовал кому бы то ни было войти в эту тему, чтобы прочитать бесплатную книгу Адди Османи:

"Изучение шаблонов проектирования JavaScript".

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Эта книга очень помогла мне, когда я начал писать более удобный JavaScript, и я все еще использую его как ссылку. Взгляните на его различные варианты модульных шаблонов, он объясняет их очень хорошо.

Ответ 3

Я думал, что я расскажу об этом выше, рассказывая о том, как объединить модули в приложение. Я читал об этом в книге doug crockford, но, будучи новичком в javascript, все это было немного загадочным.

Я исхожу из фона С#, поэтому добавила некоторую терминологию, которую я считаю полезной.

Html

У вас будет файл html верхнего уровня верхнего уровня. Это помогает думать об этом как о файле проекта. Каждый файл javascript, который вы добавляете в проект, хочет войти в это, к сожалению, вы не получаете поддержку этого инструмента (я использую IDEA).

Вам нужно добавить файлы в проект с тегами script следующим образом:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

Похоже, что сбрасывание тегов приводит к сбоям в работе - хотя это выглядит как xml, это действительно что-то с более сумасшедшими правилами!

Файл пространства имен

MasterFile.js

myAppNamespace = {};

что он. Это просто для добавления единой глобальной переменной для остальной части нашего кода, в которой вы можете жить. Вы также можете объявить здесь вложенные пространства имен (или в свои собственные файлы).

Модуль (ы)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

То, что мы делаем здесь, это назначение функции счетчика сообщений переменной в нашем приложении. Это функция, которая возвращает функцию, которую мы выполняем немедленно.

Основные понятия

Я думаю, что это помогает думать о верхней строке в SomeComponent как пространстве имен, где вы что-то объявляете. Единственное предостережение в этом - все ваши пространства имен должны сначала появиться в каком-то другом файле - это просто объекты, внедренные нашей переменной приложения.

Я только делал небольшие шаги с этим на данный момент (я рефакторинг некоторого нормального javascript из приложения extjs, чтобы я мог его протестировать), но это кажется довольно приятным, поскольку вы можете определить небольшие функциональные блоки, избегая при этом трясины 'this'.

Вы также можете использовать этот стиль для определения конструкторов, возвращая функцию, которая возвращает объект с набором функций и не вызывая его немедленно.

Ответ 4

Здесь https://toddmotto.com/mastering-the-module-pattern вы можете найти шаблон, подробно объясненный. Я бы добавил, что второе, что касается модульного JavaScript, - это структурирование вашего кода в нескольких файлах. Многие люди могут посоветовать вам здесь пойти с AMD, но я могу с уверенностью сказать, что в какой-то момент вы столкнетесь с медленным ответом на страницу из-за многочисленных запросов HTTP. Выход - предварительная компиляция ваших модулей JavaScript (по одному на файл) в один файл, следующий по стандарту CommonJS. Взгляните на образцы здесь http://dsheiko.github.io/cjsc/