|
|
Posted on 2007-06-20 12:12 沧桑雨迢迢 阅读(1088) 评论(2) 编辑 收藏 网摘 所属分类: Javascript 、 Asp.net Ajax
在javascript中,函数其实就是"类",创建一个类就是写一个函数,创建一个类的实例也相当简单,如下示例:
 //class
  var MyClass = function(firstname,lastname) {
 this._firstname = firstname;
this._lastname = lastname;
this._name = this._firstname + ":" + this._lastname;
 }
MyClass.prototype = {
_firstname: null,
_lastname: null,
_name: null,
  get_name: function(){
return this._name;
 },
set_firstname: function(value){
this._firstname = value;
},
set_lastname: function(value){
this._lastname = value;
}
}
//instance
var m = new MyClass("chun","rong");
alert(m.get_name()); 在本例中, var m = new MyClass("chun","rong");时,传递进参数,在MyClass函数体内,直接进行了"对象状态初始化"操作,如"this._name = this._firstname + ":" + this._lastname;",请着重注意"对象状态初始化"这个词语.
给类引入"initialize"初始化操作这个概念,有什么好处和必要呢?下面演示引入"initialize"概念后,上面的示例应该怎么写:
//class
var MyClass = function(firstname,lastname){
this._firstname = firstname;
this._lastname = lastname;
}
MyClass.prototype = {
_firstname: null,
_lastname: null,
_name: null,
get_name: function(){
return this._name;
},
set_firstname: function(value){
this._firstname = value;
},
set_lastname: function(value){
this._lastname = value;
},
initialize: function(){
this._name = this._firstname + ":" + this._lastname;//对象初始化操作.
}
}
//instance
var m = new MyClass("chun","rong");
alert(m.get_name());//当没有进行initialize操作时,对象的状态不能得到很好的初始化
m.initialize();//初始化
alert(m.get_name());
要理解这段js,就必须要区分:
this._firstname = firstname;
this._lastname = lastname;
和
this._name = this._firstname + ":" + this._lastname;//对象初始化操作.
这两段代码的"逻辑意义".
第一段代码是"赋值"逻辑代码,第二段代码,才是真正影响MyClass对象实例逻辑行为的代码.
"赋值"逻辑代码是可有可无的,这要看对象的某个属性对对象状态/行为的影响程度!
下面请看这段js:
function setProperties(component, properties){
for (var name in properties) {
var val = properties[name];
var setter = component["set_" + name];
if (typeof(setter) === 'function') {
setter.apply(component, [val]);
}
}
}
//class
var MyClass = function(){
}
MyClass.prototype = {
_firstname: null,
_lastname: null,
_name: null,
get_name: function(){
return this._name;
},
set_firstname: function(value){
this._firstname = value;
},
set_lastname: function(value){
this._lastname = value;
},
initialize: function(){
this._name = this._firstname + ":" + this._lastname;//对象初始化操作.
}
}
//instance
var m = new MyClass();
setProperties(m,{firstname:"fan",lastname:"rong"});
m.initialize();//初始化
alert(m.get_name());
这里的MyClass类的构造器,干脆去除掉了参数,而"对象状态初始化"所必须的基本属性,则必须得到提供.这里通过setProperties(m,{firstname:"fan",lastname:"rong"})方法得到实现.当然,如果确实相当重要不可或缺,可以在类的构造器内直接指定!比如:MS AJAX的control,有一个element属性就是不可或缺的.
这样的写法,有什么好处?对,关键就在于"好处"!
好处其实已经够明显的了.对比前后的示例,你就会发现最后的示例,MyClass类最清晰简单,代码量最少!
MS AJAX就是采用了这样的组件类设计方式.它提供了一个$create方法,来支持从Sys.Component基类派生的类的所有对象实例创建.下面实现我们自己的一个简单的$create:
function setProperties(component, properties){
for (var name in properties) {
var val = properties[name];
var setter = component["set_" + name];
if (typeof(setter) === 'function') {
setter.apply(component, [val]);
}
}
}
var $create = function(type,properties){
var component = new type();
setProperties(component,properties);
component.initialize();//初始化
return component;
}
//class
var MyClass = function(){
}
MyClass.prototype = {
_firstname: null,
_lastname: null,
_name: null,
get_name: function(){
return this._name;
},
set_firstname: function(value){
this._firstname = value;
},
set_lastname: function(value){
this._lastname = value;
},
initialize: function(){
this._name = this._firstname + ":" + this._lastname;//对象初始化操作.
}
}
//instance
var m = $create(MyClass,{firstname:"fan",lastname:"rong"});
alert(m.get_name());
Feedback
相当的强悍。呵呵。
MSAJAX有一些是根据JS的特点演化出来的模式，适可而止。
|