Revision [15293]

This is an old revision of WritingObjectOrientedJavaScript made by AbydonianSoftware on 2013-07-25 10:00:56.

 

Writing Object Oriented JavaScript

Object Oriented JavaScript is a great way to organize your JavaScript source code, so that it is portable, readable, maintainable and encapsulated. This method of JavaScript development is a sort of self-imposed discipline, that makes JavaScript far more organized than it often is in web applications.

Object Oriented JavaScript Using Prototypes

In this example, we are going to show how to create a basic JavaScript module using prototypes. This is not meant to be an example that does anything; more it is meant to show how one would structure an object. We'll leave the function examples to other articles that document how to perform certain tasks.

The Constructor
The Constructor looks just like a function call, in this method of JavaScript coding. In the constructor, we can save any parameters we want to pass in, into the object's local variables and possibly kick off any initialization processes.

/**
  * MODULE: DataEditor
  * PURPOSE: PROVIDE A MEANS FOR EDITING THE DATA
  */

function DataEditor(imagePath) {
    this.imagePath = imagePath; // save imagePath to a local variable, inside of DataEditor
}


Member Functions
Member functions provide all of the functionality and are encapsulated in the object, meaning that you must instantiate the object and reference all functions from an instance of the object, in order to use the member functions. These member functions will have access to all variables encapsulated in the object.

Here is a simple example, where we define a function called init. Note that unlike typical JavaScript functions, we create a prototype attribute and then make that attribute equal to the function. Syntax errors in this very basic structure can be tricky to diagnose, if you're not accustomed to using this style of coding.

/**
  * FUNCTION: init
  * PURPOSE: INITIALIZE THE OBJECT
  */

DataEditor.prototype.init=function() {
    // run any initialization code here
};
/**
  * FUNCTION: display editor
  * PURPOSE: DISPLAY THE EDITOR TO THE CLIENT
  */

DataEditor.prototype.displayEditor=function() {
    // run the editor code here
}


Using the Object In Your Code

Using these objects can be very clean and simple. Rather than peppering your HTML with JavaScript functions, you simply instantiate the object and call member methods where needed in your HTML. There are actually ways of using layout managers, such that you can mostly avoid HTML; but for this example, we'll show how you would use JavaScript in some basic HTML.

<!DOCTYPE html>
<html>
<head><title>example</title></head>
<body>
<form>
 <input type="button" onclick="dataEditor.displayEditor()" value="Display Editor" />
</form>

<script type="text/javascript">
var dataEditor = new DataEditor();
dataEditor.init();
</script>
</body>
</html>




JavaScript
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki