SubscriptionAdvanced JS: Having Fun with JavaScript Design Patterns
Undeniable, a well design pattern is required when writing your own JavaScript libraries or frameworks, that could be used for personal or industry purpose. There are many design patterns can be found online which come together with demo or examples; different people, may have different taste of writing their own code.
Many developers are talking about design patterns. Well, to me, it really doesn’t matter what kind of design pattern you are using, as long as it’s readable, well-organized and adaptable as well as maintainable, it’s all fine.
I have recently played around with JS design pattern, as well. When deeper I delve into, JS surprises me more! I could say that, this is the only programming language (so far) can really make me feel excited and willing to spend my time on it. It’s worth.
So, what is the result I come out? Ok, here is an example I have written, which I consider it could be used for designing library or framework:
(function(){ var window = this || {}; //check on LIB object if( typeof LIB !== "object" ){ LIB = window; } //define alternate object //in case, LIB object is overwritten _LIB = LIB = window.LIB; /** MODULE ONE **/ LIB.ModuleOne = (function(){ //Add private function(s) in ModuleOne function privateFncOne(){ var localVar = "this is local variable in 'privateFncOne' funciton, ModuleOne"; alert(localVar); /* do more thing from here or, even add closures... */ } //object literal var coreOne = { propertyOne: "This is propertyOne's value", fncOne: function(){ this.text = "This is function resides in object literal from ModuleOne"; alert(this.text); //retrieve object var o = LIB.ModuleTwo.fncTwo(); if( typeof o === "object" ){ //call function o.greetFnc(); //display text alert(o.greetText); } } /* a block of code putting here... */ }//end core return coreOne; })(); /** MODULE TWO **/ LIB.ModuleTwo = (function(){ //Add private function(s) in ModuleTwo function privateFncTwo(){ var localVar = "this is local variable in 'privateFncTwo' function, ModuleTwo"; /* do more thing from here or, even add closures... */ } //object literal var coreTwo = { propertyOne: "This is propertyOne's value", fncOne: function(){ this.text = "This is function in object literal from ModuleOne"; alert(this.text); }, fncTwo: function(){ //return object literal return LIB.ModuleOne.fncOne.prototype.objectLiteral = { greetText : "Have a nice day!", greetFnc: function(){ alert("How is your day?"); } } } /* a block of code putting here... */ }//end core return coreTwo; })(); })(); //EXAMPLE OF CALLING FUNCTION /** Result: This is function resides in object literal from ModuleOne How is your day? Have a nice day! **/ LIB.ModuleOne.fncOne();
Basically, the core idea is to create an object, in this case, ‘LIB’ with two main modules, respectively. As you can find, there are private function(s), object literals or even to allow you add more functions/closures (or, whatever terminology you have? |o|), just inside the respective modules.
From the example, I have also shown you how to call one of the functions that resides in the first module. And therefore, retrieve following data that returned from the second module and so on. Some developers might call it as ‘Module Pattern‘, which was coined by Douglas Crockford, from Yahoo! Just somehow, the code might look a bit bulky.
Again, JavaScript is NOT a toy!
Should you have any feedback or comments, just feel free to post here for discussion. Happy JavaScripting!
Related posts:
