手工打造Extjs （1） 类系统
最近看了几本javascrpt方面的书（javascript高级程序设计，javascript设计模式），内容中讲到很多面向对象式开发也提到很多优秀的javascript框架，
我很是费解为什么就没有提到过Extjs，难道YUI跟Extjs有那么大得深仇大恨？。
转入正题，我特别喜欢Extjs4 的类体系，所以就自己模仿的写了一个，我只是简单了解过extjs并没有深入去学习，所以有些地方可能不对还望大家指出。
在我的类体系中可以声明接口、抽象类、类，声明方式与extjs类似
下面是Extjs的类声明
Ext.define('Ext.panel.Panel', {
extend: 'Ext.panel.AbstractPanel'
// .....
})
下面是代码 :ClassManager.js
var Design = Design || {};
(function(Class) {
/*先定义一些工具方法*/
var widgetMap = {};
var util = {
/* 复制对象的属性,如果他们不存在 */
applyIf: function(c1, c2) {
if(typeof c1 == "object" && typeof c2 == "object"){
for(var key in c2) {
if(!c1[key]){
c1[key] = c2[key];
}
}
}
},
/* 复制对象的属性*/
apply: function(c1, c2) {
if(typeof c1 == "object" && typeof c2 == "object"){
for(var key in c2) {
c1[key] = c2[key];
}
}
return c1;
},
isObject: function(o) {
return (typeof o == "object");
},
isArray: function(o) {
return (o instanceof Array);
},
isFunction: function(o) {
return (typeof o == "function");
},
isString: function(o) {
return (typeof o == "string");
},
isNumber: function(o) {
return (typeof o == "number");
},
/*
根据字符串类型获取一个类
*/
getClass: function(name) {
if(typeof name !== "string")
return name
var v = name.split('.'),
o = window[v[0]],
i = 1,
len = v.length;
for(; i < len ; i++) {
if(!o) return o
o = o[v[i]] ;
}
return o;
},
/* 定义名字空间 */
namespace: function(name) {
if(typeof name !== "string")
return name
var v = name.split('.'),
o = window[v[0]] = window[v[0]] || {},
i = 1,
len = v.length;
for(; i < len ; i++) {
o = o[v[i]] = o[v[i]] || {};
}
return o;
},
ns: function(){
return this.namespace.apply(this,arguments);
}
}
/*
接口类 下面接口类是设计模式书中的一个例子 copy过来的
*/
var Interface = function(name, methods) {
var i = 0,
len = methods.length;
this.name = name;
this.methods = [];
for (; i < len; i++) {
this.methods.push(methods[i]);
}
}
/*
检测接口方法是否被实现
*/
Interface.ensureImplements = function(object) {
var i = 1,
len = arguments.length,
j = 0,
menthodsLen;
for (; i < len; i++) {
for (methodsLen = arguments[i].methods.length; j < methodsLen; j++) {
var method = arguments[i].methods[j];
if (!object[method] || typeof object[method] !== 'function') {
throw new Error("类" + object.className + "未实现" + arguments[i].name + " 接口方法 " + method);
}
}
}
}
/*
类式继承
*/
function extend(subClass,superClass) {
var F = function(){};
F.prototype = superClass.prototype;
subClass.prototype = new F();
util.applyIf(subClass.prototype,new F())
subClass.prototype.constructor = subClass;
if (superClass.prototype.constructor == Object.prototype.constructor) {
superClass.prototype.constructor = superClass;
}
/*
为子类添加静态属性 superclass 指向父类
*/
subClass.superclass = superClass.prototype;
/*
为子类添加一个方法 callParent 调用父类的当前函数
*/
subClass.prototype.callParent = function(cfg) {
var method,methodName;
method = this.callParent.caller;
for (var key in this) {
if (this[key] === method) {
methodName = key
}
}
superClass.prototype[methodName].apply(this,cfg)
}
}
/*
添加别名到 widgetMap 对象中
*/
function setWidget(name,cls) {
var n = name;
if (name.indexOf('widget.') > -1) {
n = name.substring(7,name.length);
}
widgetMap[n] = cls;
}
var pub = {
/*
使用字符串格式名称创建类
*/
create: function(name, cfg) {
var clazz = util.getClass(name);
return new clazz(cfg);
},
/*
使用别名创建一个类
*/
widget: function(name, cfg) {
var clazz = widgetMap[name];
return new clazz(cfg);
},
/*
声明一个类
*/
define: function(name ,cfg) {
/*
获取当前字符串name的变量
*/
var nameArr = ('window.'+name).split('.'),
lastName = nameArr.pop(),
beginName = nameArr.join('.'),
thatClass = util.ns(beginName),
parentClass = util.ns(cfg.extend),
implement = cfg.implement;
/*
当前类型为接口时 创建接口并返回
*/
if (cfg.classType == "interface") {
thatClass[lastName] = new Interface(name, cfg.methods);
return;
}
/*
创建对象 cfg.constructor 为构造函数
*/
if (cfg.constructor !== Object) {
thatClass = thatClass[lastName] = cfg.constructor;
delete cfg.constructor;
}
else {
thatClass = thatClass[lastName] = function() {
if (parentClass) {
parentClass.prototype.constructor.apply(this,arguments)
}
};
}
/*
当cfg里配置了父类时继承
*/
if (parentClass) {
if (parentClass.prototype.events && cfg.events) {
util.applyIf(cfg.events,parentClass.prototype.events);
}
extend(thatClass,parentClass);
}
util.apply(thatClass.prototype, cfg);
thatClass.prototype.className = name;
/*
当配置了接口时，检查是否有没有实现的方法，如有没实现的方法将会抛出异常
*/
if (implement) {
if (!util.isArray(implement)) {
implement = [implement]
}
var i = 0,
len = implement.length;
for (; i < len; i++) {
if (typeof implement[i] == 'string') {
Interface.ensureImplements(thatClass.prototype,util.ns(implement[i]));
}
else if (typeof implement[i] == 'object') {
Interface.ensureImplements(thatClass.prototype,implement[i]);
}
else {
throw new Error("interface error implements type string and object");
}
}
}
/*
当父类为抽象类时检测是否有为实现的方法
*/
if (parentClass && parentClass.classType == "abstract") {
for (var i = 0, len = parentClass.methods.length; i < len; i++) {
var method = parentClass.methods[i];
if(!cfg[method] || typeof cfg[method] !== 'function'){
throw new Error(name+" 未实现 "+ method +" 方法， 抽象类" + parentClass.className);
}
}
}
/*
当前类为抽象类时添加几个静态属性 作为检测时使用
*/
if (cfg.classType == "abstract") {
thatClass.classType = "abstract";
thatClass.methods = cfg.methods;
}
/*
当配置alias属性为当前类配置别名
调用setWidget(name,class) 将别名与当前类添加到map中
*/
if (cfg.alias) {
if (util.isArray(cfg.alias)) {
cfg.alias.forEach(
function(it) {
if (util.isString(it)) {
setWidget(it, thatClass);
}
else {
throw new Error("define argument 'alias' type Error");
}
}
);
}
else if (util.isString(cfg.alias)) {
setWidget(cfg.alias, thatClass);
}
else {
throw new Error("define argument 'alias' type Error");
}
}
}
}
util.applyIf(Class,pub);
util.applyIf(Class,util);
})(Design);
html 页面
<script src = "ClassManager.js" ></script>
<script>
Design.define('Design.interface.Component', {
classType: 'interface',
methods: ['initComponent', 'getItems']
});
Design.define('Design.panel.AbstractPanel', {
classType: 'abstract',
getElement: function() {
return Document.createElement('div');
},
methods: ['getValue', 'setValue']
});
Design.define('Design.panel.Panel', {
alias: 'panel', /*别名*/
extend: 'Design.panel.AbstractPanel', /* 继承抽象类 */
implement: 'Design.interface.Component', /* 继承接口 */
constructor: function(cfg) { /*构造函数*/
this.name = cfg.name;
},
getName: function() { /*类内方法*/
return this.name;
},
initComponent: function(){ /* 必须实现的接口方法 没有这个方法将会抛出异常 */
},
getItems: function() { /* 必须实现的接口方法 没有这个方法将会抛出异常 */
},
getValue: function() { /* 必须实现的抽象方法 没有这个方法将会抛出异常 */
},
setValue: function() { /* 必须实现的抽象方法 没有这个方法将会抛出异常 */
}
});
/* 创建Panel类 */
var panel = new Design.panel.Panel({
name: 'zwl'
});
/* 使用字符串类名创建 */
panel = Design.create('Design.panel.Panel',{
name: 'zwl'
});
/* 使用别名创建 */
panel = Design.widget('panel',{
name: 'zwl'
});
alert(panel.getName());
</script>
现在这个类系统已经完成 上面是一个测试的例子。现在还有一个问题，如果把Design.interface.Component 、 Design.panel.AbstractPanel Design.panel.Panel 分离出到js文件，
我们还需要在页面导入下面这几个文件.
<script src = "app/interface/Component.js" ></script>
<script src = "app/panel/AbstractPanel.js" ></script>
<script src = "app/panel/Panel.js" ></script>
如果类的数量一旦多起来，将要导入很多个js文件。这样的话 我的类系统太弱了，接下来添加一个动态导入js文件的功能
创建一个名叫Loader的js文件 代码如下
(function(Class) {
/* 文件路径与转换名 */
var path = {name: 'Design', replaceName: ''};
/* */
var requireCount = 0;
var addEvent = function(el,type, fn) {
if (window.addEventListener){
el.addEventListener(type, fn, false);
}
else if (window.attachEvent) {
el.attachEvent('on' + type, fn);
}
}
Class.onReady = function(callback) {
addEvent(window, 'load', function(){
/*每隔一段时间会判断是否还在加载类文件 在加载完成后调用回调*/
var intervalId = setInterval(function(){
if(requireCount === 0) {
clearInterval(intervalId);
callback();
}
},5)
});
};
/* 导入类方法 */
var require = function(urls, onLoad) {
if (!Class.isArray(urls)) {
urls = [urls];
}
var url,
count = 0,
i = 0,
len = urls.length;
for (; i < len; i++) {
(function(i){
count++ ;
url = urls[i];
requireCount++;
if (url.indexOf(path.name) === 0) {
url = path.replaceName + url.substring(path.name.length, url.length);
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url.replace(/\./g,'/')+'.js';
script.onload = function() {
count--;
/*每隔一段时间会判断这个文件中得类是否已经声明完 如对象存在再调用回调*/
var intervalId = setInterval(function(){
if (Class.getClass(urls[i])) {
requireCount--;
clearInterval(intervalId);
if (count == 0 && onLoad) {
onLoad.call(window);
}
}
},5)
};
script.onerror = function() {
throw new Error(" require Errors url = " + url);
};
script.onreadystatechange = function() {
if (this.readyState === 'loaded' || this.readyState === 'complete') {
}
};
document.getElementsByTagName('head')[0].appendChild(script);
})(i)
}
};
var pub = {
/*设置路径*/
setPath: function(o, n) {
path.name = o;
path.replaceName = n;
}
}
Class.Loader = pub;
Class.require = require;
})(Design);
最后在define方法最前面添加一段代码
var pub = {
define: function(name ,cfg) {
/*
如果父类与接口不存在将阻止声明类
先加载父类与接口加载完成后再声明类
*/
var requireList = [];
if (cfg.extend && !util.getClass(cfg.extend)) {
requireList.push(cfg.extend);
}
if (cfg.implement && !util.getClass(cfg.implement)) {
requireList = requireList.concat(cfg.implement);
}
var loaderCount = requireList.length;
for (var i = 0, len = requireList.length; i < len; i++) {
Class.require(requireList[i], function() {
loaderCount--;
if (loaderCount == 0) {
pub.define(name, cfg);
}
});
}
if (requireList.length) {
return;
}
//........
}
}
html 页面
<script src = "ClassManager.js" ></script>
<script src = "Loader.js" ></script>
<script>
Design.Loader.setPath('Design', 'apps'); // 配置路径 Design.panel.Panel 会转换成 apps/panel/Panel.js 既js文件的路径
Design.require(['Design.panel.Panel']); // 在onReady之前会 加载3个js文件
Design.onReady(function(){
/* 使用别名创建 */
panel = Design.widget('panel',{
name: 'zwl'
});
alert(panel.getName());
});
</script>