Javascriptデザインパターンシステムの説明とアプリケーション-研究ノート3-シングルトンパターン

シングルトンモード

  • システムでのみ使用されます
  • クラスのインスタンスは1つだけです

  • ログインボックス
  • ショッピングカート

注意:

  • シングルトンモードはJava機能を使用する必要があります(プライベート)
  • ES6にはありません(typescriptを除く)
  • UML図の内容を示すために使用できるのはJavaコードのみです

Javaコードのデモンストレーション:

public class SingleObject {
    
    
  // 注意,私有化构造函数,外部不能new, 只能内部new
  private SingleObject() {
    
    
  }
  //  唯一被new出来的对象
  private SingleObject instance = null;
  // 获取对象的唯一接口
  public SingleObject getInstance() {
    
    
    if (instance == null) {
    
    
      // 只new一次
      instance = new SingleObject();
    }
    return instance;
  }

  //对象方法
  public void login(username, password) {
    
    
    System.out.println("login...");
  }
}
public class SingletonPatternDemo {
    
    
  public static void main(String[] args) {
    
    
    // 不合法的构造函数
    // 编译时错误:构造函数SingleObject()是不可见的
    // SingleObject object = new SingleObject();

    // 获取唯一可用对象
    SingleObject object = SingleObject.getInstance();
    object.login();
  }
}

JSはシングルトンモードを使用します

class SingleObject {
    
    
  login() {
    
    
    console.log('login...')
  }
}

SingleObject.getInstance = (funciton () {
    
    
  let instance
  return function () {
    
    
    if (!instance) {
    
    
      instance = new SingleObject()
    }
    return instance
  }
})()

// 测试:注意这里只能使用静态函数getInstance, 不能使用new SingleObject()。 只能靠文档约束
let obj1 = SingleObject.getInstance()
obj1.login()
let obj2 = SingleObject.getInstance()
obj2.login()
console.log(obj1 === obj2)  // true  两者完全相等
let obj3 = new SingleObject()  // 无法完全控制
obj3.login()
console.log(obj1 === obj3) // false

シーン

  • jQuery唯一$
  • 模擬ログインボックス
  • その他

jQuery唯一$

// jQuery只有一个$
if (window.jQuery != null) {
    
    
  return window.jQuery
} else {
    
    
  // 初始化。。。
}

模擬ログインボックス

class LoginForm {
    
    
  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('登录框已隐藏')
  }
}

LoginForm.getInstance = (function () {
    
    
  let instance
  return funciton (0 {
    
    
    if (!instance) {
    
    
      instance = new LoginForm()
    }
    return instance
  })
})()

その他

  • ショッピングカート(ログインボックスと同様)
  • vuexとreduxに保存する

設計原理の検証

  • 単一責任の原則に準拠し、唯一のオブジェクトのみをインスタンス化します
  • 特定の開放および閉鎖原則はありませんが、それは完全に開放および閉鎖原則に違反していません

おすすめ

転載: blog.csdn.net/weixin_40693643/article/details/108820225