设计模式之工厂模式 (4)

简介: 设计模式之工厂模式 (4)

1、工厂模式(常用) ?

  • Creator 是个 工厂 产生 众多的 Product

网络异常,图片无法展示
|

  • new 相关 ?
    网络异常,图片无法展示
    |

  • 这是 JS 常用 场景 需要熟悉 知道这个 就足够!

网络异常,图片无法展示
|

  • java 工厂模式

网络异常,图片无法展示
|

  • 自己画一下

网络异常,图片无法展示
|

  • 代码 展示
class Product {
        constructor(name){
            this.name = name 
        }
        init(){
            alert('init')
        }
        fn1(){
            alert('fn1')
        }
        fn2(){
            alert('fn2')
        }
    }
    class Creator{
        create(name){
            return new Product(name)
        }
    }
    // test
    let creator = new Creator()
    let p = creator.create('p1')
    p.init() // init
    p.fn1() //  fn1
    p.fn2() //  fn2
复制代码
  • 可以 弹出 内容
  • 非常 重要的 实际应用 场景部分

网络异常,图片无法展示
|

  • jQuery ?

网络异常,图片无法展示
|

  • return new jQuery(selector)
    网络异常,图片无法展示
    |

  • React.createElement ?

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 我们需要知道 这个 React.createElement 做了 什么?

网络异常,图片无法展示
|

  • Vue 异步组件

网络异常,图片无法展示
|

  • 验证

网络异常,图片无法展示
|

2、单例模式(常用) ?

  • 注意 每次 获取的东西也是相同的 , 即 ===
  • js 常规使用 闭包 + 立即执行函数 实现
  • 十分重要的思想: 如果没有则初始化 如果有则使用
    网络异常,图片无法展示
    |

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • java 版本 演示

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • js 版本  利用闭包 但必须 注释 因为 外部new 不会报错

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 代码 展示 一下
class SingleObject{
        login(){
            console.log('login...')
        }
    }
    SingleObject.getInstance = (function () {
        let instance
        return function () {
            if(!instance){
            instance = new SingleObject()
        }
        return instance
        }   
    })()
    // test 
    const obj1 = SingleObject.getInstance()
    obj1.login()
    const obj2 = SingleObject.getInstance()
    obj2.login()
    // 单例模式 两者必须相同 
    console.log('obj1 ?=== obj2', obj1 === obj2)
复制代码
  • 执行 结果

网络异常,图片无法展示
|

  • 不能控制的情况
// 无法完全控制
    const obj3 = new SingleObject()
    console.log('obj1 ?=== obj3', obj1 === obj3) // obj1 ?=== obj3 false
复制代码

*单例模式 场景

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 代码 展示
class LoginStatus {
        constructor(){
            this.state = 'hide'
        }
        show(){
            if(this.state === 'show'){
                alert('已经显示') 
                return 
            }
            this.state = 'show'
            console.log('登录框显示成功')
        }
        hide(){
            if(this.state === 'hide'){
                alert('已经隐藏')
                return 
            }
            this.state = 'hide'
            console.log('登录框隐藏成功')
        }
    }
    LoginStatus.getInstance = (function () {
        let instance 
        return function () {
            if(!instance){
                instance =  new LoginStatus()
            }
            return instance
        }
    })()
    // test
    let login1 = LoginStatus.getInstance()
    login1.show() // 登录框显示成功
    let login2 = LoginStatus.getInstance()
    login2.hide() // 登录框隐藏成功
    console.log(login1 === login2) // true
复制代码

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3、适配器模式(常用) ?

  • 新 老代码 不兼容 优先考虑 适配器解决 不要 强制 全局替换

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 代码 演示
class Adaptee{
        specificRequest(){
            return '美国标准插头'
        }
    }
    class Target{
        constructor(){
            this.adaptee = new Adaptee()
        }
        request(){
            return `${this.adaptee.specificRequest()} - 转化器 - 中国标准插头`
        }
    }
    let target = new Target()
    let res = target.request()
    console.log(res) // 美国标准插头 - 转化器 - 中国标准插头
