ES6學(xué)習(xí)教程之Promise用法詳解
前言
promise用了這么多年了,一直也沒有系統(tǒng)整理過。今天整理整理promise的相關(guān)東西,感興趣的可以一起看一看。我盡量用更容易理解的語言來剖析一下promise
我準(zhǔn)備分兩篇文章來說明一下promise
一篇來理解和使用promise(本篇) 另一篇來從promise使用功能的角度來剖析下promise的源碼(下一篇)
1、什么是Promise
我的理解是:實(shí)現(xiàn)讓我們用同步的方式去寫異步代碼的一種技術(shù)。是異步解決方案的一種。
他可以將多個異步操作進(jìn)行隊(duì)列化,讓它們可以按照我們的想法去順序執(zhí)行。
那么,Promise之前有沒有其他的異步解決方案??隙ㄊ怯械?,常見的有callback回調(diào)函數(shù)以及事件。
那Promise有啥優(yōu)勢,我認(rèn)為Promise功能更為強(qiáng)大,且能讓我們代碼寫的更為清晰
- Promise提供了統(tǒng)一的API, 讓我們控制異步操作更加容易
- Promise可以避免callback回調(diào)函數(shù)的層層嵌套,使代碼更為清晰??勺x性性與維護(hù)性更高
2、Promise基本用法
首先,我們先來了解一些Promise的基本概念
2.1、Promise狀態(tài)
Promise一共有3中狀態(tài),分別是Pending(進(jìn)行中)、Resolved(已完成,又稱Fulfilled)和Rejected(已失?。?br /> 狀態(tài)的改變只可能從Pending轉(zhuǎn)------>Resolved,或者從Pending------->Rejected。并且狀態(tài)一旦發(fā)生改變,就不會再更改了。而觸發(fā)狀態(tài)發(fā)生改變的,只有異步操作的結(jié)果。結(jié)果為成功 觸發(fā)狀態(tài)變更為 Resolved, 結(jié)果失敗或者中途發(fā)生錯誤,則會觸發(fā)狀態(tài)變更為 Rejected
2.2 Promise結(jié)構(gòu)
Promise是一個構(gòu)造函數(shù),故通過new Promise()可以實(shí)例化出來一個Promise對象
new Promise()時,接受一個函數(shù)作為參數(shù),且這個函數(shù),有兩個參數(shù),分別是resolve,reject。 而resolve和 reject也是兩個函數(shù)。他們由JavaScript引擎提供,不用自己部署。
每一個被實(shí)例化出來的promise實(shí)例,都有.then() 和 .catch() 兩個方法。且這兩個方法的調(diào)用支持鏈?zhǔn)讲僮?/p>
好,了解完概念,我們看看Promise的基本用法
首先,如何實(shí)例化一個promise對象
const promise = new Promise((resolve, reject) => { setTimeout(() => { if (/* 成功 */) { resolve(res) } else { reject(err) } }, 100) })
上圖中,通過new Promise() 實(shí)例化了一個promise實(shí)例,注意:new Promise()方法中的函數(shù)是一個立即執(zhí)行函數(shù),即,在new Promise()的一瞬間就會被執(zhí)行。函數(shù)內(nèi)代碼是同步代碼。
resolve和reject用于返回異步操作的結(jié)果,當(dāng)使用resolve()時,promise狀態(tài)會由Pending—>Resolved, 并將異步的正確結(jié)果返回。當(dāng)使用reject()時,promise狀態(tài)由Pending---->Rejected,并將錯誤信息返回
再看這個對象如何接收返回的結(jié)果
promise.then((res) => { console.log(res) }).catch((err) => { console.log(err) })
上圖中,.then的回調(diào)函數(shù) 和 .catch的回調(diào)函數(shù)分別用來接收resolve()返回的正確信息和reject返回的錯誤信息。
下面我們來詳細(xì)看下.then() 和 .catch()
.then() 函數(shù)
then()函數(shù)是Promise實(shí)例的一個方法,他的作用是為Promise實(shí)例添加狀態(tài)改變時的回調(diào)函數(shù)
它存在以下特點(diǎn)
- then()是添加在Promise的原型上的。即Promise.prototype.then(), 故所有Promise實(shí)例都存在.then()方法
- .then()可以進(jìn)行鏈?zhǔn)讲僮?即promise.then().then().then(),then的回調(diào)函數(shù)將會按照次序調(diào)用
- .then()函數(shù)存在兩個參數(shù),這兩個參數(shù)一般情況下是函數(shù)。其中,第一個函數(shù)是在狀態(tài)變?yōu)镽esolved的時候才會執(zhí)行(我們下文中統(tǒng)稱為.then的resolve回調(diào)),并且參數(shù)是Promise對象resolve(res)時的值。第二個函數(shù)是在狀態(tài)變?yōu)镽ejected的時候才會執(zhí)行(我們下文統(tǒng)稱為.then的reject回調(diào)),后面我們會說哪幾種情況下,狀態(tài)會變成Rejected
- Promise會存在值穿透的情況,當(dāng)我們then()的兩個參數(shù)不為函數(shù)時,會穿透到下一個then()里面,如果下一個then()參數(shù)也不是函數(shù),則會繼續(xù)向下穿透
- 我們上面說過了,Promise實(shí)例resolve()方法執(zhí)行時,會將實(shí)例的狀態(tài)變更為Resolved,故.then的resolve回調(diào)會在當(dāng)前Promise實(shí)例resolve()時被觸發(fā)
下面,我們重點(diǎn)來分析下第2,3,4,5
function getData(url) { return new Promise((resolve, reject) => { setTimeout(() => { if (url) { resolve({ code: 200, message: 'ok', data: 123 }) } else { reject(new Error('缺少url')) } }, 100) }) } getData('http://www.baidu.com').then((res) => { console.log('第一個回調(diào)') console.log(res) }).then((res) => { console.log('第二個回調(diào)') console.log(res) }).then((res) => { console.log('第三個回調(diào)') console.log(res) }) // 第一個回調(diào) // { code: 200, message: 'ok', data: 123 } // 第二個回調(diào) // undefined // 第三個回調(diào) // undefined
可以看出,首先,當(dāng)getData() resolve() 執(zhí)行時 .then的resolve回調(diào)函數(shù)被依次調(diào)用,但是只有第一個then()的resolve回調(diào)函數(shù)的參數(shù)有值,而其他兩個是undefind,這是為什么呢?我們再來看一個代碼
getData('http://www.baidu.com').then((res) => { console.log('第一個回調(diào)') console.log(res) return Promise.resolve() }).then((res) => { console.log(res) }) // 第一個回調(diào) // { code: 200, message: 'ok', data: 123 } // undefined
看這個代碼我們可以發(fā)現(xiàn),上一個then的resolve回調(diào)當(dāng)return一個Promise.resolve()時,和我們不return 任何東西時得到的結(jié)果是一樣的。那我們是不是可以理解為,每個.then()方法的resolve回調(diào)函數(shù),執(zhí)行完后默認(rèn)都會返回一個Promise.resolve()。沒錯,我告訴你,是的。
至于Promise.resolve()得到的是一個什么,我先告訴你,他得到的是一個resolve狀態(tài)的Promise實(shí)例。這個后面我們會再講。
此時,我們可以總結(jié)出:從第二個.then()開始,調(diào)用這個.then的resolve回調(diào)函數(shù)的-----是上一個.then的resolve回調(diào)所返回的Promise實(shí)例。而.then回調(diào)函數(shù)的參數(shù),便是上一個.then的回調(diào)函數(shù)所返回的Promise實(shí)例resolve的值。下面我們看一段代碼驗(yàn)證一下
getData('http://www.baidu.com').then((res) => { console.log('第一個回調(diào)') console.log(res) return new Promise((resolve, reject) => { resolve('123') }) }).then((res) => { console.log(res) }) // 第一個回調(diào) // { code: 200, message: 'ok', data: 123 } // 123
總結(jié):
- 每一個.then的resolve回調(diào)都會返回默認(rèn)返回一個Resolved狀態(tài)的Promise對象
- 當(dāng)你收到return了一個新的Promise實(shí)例時,會覆蓋默認(rèn)返回的Promise實(shí)例
- 返回的Promise實(shí)例resolve()的值,會作為下一個.then的resolve回調(diào)的參數(shù)返回
下面我們再來看下,如果then()的參數(shù)不是函數(shù),那會怎么樣,下面,我們看一段代碼
var getData = function() { return new Promise(function(resolve, reject) { resolve(123) }); }; getData(). then(345) .catch(err => { console.log('捕捉到一個錯誤') console.log(err) }).then((res) => { console.log('我是第二個then') console.log(res) }) // 輸出 我是第二個then 123
如上圖,可以看到,當(dāng)我們第一個then的resolve回調(diào)不是函數(shù),而是一個數(shù)字345時,resolve(123)穿透到第二個then中了,觸發(fā)了第二個then的resolve回調(diào)執(zhí)行,并將resolve的返回值給了第二個then的resolve回調(diào)。這種現(xiàn)象,叫做值穿透。
var getData = function() { return new Promise(function(resolve, reject) { reject(new Error(123)) }); }; getData(). then(345) .catch(678) .then((res) => { console.log('我是第二個then') console.log(res) }).catch(err => { console.log('我是第二個catch') console.log(err) }) // 輸出 我是第二個catch Error: 123
可以看到,報(bào)錯時,同樣發(fā)生了值穿透
到此,.then()相關(guān)以及 then()的第一個參數(shù)就講完了,而第二個參數(shù),我們放到.catch()方法中一起將
.catch() 函數(shù)
catch()也是掛載在Promise對象原型下的方法(Promise.prototype),和then()一樣, 故所有Promise對象也都有catch方法。它的作用是用來指定發(fā)生錯誤時的回調(diào)函數(shù),也就是捕獲異步操作所發(fā)生的錯誤
它有什么特點(diǎn)呢。我們先總結(jié)一下,后來再一一來驗(yàn)證
- .catch()會指定一個參數(shù)作為錯誤發(fā)生時的回調(diào),故catch((err) => {})的參數(shù)會在Promise狀態(tài)變更為Rejected時被觸發(fā)。
- .then(null, (err) => {})的第二個參數(shù),也是在Promise狀態(tài)變更為Rejected時被觸發(fā)。故其實(shí).catch()和 .then()的reject回調(diào)函數(shù)本質(zhì)上是一樣的,只是寫法不一樣。但我們一般更傾向于使用.catch()而不使用.then的reject回調(diào)。原因后面會講
- 代碼拋出錯誤和reject()函數(shù)執(zhí)行都會讓Promise對象的狀態(tài)轉(zhuǎn)變?yōu)镽ejected,故兩種情況都會觸發(fā)catch()的回調(diào)執(zhí)行或者then()的reject回調(diào)執(zhí)行。 所以,reject()的本質(zhì),其實(shí)就是拋出一個錯誤
- .catch()的回調(diào)函數(shù)以及.then的reject回調(diào)一樣,執(zhí)行時默認(rèn)都會返回一個狀態(tài)為Resolved的Promise對象(也就是 return Promise.resolve())
- .catch()和.then()一樣,也可以寫多個,也支持鏈?zhǔn)讲僮?,原因就是上面的第三點(diǎn)
- 拋出的錯誤一旦被catch捕獲,便不會再向外傳播,只有再次向外拋出錯誤,才會繼續(xù)被后面的catch所捕獲。故錯誤具有冒泡性質(zhì),會一步一步向外傳播,直到被catch捕獲
1、我們先看第一點(diǎn):
var getData = function() { return new Promise(function(resolve, reject) { reject(123) }); }; getData().then((res) => { console.log('成功') }).catch((err) => { console.log('捕捉到錯誤') console.log(err) }) // 捕捉到錯誤 // 123
毫無疑問,reject(123)拋出一個錯誤,catch的回調(diào)捕捉到錯誤,并輸出
2、再看第二點(diǎn):
var getData = function() { return new Promise(function(resolve, reject) { reject(123) }); }; getData().then((res) => { console.log('成功') }, (err) => { console.log('捕捉到一個錯誤') console.log(err) }) // 捕捉到錯誤 // 123
從代碼上也可以看出,上面這兩種方式是一樣的。
現(xiàn)在,我來說說為什么建議使用catch() ,而不推薦使用then()的reject回調(diào)呢??聪孪旅娴拇a
var getData = function() { return new Promise(function(resolve, reject) { resolve(123) }); }; getData().then((res) => { console.log('成功') return new Promise((resolve, reject) => { reject(new Error('123')) }) }, (err) => { console.log('捕捉到一個錯誤') console.log(err) }) // 成功
此時,只輸出了成功, 而then的resolve回調(diào)中所拋出的錯誤,并沒有被捕捉到
再看下面一段代碼
var getData = function() { return new Promise(function(resolve, reject) { resolve(123) }); }; getData().then((res) => { console.log('成功') return new Promise((resolve, reject) => { reject(new Error('123')) }) }).catch((err) => { console.log('捕捉到一個錯誤') console.log(err) }) 成功 捕捉到一個錯誤 Error: 123
看,同樣的錯誤,但是使用catch(),可以捕捉到,而使用then()的reject回調(diào),卻捕捉不到。
結(jié)論:catch()可以通過放到操作鏈的最底部而捕捉到任意地方(指的是Promise內(nèi))的錯誤。而then()的reject回調(diào),只能捕捉到這個.then()執(zhí)行之前的錯誤,當(dāng)前執(zhí)行的then的resolve回調(diào)內(nèi)的錯誤無法捕捉到,后面再執(zhí)行的代碼所拋出的錯誤也無法捕捉到。并且.catch的寫法,代碼層面也更為清晰
var getData = function() { return new Promise(function(resolve, reject) { resolve(123) }); }; getData().then((res) => { console.log('成功') return new Promise((resolve, reject) => { reject(new Error('123')) }) }, (err) => { console.log('第一個錯誤捕捉') }).then((res) => { console.log('第二個resolve回調(diào)') }, err => { console.log('第二個錯誤捕捉') }) 成功 第二個錯誤捕捉
如上圖中,第一個then的resolve回調(diào)中拋出的錯誤被第二個then中reject回調(diào)所捕捉
故 結(jié)論:一般情況下,不要去用then的第二個參數(shù),而盡可能的去用.catch()方法去捕捉錯誤
3、下面我們再看第三點(diǎn)
var getData = function() { return new Promise(function(resolve, reject) { resolve(x) }); }; getData().then((res) => { console.log('成功') }).catch(err => { console.log('捕捉到一個錯誤') console.log(err) throw new Error('我拋出了一個錯誤') }).catch(err => { console.log('我也捕捉到了一個錯誤') console.log(err) }) 捕捉到一個錯誤 ReferenceError: x is not defined 我也捕捉到了一個錯誤 Error: 我拋出了一個錯誤
上面代碼可以看出,不是只有reject()執(zhí)行了才會拋出一個錯誤,x未定義,系統(tǒng)會自動拋出一個錯誤,throw new Error是我們自己手動拋出一個錯誤。而這些都會使得Promise對象的狀態(tài)變更為Rejected,從而觸發(fā)catch。
同時上面的代碼我們還可以看出我們上面寫的第六點(diǎn),錯誤會冒泡式向外傳播,當(dāng)被catch之后,便不會再進(jìn)行傳播了。直到再次拋出錯誤。上面代碼中,第一個錯誤被第一個catch捕獲后,原本第二個catch是不會再走的,但因?yàn)樵诘谝粋€catch中又拋出了一個錯誤,才導(dǎo)致了第二個catch的執(zhí)行。
4、下面我們再看第四點(diǎn)(catch()的回調(diào)函數(shù)也會返回一個狀態(tài)是Resolved的Promise實(shí)例)
其實(shí)這一點(diǎn),我們從上面那張圖中也是可以看出來的,第一個catch()的回調(diào)原本是要返回了一個Resolved狀態(tài)的Promise,但是因?yàn)閠hrow了一個錯誤,導(dǎo)致這個Promise實(shí)例狀態(tài)變更為Rejected并返回,而變成成Rejected變觸發(fā)了第二個catch的回調(diào)執(zhí)行
我們看下下面的代碼,再次驗(yàn)證下
var getData = function() { return new Promise(function(resolve, reject) { resolve(x) }); }; getData().then((res) => { console.log('成功') }).catch(err => { console.log('捕捉到一個錯誤') console.log(err) }).then((res) => { console.log('我是第二個then') }) 捕捉到一個錯誤 ReferenceError: x is not defined 我是第二個then
上面代碼可以看出,catch的回調(diào)執(zhí)行后,后面的then依然被執(zhí)行了,為什么,就是因?yàn)閏atch的回調(diào)執(zhí)行后默認(rèn)返回了一個Resolved狀態(tài)的Promise實(shí)例(return Promise.resolve())
第五點(diǎn),第六點(diǎn)我們已經(jīng)驗(yàn)證過了。不再多說。
實(shí)現(xiàn)簡單的axios
axios我們比較常用,大家應(yīng)該都發(fā)現(xiàn)了,axios的使用方式,和Promise好像是一樣的,
axios({ url:'http://www.baidu.com', method: 'post', data: {} }).then((res) => { console.log(res) }).catch((err) => { console.log(err) })
沒錯。axios就是一個Promise實(shí)例。他是一個用Promise來封裝的一個XMLHttpRequest
下面我們也來實(shí)現(xiàn)一個簡單的axios
function MyAxios(option) { return new Promise((resolve, reject) => { const http = new XMLHttpRequest() http.open(option.method, option.url); http.responseType = "json"; http.setRequestHeader("Accept", "application/json"); http.onreadystatechange = myHandler; http.send(); function myHandler() { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } } }) } MyAxios({ url:'http://www.baidu.com', method: 'post' }).then((res) => { console.log(res) }).catch((err) => { console.log(err) })
Promise.all, Promise.race 以及兩者的區(qū)別
1、Promise.all
Promise.all()可以并行執(zhí)行多個Promise(), 并返回一個新的Promise實(shí)例
var p = Promise.all([p1, p2, p3]); // p1,p2,p3為3個Promise實(shí)例
Promise.all()的參數(shù)不一定是數(shù)組,只要具有Iterator接口的數(shù)據(jù)都可以(Iterator是一個遍歷器,我這里就不做過多介紹,感興趣的可以自己去官網(wǎng)看看)。但是參數(shù)遍歷后返回的成員必須必須是Promise對象(如上面的,p1,p2,p3都必須是Promise對象,如果不是,則會先調(diào)用Promise.resolve(p1)將他轉(zhuǎn)化為Promise實(shí)例)
那么,Promise.all()返回的Promise實(shí)例的狀態(tài)是如何定義的。
- 只有參數(shù)的各個成員(p1,p2,p3)狀態(tài)都變成Resolved,p的狀態(tài)才會變成Resolved,
- 參數(shù)的各個成員中,有任意一個狀態(tài)變成Rejected, p的狀態(tài)都會立刻變成Rejected
function getData (data) { return new Promise((resolve, reject) => { setTimeout(() => { if (data === 6) { reject(new Error('請求發(fā)生錯誤了')) } else { resolve(data) } }, data * 500) }) } const promises = [1,3,5,7].map((item) => { return getData(item) }) Promise.all(promises) .then((res) => { console.log('請求成功') console.log(res) }).catch((err) => { console.log('請求失敗') console.log(err) }) // 3.5s后輸出 請求成功 [ 1, 3, 5, 7 ]
如上圖, 最后一個成員(上圖中7返回的promise實(shí)例)的狀態(tài)是在3.5s后才變更為Resolved,故.then()的resolve回調(diào)在3.5s后才執(zhí)行
function getData (data) { return new Promise((resolve, reject) => { setTimeout(() => { if (data === 6) { reject(new Error('請求發(fā)生錯誤了')) } else { resolve(data) } }, data * 500) }) } const promises = [2,4,6,8].map((item) => { return getData(item) }) Promise.all(promises) .then((res) => { console.log('請求成功') console.log(res) }).catch((err) => { console.log('請求失敗') console.log(err) }) // 3s后輸出 請求失敗 Error: 請求發(fā)生錯誤了
上圖可以看出,當(dāng)我們改用 2,4,6,8去得到promise成員時,第3s得時候 發(fā)生了錯誤,此時,Promise.all()返回得Promise實(shí)例得狀態(tài)立刻變更為Rejected,catch()的回調(diào)立即觸發(fā)。故輸出錯誤
2、Promise.race()
Promise.race()和Promise.all()的作用是一樣的,都是并發(fā)處理多個Promise實(shí)例,并返回一個新的實(shí)例。
而區(qū)別在于,兩者返回的新的Promise實(shí)例的狀態(tài)改變的時機(jī)不同。
Promise.all是 所有Promise子成員狀態(tài)都變?yōu)镽esolved, 新的Promise實(shí)例狀態(tài)才會變成Resolved。中途如果有任何一個子成員狀態(tài)變成了Rejected,新的Promise實(shí)例的狀態(tài)就會立刻變?yōu)镽ejected
Promise.race是 只要子成員中,有任何一個的狀態(tài)發(fā)生了變化(不管是變成Resolved還是Rejected),那么返回的新的Promise實(shí)例的狀態(tài)也會立刻發(fā)生變化,而變化的狀態(tài)就是那個子成員所變化的狀態(tài)。
function getData (data) { return new Promise((resolve, reject) => { setTimeout(() => { if (data === 6) { reject(new Error('請求發(fā)生錯誤了')) } else { resolve(data) } }, data * 500) }) } const promises = [2,4,6,8].map((item) => { return getData(item) }) Promise.race(promises) .then((res) => { console.log('請求成功') console.log(res) }).catch((err) => { console.log('請求失敗') console.log(err) }) // 1s后輸出 請求成功 2
上圖可以看出,1s后 第一個子成員狀態(tài)變更為Resolved,那么返回的新Promise實(shí)例狀態(tài)也立馬變更為Resolved,故1s后.then()的resolve回調(diào)執(zhí)行。輸出請求成功.
最后,我們來說一說前面用到了的Promise.resolve()吧
Promise.resolve和Promise.reject
Promise.resolve()
前面我們說到過 Promise.resolve可以返回一個狀態(tài)是Resolved的Promise對象。沒錯,其實(shí)它等同于
new Promise((resolve, reject) => { resolve() })
當(dāng)Promise.resolve()有參數(shù)時,會返回一個Promise對象的同時,將參數(shù)做作為then()resolve回調(diào)的參數(shù)返回(當(dāng)參數(shù)是thenable對象除外,后面會將)。主要有以下幾種情況
1、參數(shù)是一個Promise對象時
將會直接返回這個參數(shù),不做任何更改
2、參數(shù)是thenable對象時,(即,存在.then()方法的對象),如下
let obj= { then: function(resolve, reject) { resolve('我是thenable對象'); } };
此時,Promise.resolve(obj) 會返回一個Promise對象,并且調(diào)用obj的then()方法,哎,這里注意了,這個.then()并不是 新Promise對象的.then() , obj的then()會立即執(zhí)行,可不代表 新的Promise對象的then() 的回調(diào)也會執(zhí)行, 還記得嗎,我們前面說的Promise對象的then()的回調(diào)執(zhí)行的條件是這個Promise對象的狀態(tài)發(fā)生變化了才會執(zhí)行。
let obj= { then: function(resolve, reject) { console.log(123) } }; let p1 = Promise.resolve(obj); p1.then(function(value) { console.log('成功') console.log(value); // 42 }); // 輸出 123
從上圖可以看出來,立即執(zhí)行了obj.then(),但Promise的then的回調(diào)并沒有被執(zhí)行
3、參數(shù)不是對象,或者說是沒有.then方法的對象
會返回一個Promise實(shí)例,并將參數(shù)作為.then()的resolve回調(diào)的參數(shù)返回
如,Promise.resolve(‘123') 等價(jià)于
new Promise((resolve, reject) => { resolve('123') })
4、不帶參數(shù),即Promise.resolve(),也就是我們前面說的。
返回了一個Resolved狀態(tài)的Promise對象,但是.then()的resolve回調(diào)沒有參數(shù)。
new Promise((resolve, reject) => { resolve() }).then((res) => { console.log(res) }) // 輸出 undefined
Promise.resolve()
Promise.reject() 也是返回一個Promise對象,只是這個對象的狀態(tài)是Rejected
至于參數(shù)的用法和Promise.resolve()完全一樣,唯一的區(qū)別是沒有thenable參數(shù)一說,也就是說有參數(shù)時,參數(shù)不論哪種情況,都會被當(dāng)做catch()的回調(diào)參數(shù)返回。也就是說參數(shù)沒有前面1,2,3種的區(qū)別。大家可以去試試,我就不過多說明了。
總結(jié)
到此這篇關(guān)于ES6學(xué)習(xí)教程之Promise用法詳解的文章就介紹到這了,更多相關(guān)ES6之Promise用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序canvas開發(fā)水果老虎機(jī)的思路詳解
這篇文章主要介紹了微信小程序canvas開發(fā)水果老虎機(jī)的思路,本文通過思路代碼分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02微信小程序獲取位置展示地圖并標(biāo)注信息的實(shí)例代碼
這篇文章主要介紹了微信小程序獲取位置展示地圖并標(biāo)注信息的實(shí)例代碼,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09bootstrap學(xué)習(xí)使用(導(dǎo)航條、下拉菜單、輪播、柵格布局等)
這篇文章主要為大家詳細(xì)介紹了bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁tabs等相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js獲取多個tagname的節(jié)點(diǎn)數(shù)組
寫了個獲取多個tagname節(jié)點(diǎn)集合的小方法。類似于jQuery的$(‘iput,select,textarea’,'#form’)的效果,返回是按節(jié)點(diǎn)在原有文檔流中的順序返回的2013-09-09JS實(shí)現(xiàn)網(wǎng)頁頂部向下滑出的全國城市切換導(dǎo)航效果
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁頂部向下滑出的全國城市切換導(dǎo)航效果,涉及javascript鼠標(biāo)事件及頁面元素顯示的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08