JS进阶9 --JS设计模式

于 2023-12-10 19:45:49 发布
阅读量894 收藏 18
点赞数 18
分类专栏： JS进阶 文章标签： javascript 设计模式 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44581775/article/details/134874984
版权

JS进阶9 --JS设计模式


在 JS进阶8 – 函数柯里化I中我们学习了函数柯里化，并对与其相关的经典面试题和实际应用进行了深入剖析。本文将继续跟大家介绍JS中的第9个重点内容 – JS设计模式。废话不多说，一起来看看吧！

JS进阶9 --JS设计模式

这一节咱们来学习JS中的设计模式
传送门:wiki-设计模式
传送门:JavaScript设计模式与开发实践

设计模式指的是：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。通俗一点说，设计模式就是给面向对象软件开发中的一些好的设计取个名字。

目前说到设计模式，一般指的是《设计模式：可复用面向对象软件的基础》一书中提到的23种常见的软件开发设计模式。

JavaScript中不需要生搬硬套这些模式，咱们结合实际前端开发中的具体应用场景，来看看有哪些常用的设计模式。

这一节咱们会学习:

  1. JS中的常用设计模式
  2. 设计模式在开发/框架中的应用场景

工厂模式

在JavaScript中，工厂模式的表现形式就是一个直接调用即可返回新对象的函数。

// 定义构造函数并实例化
function Dog(name){
    this.name=name
}
const dog = new Dog('柯基')

// 工厂模式
function ToyFactory(name,price){
    return {
        name,
        price
    }
}
const toy1 = ToyFactory('布娃娃',10)
const toy2 = ToyFactory('玩具车',15)

应用场景

  1. Vue2->Vue3:
    1. 废弃了new Vue,改成了工厂函数createApp-传送门
    2. 任何全局改变 Vue 行为的 API(vue2) 现在都会移动到应用实例上(vue3)
    3. 就不会出现,Vue2中多个Vue实例共享,相同的全局设置,可以实现隔离。
 <!DOCTYPE html>
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
       #app1,
       #app2 {
         border: 1px solid #000;
       }
     </style>
   </head>
   
   <body>
     <h2>vue2-全局注册组件</h2>
     <div id="app1">
       实例1
       <my-title></my-title>
     </div>
     <div id="app2">
       实例2
       <my-title></my-title>
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
     <script>
       Vue.component('my-title', {
         template: '<h2 style="color:orange">标题组件</h2>'
       })
       const app1 = new Vue({
         el: "#app1"
       })
   
       const app2 = new Vue({
         el: "#app2"
       })
   
     </script>
   </body>
 </html>
  1. axios.create:
    1. 基于传入的配置创建一个新的axios实例,传送门
    2. 项目中有2个请求基地址如何设置?
// 1. 基于不同基地址创建多个 请求对象
const request1 = axios.create({
  baseURL: "基地址1"
})
const request2 = axios.create({
  baseURL: "基地址2"
})
const request3 = axios.create({
  baseURL: "基地址3"
})

// 2. 通过对应的请求对象,调用接口即可
request1({
  url: '基地址1的接口'
})
request2({
  url: '基地址2的接口'
})
request3({
  url: '基地址3的接口'
})

总结

  1. 工厂模式:JS中的表现形式,返回新对象的函数(方法)
   function sayHi(){} // 函数
   const obj ={
       name:'jack',
       sayHello(){} // 方法
   }
  1. 日常开发中,有2个很经典的场景
    1. vue3中创建实例的api改为createApp,vue2中是new Vue。
      1. Vue3中,没有影响所有Vue实例的api了,全都变成了影响某个app对象的api,比如Vue.component-->app.component。
    2. axios.create基于传入的配置,创建一个新的请求对象,可以用来设置多个基地址。

单例模式

单例模式指的是，在使用这个模式时，单例对象整个系统需要保证只有一个存在。

需求

  1. 通过静态方法getInstance获取唯一实例
const s1 = SingleTon.getInstance()
const s2 = SingleTon.getInstance()
console.log(s1===s2)//true

核心步骤

  1. 定义类
  2. 私有静态属性:#instance
  3. 提供静态方法getInstance:
    1. 调用时判断#instance是否存在:
    2. 存在:直接返回
    3. 不存在:实例化,保存,并返回
class SingleTon {
   constructor() { }
   // 私有属性，保存唯一实例
   static #instance

  // 获取单例的方法
  static getInstance() {
    if (SingleTon.#instance === undefined) {
      // 内部可以调用构造函数
      SingleTon.#instance = new SingleTon()
    }
    return SingleTon.#instance
  }
}

