資訊專欄INFORMATION COLUMN
摘要：以下為幾種異步編程方式的總結(jié)，希望與君共勉?；卣{(diào)函數(shù)事件監(jiān)聽發(fā)布訂閱模式異步編程傳統(tǒng)的解決方案回調(diào)函數(shù)和事件監(jiān)聽初始示例假設(shè)有兩個函數(shù)和，是一個需要一定時間的函數(shù)。
異步編程
眾所周知 JavaScript 是單線程工作，也就是只有一個腳本執(zhí)行完成后才能執(zhí)行下一個腳本，兩個腳本不能同時執(zhí)行，如果某個腳本耗時很長，后面的腳本都必須排隊等著，會拖延整個程序的執(zhí)行。以下為幾種異步編程方式的總結(jié)，希望與君共勉。
回調(diào)函數(shù)
事件監(jiān)聽
發(fā)布訂閱模式
Promise
Generator (ES6)
async (ES7)
異步編程傳統(tǒng)的解決方案：回調(diào)函數(shù)和事件監(jiān)聽
初始示例：假設(shè)有兩個函數(shù), f1 和 f2，f1 是一個需要一定時間的函數(shù)。
function f1() {
setTimeout(function(){
console.log("先執(zhí)行 f1")
},1000)
}
function f2() {
console.log("再執(zhí)行 f2")
}
回調(diào)函數(shù)
因為 f1 是一個需要一定時間的函數(shù)，所以可以將 f2 寫成 f1 的回調(diào)函數(shù)，將同步操作變成異步操作，f1 不會阻塞程序的運行，f2 也無需空空等待，例如 JQuery 的 ajax。
回調(diào)函數(shù)的demo：
function f1(f2){
setTimeout(function(){
console.log("先執(zhí)行 f1")
},1000)
f2()
}
function f2() {
console.log("再執(zhí)行 f2")
}
效果如下：
總結(jié)：回調(diào)函數(shù)易于實現(xiàn)、便于理解，但是多次回調(diào)會導(dǎo)致代碼高度耦合
事件監(jiān)聽腳本的執(zhí)行不取決代碼的順序，而取決于某一個事件是否發(fā)生。
事件監(jiān)聽的demo
$(document).ready(function(){
console.log("DOM 已經(jīng) ready")
});
發(fā)布訂閱模式
發(fā)布/訂閱模式是利用一個消息中心，發(fā)布者發(fā)布一個消息給消息中心，訂閱者從消息中心訂閱該消息，。類似于 vue 的父子組件之間的傳值。
發(fā)布訂閱模式的 demo
//訂閱done事件
$("#app").on("done",function(data){
console.log(data)
})
//發(fā)布事件
$("#app").trigger("done,"haha")
Promise
Promise 實際就是一個對象， 從它可以獲得異步操作的消息，Promise 對象有三種狀態(tài)，pending(進行中)、fulfilled（已成功）和rejected（已失?。romise 的狀態(tài)一旦改變之后，就不會在發(fā)生任何變化,將回調(diào)函數(shù)變成了鏈?zhǔn)秸{(diào)用。
Promise 封裝異步請求demo
export default function getMethods (url){
return new Promise(function(resolve, reject){
axios.get(url).then(res => {
resolve(res)
}).catch(err =>{
reject(err)
})
})
}
getMethods("/api/xxx").then(res => {
console.log(res)
}, err => {
console.log(err)
})
Generator
Generator 函數(shù)是一個狀態(tài)機，封裝了多個內(nèi)部狀態(tài)。執(zhí)行 Generator 函數(shù)會返回一個遍歷器對象，使用該對象的 next() 方法，可以遍歷 Generator 函數(shù)內(nèi)部的每一個狀態(tài)，直到 return 語句。
形式上，Generator 函數(shù)是一個普通函數(shù)，但是有兩個特征。一是，function關(guān)鍵字與函數(shù)名之間有一個星號；二是，函數(shù)體內(nèi)部使用yield表達式， yield是暫停執(zhí)行的標(biāo)記。
next() 方法遇到y(tǒng)ield表達式，就暫停執(zhí)行后面的操作，并將緊跟在yield后面的那個表達式的值，作為返回的對象的value屬性值。
Generator 的 demo
function *generatorDemo() {
yield "hello";
yield 1 + 2;
return "ok";
}
var demo = generatorDemo()
demo.next() // { value: "hello", done: false }
demo.next() // { value: 3, done: false }
demo.next() // { value: "ok", done: ture }
demo.next() // { value: undefined, done: ture }
async
async函數(shù)返回的是一個 Promise 對象，可以使用 then 方法添加回調(diào)函數(shù)，async 函數(shù)內(nèi)部 return 語句返回的值，會成為 then 方法回調(diào)函數(shù)的參數(shù)。當(dāng)函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。
1.await命令后面返回的是 Promise 對象，運行結(jié)果可能是rejected，所以最好把await命令放在try...catch代碼塊中。
async 的 demo1
async function demo() {
try {
await new Promise(function (resolve, reject) {
// something
});
} catch (err) {
console.log(err);
}
}
demo().then(data => {
console.log(data) //
})
參考文獻
https://developers.google.com...
http://es6.ruanyifeng.com/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109516.html
摘要：組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點，是中最常用的繼承模式。的繼承機制完全不同，實質(zhì)是先將父類實例對象的屬性和方法，加到上面所以必須先調(diào)用方法，然后再用子類的構(gòu)造函數(shù)修改。 前言 面向?qū)ο缶幊毯苤匾囊粋€方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復(fù)用是非常有用的。 大部分面向?qū)ο蟮木幊陶Z言，...
摘要：組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點，是中最常用的繼承模式。的繼承機制完全不同，實質(zhì)是先將父類實例對象的屬性和方法，加到上面所以必須先調(diào)用方法，然后再用子類的構(gòu)造函數(shù)修改。 前言 面向?qū)ο缶幊毯苤匾囊粋€方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復(fù)用是非常有用的。 大部分面向?qū)ο蟮木幊陶Z言，...
摘要：組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點，是中最常用的繼承模式。的繼承機制完全不同，實質(zhì)是先將父類實例對象的屬性和方法，加到上面所以必須先調(diào)用方法，然后再用子類的構(gòu)造函數(shù)修改。 前言 面向?qū)ο缶幊毯苤匾囊粋€方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復(fù)用是非常有用的。 大部分面向?qū)ο蟮木幊陶Z言，...
摘要：組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點，是中最常用的繼承模式。的繼承機制完全不同，實質(zhì)是先將父類實例對象的屬性和方法，加到上面所以必須先調(diào)用方法，然后再用子類的構(gòu)造函數(shù)修改。 前言 面向?qū)ο缶幊毯苤匾囊粋€方面，就是對象的繼承。A 對象通過繼承 B 對象，就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復(fù)用是非常有用的。 大部分面向?qū)ο蟮木幊陶Z言，...
這是 最近在學(xué)習(xí)js繼承時看了多篇文章以及自我總結(jié)的學(xué)習(xí)筆記。 目錄：一：原型鏈二：構(gòu)造函數(shù)三：原型鏈和構(gòu)造函數(shù)組合繼承四：原型式五：寄生式六：寄生組合式 1、原型鏈 function Super(){ this.name = lily; this.age = 21; this.arr = [1,2,3] } function Sub(){} Sub.prototype = new S...
閱讀 3531·2021-11-24 09:39
閱讀 789·2019-08-30 14:22
閱讀 3042·2019-08-30 13:13
閱讀 2326·2019-08-29 17:06
閱讀 2927·2019-08-29 16:22
閱讀 1263·2019-08-29 10:58
閱讀 2440·2019-08-26 13:47
閱讀 1639·2019-08-26 11:39
