《前端實戰總結》之設計模式的應用——備忘錄模式

概念介紹

備忘錄模式簡單的說就是在不破壞已有邏輯的前提下,將往後須要獲取的數據在第一次保存下來以避免形成重複且低效的操做。該設計模式最主要的任務就是對現有數據或者狀態作緩存,爲未來某個時刻使用或者恢復作準備。javascript

應用場景

首先在javascript編程中,咱們的應用每每是經過瀏覽器端向服務器發送請求來獲取數據的,而請求的過程當中每每會消耗必定的時間流量,對重複性數據反覆請求不只增長了服務端的壓力,還會形成瀏覽器端對數據請求的等待進而影響用戶體驗。所以做爲一個有逼格的程序員,有比較對這塊性能作出優化。接下來舉一些常見的應用場景。css

1. 分頁時的數據緩存

好比咱們請求一個長列表,須要作分頁,那麼咱們每次切換分頁都會從新請求一次,爲了優化咱們能夠將第一次的分頁請求數據緩存,當下次再切換到這一頁的時候咱們會先判斷緩存對象中是否有該數據,若是有就直接走緩存,沒有就發起請求,並將當前的數據存入對應頁數的緩存中。前端

2. 內容懶加載時的緩存

爲了提升頁面首屏渲染時間,咱們每每會使用懶加載的方式,好比圖片懶加載,內容數據懶加載,其原理和分頁很像,好比在用戶下拉時顯示更多數據等,當用戶切換頁面後又切換回來時,咱們能夠將以前請求的數據緩存,這樣就不用再次請求一次了,除非用戶手動刷新。vue

3. 網站換膚

網站換膚也是目前比較經常使用的功能之一,好比可視化的網站,各類建站網站,目前都在走所見即所得的路子,這樣能夠更近一步的提升用戶體驗,須要平凡的改動用戶的界面風格和樣式,還須要提供用戶撤銷的功能,那麼利用備忘錄模式就更好不過了,他能夠在用戶保存以後能夠不請求後端接口的狀況下拿到上一步的配置參數,對於高頻操做來講,這無疑大大提升了用戶體驗和網站性能。java

4. 其餘

好比系統的公共配置,用戶瀏覽記錄的緩存,路由的緩存等等,均可以用備忘錄模式來提升性能,最經常使用的就是vue-router,咱們可使用keep-alive來緩存路由,其實原理也是相似的,如此種種,瞭解了備忘錄模式,你的網站就有了更近一步的優化空間。node

基本實現

綜合以上的場景分析和討論,咱們能夠抽象出一個公共的緩存方法來處理不一樣情景下的數據緩存。代碼以下:webpack

const baseOperateController = function() {
    // 緩存對象
    const cache = {};
    // 基礎函數
    return function(params, fn, cb) {
        // 判斷是否在緩存下
        if(cache[params]) {
            // 從緩存中讀取並傳遞給業務函數
            fn(cache[params])
        }else {
            // 沒有緩存則將控制權轉移給外部回調函數,並傳遞相應參數
            cb && cb(params).then((res => {
                cache[params] = res.data;
            })).catch(err => console.log(err))
        }
    }
}()

// 使用
baseOperateController(params, showView, asyncFn)
複製代碼

最後

若是想了解更多webpack,node,gulp,css3,javascript,nodeJS,canvas等前端知識和實戰,歡迎在公衆號《趣談前端》加入咱們一塊兒學習討論,共同探索前端的邊界。css3

更多推薦

相關文章
相關標籤/搜索