Lesson-5

这个版本新增6个要领,find(),first(),last(),eq(),get(),ajax

先给出代码

find : function(selector) {
    if(!selector) return;
    var context = this.selector;
    return new Kodo(context + ' ' + selector);
},
first : function() {
    return new Kodo(this[0])
},
last : function() {
    var num = this.length - 1;
    return new Kodo(this[num]);
},
eq : function(num) {
    var num = num < 0 ? (this.length - 1) : num;
    console.log(num);
    return new Kodo(this[num]);
},
get : function(num) {
    var num = num < 0 ? (this.length - 1) : num;
    console.log(num);
    return this[num];
}

我们要细致区分下,这4个要领在jQuery中返回的都是什么对象?究竟是dom对象照样jQuery对象.

邃晓了这个后就很轻易能写出这4个要领

find : function(selector) {
    if(!selector) return;
    var context = this.selector;
    return new Kodo(context + ' ' + selector);
}

起首find, 我们晓得平常都邑如许写 $(‘div’).find(‘span’) 查找div下的span,返回的是span数组对象,而不是原生的dom对象

那末我们就能够换个思绪,由于我们能拿到 $(‘div’) 这个selector对吧? 也就是 div

既然又要find(‘span’),我们的selector就能够写成 (‘div span’),以后直接返回新的数组对象不就好了吗??

var context = this.selector; 先缓存当前的selector上下文,以后拼接我们find的selector

所以末了return 就变成 new Kodo(context + ' ' + selector); 虽然效力不一定高,老是一种处理思绪不是吗?

first : function() {
    return new Kodo(this[0])
},
last : function() {
    var num = this.length - 1;
    return new Kodo(this[num]);
},
eq : function(num) {
    var num = num < 0 ? (this.length - 1) : num;
    console.log(num);
    return new Kodo(this[num]);
},
get : function(num) {
    var num = num < 0 ? (this.length - 1) : num;
    console.log(num);
    return this[num];
}

find要领比较难处理,以后这4个就很轻易了,first,last,eq,离别返回的都是封装后的对象,只要get返回的是原生 dom对象.

我们依据之前的思绪,直接取数组对象的index,return下新的即可,是否是很简朴? :)

以后是ajax部份

之前说过之所以,能够用$.ajax直接挪用,是由于能够把要领直接挂在在组织函数上,作为静态要领

所以我们只需要写好ajax末了把你想要公然的接口放在Kodo上即可

Kodo.get = function(url,sucBack,complete) {
    var options = {
        url : url,
        success : sucBack,
        complete : complete
    };
    ajax(options);
};
Kodo.post = function(url,data,sucback,complete) {
    var options = {
        url : url,
        type : "POST",
        data : data,
        sucback    : sucback,
        complete : complete
    };
    ajax(options);
};
function ajax(options) {
    var defaultOptions = {
        url: false, //ajax 要求地点
        type : "GET",
        data : false,
        success: false, //数据胜利返回后的回调要领
        complete: false //ajax完成后的回调要领
    };
    for (i in defaultOptions) {
        if (options[i] === undefined) {
            options[i] = defaultOptions[i];
        }
    }
    var xhr = new XMLHttpRequest();
    var url = options.url;
    xhr.open(options.type, url);
    xhr.onreadystatechange = onStateChange;
    if (options.type === 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
    xhr.send(options.data ? options.data : null);

    function onStateChange() {
        if (xhr.readyState == 4) {
            var result,
                status = xhr.status;

            if ((status >= 200 && status < 300) || status == 304) {
                result = xhr.responseText;
                if (window.JSON) {
                    result = JSON.parse(result);
                } else {
                    result = eval('(' + result + ')');
                }
                ajaxSuccess(result, xhr)
            } else {
                console.log("ERR", xhr.status);
            }
        }
    }
    function ajaxSuccess(data, xhr) {
        var status = 'success';
        options.success && options.success(data, options, status, xhr)
        ajaxComplete(status)
    }
    function ajaxComplete(status) {
        options.complete && options.complete(status);
    }
}

在这我就不细讲ajax的详细历程,我也完成了一个比较简朴的ajax,就公然了get和post要领.人人能够完成一个越发庞杂好用的ajax替代我这段代码

你说你都耐烦的翻到这了? 不给我一个star说的过去么你?

github地点: https://github.com/MeCKodo/forchange/tree/master/lesson-5
可想完成一个本身的简朴jQuery库？(五)：http://segmentfault.com/a/1190000004001281