05 js發布訂閱模式原理(買粉絲小程序中實現狀態管理)

e"信號，從而引發f2的執行。

第四種方式promise范式,先看一段代碼：

請點擊輸入圖片描述

我們只要并且僅需要new一個promise對象，就會發現promise對象的參數函數已經執行了，隔兩秒之后輸出"執行完成"。

接下來再看一段其實際應用的場景代碼：

請點擊輸入圖片描述

從本質上來看，Promise是一個構造函數，其本身有all、reject、resolve等方法，同時其原型上有then、catch等方法。通過其用Promise new出來的對象自然就有then、catch方法。然后可以通過then方法中的回調函數，獲取到上一段異步操作中返回（通過resolve）的數據。從而實現對異步操作的流程控制。

但我的每個函數都得被promise對象包裝一下，同時一大堆的then...真是一個聽蛋疼的事兒...

綜上所述對于異步流程的控制，都有其自身的缺陷，我們最理想的方式便是像操作同步流程那樣實現對異步流程的控制，試想一下這樣的異步操作流程(加了層層包裝，proxy便是發送一個異步請求，接下來的代碼便是獲取到異步操作返回的數據，細節可暫時忽略)：

請點擊輸入圖片描述

這感覺就是真他媽的舒服，怎么實現這么一個讓人很爽的東西呢，于是我們的主角---偉大的Generator函數登場了。

先理解這么自己悟的一句話：

"javascript是單線程的，順序執行一段代碼，執行到了異步操作，按正常的邏輯走的話就是主隊列中的代碼繼續執行，這時異步隊列中的代碼還未執行，我們繼續執行的代碼也就會發生報錯。那么解決問題的關鍵就是，我們能夠手動控制代碼的向下執行，配合一個東西監聽到異步操作的已經正常返回了之后，去手動的操作代碼的執行流程，這樣的話就實現了已同步的方式控制異步代碼的執行" 

那么問題變成了解決兩個問題。

1、我們是如何實現對于異步操作是否成功返回的監聽。

2、如何手動操作代碼的向下執行。

對于第一個問題，我們采用的方案是使用promise對象的方式，Promise 的編程思想便是，用于“當xx數據準備完畢，then執行xx動作”這樣的場景，用在這里再適合不過。

對于第二個問題，我們便是采用偉大的generator生成器函數，其中的yield特性，可以使我們手動的控制代碼的向下執行。

接下來我們實際的解決一個問題：實現對于讀取文件異步操作的控制，當讀取完文件之后打印讀取的內容。

我們依賴于node環境，首先通過promise對其進行封裝，實現數據成功的監聽。我們手下代碼如下：

請點擊輸入圖片描述

var fs = require('fs');var readFile = function(fileName) {    return new Promise(function(resolve,reject) {

       fs.readFile(fileName, function(err, data) {            if (err) return reject(err);

           resolve(data);

       })

   })

}

請點擊輸入圖片描述

有了這個東西，我們便可以通過其then()表達式，"當數據加載完后，執行某個動作"。那我們執行的動作是啥，自然就是執行下一步的代碼的操作。繼續看代碼：

請點擊輸入圖片描述

var gen = function* () {    var f1 = yield readFile('/Users/dongqiang/Desktop/demo.txt');    var f2 = yield readFile('/Users/dongqiang/Desktop/demo.txt');

   買粉絲nsole.log('<<<<<<<<<<<<<<<<<<<<<<<',f1.toString());

   買粉絲nsole.log('>>>>>>>>>>>>>>>>>>>>>>>>',f2.toString());

}

請點擊輸入圖片描述

這個就是一個generator函數的表達式，在這個函數里面，遇到generator就會執行類似于return的操作。我們通過next()便可以實現手動的控制代碼的向下執行。

那么我們如何控制代碼的執行流程呢，看下面一段：

請點擊輸入圖片描述

var g = gen();

g.next().value.then(function(data){

 g.next(data).value.then(function(data){

   g.next(data);

 });

});

請點擊輸入圖片描述

這段的具體解釋就是，我們通過promise封裝的對象實現了對于異步操作數據返回的監聽，當數據返回的時候，我們就通過next()執行下一步的操作，同時把上步操作的值帶入到下一個階段的執行流程之中。

但是上面這段操作很是蛋疼啊，我們要的是一個能通用的操作流程函數。那么我們繼續對這段循環操作進行封裝：

請點擊輸入圖片描述

function run(gen){  var g = gen();  function next(data){    var result = g.next(data);    if (result.done) return result.value;

   result.value.then(function(data){

     next(data);

   });

 }

 next();

}

run(gen);

請點擊輸入圖片描述

于是一個非常簡單的買粉絲模塊便誕生了。

最終代碼如下：

請點擊輸入圖片描述

我們把函數放到run的執行器里面，便實現了同步操作異步代碼的過程

聊一聊 Vue3 中響應式原理

Vue.js 3.0 "One Piece" 正式發布已經有一段時間了，真可謂是千呼萬喚始出來啊！

相比于 Vue2.x ， Vue3.0 在新的版本中提供了更好的性能、更小的捆綁包體積、更好的 TypeScript 集成、用于處理大規模用例的新 API 。

在發布之前，尤大大就已經聲明了響應式方面將采用 Proxy 對于之前的 Object.defineProperty 進行改寫。其主要目的就是彌補 Object.defineProperty 自身的一些缺陷，例如無法檢測到對象屬性的新增或者刪除，不能監聽數組的變化等。

而 Vue3 采用了新的 Proxy 實現數據讀取和設置攔截，不僅彌補了之前 Vue2 中 Object.defineProperty 的缺陷，同時也帶來了性能上的提升。

今天，我們就來盤一盤它，看看 Vue3 中響應式是如何實現的。

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object. MDN

Proxy - 代理，顧名思義，就是在要訪問的對象之前增加一個中間層，這樣就不直接訪問對象，而是通過中間層做一個中轉，通過操作代理對象，來實現修改目標對象。

Vue3 中響應式核心方法就是 reactive 和 effect ， 其中 reactive 方法是負責將數據變成響應式， effect 方法的作用是根據數據變化去更新視圖或調用函數，與 react 中的 useEffect 有點類似~

其大概用法如下：

默認會執行一次，打印 Hello , 之后更改了 data.name 的值后，會在觸發執行一次，打印 World 。

我們先看看 reactive 方法的實現~

reactive.js

首先應該明確，我們應該導出一個 reactive 方法，該方法有一個參數 target ，目的就是將 target 變成響應式對象，因此返回值就是一個響應式對象。

reactive 方法基本結構就是如此，給定一個對象，返回一個響應式對象。

其中 isObject 方法用于判斷是否是對象，不是對象不需要代理，直接返回即可。

reactive 方法的重點是 Proxy 的第二個參數 handler ，它承載監控對象變化，依賴收集，視圖更新等各項重大責任，我們重點來研究這個對象。

handler.js

在 Vue3 中 Proxy 的 handler 主要設置了 get ， set ， deleteProperty ， has ， ownKeys 這些屬性，即攔截了對象的讀取，設置，刪除， in 以及 Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法。

這里我們偷個懶，暫時就考慮 se

很赞哦!（327）