Fixjs——javascript实现类继承、多态

 

前言

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...

=====================

 

相关文章

Fixjs专栏

 

作者推荐

MyReport：一款非常实用的报表引擎插件，提供Web报表设计、展现、打印、导出等功能集，集成简单。