js 中单例模式、工厂模式、装饰模式、发布订阅模式、适配器模式、-Toy模板网

这篇具有很好参考价值的文章主要介绍了js 中单例模式、工厂模式、装饰模式、发布订阅模式、适配器模式、。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

01单例模式

  单例是一个仅仅只能被实例化一次的对象，如果单例实例不存在，单例模式就会创建一个新的类实例，如果实例存在的话，则会直接返回实例对象的引用，任何重复性的执行构造函数只会返回同一个实例对象。

  简单概述：每执行一次函数，instance 记录的都是第一次执行的结果

  
  应用场景：  1、弹窗，无论点击多少次，弹窗只应该被创建一次。
            2、debounce
            3、封装一个store

  var createWindow = (function(){
        var div;
        return function(){
            if(!div) {
                div = document.createElement("div");
                div.innerHTML = "我是弹窗内容";
                div.style.display = 'none';
                document.body.appendChild(div);
            }
            return div;
        }
    })();
    document.getElementById("Id").onclick = function(){
        // 点击后先创建一个div元素
        var win = createWindow();
        win.style.display = "block";
    }


class SingleManage1 {
      constructor({ name, level }) {
          if (!SingleManage1.instance) {
              this.name = name;
              this.level = level
              SingleManage1.instance = this;
          }
          return SingleManage1.instance // 其实就是绑定在了 SingleManage1  原型上
      }
    }
    let boss1 = new SingleManage1({
        name: "Jokul",
        level: "1"
    })
    console.log(SingleManage1.prototype, '987')
    let boss2 = new SingleManage1({
        name: "Jokul2",
        level: "2"
    })
    console.log(boss1 === boss2) // true

02工厂模式

  工厂模式类似于现实的工厂生产线，可以生产出大量类似的商品。
  工厂模式的优点在于：能解决多个相似的问题，减少大量冗余代码。

  简单概述：
    应用场景：项目中提取的功用函数

function BMW(color) {
      this.name = '宝马'
      this.color = '白色'
    }
    const bmw = BMW('绿色')
    console.log(bmw, 'bmw')

03装饰模式

简单概述：将每个功能拆分到最小化，最后将小功能拼接到一起文章来源地址https://www.toymoban.com/news/detail-503442.html

  首先我们定义了一个自身对象-身上啥也没穿，此时太冷了要穿上毛衣就需要深入对象内部去修改来添加毛衣，
  下雨了想穿雨衣也需要去对象内部方法修改来增加穿上雨衣功能。
  也就是说每次功能的增加和减少都需要深入对象内部的方法去修改，
  只要深入对象内部修改就需要更多的考虑新的修改是否会对原来的代码有哪些影响。
  这样是不符合开放-封闭原则的。

  缺点：定义过多的装饰类，会增加系统的复杂性。

  优点：灵活，可扩展

 const self = {
      wear() {
        console.log('自身啥也没穿-光腚');
      },
    };

    // 穿上毛衣
    const sweater = () => {
      console.log('太冷了，赶紧穿上毛衣');
    };

    // 穿上雨衣
    const raincoat = () => {
      console.log('妈呀还下雨了，在穿上雨衣');
    };

    const wear1 = self.wear;

    self.wear = function () {
      wear1();
      sweater();
    };

    const wear2 = self.wear;
    self.wear = function () {
      wear2();
      raincoat();
    };

    self.wear();

    // 打印
    // 自身啥也没穿-光腚
    // 太冷了，赶紧穿上毛衣
    // 妈呀还下雨了，在穿上雨衣

04发布订阅模式

发布—订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
    demo: 比如你向买房，只要把手机给房产中介，房产中介一有消息就发布消息。

   var list = {
      arr: [],
      subscribe: function(fn) {
        this.arr.push(fn);
      },
      notify: function() {
        this.arr.forEach(fn => fn());
      }
    };

    var fn1 = function() {
      console.log(1)
    }
    var fn2 = function() {
      console.log(2)
    }
    list.subscribe(fn1);
    list.subscribe(fn2);
    list.notify();

05适配器模式

适配器模式主要解决两个接口之间不匹配的问题，不会改变原有的接口，而是由一个对象对另一个对象的包装。
  demo:两个地图（2个类），他们有一个共同方法但是名字不同，这时候需要定义适配器类, 对其中的一个类进行封装。

 class GooleMap {
        show() {
            console.log('渲染谷歌地图')
        }
    }

    class BaiduMap {
        display() {
            console.log('渲染百度地图')
        }
    }

    // 定义适配器类, 对BaiduMap类进行封装
    class BaiduMapAdapter {
        show() {
            var baiduMap = new BaiduMap()
            return baiduMap.display()
        }
    }

    function render(map) {
        map.show()
    }

    render(new GooleMap())         // 渲染谷歌地图
    render(new BaiduMapAdapter())  // 渲染百度地图

到了这里，关于js 中单例模式、工厂模式、装饰模式、发布订阅模式、适配器模式、的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！