实际应用

  1. vant组件库中的弹框组件,保证弹框是单例
    1. toast组件:传送门
    2. notify组件:传送门
    3. 如果弹框对象
      1. 不存在,–>创建一个新的
      2. 存在,直接用
  2. vue中注册插件,用到了单例的思想(只能注册一次)
    1. vue2:传送门
    2. vue3:传送门

总结

  1. 单例模式:
    1. 保证,应用程序中,某个对象,只能有一个
  2. 自己实现核心为一个返回唯一实例的方法,比如getInstance
    1. 实例存在->返回
    2. 实力不存在->创建,保存->返回
  3. 应用场景:
    1. vant的toast和notify组件都用到了单例:多次弹框,不会创建多个弹框,复用唯一的弹框对象
    2. vue中注册插件,vue2和vue3都会判断插件是否已经注册,已注册,直接提示用户

观察者模式

在对象之间定义一个一对多的依赖，当一个对象状态改变的时候，所有依赖的对象都会自动收到通知。

应用场景

1. dom事件绑定，比如
window.addEventListener('load', () => {
  console.log('load触发1')
})
window.addEventListener('load', () => {
  console.log('load触发2')
})
window.addEventListener('load', () => {
  console.log('load触发3')
})
2. Vue中的watch:

总结

  1. 观察者模式重点说清楚2点即可:
    1. 在对象之间定义一个一对多的依赖，当一个对象状态改变的时候，所有依赖的对象都会自动收到通知。
    2. 常见场景:vue中的watch,dom事件绑定
      观察者模式和发布订阅模式的区别也是常见考点,回答方式见下一节

发布订阅模式

发布订阅模式可以实现的效果类似观察者模式,但是两者略有差异,一句话描述:一个有中间商(发布订阅模式)一个没中间商(观察者模式)
在这里插入图片描述

应用场景

  1. vue2中的EventBus:传送门
  2. vue3中因为移除了实例上对应方法，可以使用替代方案:传送门
    1. 官方推荐,用插件
    2. 我们自己写

手写发布订阅模式

需求
const bus = new MyEmmiter()
// 注册事件
bus.$on('事件名1',回调函数)
bus.$on('事件名1',回调函数)

// 触发事件
bus.$emit('事件名',参数1,...,参数n)

// 移除事件
bus.$off('事件名')

// 一次性事件
bus.$once('事件名',回调函数)
核心步骤
  1. 定义类
  2. 私有属性:#handlers={事件1:[f1,f2],事件2:[f3,f4]}
  3. 实例方法:
    1. $on(事件名,回调函数):注册事件
    2. $emit(事件名,参数列表):触发事件
    3. $off(事件名):移除事件
    4. $once(事件名,回调函数):注册一次性事件

基础模板:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>自己实现事件总线</h2>
  <button class="on">注册事件</button>
  <button class="emit">触发事件</button>
  <button class="off">移除事件</button>
  <button class="once-on">一次性事件注册</button>
  <button class="once-emit">一次性事件触发</button>
  <script>
    class MyEmmiter {
    	// 逻辑略
    }

    // 简化 querySelector调用
    function qs(selector) {
      return document.querySelector(selector)
    }
    // 注册事件
    qs('.on').addEventListener('click', () => {
    
    })
    // 触发事件
    qs('.emit').addEventListener('click', () => {
   
    })
    // 移除事件
    qs('.off').addEventListener('click', () => {
      
    })
    // 一次性事件注册
    qs('.once-on').addEventListener('click', () => {
     
    })
    // 一次性事件触发
    qs('.once-emit').addEventListener('click', () => {
     
    })
  </script>
</body>

</html>

