06月24, 2011

续:JS动态创建类和实例化

之前写过一篇文章是 js动态创建类和实例化, 虽然能够满足很大部分的需求,但在有些方面还有些欠缺。

正好这段时间在写HTML5的游戏,需要写一个只支持HTML5的JS框架,所以把之前的实现方式给完善了下。

创建和实例化方式

(function() {
    var slice = Array.prototype.slice;
    var h5 = function() {
        var cls = function() {
            function T(args) {
                return this.init.apply(this, args);
            }
            var _t = arguments.callee,
                init = _t.prototype.init;
            T.prototype = _t.prototype;
            T.prototype.init = function(){
                var args = arguments;
                if(args.length === 1 && args[0] instanceof _t){
                    return this;
                }
                init && init.apply(this, args);
                return this;
            };
            T.constructor = _t;
            return new T(arguments);
        };
        cls.mix = h5.mix;
        cls.gs = h5.gs;
        h5.mix.apply(cls, arguments);
        return h5.gs.call(cls);
    };
    h5.mix = function(){
        var args = arguments, i = 0, target = this.prototype;
        if(typeof args[0] === 'boolean'){
            i = 1;
            target = this;
        }
        slice.call(args, i).forEach(function(item){
            if(typeof item !== 'object') return;
            for(var pro in item){
                target[pro] = item[pro];
            }
        });
        return this;
    };
    /**

 * getter, setter
 */
h5.gs = function(){
    var v, name, tp = this.prototype, uname, gname, sname;
    for(name in tp){
        (function(name){
            v = tp[name];
            if(typeof v !== 'function' && name.substr(0, 1) !== '_'){
                uname = name.substr(0,1).toUpperCase()+name.substr(1);
                gname = 'get'+uname;
                sname = 'set'+uname;
                if(!(gname in tp)){
                    tp[gname]= function(){
                        return this[name];
                    };
                }
                if(!(sname in tp)){
                    tp[sname]= function(value){
                        return this[name] = value;
                    };
                }
            }
        })(name);
    }
    return this;
};
this.h5 = h5;

})();

新的方式下命名为h5,即为html5的简写。

该版本继承之前的版本的功能之外,还提供了下面的功能:

1、init方法执行的时候如果只有一个参数并且该参数为当前对象的实例,则直接返回。比如:实例化dom类的时候,如果传递的参数是已经实例化后的对象,那么直接返回。避免了每个类动态类都要自己去判断的麻烦。

2、支持了getter, setter方法,私有属性(_打头)不支持。比如:传递了{title:'welefen'}后,可以直接通过getTitle()获取title和setTitle(value)来设置title。类创建后再mix方法时需要调用cls.gs方法给新的属性添加getter, setter方法。

使用方式

//创建domClass类
var domClass = h5({
    length:0,
    selector:'',
    init:function(selector, context){
        //使用querySelectorAll处理
    },
    append:function(){

}
//other methods

}); //实例话domClass类 var domInstance = domClass('#testId'); domInstance.append(); //getter, setter alert(domInstance.getLength()) //获取元素的数目 domInstance.setSelector('#newTestId');

 

本文链接:http://welefen.com/post/js-create-class-and-get-instance.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。