JavaScript 设计模式之外观模式
外观模式
我们为啥要使用外观模式呢，其实我们在使用各种 js 库的时候常常会看到很多的外观者模式，也正是这些库的大量使用，所以使得兼容性更广泛，通过外观者模式来封装多个功能，简化底层操作方法
const A = {
g: function (id) {
return document.querySelector(`#${id}`)
},
css: function (id, key, value) {
this.g(id).style[key] = value
return this
},
attr: function (id, key, value) {
this.g(id)[key] = value
return this
},
html: function (id, html) {
this.g(id).innerHTML = html
return this
}
}
A.css('box','background','red') // 为 id 为 box 的 盒子设置 background 样式属性为 red数据适配
在我们写方法时，通常会传递参数的形式来传递数据
function fun(arg1,arg2,arg3,...){
// todo:
}但是我们更应该这样来写
function fun(opts = {}) {
const {a,b,c} = opts
// opts.xx
// todo:
}使用一个对象来接受一些多个参数，使用时进行结构等方式读取数据，这样就避免了多个参数导致数据传递错误问题了，其实在很多的框架中也常常看到这种，比如 Vue 中
import { createApp, ref } from 'vue'
createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')这 createApp 方法就单单只是传递一个对象来作为一个参数，而不是一二三个参数
比如 jQuery 中
$.ajax({
url: 'xx',
method: 'get',
dataType: 'json',
success: function (data) {
// todo:
}
})
这种例子也是非常的多，这样的好处就是方便后期扩展，对于后期堆加参数更有利。