Design pattern 4
/*
Metode 4: Module pattern i full vigør. Har et internt og et eksternt objekt
hvor det siste returneres og hvor egenskapene til denne kan kalles fra
utsiden. Fordelen med denne er at alle verdier settes på de samme stedene
og HTML-elementer blir gjort om til jquery-objekter på samme sted. På store
script er dette en fordel da det er mer "type-safe".
*/
var MyModule = (function ($) {
'use strict'
// Modulen har to variabler, en public og en private.
var app, _private;
// All kode i _private er internt og kan ikke kalles fra utsiden. Det er
// her allt det "spennende" gjøres.
_private = {
_config: {
alertSettings: {
text: "OK"
}
},
alertOK: function () {
// Hvis det er satt en verdi utenifra skal denne brukes, hvis ikke
// brukes verdien fra den lokale variablen.
var outsideValue = app.settings.accessibleVariable;
if (outsideValue === null) {
alert(_private._config.alertSettings.text);
} else {
alert(outsideValue);
}
}
};
// App returneres nederst. Alle egenskapene kan kalles fra utsiden.
// settings: Verdier som skan settes fra utsiden, f.eks. verdier som kommer
// fra serverside kode.
// init: Hovedfunksjon som kaller de andre funksjonene.
// _cache: Cacher alle jQuery objekter for senere bruk.
// _bind: Binder eventer til jQuery objektene hvor det trengs.
app = {
settings: {
accessibleVariable: null
},
init: function () {
this._cache();
this._bind();
},
_cache: function () {
this.alertButton = $("#alertButton");
},
_bind: function () {
this.alertButton.click(function () {
_private.alertOK();
});
}
};
return app;
})(jQuery);
MyModule.settings.accessibleVariable = "Verdi utenifra";
MyModule.init();