JavaScript 设计模式之外观模式

外观模式

我们为啥要使用外观模式呢,其实我们在使用各种 js 库的时候常常会看到很多的外观者模式,也正是这些库的大量使用,所以使得兼容性更广泛,通过外观者模式来封装多个功能,简化底层操作方法

javascript 复制代码
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

数据适配

在我们写方法时,通常会传递参数的形式来传递数据

javascript 复制代码
function fun(arg1,arg2,arg3,...){
    // todo:
}

但是我们更应该这样来写

javascript 复制代码
function fun(opts = {}) {
    const {a,b,c} = opts
    // opts.xx
    // todo:
}

使用一个对象来接受一些多个参数,使用时进行结构等方式读取数据,这样就避免了多个参数导致数据传递错误问题了,其实在很多的框架中也常常看到这种,比如 Vue 中

javascript 复制代码
import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

这 createApp 方法就单单只是传递一个对象来作为一个参数,而不是一二三个参数

比如 jQuery 中

javascript 复制代码
$.ajax({
  url: 'xx',
  method: 'get',
  dataType: 'json',
  success: function (data) {
    // todo:
  }
})

这种例子也是非常的多,这样的好处就是方便后期扩展,对于后期堆加参数更有利。

相关推荐
缘来是庄3 天前
设计模式之外观模式
java·设计模式·外观模式
charlie11451419119 天前
从C++编程入手设计模式——外观模式
c++·设计模式·外观模式
勤奋的知更鸟20 天前
Java编程之外观模式
java·开发语言·设计模式·外观模式
WispX8881 个月前
【设计模式】门面/外观模式
java·开发语言·设计模式·系统架构·外观模式·插件·架构设计
蔡蓝1 个月前
设计模式-外观模式
microsoft·设计模式·外观模式
琢磨先生David1 个月前
简化复杂系统的优雅之道:深入解析 Java 外观模式
java·设计模式·外观模式
bao_lanlan2 个月前
兰亭妙微:用系统化思维重构智能座舱 UI 体验
ui·设计模式·信息可视化·人机交互·交互·ux·外观模式
智想天开2 个月前
14.外观模式:思考与解读
windows·microsoft·设计模式·外观模式
ErizJ2 个月前
Golang|外观模式和具体逻辑
开发语言·golang·外观模式
碎梦归途2 个月前
23种设计模式-结构型模式之外观模式(Java版本)
java·开发语言·jvm·设计模式·intellij-idea·外观模式