Wiki source for WritingObjectOrientedJavaScript


Show raw source

====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.

%%(javascript)
/**
* 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.

%%(javascript)
/**
* 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.

%%(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">
// instantiate the DataEditor object and run the init() function
var dataEditor = new DataEditor();
dataEditor.init();
</script>
</body>
</html>
%%


----
[[JavaScript]]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki