JavaScript Encapsulation

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)

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  
}();   

 

 

Debugging an Android Cordova/Phone Gap App

This post is a guide to debug a Cordova / Phonegap App on Android.

I use DevExtreme for Mobile (Cordova / Phonegap) Development. Regardless if you use Inoic or some other Phonegap related framework the basic steps are the same.

I. Get The Tools: You will need either the Android Debug Bridge (ADB). You do not require the  Android Development Kit for Cordova Development.  Just install the Minimal ADB Fastboot. Use this download link and read more about it on XDA Developers. 

After you install the ADB Fastboot you have to start the server. First run a command window as an Admin and start the ADP Server.

cd C:\Program Files (x86)\Minimal ADB and Fastboot
adb start-server

II. Creating a Debuggable App:  In Visual Studio while using DevExtreme you must tick the checkbox for Debuggable, the build the app.  Note: You cannot publish an debuggable app to an app store. 

Create your mobile app and deploy it to your device.  You must have Debugging option enabled on your device.  After the install start the app up.

III. Chrome Remote Debugging:  Using the Chrome Browser and Remote Debugging Tools you can debug your Mobile App.

A. Dev Tools: In Chrome go to More Tools > Developers Tools.  When the console comes up go into More Tools > Remote Devices. 

B. Your Device: You should now see your device. In this case I am debugging a Meditation App I wrote called "Meditation Mind Machine." 

To start debugging click Inspect.

After clicking Inspect you will see any messages in the Console Area. You can access the features of your app in the browser, or by using the features on your device. 

Load Content to HTML Page from an External File

This is an example of loading an HTML page with content from an external file. This is a technique I have used on some sites and in some Word Press sites.

This script will read the contents from file1.html on the web service and load it to the content of a DIV on a page.

$(function() 
{	
	$.get( "file1.html", function( data ) {
		//$( "#Content" ).html( data ); //This Replaces  
		$( "#Content" ).append( data );   //This Appends  
 	}); 
});	

Click here for a link to the full working sample.