外观模式 - 掘金

⭐️ 更多前端技术和知识点，搜索订阅号 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 的技术文章，只谈技术不谈八卦 😊