Javascript Шаблони - Module Pattern

Модулите са основна част във всяка програмна архитектура и чрез тях кодът се поддържа организиран. В JavaScript има няколко начина за имплементация на модули:

• чрез модулен шаблон
• чрез обектен литерал
• чрез AMD модули
• чрез CommonJS модули
• чрез ECMAScript 6 модули

Модулният шаблон е базиран на обектния литерал, затова нека разгледаме отново какво точно значи това.

Обектни литерали

Чрез обектния литерал, обектът е представен като група от една или повече двойки име/стойност, обвита в къдрави скоби:

// Дефиниране на обекта
var myObject = {
    exampleKey: exampleValue,
    'anotherKey': function() {
        //...
    }
};

Обектните литерали не се нуждаят от ключовата дума new за да бъдат инстанциирани. Извън обекта, нови стойности могат да се добавят по следния начин:

myObject.property = 'PropertyValue';

Модулен Шаблон

Модулният шаблон предлага изолирани(частни) и публични енкапсулации на класовете.

В JavaScript, модулният шаблон ни дава възможност да създаваме публични и частни методи и променливи в един обект, като по този начин предпазваме/скриваме част от кода от глобалният scope. Това намаля вероятността имената на различни функции да съвпаднат една с друга.

Поверителност

Модулният шаблон енкапсулира кода в отделен scope, като по този начин се предотвратяват “изтичания” в глобалния scope.

Пример за модулен шаблон:

// Дефинираме обекта в IIFE
var myModule = (function(){
    'use strict';

    // Изолирана(частна) променлива, която не може да бъде достъпена отвъд scope-a
    var counter = 0;

    // Публични методи (API) на обекта
    return {
        incrementCounter: function() {
            counter++;
        },
        resetCounter: function() {
            counter = 0;
        },
        showCounter: function() {
            return counter;
        }
    }
    
}());

Вариации на модулния шаблон

Import Mixins

Този вариант на шаблона представя как глобални обекти(jQuery, Underscore) могат да бъдат подавани като аргументи на модула и използвани в него.

var myModule = (function(jQ, _) {
    'use strict';

    var privateMethodJQ = function() {
        jQ('.selection').addClass('active');
    }

    var privateMethodUnderscore = function() {
        return (_.min([1,23,4,545,7,2,2]);
    }

    return {
        publicMethod: function() {
            privateMethodJQ();
            consolel.log(privateMethodUnderscore());
        }
    }
}(jQuery, _))

Експорти

Този вариант ни позволява да създадем обект, който да приеме глобални и локални променливи и методи:

var myModule = (function(){
    'use strict';

    // Модулният обект
    var module = {}

    privateVariable = 'Hello!';

    privateMethod = function() {
        return 42;
    }

    module.publicMethod = 'PublicValue';
    module.publicMethod = function() {
        return privateVariable + ' ' + privateMethod();
    }

    return module;
}());

Предимства

На първо място, модулния шаблон позволява за пишем изчистен и организиран код. Друго голямо предимство е, че само публичните методи и променливи в модула имат достъп до изолираните части. Всяка външна среда няма достъп до тях.

Недостатъци

Когато искаме да променим видимостта на дадена променлива или метод, трябва да минем навсякъде, където тази стойност е използвана и да направим дадената промяна.

Друг недостатък е, че не могат да се пишат unit тестове за частните методи и променливи. Частните променливи и обекти също не могат да се променят и модифицират извън самият модул.

Обобщение (TL;DR)

• Модулният шаблон е базиран на обектния литерал
• В JavaScript, модулният шаблон ни дава възможност да създаваме публични и частни методи и променливи само с един oбект
• Модулният шаблон енкапсулира кода в отделен scope, като по този начин се предотвратява “изтичания” в глобалния scope
• Можем да добавяме глобални обекти към отделните модули и да ги използваме. Подаваме ги като аргументи.