Skip to main content

Learning Dojo: Defining Classes with dojo.declare

JavaScript doesn't explicitly include the concept of classes, yet the core language can be used to build object systems that work similarly to those found in languages that include native support for object-oriented programming(Java, Ruby and the rest).

Building a calss definition system is a lot of work. Fortunately, Dojo does this for you. dojo.declare defines class definition machinery, complete with single-inheritance, mixins, two-phase construction, and several other features.

Since javaScript is a dynamic language, it can generate code on the fly that can be consumed immediately.

The way using in JavaScript:
 A good understanding of core JavaScript language concepts is required to use Dojo's class definition machinery effectively. Let's review a few concepts before start.

Prototypes and prototypal Inheritance.

Every object in JavaScript includes a reference to anther object termed the first object's prototype. Since the prototype is another object itself, it also contains a reference to its prototype. This forms a chain of objects. The chain terminates with the prototype for the built-in Object type. Although you can't access an object's prototype directly as if it were an ordinary property, we'll show an object's prototype as the property _PROTO_ when we draw diagrams.

When a property of an object is read. JavaScript looks for the property in the object. If not found, JavaScript then looks in the object's prototype, the protype's prototype, and so on, up the prototype chain until the property is found or the chain is exhausted.

Since a method is just a property that happens to be a function, this is how method dispatching occurs, and this system is called prototypal inheritance.

This explanation does not apply when a property is written. Whean a property is written to an object, it is automatically created if it does not already exist. Notcie that looking up a method is a read-only operation even if executing the method found results in changing the contents of the object.

An object's prototype reference is set when it is created, and there is no way to change this reference for the lifetime of the object. Since there are two ways to create objects in JavaScript, there are two ways to set an object's prototype reference. First, every object created by an object literal has its prototype reference set to the prototype of the built-in type Object:
var o1 = {};
var o2={};
var o3 = new Object();
// o1, o2 and o3 all have the same prototype object

Second, every object created by the keywork new combined with a constructor function has its prototype reference set to the prototype property of the constructor function:
var p1 = {};
function SomeConstructor() {}
SomeConstructior.prototype = p1;
SomeConstructor.prototype.constructor = SomeConstructor;

var o1 = new SomeConstructor();
var o2 = new SomeConstructor();
// o1 and o2 have the same prototype object p1

Here's the punch line:

  • Class hierarchies are simulated in JavaScript by building prototype chains.
  • Class instances are created by constructor functions that hold references to these prototype chains in their prototype properties.

And dojo.declare builds these prototype chains and constructor functions for us. Finally, here are a few key terms,

  • Object: An instance of the JavaScript type Object which is an area of memory that holds values for a set of properties
  • instance: Synonym for an object
  • property: A named storage location contained by an object
  • method : A property that references a function
  • class: An abstract notion of a set of objects that contain the same properties and define the same semantics for each contained property
  • type: synonym for a class
  • object space: A set of objects that was created as a result of executing some code.
Example:
dojo.declare(
//the name of the constructor function (class) created...
"Shape" ,

//this is where the superclass (if any) goes...
null,

//this object contains everything to add to the new class's prototype...
{
 //default property values can go in prototype...
color: 0,

//here is the single prototype method...
setColor: function(color){
 this.color= color;
}
}
);

Now that Shape is defined, we can use it:
var s = new Shape();

s.setColor(0x0000FF);

Define subclass:
dojo.declare(
"Rectangle" , //classname...
Shape, //superclass: Rectangle inherits from Shape...

//props hash...
{
//default values for l, w...
length: 0,
 width: 0,

constructor: function(l, w) {
this.length= l || this.length;
this.width= w || this.width;
 },

//these go in the prototype for Rectangle...
setLength: function(l) {
this.length= l;
 },

setWidth: function(w) {
this.width= w;
},

area: function() {
return this.length * this.width;
}
}



Comments

Popular posts from this blog

Quicksort implementation by using Java

 source: http://www.algolist.net/Algorithms/Sorting/Quicksort. The divide-and-conquer strategy is used in quicksort. Below the recursion step is described: 1st: Choose a pivot value. We take the value of the middle element as pivot value, but it can be any value(e.g. some people would like to pick the first element and do the exchange in the end) 2nd: Partition. Rearrange elements in such a way, that all elements which are lesser than the pivot go to the left part of the array and all elements greater than the pivot, go to the right part of the array. Values equal to the pivot can stay in any part of the array. Apply quicksort algorithm recursively to the left and the right parts - the previous pivot element excluded! Partition algorithm in detail: There are two indices i and j and at the very beginning of the partition algorithm i points to the first element in the array and j points to the last one. Then algorithm moves i forward, until an element with value greater or equal

Live - solving the jasper report out of memory and high cpu usage problems

I still can not find the solution. So I summary all the things and tell my boss about it. If any one knows the solution, please let me know. Symptom: 1.        The JVM became Out of memory when creating big consumption report 2.        Those JRTemplateElement-instances is still there occupied even if I logged out the system Reason:         1. There is a large number of JRTemplateElement-instances cached in the memory 2.     The clearobjects() method in ReportThread class has not been triggered when logging out Action I tried:      About the Virtualizer: 1.     Replacing the JRSwapFileVirtualizer with JRFileVirtualizer 2.     Not use any FileVirtualizer for cache the report in the hard disk Result: The japserreport still creating the a large number of JRTemplateElement-instances in the memory        About the work around below,      I tried: item 3(in below work around list) – result: it helps to reduce  the size of the JRTemplateElement Object        

Stretch a row if data overflows in jasper reports

It is very common that some columns of the report need to stretch to show all the content in that column. But  if you just specify the property " stretch with overflow' to that column(we called text field in jasper report world) , it will just stretch that column and won't change other columns, so the row could be ridiculous. Haven't find the solution from internet yet. So I just review the properties in iReport one by one and find two useful properties(the bold  highlighted in example below) which resolve the problems.   example: <band height="20" splitType="Stretch" > <textField isStretchWithOverflow="true" pattern="" isBlankWhenNull="true"> <reportElement stretchType="RelativeToTallestObject" mode="Opaque" x="192" y="0" width="183" height="20"/> <box leftPadding="2"> <pen lineWidth="0.25"/>