venerdì 22 luglio 2011

Declare a Class

Hi everyone!
Today I post a new feature of the framework, the Class object.
With this feature, you can create javascript objects like java-style.
Let's take a look at the code:

supported browser : Firefox,Google Chrome,Opera

/** Primitive **/
fujon.core.Primitive = function(){
  return function(){} ;
}
fujon.core.Primitive.prototype = {
  constructor: fujon.core.Primitive
}

/** Class **/
fujon.core.Class = function(object){
  if(object instanceof Object){
    var primitive = new fujon.core.Primitive() ;
    
     for(var property in object){
      var tag_property = property.split('$');
      if(tag_property.length > 1){
        if(tag_property[0] == 'static'){
          primitive[tag_property[1]] = object[property] ;
        }
      }else{
        if(property == 'constructor'){
          primitive = object.constructor
          primitive.prototype = {
            constructor: primitive
          }
          primitive.toString = function(){return '[object Class]';};
        }else if(property == 'extend'){
          primitive.super = {}
          for(var extend_property in object.extend){
            if(extend_property != 'constructor'){
              primitive.prototype[extend_property] = object.extend[extend_property] ;
            }
            primitive.super[extend_property] = object.extend[extend_property] ;
          }
        }else{
          primitive.prototype[property] = object[property];
        }
        if(property == 'toString'){primitive.toString = object[property];}
      }
     }
      return primitive ;
    }
}
fujon.core.Class.prototype = {
  constructor: fujon.core.Class,
  super:{},
  toString: function(){
    if(this.name){
      return this.name ;
    }else return '[object Class]';
  }
  
}

Well, now we see how to create a class in JavaScript, using the Class object and "extending" a second class with the first set!

var Class = fujon.core.Class ;

Point = new Class({
    constructor:function(x,y){
     this.x = x ;
     this.y = y ;
    },
    set:function(what,value){
      switch(what){
        case 'x' :
          this.x = value ;
          break;
        case 'y' :
          this.y = value ;
          break;
      }
    },
    get:function(what){
      switch(what){
        case 'x' :
          return this.x ;
        case 'y' :
          return this.y ;
      }
    },
    toString:function(){return '[object Point]';}
   });
   
   Point3 = new Class({
    constructor:function(x,y,z){
      // Call the super constructor !
      Point3.super.constructor(x,y);
      this.z = z ;
    },
    // Extend feature ! 
    // it's important that the statement "extend" is declared after the constructor
    extend: new Point(),
    // Override !
    set:function(what,value){
      if(what == "z"){
        this.z = value ;
      }else{
        Point3.super.set(what,value);
      }
    },
    // Override again !
    get:function(what){
      if(what == "z"){
        return this.z ;
      }else {
        return Point3.super.get(what);
      }
    },
    toString:function(){return "[object Point3]";}
   });

// Create a new Point3 object !
var p = new Point3(1,2,3);
// and try to see the three values
alert(p.get("x"));
alert(p.get("y"));
alert(p.get("z"));

Ok that's all folk today !
Next time I will speak of the forced-typing in javascript
Stay tuned!

5 commenti:

  1. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    RispondiElimina
  2. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    RispondiElimina
  3. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    RispondiElimina
  4. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    RispondiElimina
  5. David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
    Website: davidwalsh.name

    RispondiElimina