vs_kissy_Base

oop.js vs kissy Base

概念

• oop.js 是独立的 oop 解决方案，其目标是解决js 语言 层面的问题，因此不涉及任何上层功能的集成；
• kissy Base/RichBase 更像是针对 UI 组件库 提出的 oop 解决方案，其默认包含了 事件系统 、 插件系统 、 扩展系统 等上层系统，在 kissy 中，也基本上只有组件相关的类才应用了 Base，而其他应用到了面向对象机制的类则没有继承于 Base；
• oop.js 对 oop 进行了全面的封装，在 js 中实现 oop 最重要且最复杂的概念——原型prototype——在 oop.js 中甚至都不用了解，也从不会出现prototype这个关键字，学习成本可谓极低。

构建

• oop.js 在构建类的时候，没有重复代码，做到从 How to do 向 What to do 的转变；
• kissy Base 通过 RichBase 的 extend 方法扩展出一个新类，所有继承于 RichBase 的类都拥有 extend 方法，造成了成员污染；
• oop.js 通过 initialize 方法构造实例，Base 有 constructor 和 initializer 两个方法实现类似的功能；
• 由于无法处理 delete 动作，因此 oop.js 没有析构函数，RichBase 的 destructor 是手动调用的，与传统 oop 概念中的析构函数不同

例子

RichBase

var MyClass = RichBase.extend({
	constructor: function() {
		MyClass.superclass.constructor.apply(self, arguments);
	}
}, {});

oop.js

var MyClass = new Class({
	initialize: funciton(self) {
		this.parent(self);
	}
})

继承

• oop.js 和 Base 的继承都是基于 js 的原型继承，仅在书写上有所不同；
• oop.js 通过 this.parent 方法调用父类同名方法，Base 只能通过 supperclass 获取到父类，而无法获取同名方法；

例子

RichBase

var MyClass = RichBase.extend({
	a: function() {
	}
});

var MyClass2 = MyClass.extend({
	a: function() {
		MyClass2.superclass.a.apply(this, arguments);
	}
});

oop.js

var MyClass = new Class({
	a: function(self) {}
});

var MyClass2 = new Class(MyClass, {
	a: function(self) {
		this.parent(self);
	}
})

Mixin

• Base 使用 S.augment 方法进行 mixin，RichBase 的 扩展 功能类似于 mixin ；
• oop.js 通过指定 __mixins__ 成员进行 mixin

例子

Base

function MyClass() {
    MyClass.superclass.constructor.call(this);
}

S.extend(MyClass, S.Base);

S.augment(MyClass, OtherClass1, OtherClass2);

RichBase

var MyClass = RichBase.extend([
	OtherClass1, OtherClass2
])

oop.js

var MyClass = new Class({
	__mixins__: [OtherClass1, OtherClass2]
})

property

• 都有属性的getter/setter方案，api都是obj.get(name)和obj.set(name, value)；
• 在 node 和高级浏览器下 oop.js 应用了 Object.defineProperty 实现这个功能，kissy 没有 node 版本；
• oop.js 中这个叫 property，Base 叫 attribute，我认为 Attribute 会同 dom 中的 attribute 概念冲突；

例子

RichBase

var MyClass = RichBase.extend({}, {
	ATTRS: {
    	a: {
        	setter: setter,
    	    getter: getter
 	   }
	}
})

oop.js

var A = new Class({
	this.a = property(getter, setter);
});

方法

• oop.js 对方法进行了比较大的改造，将方法区分为 instancemethod、classmethod、staticmethod 三种；
• Base 则没有对方法设置进行什么封装（METHOD?）；
• oop.js 中的实例方法会默认自动通过第一个参数传递 self，用来解决书写 var self = this 的冗余代码问题；
• oop.js 中的所有方法都是同时存在于类和实例上的，不同类型的方法在类上和在实例上的调用方法不同。

例子

RichBase

var MyClass = RichBase.extend({}, {
	load: function() {
    	console.log(1)
    }
})

MyClass.load = function() {
	console.log(2);
}

oop.js

var MyClass = new Class({
	load: function(self) {
	},
	sm: staticmethod(function() {
	}),
	cm: classmethod(function(cls) {
	});
});

事件系统

• Base 直接集成了事件系统
• oop.js 没有集成事件系统，但是在各个平台下都有相应的扩展，可直接 mixin 后使用

例子

RichBase

var MyClass = RichBase.extend({}, {
    load: function() {
    	this.fire('load');
    }
});

var obj = new MyClass();
obj.on('load', …);
obj.load();

oop.js

Node 下：

var events = require('events');
var A = new Class({
	__mixins__: [events.EventEmitter],
	load: function(self) {
		self.emit('load');
	}
});
var a = new A();
a.on('load', …)

标准浏览器下：

var A = new Class({
	__mixins__: [EventTarget],
	load: function(self) {
		var event = document.createEvent(…);
		self.dispatchEvent(event);
	}
});
var a = new A();
a.addEventListener('load', …)

metaclass

• oop.js 独有特性，通过继承于 Type 的类的定义对类的定义过程进行控制；
• Base 没有此功能

AOP

• oop.js 自带 aop 相关方法；
• Base 没有此功能

例子

var MyClass = new Class({
	a: function(self) {
		console.log(1);
	}
});

MyClass.a.before(function() {
	console.log(0);
});

var obj = new MyClass();
obj.a(); // ==> 0 1