⭐️ 更多前端技术和知识点,搜索订阅号
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