class MyEmmiter {
  #handlers = {}
  // 注册事件
  $on(event, callback) {
    if (!this.#handlers[event]) {
      this.#handlers[event] = []
    }
    this.#handlers[event].push(callback)
  }
  // 触发事件
  $emit(event, ...args) {
    const funcs = this.#handlers[event] || []
    funcs.forEach(func => {
      func(...args)
    })
  }
  // 移除事件
  $off(event) {
    this.#handlers[event] = undefined
  }
  // 一次性事件
  $once(event, callback) {
    this.$on(event, (...args) => {
      callback(...args)
      this.$off(event)
    })
  }
}
总结
  1. 发布订阅模式:可以实现的效果类似观察者模式,但是两者略有差异,一句话描述:一个有中间商(发布订阅模式)一个没中间商(观察者模式)
  2. 经典的场景是vue2中的EventBus,vue3移除了实例的$on,$off,$emit方法,如果还需要使用:
    1. 使用第三方插件
    2. 自己实现事件总线:
  3. 自己实现事件总线的核心逻辑:
    1. 添加类,内部定义私有属性#handlers={},以对象的形式来保存回调函数
    2. 添加实例方法:
      1. $on:
        1. 接收事件名和回调函数
        2. 内部判断并将回调函数保存到#handlers中,以{事件名:[回调函数1,回调函数2]}格式保存
      2. $emit
        1. 接收事件名和回调函数参数
        2. 内部通过#handlers获取保存的回调函数,如果获取不到设置为空数组[]
        3. 然后挨个调用回调函数即可
      3. $off
        1. 接收事件名
        2. 将#handlers中事件名对应的值设置为undefined即可
      4. $once
        1. 接收事件名和回调函数
        2. 内部通过$on注册回调函数,
        3. 内部调用callback并通过$off移除注册的事件

原型模式

在原型模式下，当我们想要创建一个对象时，会先找到一个对象作为原型，然后通过克隆原型的方式来创建出一个与原型一样（共享一套数据/方法）的对象。在JavaScript中,Object.create就是实现原型模式的内置api。

应用场景

vue2中重写数组方法:

  1. 调用方法时(push,pop,shift,unshift,splice,sort,reverse)可以触发视图更新:传送门
  2. 源代码:传送门
  3. 测试一下:
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>原型模式</h2>
  <div id="app"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app", data: {
        foods: ['西瓜', '西葫芦', '西红柿']
      }
    })
    console.log(app.foods.push === Array.prototype.push)
  </script>

</body>

</html>

总结

  1. 原型模式:
    1. 基于某个对象,创建一个新的对象
    2. JS中,Object.create就是实现了这个模式的内置api
    3. 比如vue2中重写数组方法就是这么做的
  2. vue2中数组重写了7个方法,内部基于数组的原型Array.prototype创建了一个新对象
  3. 创建的方式是通过Object.create进行浅拷贝
  4. 重写的时候:
    1. 调用数组的原方法,获取结果并返回—方法的功能和之前一致
    2. 通知了所有的观察者去更新视图
const app = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3]
    }
})
app.arr.push === Array.prototype.push //false

代理模式

代理模式指的是拦截和控制与目标对象的交互。
这里我们来看一个非常经典的代理模式的应用: 缓存代理
在这里插入图片描述

核心语法

  1. 创建对象缓存数据
  2. 获取数据时,先通过缓存判断:
    1. 有直接获取
    2. 没有:调用接口
//  1. 创建对象缓存数据
const cache = {}
async function searchCity(pname) {
  // 2. 判断是否缓存数据
  if (!cache[pname]) {
    // 2.1 没有:查询,缓存,并返回
    const res = await axios({
      url: 'http://hmajax.itheima.net/api/city',
      params: {
        pname
      }
    })
    cache[pname] = res.data.list
  }
  // 2.2 有:直接返回
  return cache[pname]
}

document.querySelector('.query').addEventListener('keyup', async function (e) {
  if (e.keyCode === 13) { // 回车键
    const city = await searchCity(this.value)
    console.log(city)
  }
})

总结

  1. 代理模式的核心是,通过一个代理对象拦截对原对象的直接操纵。
  2. 比如可以通过缓存代理:
    1. 缓存获取到的数据
    2. 拦截获取数据的请求:
      1. 已有缓存:直接返回缓存数据
      2. 没有缓存:去服务器获取数据并缓存
  3. 提升数据获取效率,降低服务器性能消耗。

迭代器模式

迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示.简而言之就是:遍历。
遍历作为日常开发中的高频操作,JavaScript中有大量的默认实现:比如

  1. Array.prototype.forEach:遍历数组
  2. NodeList.prototype.forEach:遍历dom,document.querySelectorAll
  3. for in
  4. for of

面试题

1. for in 和for of 的区别?
  1. for...in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
    1. 对象默认的属性以及动态增加的属性都是可枚举属性
    2. 遍历出来的是属性名
    3. 继承而来的属性也会遍历
  2. for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环。
    1. for of不会遍历继承而来的属性
    2. 遍历出来的是属性值
Object.prototype.objFunc = function () { }
Array.prototype.arrFunc = 'arrFunc'

