前言
Javascript是一门非常灵活的语言，也是使用最广的动态脚本语言，框架、组件库也非常多。
JQuery是使用最广泛的的js库之一，它确实做到了write less,do more…。
Extjs在企业应用的UI上使用得比较广泛，做管理软件时用到的控件基本都涉及到了。还有许多优秀的js框架不一一列举。
Fixjs介绍
Fixjs是我打算在javascript技术领域开始积累的一个框架项目，这套框架主要为开发复杂组件提供底层的框架支持。何为复杂组件，请问使用JQuery或Extjs开发一个Excel或Powerpoint的难度如何？
复杂组件需要面向对象
在控件、组件等UI的开发领域，面向对象的概念是非常重要的，组件的创建与销毁，规范接口，代码节省与复用等等。
以下是javascript实现继承与多态的例子
//定义通用Obj基类，这个基类定义了init和dispose方法用于解决初始化和资源释放
Obj = function() {
};
Obj.prototype = {
init: function () {
trace("Obj.init...");
},
dispose: function() {
trace("Obj.dispose...");
}
}
Obj.prototype.constructor = Obj;
varobj1 = new Obj();
obj1.init();
obj1.dispose();
trace("=====================");
// Person类继承与Obj，并重写init和dispose
Person = function () {
};
//以下3行时实现面向对象的关键
Person.prototype = newObj();//Person继承于Obj
Person.prototype.constructor = Person;// 修正Person的构造函数为Person
Person.base = Obj.prototype;// 子类能够通过base访问父类的方法
Person.prototype.init = function (name, sex, id) {
Person.base.init.call(this);//根据实际需要是否调用基类的init函数
trace("Person.init...");
};
Person.prototype.dispose = function () {
trace("Person.dispose...");
Person.base.dispose.call(this); //根据实际需要是否调用基类的init函数
};
varp = new Person();
p.init();
p.dispose();
trace("=====================");
//根据实际需要是否调用基类的dispose函数
Employee = function () {
};
Employee.prototype = newPerson();
Employee.prototype.constructor = Employee;
Employee.base = Person.prototype;
Employee.prototype.init = function (name, sex, id) {
Employee.base.init.call(this);
trace("Employee.init...");
};
Employee.prototype.dispose = function () {
trace("Employee.dispose...");
//这里不调用父类的dispose函数
};
vare = new Employee();
e.init();
e.dispose();
trace("=====================");
输出结果
Obj.init...
Obj.dispose...
=====================
Obj.init...
Person.init...
Person.dispose...
Obj.dispose...
=====================
Obj.init...
Person.init...
Employee.init...
Employee.dispose... 这里不调用父类的dispose函数所以只有一行输出
=====================
上面的例子已经基本实现了对象的继承与派生后的多态特性，不足的是：init函数不会自动调用，实现继承时的代码比较复杂，dispose缺少多次调用时的处理。
Fixjs中的面向对象实现
fixjs = {};
fixjs.VERSION = "1.0.0";
// fixjs.Class用于简化继承的实现代码，并自动执行init函数，思路参考jClass
(function () {
//当前是否处于创建类的阶段
var initializing = false;
fixjs.Class= function () { };
fixjs.Class.extend= function (prop) {
//如果调用当前函数的对象（这里是函数）不是Class，则是父类
varbaseClass = null;
if (this!== fixjs.Class) {
baseClass = this;
}
//本次调用所创建的类（构造函数）
function F() {
//如果当前处于实例化类的阶段，则调用init原型函数
if(!initializing) {
this.init.apply(this, arguments);
}
}
//如果此类需要从其它类扩展
if (baseClass){
initializing = true;
F.prototype = newbaseClass();
F.prototype.constructor = F;
F.base = baseClass.prototype;
initializing = false;
}
//新创建的类自动附加extend函数
F.extend = arguments.callee;
//覆盖父类的同名函数
for (var name inprop) {
if (prop.hasOwnProperty(name)) {
F.prototype[name] = prop[name];
}
}
return F;
};
})();
/*
fixjs.Object
提供对象初始化释放控制接口
*/
fixjs.Object = fixjs.Class.extend({
init: function () {
this.disposed = false;
trace("fixjs.Object.init...");
},
dispose:function () {
if (this.disposed) //通过this.disposed控制资源释放，确保只调用1次
return;
this.disposed = true;
this.disposing();
},
disposing:function () {
trace("fixjs.Object.disposing...");
}
});
以下是用fixjs实现的继承例子
Person = fixjs.Object.extend({
init: function (name, sex) {
Person.base.init.call(this);
trace("Person.init...");
},
disposing: function() {
trace("Person.disposing...");
Person.base.disposing.call(this);
}
});
varp = new Person();
p.dispose();
p.dispose();//内部已经作了控制，能够多次调用资源释放dispose
trace("=====================");
Employee = Person.extend({
init: function (name, sex, id) {
Employee.base.init.call(this);
trace("Employee.init...");
},
disposing: function() {
trace("Employee.disposing...");
//这里不调用父类的disposing函数
}
});
vare = new Employee();
e.dispose();
e.dispose();
e.dispose();
trace("=====================");
输出结果
fixjs framework 1.0.0
fixjs.Object.init...
Person.init...
Person.disposing...
fixjs.Object.disposing...
=====================
fixjs.Object.init...
Person.init...
Employee.init...
Employee.disposing...
=====================
相关文章
作者推荐
MyReport：一款非常实用的报表引擎插件，提供Web报表设计、展现、打印、导出等功能集，集成简单。
2751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
