浏览 6987 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-06-30
最后修改：2012-06-30
以前在做Ext3开发的时候，一直用使用Ext.extend()来做类的继承，在以后写代码，都习惯了使用Ext.extend类似功能的代码来做类继承，但是遇到一个问题一直无法解决，如下面的代码：
MyClass1 = function() {};
MyClass1.prototype = {
say: function() {
alert('MyClass1 say hello world!');
}
};
MyClass2 = Ext.extend(MyClass1, {
say: function() {
MyClass2.superclass.say.call(this);
alert('MyClass2 say hello world!');
}
});
每次子类需要调用超类方法，都要像下面这样写：
MyClass2.superclass.say.call(this); 这种写法有几个弊端：
所以，很长一段时间在想如何改进super的调用？能做到java那样，如：
public MyClass2 extends MyClass1{
public void say() {
super.say();
System.out.println('MyClass2 say hello world!');
}
}
自己试了好几种方法，总是不能完美解决，就放弃了一段时间，再后来也没有多想这事。
Ext4出来之后，看了一些资料，发现Ext4 Class非常强大，完美的解决我想的问题，其实，那时候挺兴奋，想研究以下源码的，打开代码库，发现Ext对类的支持过于强大（对我而言），结构异常复杂，那时候也由于重心没在这块，所以，就先放下没有继续研究。今天终于静下心来，用心阅读了Ext4 Class相关的源码（Ext的开发者很厉害，不得不佩服）。
Ext使用callParent就能调用到父类的方法，非常简单，用法如下：
MyClass2 = Ext.define({
say: function() {
this.callParent(); // 调用父类的say()
// 如果要为父类方法传参，只需要像下面这样写
//this.callParent(arguments);
//this.callParent([param1, param2]);
alert('say: hello world!');
}
});
我把其中和类继承相关的代码剥离出来，重新编码，其他有关Config,Statics等特性全部移除，代码变简单了很多，也容易懂了很多。下面是应用的例子，Class的源码和例子都使用了requirejs，附件中是class.js的源码：
require(['class/Class'], function(Class) {
var MyCls1 = Class.define({
say: function() {
alert('MyCls1 say: hello world!');
// 输出'MyCls1 say: hello world!'
}
});
new MyCls1().say();
var MyCls2 = Class.define({
extend: MyCls1,
say: function() {
this.callParent();
alert('MyCls2 say: hello world!');
// 输出'MyCls1 say: hello world!'
// 输出'MyCls2 say: hello world!'
}
});
new MyCls2().say();
var MyCls3 = Class.define({
extend: MyCls2,
say: function() {
this.callParent();
alert('MyCls3 say: hello world!');
// 输出'MyCls1 say: hello world!'
// 输出'MyCls2 say: hello world!'
// 输出'MyCls3 say: hello world!'
}
});
new MyCls3().say();
Class.override(MyCls2, {
constructor: function(config) {
this.name = config.name;
},
say: function() {
this.callParent();
alert('the new method MyCls2 say: hello world! by ' + this.name);
// 输出'MyCls1 say: hello world!'
// 输出'the new method MyCls2 say: hello world! by max'
// 输出'MyCls3 say: hello world!'
}
});
new MyCls3({
name: 'max'
}).say();
});
例子html页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Unit</title>
<script type="text/javascript" src="../src/lib/requirejs.js"></script>
<script type="text/javascript">
require.config({
baseUrl: '../src'
});
</script>
<script type="text/javascript" src="unit/Class.js"></script>
</head>
<body>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
