JavaScript is a very different language when it comes to Object Oriented Programming. Out of the box it doesn’t support class based OOP, but with some cleaver changes you will be able to add it. One thing look out for is how much memory each trick will use. When you use private vars/functions it will have to create individual versions for each instance of the object. Thus the memory requirements grow with each object. Whereas using the prototype structure will reuse the functions and properties as much as possible allowing each instance of the object to use much less memory. Here are a few common example class styles using ext.
Prototype style with no super/base class:
// This will act as the constructor
var MyClass = function(config) {
this.initialConfig = config;
}
// This will add the properties and functions
// to the function's prototype(class structure)
Ext.apply(MyClass.prototype, {
myProperty: "value",
myFunction1: function() {
// do Something
}
});
Prototype style with super/base class:
var MyClass = Ext.extend(Ext.grid.GridPanel, {
// The constructor is declared in the config object.
constructor: function(config) {
this.initialConfig = config;
// Call the super/base class constructor like this.
// Must use the call function to pass the proper scope.
MyClass.superclass.constructor.call(this, config);
},
myProperty: "value",
myFunction1: function() {
// do Something
}
});
Class with private fields and functions:
var MyClass = (function() {
var private1 = null;
function myPrivateFunction() {
// Do something
}
return Ext.extend(Ext.grid.GridPanel, {
// The constructor is declared in the config object.
constructor: function(config) {
this.initialConfig = config;
// Call the super/base class constructor like this.
// Must use the call function to pass the proper scope.
MyClass.superclass.constructor.call(this, config);
},
myProperty: "value",
myFunction1: function() {
// do Something
return private1;
},
myFunction2: function() {
// do Something
return myPrivateFunction();
}
});
})();
Static Class with private fields and functions that has super/base class:
return new (Ext.extend(Ext.grid.GridPanel, {var MyClass = (function() {
var private1 = null;
function myPrivateFunction() {
// Do something
}// The constructor is declared in the config object.
constructor: function(config) {this.initialConfig = config;
// Call the super/base class constructor like this.
// Must use the call function to pass the proper scope.
MyClass.superclass.constructor.call(this, config);},
myProperty: "value",
myFunction1: function() {
// do Something
return private1;
},
myFunction2: function() {
// do Something
return myPrivateFunction();
}
}))();
})();
Static Class with private fields and functions that has does not super/base class:
var MyClass = (function() {
var private1 = null;
function myPrivateFunction() {
// Do something
}
return {
myProperty: "value",
myFunction1: function() {
// do Something
return private1;
},
myFunction2: function() {
// do Something
return myPrivateFunction();
}
};
})();
You can mix and match these different style to match your needs for the object.