之前寫過一個jQuery的大致實現(xiàn)，但是那是不準確的碉渡，jQuery是使用構造函數(shù)實現(xiàn)的，并且他在文件內(nèi)就已經(jīng)執(zhí)行了母剥，這樣滞诺，在外面就可以直接使用 $符號了。
之前的大致結構如下：
window.jQuery = function (nodeOrSelector) {
let nodes = { length: 0 }
if (typeof (nodeOrSelector) === 'string') {
let temp = document.querySelectorAll(nodeOrSelector)
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i]
nodes.length = temp.length
}
} else if (nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length: 1
}
}
nodes.addClass = function (classes) {
for (let i = 0; i < nodes.length; i++) {
var node = nodes[i]
for (let key in classes) {
if (classes[key]) {
node.classList.add(key)
}
}
}
}
return nodes
}
這個函數(shù)可以接受一個選擇器或者節(jié)點环疼，在執(zhí)行后會返回出預設的方法
現(xiàn)在要把ajax的功能加上去习霹，代碼如下：
window.jQuery = function (nodeOrSelector) {
// 一堆代碼
}
window.$ = window.jQuery
window.jQuery.ajax = function (options) {
let path
if (arguments.length === 1) {
// 傳進一個參數(shù)時
path = options.path
} else if (arguments.length === 2) {
// 傳進兩個參數(shù)時
path = arguments[0]
options = arguments[1]
}
let method = options.method
let successFn = options.successFn
let failFn = options.failFn
let data = options.data
let headers = options.header
let r = new XMLHttpRequest()
r.open(method, path)
for (let key in headers){
r.setRequestHeader(key, headers[key])
}
r.onreadystatechange = function () {
if (r.readyState === 4) {
if (r.status >= 200 || r.status < 300) {
successFn.call(undefined, r.responseText)
} else {
failFn.call(undefined, r.request)
}
}
}
r.send(data)
}
用一個對象傳參進去，在使用的時候就不用關注各個參數(shù)的順序了炫隶，而且根據(jù)需要可以添加更多參數(shù)
使用方法：這里用一下豆瓣的API淋叶，進入https://api.douban.com，打開控制臺伪阶，輸入
$.ajax({
path: 'https://api.douban.com/v2/book/1220562',
method: 'GET',
successFn: function (response) { console.log(response) },
failFn: function (request) { console.log(request) },
data:'0000'
})
得到的響應如下：
image.png
說明請求成功了
搞一個Promise版的ajax
如果需要在回調(diào)函數(shù)執(zhí)行后再執(zhí)行另外的函數(shù)煞檩，就再回調(diào)successFn里面再增加函數(shù)就行，但是當增加的函數(shù)過多時栅贴，會變得不可讀斟湃，因為搞不清楚這些函數(shù)哪些會被執(zhí)行，promise解決了這個問題
Promise相當于只在原來的基礎上加了六個單詞
return new Promise(function(resolve, reject){
......
}
但是它可以遞歸的加回調(diào)函數(shù)檐薯，避免因回調(diào)函數(shù)太多而產(chǎn)生回調(diào)地獄
代碼如下：
window.jQuery = function (nodeOrSelector) {
// 代碼
}
window.$ = window.jQuery
window.jQuery.ajax = function ({path, method, data, headers }) {
return new Promise(function (resolve, reject) {
let r = new XMLHttpRequest()
r.open(method, path)
for (let key in headers) {
r.setRequestHeader(key, headers[key])
}
r.onreadystatechange = function () {
if (r.readyState === 4) {
if (r.status >= 200 || r.status < 300) {
resolve.call(undefined, r.responseText)
} else {
reject.call(undefined, r.request)
}
}
}
r.send(data)
}
)
}
這里傳進function的參數(shù)是一個對象的形式凝赛，采用了解構賦值的寫法，和之前的一大堆是一樣的
使用方法如下：
$.ajax({
path: 'https://api.douban.com/v2/book/1220562',
method: 'GET',
data: '0000'
}).then((text) => { console.log('text', text) },
(request) => { console.log('request', request) })
如果想成功或者失敗后在執(zhí)行某些功能坛缕，可以在后面再接then()就可以了墓猎。
image.png
這是返回的結果，說明請求是對的赚楚，而且成功的接受了返回的數(shù)據(jù)
