外觀模式

⭐️ 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱

外觀模式主要優勢在於對客戶屏蔽子系統組件，減小了客戶處理的對象數目並使得子系統使用起來更加容易，它實現了子系統與客戶之間的鬆耦合關係，並下降了大型軟件系統中的編譯依賴性，簡化了系統在不一樣平臺之間的移植過程

基本用法

比方說顯示或隱藏某個 html 元素：

function toggleVisible(elem) {
    return {
        visible() {
            elem.style.opacity = '1'
            return this
        },
        invisible() {
            elem.style.opacity = '0'
            return this
        }
    }
}
複製代碼

外觀模式的優勢就是用戶不須要去理解內部實現邏輯

toggleVisible(document.body).invisible().sleep(1000).visible()
複製代碼

又好比統一事件監聽的處理函數

function addEvent(elem, type, fn) {
  if (elem.addEventListener) {
    elem.addEventListener(type, fn, false);
  } else if (elem.attachEvent) {
    elem.attachEven("on" + type, fn);
  } else {
    elem["on" + type] = fn;
  }
}
複製代碼

函數參數的重載

處理函數某些參數可傳可不傳的狀況

function test(param1, optionalParam2, callback) {
    // optionalParam2 是可選參數，可傳可不傳
    if (typeof optionalParam2 === 'function') {
        callback = optionalParam2
        optionalParam2 = undefined
    }
    console.log(param1, optionalParam2, callback)
    callback('logging')
}

test(1, 2, console.log) // logging
test(1, console.log) // logging
複製代碼

請關注個人訂閱號，不按期推送有關 JS 的技術文章，只談技術不談八卦 😊