JavaScript 设计模式之外观模式

放逐的程序猿

已于 2024-02-12 10:50:21 修改

阅读量1k

点赞数 9

分类专栏： JavaScript设计模式文章标签：外观模式

于 2024-02-09 11:07:39 首次发布

本文链接：https://blog.youkuaiyun.com/u010279990/article/details/136085372

版权

JavaScript设计模式专栏收录该内容

13 篇文章

订阅专栏

本文介绍了外观模式在JavaScript库中的应用，如何通过封装简化底层操作，以及数据适配的新方法，如使用对象而非多个参数，以增强代码的灵活性和扩展性，如Vue和jQuery的实例展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

外观模式

我们为啥要使用外观模式呢，其实我们在使用各种 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:
  }
})

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