Javascript Module pattern

Moduly su neoddelitelnou sucastou kazdej vacsej aplikacie a spravidla pomahaju udrzat kod oddeleny a organizovany.

Anonymous Closures

Module pattern zapuzdri verejne a privatne metody a premenne do anonymnej funkcie, ktoru hned pusti (IIFE).

(function () {
    // ...
}());

Import globalnych premennych

Kedykolvek chcete pouzit referenciu na premennu, Javascript hlada tuto premennu smerom nahor az ku globalnym premennym. V pripade priradenia postupuje rovnako, ak nieje premenna deklarovana, vytvori ju ako globalnu.

Anonymne funkcie poskytuju moznost importovat premennu, ako jej parameter:

(function ($) {
    // globalny jQuery je pristupny cez $
}(jQuery));

Vytvorenie modulu

Modul vytvorime za pomoci vratenej hodnoty anonymnej funkcie:

var testModule = (function () {

    // private

    var privatePremenna = 0;

    var privateMetoda = function(text) {
        console.log(text)
    };

    // public

    return {
        publicPremenna: "hodnota",

        publicMetoda: function(parameter) {
            privatePremenna++;

            privateMetoda(parameter);
        }
    };
}());

Je nutne poznamenat, ze Javascript nepozna pristupove modifikatory public alebo private, tak ako ich pozname z tradicnych jazykov. Tuto schopnost ale dokazeme simulovat pouzitim function scope. V ramci module pattern su premenne a metody deklarovane a dostupne len v ramci modulu za pomoci closure. Zatial co premenne a metody definovane v ramci vrateneho objektu su dostupne pre kazdeho.

Kedze je vratena hodnota objekt, mozeme kludne zvolit tento sposob:

var testModule = (function() {
    var my = {};

    // private
    var privatePremenna = "hodnota";
    var privateMetoda = function() {
        // ...
    };

    // public
    my.publicPremenna = "hodnota";
    my.publicMetoda = function() {
        // ...
    };

    return my;
}());

Priklady

Jednym z prikladov moze byt nakupny kosik. Jednoduchy kosik ma pole basket, ktore bude prechovavat polozky v kosiku a metody addItem, getTotal a getTotal, obsluhujuce kosik:

var basketModule = (function() {
    var basket = [];

    return {
        /**
         * Prida polozku
         *
         * @param item polozka
         */
        addItem: function(item) {
            return basket.push(item);
        },

        /**
         * Vrati pocet poloziek
         */
        getItemCount: function() {
            return basket.length;
        },

        /**
         * Vrati celkovu cenu
         */
        getTotal: function() {
            var itemCount = this.getItemCount();
            var total = 0;

            for(var i=0; i<itemCount; i++) {
                total += basket[i].price;
            }

            return total;
        }
    };
}());

// pridame polozky do kosika
basketModule.addItem({item: 'chlieb', price: 1.5});
basketModule.addItem({item: 'maslo', price: 1});

// vypise pocet poloziek
console.log(basketModule.getItemCount());

// vrati celkovu cenu
console.log(basketModule.getTotal());