我也来重复造个轮子吧 ,发布一个利用原型,在Javascript中实现类机制的简单框架: GT-Class

我也来重复造个轮子吧 ,发布一个利用prototype(原型,不是指那个叫做prototype.js的框架),在Javascript中实现类机制的简单框架: GT-Class .

源码&示例: https://github.com/finscn/GT-Class 

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



这是一个利用prototype(原型,不是指那个叫做prototype.js的框架) ,在Javascript中实现类机制的简单框架.

虽然目前这类框架有很多, 但是在实际工作中,它们往往在功能/性能/易用性等方面并不能完全符合我的需求.

因此我结合了一些现有框架的特点 再加入一点点自己的原创的东西, 就有了这个框架.

当然 这个框架在并不能说是"集百家之长",它功能/性能/易用性等方面也不是最好,只能说它是一个"更符合我自己期望和使用习惯"的实现.

至于是否符合您的需求, 那就不敢保证了, 不过还是希望您可以提出宝贵的建议和意见, 谢谢了 .



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

简单示例:

1 创建类

//方式1 : 
var Foo = GT.Class.create( function(args){
			/* 构造函数 */
		 },
		 {
			classname : 'Foo', //类名,可选. 设置后,可通过 GT.Class.forName(classname) 得到类.
			//以下为类的成员
			att1 : 1 , 
			att2 : 2 ,
			method1 : function(){ },
			method2 : function(){ }
			
		 } );
		 
//方式2 : 
var Foo =function(args){
			/* 构造函数 */
		 }
Foo.prototype.att1=1;
Foo.prototype.method1=function(){ };

GT.Class.create( Foo,
		
		//注意:之前Foo.prototype里定义的成员,会被这里定义的"同名成员"覆盖.
		 {
			classname : 'Foo', //类名,可选,
			//以下为类的成员
			att2 : 2 ,
			method2 : function(){ }
			
		 } );

2 继承 :

var Bar = GT.Class.create( function(args){
			/* 构造函数 */
		 },
		 {
			classname : 'Bar', //类名,可选,
			//以下为类的成员
			att2 : 3 ,
			
			// 覆盖了父类里的同名方法 
			method1 : function(a){ 
				
				this.$super(a); //调用父类的同名方法
				
			}, 
			method3 : function(a3){ 
				
				Bar.$superclass.method2.apply(this, [a3]); //调用父类里的其他方法. 
				
				/* 此处要注意  
				 Bar.$superclass.method2.apply(this, [a3])
				 Bar.$superclass.method2(a3)
				 this.method2(a3) 
				 三者的异同
				*/
			}
			
		 }, 
		 Foo	//父类
		 );

//如果子类没什么要做的, 可以直接

var Bar = GT.Class.create( function(args){
			/* 构造函数 */
		 }, 
		 Foo	//父类
		 );
		 
// 以上为 直接创建一个"某父类的子类", 我们也可以先创建好两个类, 然后后期再指定继承关系.

// "子类"必须是通过 GT.Class.create创建的类
子类.$extend(父类);

// "父类"必须是通过 GT.Class.create创建的类
父类.$create(子类);

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

更多详细的说明和用法 见  gt-class.js 和 gt-class-example.html 文件的源码.
源码中有较详细的注释和示例 ( 只有中文 ).
希望有朋友愿意能帮忙翻译成英文 

评论

3 楼 shiren1118 2011-01-07  

个人觉得alzui的类极致实现的最好最优雅
alzui说明
http://wmingjian.iteye.com/blog/438202
演化过程
http://wmingjian.iteye.com/blog/438211

cicyui的也不错，优雅不足
http://cicyui.com/bbs/viewthread.php?tid=247&extra=page%3D1



ext和yui就不用说了

2 楼 shiren1118 2011-01-07  

/*类机制定义*/
window.Class = function(name, src) {
    src.constructor.prototype = src;
    window[name] = src.constructor;
};


/*自定义类*/
Class("Msg", {
    constructor: function(s) {
        alert(s);
    }
});

/*自定义类*/
Class("Stack", {
    constructor: function() {
        this.items = [];
    },
    add : function(item){
        this.items.push(item);

//栈中允许最大长度
        if(this.items.length > 100000){
            this.items.shift();
        }
    },
    remove : function(item){
        var s = [];

//移除item，然后遍历，把剩下发的赋值给items
        for(var i = 0, len = this.items.length; i < len; i++) {
            if(this.items[i] != item){
                s.push(this.items[i]);
            }
        }

        items = s;
    },
getCount : function(){
//返回栈的大小
        return this.items.length;
    },
    next : function(){
//出栈操作，返回最后入栈的值
        return this.items.pop();
    },
say: function(msg){
//测试栈的大小
        alert(msg+' --- Stack count:= '+this.items.length);
    }
});

1 楼 fins 2011-01-07  

文中示例有两个小错误
修正了

关于 "2 继承" 的部分

# classname : 'Bar', //类名,可选, 
#             method3 : function(a3){  
#                  
#                 Bar.$superclass.method2.apply(this, [a3]); //调用父类里的其他方法.  
#                  
#                 /* 此处要注意  
#                  Bar.$superclass.method2.apply(this, [a3])
#                  Bar.$superclass.method2(a3)
#                  this.method2(a3) 
#                  三者的异同
#                 */ 
#             }