Шаблон модуля JavaScript з прикладом [закрито]

Я не можу знайти жодних доступних прикладів, що показують, як два (або більше) різних модулів з'єднані для спільної роботи.

Отже, я хотів би запитати, чи не встигає хтось написати приклад із поясненням того, як модулі працюють разом.

Для того, щоб підходити до схеми модульного дизайну, вам потрібно спочатку розібратися в цих поняттях:

Вираз функцій негайного виклику (IIFE):

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

Існує два способи використання функцій. 1. Оголошення функції 2. Вираз функції.

Тут використовується вираження функції.

Що таке простір імен? Тепер, якщо ми додамо простір імен до вищевказаного фрагмента коду

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

Що таке закриття в JS?

Це означає, що якщо ми оголосимо будь-яку функцію з будь-якою змінною сферою / всередині іншої функції (в 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 для наведеного вище коду.

Мета - приховати змінну доступність від зовнішнього світу.

Сподіваюся, це допомагає. Щасти.

Я б дуже рекомендував усім, хто зайнявся цим предметом, прочитати безкоштовну книгу Адді Османі:

"Вивчення шаблонів дизайну JavaScript".

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

Ця книга мені надзвичайно допомогла, коли я починав писати більш доступний JavaScript, і я все ще використовую його як довідник. Погляньте на його реалізацію різних моделей, він дуже добре їх пояснює.

Я подумав, що розширюся на вищезгадану відповідь, поговоривши про те, як ви вбудовуєте модулі разом у додаток. Я читав про це в книзі Doug Crockford, але, будучи новим у JavaScript, все це було ще трохи загадково.

Я походжу з фону ac #, тому там я додав термінологію, яку я вважаю корисною.

Html

У вас буде html-файл kindof верхнього рівня. Це допомагає мислити це як файл вашого проекту. Кожен файл JavaScript, який ви додаєте до проекту, хоче зайнятися цим, на жаль, ви не отримуєте для цього інструментальної підтримки (я використовую IDEA).

Вам потрібно додати файли до проекту з такими тегами скрипту:

        <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, тому я можу перевірити його), але це здається досить приємним, оскільки ви можете визначити невеликі функціональні одиниці, уникаючи при цьому тріску " ' .

Ви також можете використовувати цей стиль для визначення конструкторів, повертаючи функцію, яка повертає об'єкт із колекцією функцій, а не викликає його негайно.

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

Ви можете знайти модуль шаблона JavaScript тут http://www.sga.su/module-pattern-javascript/