# Lesson-5
===
這個版本新增6個方法,find(),first(),last(),eq(),get(),ajax
先給出代碼
```javascript
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個方法
```javascript
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);` 雖然效率不一定高,總是一種解決思路不是嗎?
```javascript
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上即可
```javascript
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 (var 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說的過去么你?
