模拟Jquery封装的一个轻量级框架

模拟jQuery，要注意的一点是，要将方法写到prototype中，这样能保证，每个jquer对象不会再次打包这些方法，否则会导致占用过多没必要占用的内存，下面来展现框架的实现

Framework Core

;function QTer(){}
QTer.prototype = {
    constructor:QTer,
    extend: function(){
        numargs = arguments.length;
        if(numargs == 1){           //只有一个参数则认为是将该对象合并到当前prototype中
            var options = arguments[0];
            for(var key in options){
                if(options[key]){
                    QTer.prototype[key] = options[key];
                }
            }
        }else if(numargs > 1){      //不止一个则认为是将几个对象进行合并
            var temp = {};
            for(var i=0;i<numargs;i++){
                for(var key in arguments[i]){
                    if(arguments[i][key]){
                        temp[key] = arguments[i][key];
                    }
                }
            }
            return temp;
        }   
    },
    css : function(options){
        for(key in options){
            if(this[0].style)
                this[0].style[key] = options[key];
        }       
    },
    query : function(str){
        if(str){
            var type = str[0];
            var eleStr = str.substring(1,str.length);
            switch(type){
                case "#":
                    this[0] = document.getElementById(eleStr);
                    this.length = 1;
                break;
                case ".":
                    var doms = document.querySelectorAll(eleStr);
                    for(var i=0;i<doms.length;i++){
                        this[i] = doms[i];
                    }
                    this.length = doms.length;
                break;
                default:
                    var doms = document.getElementsByTagName(str);
                    for(var i=0;i<doms.length;i++){
                        this[i] = doms[i];
                    }
                    this.length = doms.length;
                break;
            }
            return this;
        }
    },
    attr:function(){
        var numargs = arguments.length;
        if(numargs == 1){
            return this[0].getAttribute(arguments[0]);      
        }else if(numargs >= 2){
            this[0].setAttribute(arguments[0],arguments[1]);
        }
    },
    each:function(callback){
        var length = this.length;
        var isObj = length === undefined||qTer.isFunction(this);
        if(isObj){      //如果是对象，那么就遍历这个对象
            for(var key in this){//遍历this，并用this[key]来代替当前对象调用 callback函数，显然你不能直接this[key].callback(key,value);因为this[key]还没有这个方法
                if(callback.call(this[key],key,this[key]) === false){   
                    break;
                }
            }
        }else{          //如果不是一个对象，
            for(var i=0;i<length;i++){
                if(callback.call(this[i],i,this[i]));
            }
        }

    },
    isFunction(obj){            //是不是一个函数
        if(typeof obj === "function"){
            return true;
        }else{
            return false;
        }
    }
}

function QT(str){
    var qt = new  QTer();
    return qt.query(str);
}   
qTer = new QTer();
QT.prototype = QTer.prototype;  
QT.fn = QTer.fn = QTer.prototype;

支持extend将框架扩展

        qTer.extend({
            say:function(){
                alert('hello');     
            }
        }); 
        $.say();   

调用框架的方法实例

调用选择器和css方法

        var qTerObj = QT("#divtag")
        qTerObj.css({
            "width":"100px",
            "height":"100px",
            "background" : "red"
        });

调用attr方法

        QT("#divtag").attr("name","box");   //赋值
        var name = QT("#divtag").attr("name");          //获取值
        console.log(name);

调用each方法

    QT("div").each(function(i){
        console.log(this);
        console.log(i);
    });