How to build minimum JavaScirpt app
First our mini app needs to have private parts encapsulated so that nobody will mess around there. Second, your app needs to have a public interface for commands so we can use it. We need to do simple model to start, so we can test it first and then we add some functinality piece by piece until it is ready. All this is possible to do with wrapper function.
Minimum (experimental) app looks like this:
var app = (function () { // app & private area start
var secret,
privateSetter = function (x) {
alert( "validating:" + x);
secret = x;
return true;
}; // private area end
return { // privileged area start
'get': function get () { // getter
return secret;
},
'set': function set (c){ // setter
return privateSetter (c);
}
}; // privileged area end
} () ) ; // app end
Lets go thru it part by part:
First there is variable app that contains the whole app inside it:
var app = ();
Then there is anonymous wrapper function, with again clauses that will execute it
function (){}()
Inside anonymous app function there is return {}; part which will give us two functions, get and set in an object, only they are visible outside of the object. This leaves everything else in function-object to private variables, so nobody can mess around with their values. Except get and set functions of course, that's why they are called privileged functions. PrivateSetter function will deliver the value to the private variable, so that we have important opportunity to validate it's value first. Now we just say so, actually do validate nothing, but this is the place where it happens someday near future, you know.
Notice that this function will return true when it is ready and done. We could easily change this so that it would return the old value instead. Or something else, like a length of string or array, or anything else we need, or so that it would not return anything.
Time to put it into test bench
So build the thing and try in browser if it works. It should.
app.set("This is my App!"); // validating:This is my App!
put(app.get()); // Message: This is my App!
Var secret is safe. If you try to read it straight from variable it will not happen. First write something into secret pocket of app, official way, with set handler.
app.set('ABRAKADABRA'); // validating:ABRAKADABRA
Then try to sneak it out, but without getter -handler.
alert("UGH:" + app.secret);
// UGH:undefined - Oh, no... can't get it ! It is hidden !
Next try to overwrite the value without setter -handler:
app.secret = "foo"; // There you have it, try to spell me now you...
And read it back...
var temp = app.secret = app['secret']; // can try both ways
alert("secret:" + temp); // secret:foo
/* What, foo?! Did I manage to overwrite it?!
Ha, who is the man now? Mama, I rule the universe! */
... but then after a while:
/* using official get -handler: */
alert("app.get:"+ app.get());
// app.get:ABRAKADABRA - Oh noooo, you fooled me ! You bastards...
What really happened here was that without the "official" setter handler, you just created (into the app -object) one more public variable with same name (secret) as original private variable, but because they actually are in different scope it is not that harmful at all. Original data was safe all the time in private area of object and if your app will only read it official way, there is no way you can go wrong here. You can store your phone number there and expect nobody to call you for a long time. Bad guys must be more clever to get your precious data now.
This is THE minimum app with JavaScript. Is there something missing?
Could we make some improvements... ? Let me know...
Learn more about strict mode on
next lesson.
