摘要：這個(gè)版本新增個(gè)方法先給出代碼我們要仔細(xì)分辨下這個(gè)方法在中返回的都是什么對(duì)象到底是對(duì)象還是對(duì)象明白了這個(gè)后就很容易能寫出這個(gè)方法首先我們知道一般都會(huì)這樣寫查找下的返回的是數(shù)組對(duì)象而不是原生的對(duì)象那么我們就可以換個(gè)思路因?yàn)槲覀兡苣玫竭@個(gè)

這個(gè)版本新增6個(gè)方法,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];
}

我們要仔細(xì)分辨下,這4個(gè)方法在jQuery中返回的都是什么對(duì)象?到底是dom對(duì)象還是jQuery對(duì)象.

明白了這個(gè)后就很容易能寫出這4個(gè)方法

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

首先find, 我們知道一般都會(huì)這樣寫 $("div").find("span") 查找div下的span,返回的是span數(shù)組對(duì)象,而不是原生的dom對(duì)象

那么我們就可以換個(gè)思路,因?yàn)槲覀兡苣玫?$("div") 這個(gè)selector對(duì)吧? 也就是 div

既然又要find("span"),我們的selector就可以寫成 ("div span"),之后直接返回新的數(shù)組對(duì)象不就好了嗎??

var context = this.selector; 先緩存當(dāng)前的selector上下文,之后拼接我們find的selector

所以最后return 就變?yōu)? 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個(gè)就很容易了,first,last,eq,分別返回的都是封裝后的對(duì)象,只有g(shù)et返回的是原生 dom對(duì)象.

我們根據(jù)之前的思路,直接取數(shù)組對(duì)象的index,return下新的即可,是不是很簡(jiǎn)單? :)

之后是ajax部分

之前說過之所以,可以用$.ajax直接調(diào)用,是因?yàn)榭梢园逊椒ㄖ苯訏煸谠跇?gòu)造函數(shù)上,作為靜態(tài)方法

所以我們只需要寫好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 請(qǐng)求地址
        type : "GET",
        data : false,
        success: false, //數(shù)據(jù)成功返回后的回調(diào)方法
        complete: false //ajax完成后的回調(diào)方法
    };
    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);
    }
}

在這我就不細(xì)講ajax的具體過程,我也實(shí)現(xiàn)了一個(gè)比較簡(jiǎn)單的ajax,就公開了get和post方法.大家可以實(shí)現(xiàn)一個(gè)更加復(fù)雜好用的ajax替換我這段代碼

你說你都耐心的翻到這了? 不給我一個(gè)star說的過去么你?

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-5
可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫？(五)：http://segmentfault.com/a/1190000004001281