I have been writing so much more JavaScript /jQuery the last couple of years with the boom of HTML5.
These newer Websites and Mobile Apps (Hybrid Apps) use JavaScript at the core. The Hybrid Apps are basically 100% code from JavaScript even the data layers and entities.
I have created jQuery plug-ins in the past, but more and more now I approach my code by encapsulating JavaScript. This is required to create a good separation between all the JavaScript in modern apps to avoid any collisions.
There are two approaches I have been using to create Classes in JavaScript to Encapsulate code. These "classes" in JavaScript can be setup as objects you instantiate or as static JavaScript classes.
The following Screen Shot is a Test HTML Page to test calling JavaScript Objects and Named Function Expressions. (HTML File Attached) Encapsulation.html (4.14 kb)
![](../../../../../imagead3c.html?picture=/2016/JavaScript-ScreenShot.png)
I. JavaScript Objects: Just like in C# or Java create an object from a JavaScript "Class". This way you can instantiate an instance of this class.
var myUtil = new utilityObj();
var returnVal = myUtil.getMessage(testValue);
//------------------------------------------
// JavaScript Objects (Instantiated Class)
//------------------------------------------
function utilityObj() {
var localValue;
//-----------------------------
// Get Message Public
//-----------------------------
this.getMessage = function(value)
{
//set private value
localValue = value;
return getPrivateMessage();
}
//-----------------------------
// Get Message Private
//-----------------------------
function getPrivateMessage()
{
return localValue;
}
}
II. JavaScript Named Functions: I like to think of these as "Static Classes" for JavaScript. You can call the functions in this class without instantiating an instance of the JavaScript class.
utility.setMessage(testValue);
//---------------------------------------------
// Named Function Expressions (Static Class)
//---------------------------------------------
var utility = function () {
var value = "Default Message";
function runPrivateFunc()
{
appendToDiv('runPrivateFunc()', '');
}
//Public Functions Here
return {
//-----------------------------
//Set Message Function
//-----------------------------
setMessage : function (val) {
value = val;
appendToDiv('Exp Test A Set:', val);
},
//-----------------------------
//Get Message Function
//-----------------------------
getMessage : function () {
return value;
}
}; // End Return
}();