Latest Download

Other Available Package

Build your custom Savvy.UI

Custom Builder

Feel lost?

Check out these instructions.

SUI.JsClass Preview

May 16, 2008 – 2:58 pm by zaki

We would like to preview yet another new Extension for Savvy.UI which is SUI.Ext.JsClass or SUI.JsClass which allow you create Simple Class and Inheritance using JavaScript in more similar to how it’s done in PHP but with the limitation of JavaScript writing structure.

Some available features or limitation of this implementation:

  • All methods and properties for the Class Object are ONLY public
  • Inheritance is available but using ONLY extends
  • In case of extends being used and both Object have __construct function, only the child Class __construct will be called.
  • __destruct function is available and successfully delete all method and properties of the Object but doesn’t delete this.prototype methods

Let See an Example

// Declare Class Person
var Person = SUI.JsClass.create({
	// public property name
	name: "zaki",
	// public method getName
	getName: function() {
		SUI("body").first().insertion("p").text(this.name);
	},
	// public __construct
	__construct: function() {
		this.name = "Zaki";
	}
});
 
// Declare Class Student
var Student = Person.extend({
	// public __construct, overwrite Person.__construct
	__construct: function() {
		this.name = "Mior Muhammad Zaki";
		this.getName();
	},
	// public method setName, not inherit to super Class
	setName: function(n) {
		this.name = n;
	}
});
 
var Zaki = new Student(); // similar to $Zaki = new Student(); in PHP
Zaki.setName("crynobone"); // set Zaki.name = 'crynobone'
Zaki.getName(); // alert Zaki.name;
 
var Mior = new Person(); // similar to $Zaki = new Person(); in PHP
Mior.setName("Mior Khairuddin"); // return error: Mior.setName is not a function
Mior.getName(); // alert Mior.name (inherited from Person.name)

Check out the SUI.JsClass source code and SUI.JsClass demo page.

Update: Modify code to support Savvy.UI 0.1.2-ab1

Posted in Development, News |

3 Responses to “SUI.JsClass Preview”

  1. Had to change extends function to extend in order to make it work in Safari. Additionally you can also use

    var Student = SUI.JsClass.create({ ext: Person });
  2. [...] uses SUI.JsClass to create Class inheritence in JavaScript but it’s not very hard to understand it. Here an [...]

  3. [...] introduce in previous SUI.JsClass Preview entry, we are please with the capability of the SUI.JsClass or SUI.Ext.JsClass. Take a look at the [...]

Name (required)
E-mail (will not be published) (required)
Website
Message