const foods = ['西瓜', '西葫芦', '西兰花']
for (const key in foods) {
  console.log('for-in:key', key)
}
for (const iterator of foods) {
  console.log('for-of:iterator', iterator)
}
2. 可迭代协议和迭代器协议
  1. 可迭代协议:传送门
    1. 给对象增加方法 [Symbol.iterator](){}
    2. 返回一个符合迭代器协议的对象
  2. 迭代器协议:传送门
    1. next方法,返回对象:
      1. {done:true},迭代结束
      2. {done:false,value:'xx'},获取解析并接续迭代
      3. 实现方式:
        1. 手写
        2. Generator
// ------------- 迭代协议 -------------
/**
 * 迭代协议可以定制对象的迭代行为  分为2个协议:
 *  1. 可迭代协议: 增加方法[Symbol.iterator](){} 返回符合 迭代器协议 的对象
 *  2. 迭代器协议: 
 *      有next方法的对象,next方法返回:
 *        已结束: {done:true}
 *        继续迭代: {done:false,value:'x'}
 *    使用Generator
 *    自己实现 对象,next
 * */
const obj = {
  // Symbol.iterator 内置的常量
  // [属性名表达式]
  [Symbol.iterator]() {

    // ------------- 自己实现 -------------
    const arr = ['北京', '上海', '广州', '深圳']
    let index = 0

    return {
      next() {
        if (index < arr.length) {
          // 可以继续迭代
          return { done: false, value: arr[index++] }
        }
        // 迭代完毕
        return { done: true }
      }
    }


    // ------------- 使用Generator -------------
    // function* foodGenerator() {
    //   yield '西兰花'
    //   yield '花菜'
    //   yield '西兰花炒蛋'
    // }
    // const food = foodGenerator()
    // return food
  }
}

for (const iterator of obj) {
  console.log('iterator:', iterator)
}

总结

  1. 迭代器模式在js中有大量的默认实现,因为遍历或者说迭代是日常开发中的高频操作,比如forEach,for in,for of等。
  2. for in 和for of的区别:
    1. for...in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
      1. 对象默认的属性以及动态增加的属性都是可枚举属性
      2. 遍历出来的是属性名
      3. 继承而来的属性也会遍历
    2. for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环。
      1. for of不会遍历继承而来的属性
      2. 遍历出来的是属性值
  3. 如何自定义可迭代对象?
    1. 需要符合2个协议:可迭代协议和迭代器协议,其实就是按照语法要求实现功能而已。
    2. 可迭代协议:传送门
      1. 给对象增加方法 [Symbol.iterator](){}
      2. 返回一个符合迭代器协议的对象
    3. 迭代器协议:传送门
      1. 有next方法的一个对象,内部根据不同情况返回对应结果:
        1. {done:true},迭代结束
        2. {done:false,value:'xx'},获取解析并接续迭代
      2. 实现方式:
        1. 自己手写实现逻辑
        2. 直接返回一个Generator

参考资料

  1. 阮一峰-《ECMAScript 6 教程》
  2. 图灵社区-JavaScript高级程序设计
