重構 -- 方法封裝 · 前端知識 -- 學習整理

>[success] # 方法封裝 1. **函數的封裝性**是指把函數相關的數據和行為結合在一起，對調用者隱藏內部處理過程 1.1. 提取函數中可變的，將其變為參數 1.2. 考慮**副作用**，將副作用代碼從封裝中剝離出來，**注副作用說明**把改變外部狀態的部分叫做代碼叫做**副作用**，**副作用危害**所有的外部交互都有可能帶來副作用，**副作用**也使得方法通用性下降**不適合擴展**和**可重用性**，同時副作用會給程序中帶來**安全隱患給程序帶來不確定性**，但是副作用不可能完全禁止，**盡可能控制**它們在可控范圍內發生。 1.3. 代碼可讀性質，**代碼是給人讀的，只是偶爾讓計算機執行一下** >[info] ## 案例說明模擬交通燈信號，分別以5秒、1.5秒、3.5秒來循環切換綠燈（pass狀態）、黃燈（wait狀態）和紅燈（stop狀態）。也就是，默認是綠燈，過5秒后顯示黃燈，過1.5秒后顯示紅燈，再過3.5秒后又回到綠燈，然后以這樣的方式繼續循環下去 >[danger] ##### 沒經過考慮只為實現的寫法 * **下面代碼存在問題** 1. 代碼寫死了，如果后續紅綠燈交替時間需要變更不在是**5秒、1.5秒、3.5秒** 2. 函數內部調用了外部` const traffic = document.querySelector('.traffic')`，讓函數產生了副作用(可以理解為如果通過其他方式改變了`traffic`變量函數執行產生的對應結果也會發生變化，導致函數不在是純函數) 3. `traffic.className = signal`他的改變完全影響是外部元素，而不再是函數內部，因此產生副作用 4. 最重要代碼可讀性不高 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .traffic { display: flex; flex-direction: column; align-items: center; } .traffic .light { width: 100px; height: 100px; border-radius: 50%; background-color: #999; } /* 設置不同燈顏色 */ .traffic.pass .light:nth-child(1) { /* 綠燈 */ background-color: green; } .traffic.wait .light:nth-child(2) { /* 黃燈 */ background-color: yellow; } .traffic.stop .light:nth-child(3) { /* 紅燈 */ background-color: red; } </style> </head> <body> <div class="traffic pass"> <div class="light"></div> <div class="light"></div> <div class="light"></div> </div> </body> <script> // 紅綠燈展示 -- 寫死 // 問題是函數中多了一個來源不明的變量`traffic` // 產生問題這個函數復用到其他地方，我們還得在那個地方重建這個traffic對象(副作用) // `traffic.className = signal`他的改變完全影響是外部元素，而不再是函數內部，(副作用) // 就是函數體內部不應該有完全來自外部環境的變量，除非這個函數不打算復用 // 可變的數據作為變量,將這些變量規整為數據的結構化 // const traffic = document.querySelector('.traffic') // function loop() { // setTimeout(() => { // 來源不明不是函數內部定義也不是通過參數傳入 // traffic.className = 'traffic pass' // setTimeout(() => { // traffic.className = 'traffic wait' // setTimeout(() => { // traffic.className = 'traffic stop' // loop() // }, 1500) // }, 3000) // }, 5000) // } // loop() const traffic = document.querySelector('.traffic') function loop() { setTimeout(() => { // 來源不明不是函數內部定義也不是通過參數傳入 traffic.className = 'traffic pass' setTimeout(() => { traffic.className = 'traffic wait' setTimeout(() => { traffic.className = 'traffic stop' loop() }, 1500) }, 3000) }, 5000) } loop() </script> </html> ~~~ >[danger] ##### 改版代碼 1. 先分析出代碼中可變的部分將其按照合理數據規則去規劃傳參，其中**定時器時間**，定義顯示不同燈**顏色的css**，下一步就是靠采用什么結構作為參數，是六個參數(定時器時間和顏色×3)，還是三組(定時器時間和顏色為一組對象 × 3)，還是采用更加合理數組形式（只要一個參數顯然這個更加合理） 2. 下一步解除兩個副作用，一個是`const traffic = document.querySelector('.traffic')`,可以將其變成參數傳入到函數中，`traffic.className = signal` 他的改變完全影響是外部元素，而不再是函數內部，因此考慮把函數體內部有副作用的代碼剝離出來，這往往能提升函數的通用性、穩定性和可測試性 3. 可讀性讓代碼具備語義 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .traffic { display: flex; flex-direction: column; align-items: center; } .traffic .light { width: 100px; height: 100px; border-radius: 50%; background-color: #999; } /* 設置不同燈顏色 */ .traffic.pass .light:nth-child(1) { /* 綠燈 */ background-color: green; } .traffic.wait .light:nth-child(2) { /* 黃燈 */ background-color: yellow; } .traffic.stop .light:nth-child(3) { /* 紅燈 */ background-color: red; } </style> </head> <body> <div class="traffic pass"> <div class="light"></div> <div class="light"></div> <div class="light"></div> </div> </body> <script> // 代碼是給人讀的，只是偶爾讓計算機執行一下 // 將setTimeout 封裝到一個wait函數 function wait(ms) { return new Promise((resolve) => { setTimeout(resolve, ms) }) } const traffic = document.querySelector('.traffic') async function signalLoop(subject, signals = [], onSignal) { const signalCount = signals.length // 也可使用 while(true) 循環 for (let i = 0; ; i++) { const { signal, duration } = signals[i % signalCount] await onSignal(subject, signal) await wait(duration) } } const signals = [ { signal: 'pass', duration: 5000 }, { signal: 'wait', duration: 3500 }, { signal: 'stop', duration: 1500 }, ] signalLoop(traffic, signals, (subject, signal) => { subject.className = `traffic ${signal}` }) </script> </html> ~~~ >[info] ## 參考 [第三天：代碼的封裝性、可讀性和正確性](https://juejin.cn/book/6891929939616989188/section/6891930943884689421)