【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制

• each()
• 插件机制
• animation
• ajax

//each()
//这里第一个参数指定将this指向每次循环到的那个元素身上，而第三个参数element其实就是this本身所以和第一个参数是一样的，而第二个参数是每次循环的下标
zQuery.prototype.each=function(fn){
    for(var i=0;i<this.elements.length;i++){
        fn.call(this.elements[i],i,this.elements[i]);
    }
};

//插件机制
$.fn=zQuery.prototype;  //引用，如果只绑定一个插件，就直接写$.fn.toRed = function(){}...，相当于直接将toRed函数挂到zQuery.prototype上，可以进行zQuery对象调用

//如果是挂多个插件，将函数参数中的json循环，挂在到zQuery.prototype中
$.fn.extend=function(json){
    for(var key in json){
        //key == tored/toYellow
        //json[key]   ==  fn
        zQuery.prototype[key]=json[key];
    }
};

$.ajax = ajax; //将ajax函数挂在到$.ajax上

//animation
zQuery.prototype.animate=function(json,options){
    for(var i=0;i<this.elements.length;i++){
        move(this.elements[i],json,options);
    }
};

//ajax封装
function ajax(options){
    //-1.整理options
    options=options||{};
    options.data=options.data||{};
    options.type=options.type||'get';
    options.timeout=options.timeout||0;

    //0.整理data json  --> string
    options.data.t=Math.random();
    var arr=[];
    for(var key in options.data){
        arr.push(key+'='+encodeURIComponent(options.data[key]));
    }
    var str = arr.join('&');

    //1.创建ajax
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }else{
        var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
    }
    if(options.type=='get'){//get
        //2.建立连接
        oAjax.open('get',options.url+'?'+str,true);
        //3.发送
        oAjax.send();
    }else {//post
        //2.建立连接
        oAjax.open('post',options.url,true);
        //设置请求头
        oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        oAjax.send(str);
    }

    //4.接收
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            clearTimeout(timer);
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                options.success && options.success(oAjax.responseText);
            }else{
                options.error && options.error(oAjax.status);
            }
        }
    }

    //5.超时
    if(options.timeout){
        var timer=setTimeout(function(){
            //数据不要了	，你别加载
            oAjax.abort();//中断ajax请求,也会触发readyState==4
        },options.timeout);
    }

}

//运动函数的封装
function move(obj,json,options){
    //整理可选参数
    options = options || {};
    options.duration = options.duration || 300;
    options.complete = options.complete || null;
    options.easing = options.easing || 'ease-out';

    var start={};
    var dis={};
    for(var key in json){
        start[key]=parseFloat(getStyle(obj,key));

        if(isNaN(start[key])){
            switch(key){
                case 'width':
                    start[key]=obj.offsetWidth;
                    break;
                case 'height':
                    start[key]=obj.offsetHeight;
                    break;
                case 'opacity':
                    start[key]=1;
                    break;
                case 'left':
                    start[key]=0;
                    break;
                case 'top':
                    start[key]=0;
                    break;
                //marginLeft/top...	padding
            }
        }

        dis[key]=json[key]-start[key];
    }
    var count=Math.round(options.duration/30);
    var n=0;

    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        n++;

        for(var key in json){//办事部分包起来
            switch(options.easing){
                case 'linear':
                    var a=n/count;//	匀速运动
                    var cur=start[key]+dis[key]*a;
                    break;
                case 'ease-in':
                    var a=n/count;//	加速运动
                    var cur=start[key]+dis[key]*(a*a*a);
                    break;
                case 'ease-out':
                    var a=1-n/count;//	减速运动
                    var cur=start[key]+dis[key]*(1-a*a*a);
                    break;
            }
            if(key=='opacity'){
                obj.style.opacity=cur;
                obj.style.filter='alpha(opacity='+cur*100+')';
            }else{
                obj.style[key]=cur+'px';
            }
        }

        if(n==count){
            clearInterval(obj.timer);
            options.complete && options.complete();
        }
    },30);
}