惰性載入(函式)-跟JS效能有關的思想
阿新 • • 發佈：2020-12-07
一、惰性載入概念：
惰性、懶惰、圖省事也
惰性載入函式：函式執行時會根據不同的判斷分支最終選擇合適的方案執行，但這樣的分支判斷僅會發生一次，後面的其他同類執行都不會在分支判斷。提高了JS執行效率效能
一句話理解：某功能函式如果需要多個分支判斷出一套方案，後續執行都僅需這一套方案就可採用“惰性載入”設計
二、用到的思想：
- 我們定義好的函式，實際上在執行的過程中是就可以被動態修改其定義的
- 除首次執行外，被修改的定義的函式後續被執行將用新的函式定義
三、一個DEMO：
原生JS給dom新增事件需要考慮宿主環境即瀏覽器環境的支援性，
比如IE系瀏覽器不同程度支援attachEvent或addEventListener，
其他大多數瀏覽器基本都支援addEventListener的方式
因此在用原生JS給dom新增事件的時候，我們封裝了一個通用函式addEvent用以暴露統一的介面給dom新增事件，addEvent中會對是否存在attachEvent或addEventListener進行判斷進而使用各自瀏覽器支援的事件方法給dom新增事件，然而傳統的if else判斷雖然能實現功能，但當前環境下後續的每次事件新增都會依次執行這些分支判斷，顯然是沒有意義的執行，因為判斷一次就夠了，
具體實現：
定義方法addEvent，根據支援情況，在函式內部直接修改函式定義，最後返回執行新的該函式定義
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>惰性載入(函式)演示</title> 6 </head> 7 <body> 8 9 <button type="button" id="btn1">btn1</button> 10 <button type="button" id="btn2">btn2</button> 11 <button type="button" id="btn3">btn3</button> 12 <button type="button" id="btn4" onclick="console.log(addEvent)">檢視 addEvent 函式</button> 13 14 <script> 15 16 function addEvent(el, eventName, fn) { 17 if (window.attachEvent) { 18 addEvent = function (el, eventName, fn) { // 修改函式addEvent的定義 19 el.attachEvent('on'+ eventName, fn); 20 } 21 } else if (window.addEventListener) { 22 addEvent = function (el, eventName, fn) { // 修改函式addEvent的定義 23 el.addEventListener(eventName ,fn); 24 } 25 } 26 27 return addEvent(el, eventName, fn) // 返回新的函式定義並執行 28 } 29 30 const btn1 = document.querySelector('#btn1'), 31 btn2 = document.querySelector('#btn2'), 32 btn3 = document.querySelector('#btn3'); 33 34 addEvent(btn1, 'click', function () { 35 console.log('btn1 dosomething') 36 }) 37 38 addEvent(btn2, 'click', function () { 39 console.log('btn2 dosomething') 40 }) 41 42 addEvent(btn3, 'click', function () { 43 console.log('btn3 dosomething') 44 }) 45 46 </script> 47 </body> 48 </html>
檢視 addEvent 函式：
經過初始化後，addEvent函式程式設計了這樣，已經沒有了多餘的判斷，因為對於當前環境來說這就夠了
1 ƒ (el, eventName, fn) { 2 el.addEventListener(eventName ,fn); 3 }
四、適應場景：
比如針對不同環境進行的相關處理，只需一次環境判斷的情況