复制代码
  • 结果  非常 nice

网络异常,图片无法展示
|

  • 补充手动画一遍

网络异常,图片无法展示
|

  • 使用场景 展示 重要 !

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 新 老代码 不兼容 优先考虑 适配器解决 不要 强制 全局替换

网络异常,图片无法展示
|

  • 执行 适配后 代码 会走到 上面的 ajax 方法 中
  • 代码展示 vue computed
1、引用 vue cdn
  2、起一个 http-server 服务
  3、实现一个 字符串 逆序效果
复制代码
<body>
    <div id="test">
      <p>{{message}}</p>
      <p>{{reversemessage}}</p>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: "#test",
      data: {
        message: "Hello World",
      },
      computed: {
        reversemessage: function () {
          // 先转为数组 然后 反转 再转为 字符串
          return this.message.split("").reverse().join("");
        },
      },
    });
  </script>
复制代码
  • 注意 数组 和 字符串 常用转化

网络异常,图片无法展示
|

  • 设计模式 验证

网络异常,图片无法展示
|



相关文章
|
6月前
|
设计模式 存储 Java
设计模式-工厂模式
设计模式-工厂模式
67 1
|
6月前
|
设计模式
设计模式【二】:工厂模式
设计模式【二】:工厂模式
45 0
|
5月前
|
设计模式 数据格式 XML
设计模式-工厂模式-1-1
【6月更文挑战第10天】本文介绍了工厂模式的两种主要类型:简单工厂和工厂方法。简单工厂模式通过工厂类动态创建对象,例如根据配置文件后缀选择不同解析器。为提高可读性和复用性,可将创建逻辑封装到独立类中。当需添加新解析器时,可能涉及对工厂类的修改,但这在偶尔调整时可接受。工厂方法模式则通过多态消除if分支,增加扩展性,更符合开闭原则。当需要新增解析器时,只需创建实现特定接口的新工厂类。
32 2
设计模式-工厂模式-1-1
|
5月前
|
设计模式 XML 缓存
设计模式-工厂模式-1-2
【6月更文挑战第11天】工厂模式用于封装对象创建,但当load函数与工厂类耦合时,问题出现。为解决此问题,引入了工厂的工厂,如`RuleConfigParserFactoryMap`,它创建并缓存工厂对象,简化了代码修改。然而,过多的Factory类会增加复杂性,简单工厂模式在此类应用中更为适用。当对象创建逻辑复杂,需组装其他对象或避免if-else时,采用工厂方法模式。抽象工厂则处理多维度分类的对象创建。总结:工厂模式的核心价值在于封装变化、代码复用、隔离复杂性和控制复杂度,适用于创建逻辑复杂的情况,否则直接使用new操作即可。
27 5
|
6月前
|
设计模式 消息中间件 Java
设计模式之工厂模式(C++)
设计模式之工厂模式(C++)
84 0
|
6月前
|
设计模式 算法 uml
C++设计模式(工厂模式)
C++设计模式(工厂模式)
91 1
C++设计模式(工厂模式)
|
6月前
|
设计模式 前端开发 API
【设计模式】之工厂模式
工厂模式是一种常用的创建对象的设计模式,它通过封装对象的创建逻辑,提供统一的接口,实现了代码的解耦和可扩展性。在实际开发中,可以根据具体需求选择是否使用工厂模式来创建对象。工厂模式可以应用于任何需要创建对象的场景。通过使用工厂模式,我们可以提高代码的可维护性、可扩展性和可测试性,使得代码更加灵活和易于理解。
75 0
|
设计模式
【设计模式】工厂模式
【设计模式】工厂模式
|
设计模式 Java 数据库
设计模式之工厂模式(一)
设计模式之工厂模式
62 0
|
设计模式 SQL 搜索推荐
设计模式之工厂模式(二)
设计模式之工厂模式
111 0