前端小白进阶之旅
关注
  • 18
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 设计模式
04-01
这个资源不要下载，是我测试上传用的，描述不支持HTML标签；详细的资源描述有机会获得我们的推荐，更有利于他人下载，赚取更多积分。如资源描述不清，有可能审核不通过。
js设计模式（二）
Jinrong
10-27 141
六、命令模式 1. 定义 用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系 命令（command）指的是一个执行某些特定事情的指令 2. 核心 命令中带有execute执行、undo撤销、redo重做等相关命令方法，建议显示地指示这些方法名 3. 实现 简单的命令模式实现可以直接使用对象字面量的形式定义一个命令 七、组合模式 1. 定义 是用小的子对象来构建更大的 对象，而这些小的子对象本身也许是由更小 的“孙对象”构成的。 2. 核心 可以用树形结构来表示这种“部分- 整
js设计模式
weixin_30873847的博客
01-21 93
目录 前言 单体模式 工厂模式 迭代器模式 装饰者模式 策略模式 外观模式 代理模式 中介者模式 观察者模式 前言 本文参考于《javascript模式》，因此会大量内容会和书中相同，手上有这本书的朋友可以直接看书。因为我的记忆习惯是抄书，所以我会先抄写下来再发到博客上。更新中。 单体模式 单体模式思想在于保证一个特定类仅有一个实例，意味着当你第二次使用同一个类...
JS 的设计模式
Chuhx的博客
07-26 66
什么是设计模式 假设有一个空房间，我们要日复一日地往里 面放一些东西。最简单的办法当然是把这些东西 直接扔进去，但是时间久了，就会发现很难从这 个房子里找到自己想要的东西，要调整某几样东 西的位置也不容易。所以在房间里做一些柜子也 许是个更好的选择，虽然柜子会增加我们的成 本，但它可以在维护阶段为我们带来好处。使用 这些柜子存放东西的规则，或许就是一种模式 目的 学习设计模式, 有助于我们写出可复用和可维护性高的代码 设计模式的原则是 找出程序中变化的地方 并将变化的封装起来 常用的设计模式 1.单
js-设计模式
xwc999
10-30 461
构造器模式 /** es5 */ //这样赋值对象 重复性工作很多 var whh = {}; whh.name = '王华华'; whh.age = 18; whh.sex = '男'; whh.scope = 98; var lqd = {}; lqd.name = '李全蛋'; lqd.age = 20; lqd.sex = '男'; lqd.scope = 46; console.log(whh.name) console.log(lqd.name) //构造器模式避免重复性操作直接new对象
JavaScript经典进阶系列-Effective JavaScript英文原版
04-14
9. **设计模式**：书中会介绍一些常见的JavaScript设计模式，如工厂函数、单例模式、观察者模式等，这些都是解决特定问题的有效策略。 10. **JavaScript与Web API**：与DOM交互、AJAX请求、定时器等Web API的使用，...
03web前端进阶教程-移动端
07-04
CSS3则提供了更多的布局模式（如Flexbox和Grid），以及丰富的动画和过渡效果，使得设计更具有交互性和视觉吸引力。 【JavaScript和ES6】 JavaScript是前端开发的核心语言，它的运行环境在浏览器上。ES6...
vue-基础-进阶-111
最新发布
02-01
Vuex是一个专为Vue设计的状态管理模式，它集中存储应用状态，并提供了一套规则来确保状态变更的可预测性。 9. **Vue CLI**：Vue命令行工具简化了Vue项目的初始化和开发流程，提供了快速创建项目、热重载、编译优化...
第四课 js进阶课程学习思考-011
08-03
"第四课 js进阶课程学习思考-011"着重强调了两个核心概念：JS知识的重要性以及抽象思维模式。以下是对这两个主题的详细阐述： 一、JS知识的重要性 1. 原生JS基础：原生JS是所有前端框架和类库的基础，它提供了Web...
js基础-高级-进阶学习
12-20
"js基础-高级-进阶学习"这个主题涵盖了JavaScript的基础语法、高级特性、jQuery库的应用，以及Bootstrap和Swiper这两个流行的框架。下面我们将逐一深入探讨这些知识点。 1. **JavaScript基础语法**： JavaScript是...
js的设计模式
weixin_45076996的博客
05-22 108
标题js的设计模式 觉得这张图对js设计模式概括的很清晰，记录下来以便自己实时查看，唯一不足是没有对各种模式做出解释
JS-设计模式
Mr_linjw的专栏
03-02 102
单例模式：（只允许存在一个实例的模式） 单例模式是javascript中最常用的模式，它是将自己的代码放在一个命名空间下，这样的好处是可以减少使用全局变量，在多人协同开发时也能避免命名冲突等问题。这样的好处是维护起来非常方便，如下例： var m = { name: 'dog', action: function() { console.log(this.name); } }; m.action();//调用 工厂模式： 工厂模式是我们最常用的实例化对象模.
JS设计模式
fb_01的专栏
06-30 574
1、Constructor(构造器)模式 (1) 概念： (2) 利弊： (3) 实战代码： 2、Module(模块)模式 (1) 概念： (2) 利弊： (3) 实战代码： 3、Revealing Module(揭示模块)模式 (1) 概念： (2) 利弊： (3) 实战代码： 4、Singleton(单例)模式  (
《JavaScript设计模式》读后感 觉很复杂
weixin_33671935的博客
12-23 277
接触前端两三个月的时候，那时候只是听说设计模式很重要，然后我就去读了一本设计模式的书，读了一部分，也不知道这些设计模式到底设计出来干嘛的，然后就没再看了。后来就自己做一些小项目也觉着好像不需要用到设计模式这个东西呀。现在，接触前端有半年了，决定再重新看看设计模式，说不定会有一些启发。于是发现了一本好书——《JavaScript设计模式》，...
JavaScript设计模式实践与进阶指南
《JavaScript 设计模式与开发实践》是由曾探编著的一本深入探讨JavaScript设计模式的书籍。作者在书中结合JavaScript的特性，全面阐述了实践中常用的设计模式，旨在帮助读者提升JavaScript编程水平，特别是在面向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值