alzui类封装的演化过程(形式化阶段)

1、原始的基于构造函数的类模拟方式，这是JS语法默认支持的创建类的方式

function ClassA(){
	this.a = "a";
	this.b = "a";
	this.c = "a";
	this.d = "a";
	this.e = "a";
	this.f1 = function(){};
	this.f2 = function(){};
	this.f3 = function(){};
	this.f4 = function(){};
}

2、基于原型的类模拟方式，也是JS语法默认支持的

function ClassA(){
	this.a = "a";
	this.b = "a";
	this.c = "a";
	this.d = "a";
	this.e = "a";
}
ClassA.prototype.f1 = function(){};
ClassA.prototype.f2 = function(){};
ClassA.prototype.f3 = function(){};
ClassA.prototype.f4 = function(){};

3、简化ClassA.prototype的书写，目的只是为了省键盘

function ClassA(){
	this.a = "a";
	this.b = "a";
	this.c = "a";
	this.d = "a";
	this.e = "a";
}
var _p = ClassA.prototype;  //p是prototype的首字母
_p.f1 = function(){};
_p.f2 = function(){};
_p.f3 = function(){};
_p.f4 = function(){};

4、松散的类方法定义集中到一个函数classImp中，隐藏变量_p

function ClassA(){
	this.a = "a";
	this.b = "a";
	this.c = "a";
	this.d = "a";
	this.e = "a";
}
function classImp(){
	var _p = ClassA.prototype;
	_p.f1 = function(){};
	_p.f2 = function(){};
	_p.f3 = function(){};
	_p.f4 = function(){};
}
classImp();

5、类具体实现函数classImp匿名化，取消不必要的全局变量

function ClassA(){
	this.a = "a";
	this.b = "a";
	this.c = "a";
	this.d = "a";
	this.e = "a";
}
(function(){
	var _p = ClassA.prototype;
	_p.f1 = function(){};
	_p.f2 = function(){};
	_p.f3 = function(){};
	_p.f4 = function(){};
})();

6、参数传递_p变量

function ClassA(){
	this.a = "a";
	this.b = "a";
	this.c = "a";
	this.d = "a";
	this.e = "a";
}
(function(_p){
	_p.f1 = function(){};
	_p.f2 = function(){};
	_p.f3 = function(){};
	_p.f4 = function(){};
})(ClassA.prototype);

7、引入apply，取消_p变量

function ClassA(){
	this.a = "a";
	this.b = "a";
	this.c = "a";
	this.d = "a";
	this.e = "a";
}
(function(){
	this.f1 = function(){};
	this.f2 = function(){};
	this.f3 = function(){};
	this.f4 = function(){};
}).apply(ClassA.prototype);

8、定义构造函数替代方法_init,封装属性声明代码
_init方法名字来源自java class字节码文件中每个类的构造函数的的名字都是_init
这一步里面实际的构造函数被架空，慢慢被演化为一个傀儡了:)

function ClassA(){
	this._init();
}
(function(){
	this._init = function(){
		this.a = "a";
		this.b = "a";
		this.c = "a";
		this.d = "a";
		this.e = "a";
	};
	this.f1 = function(){};
	this.f2 = function(){};
	this.f3 = function(){};
	this.f4 = function(){};
}).apply(ClassA.prototype);

9、构造函数改进，实现参数传递
这样new一个类的时候，参数能够正常传递给_init这个模拟的构造函数了

function ClassA(){
	this._init.apply(this, arguments);
}
(function(){
	this._init = function(p1, p2){
		this.a = "a";
		this.b = "a";
		this.c = "a";
		this.d = "a";
		this.e = "a";
	};
	this.f1 = function(){};
	this.f2 = function(){};
	this.f3 = function(){};
	this.f4 = function(){};
}).apply(ClassA.prototype);

10、建立基础支持代码，类形式化定义最终稳定下来

function _class(className, classImp){
	var clazz = (function(){
		return function(){
			this._init.apply(this, arguments);
		};
	})();
	window[className] = clazz;
	classImp.apply(clazz.prototype);
}
//----下面两个函数是上面的代码改进后的形式
function __newClass(){
	return function(){  //<--这就是那个傀儡!
		this._init.apply(this, arguments);
	};
}
function _class(className, classImp){
	var clazz = __newClass();
	window[className] = clazz;
	classImp.apply(clazz.prototype);
}

_class("ClassA", function(){
	this._init = function(p1, p2){
		this.a = "a";
		this.b = "a";
		this.c = "a";
		this.d = "a";
		this.e = "a";
	};
	this.f1 = function(){};
	this.f2 = function(){};
	this.f3 = function(){};
	this.f4 = function(){};
});

类形式化定义，至此完成。以后可能会提供框架代码更深层的演化细节，让大家能够更好地了解alzui框架的完整的演化过程。

评论

5 楼 wmingjian 2010-08-17  

ymdf 写道

明鉴 能帮我看下这样封装的缺点吗?

function _class($o) {
	var _t = function() {
		this.init.apply(this, arguments);
	};
	$o ? _t.prototype = $o : false;
	return _t;
};
var myclass = _class({
	init:function(){},
	f1:function(){},
	f2:function(){},
	f3:function(){}
});

说实话，看不出来这种极简化的封装的作用

4 楼 ymdf 2010-07-21  

明鉴 能帮我看下这样封装的缺点吗?

function _class($o) {
	var _t = function() {
		this.init.apply(this, arguments);
	};
	$o ? _t.prototype = $o : false;
	return _t;
};
var myclass = _class({
	init:function(){},
	f1:function(){},
	f2:function(){},
	f3:function(){}
});

3 楼 jessige_27 2010-06-07  

wmingjian 写道

jessige_27 写道

代码里有这样一段

var clazz = (function(){
    return function(){
        this._init.apply(this, arguments);
    };
})();

实在想不通 这和下面这么写有什么区别

var clazz = function(){
    this._init.apply(this, arguments);
};

和你说的产不多，是多余的。
但是第10个步骤里面其实是两个步骤的简化，为了能够更好的理解__newClass函数的出现，这个冗余是必须的。你关注的可能只是真实的第10个步骤的代码(一个_class函数搞定类的封装)，而这篇文章中隐含的第11个步骤才是这篇文章最后的结尾。

噢 标题上只有10个步骤嘛
第10步怎么会 知道第11步是什么样子 并且为之做些准备呢
被误导了 ....

2 楼 wmingjian 2010-06-06  

jessige_27 写道

代码里有这样一段

var clazz = (function(){
    return function(){
        this._init.apply(this, arguments);
    };
})();

实在想不通 这和下面这么写有什么区别

var clazz = function(){
    this._init.apply(this, arguments);
};

和你说的产不多，是多余的。
但是第10个步骤里面其实是两个步骤的简化，为了能够更好的理解__newClass函数的出现，这个冗余是必须的。你关注的可能只是真实的第10个步骤的代码(一个_class函数搞定类的封装)，而这篇文章中隐含的第11个步骤才是这篇文章最后的结尾。

1 楼 jessige_27 2010-05-13  

代码里有这样一段

var clazz = (function(){
    return function(){
        this._init.apply(this, arguments);
    };
})();

实在想不通 这和下面这么写有什么区别

var clazz = function(){
    this._init.apply(this, arguments);
};