(二)js前端开发中设计模式之单例模式

单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点。
利弊分析

• 优点：- 单例模式可以保证内存中只有一个对象，减少了内存的开销。- 可以避免对资源的多重占用。- 方便测试，可以通过接口来控制类的实例化。- 避免对资源的多重占用。
• 缺点：- 单例模式一般没有接口，扩展比较困难。- 单点访问，可能会导致模块的耦合。
• 基本的单例模式，就是对象字面量

const SingleTon ={name:"tom",
  age"26",say(){
    console.log("hello")},eat(){
    console.log("rice")}}//访问单例
SingleTon.gender ='男'
SingleTon.say()

划分命名空间

var GianCrop ={};
GianCrop.common ={};
GianCrop.errorCodes ={};
GianCrop.pageHandler ={};

使用私有成员

• 方式一：约定

GianCrop.dataParse ={//约定私有成员以_开头_method1(){},_method2(){},_method3(){}//约定公共成员不以_开头method1(){},method2(){},method3(){}};

• 方式二：闭包

// MyNameSpce.SingleTon = {}// 闭包单例模式let MyNameSpce ={};
MyNameSpce.SingleTon =(function(){return{name:"tom",age:26,say(){
      console.log("hello");},eat(){
      console.log("rice");},};})();const name = MyNameSpce.SingleTon.name;
console.log("🚀 ~ name:", name);

增加私有成员

let MyNameSpce ={};
MyNameSpce.SingleTon =(function(){let isFlag =true;let count =30;functiongetCount(){return count;}return{name:"tom",age:26,say(){
      console.log("hello");},eat(){
      console.log("rice");},getFlag(){return isFlag;},
    getCount,};})();const{ name, getFlag, getCount }= MyNameSpce.SingleTon;
console.log("🚀 ~ name:", name);
console.log("🚀 ~ getFlag:",getFlag());
console.log("🚀 ~ getCount:",getCount());/**
 * 🚀 ~ name: tom
demo05.js:46 🚀 ~ getFlag: true
demo05.js:47 🚀 ~ getCount: 30
 */

惰性单例模式

let MyNameSpce1 ={};
MyNameSpce1.SingleTon =(function(){let singleTon =null;functioninit(){let isFlag =true;let count =30;functiongetCount(){return count;}
    console.log("init-----------");return{name:"tom",age:26,say(){
        console.log("hello");},eat(){
        console.log("rice");},getFlag(){return isFlag;},
      getCount,};}return{getInstance(){if(!singleTon){
        singleTon =init();}return singleTon;},};})();const demo = MyNameSpce1.SingleTon.getInstance();const demo2 = MyNameSpce1.SingleTon.getInstance();

console.log(demo.name);
console.log(demo2.name);//调用了两次实例，但是只初始化了一次/**
 *
 * 🚀 ~ name: tom
 * 🚀 ~ getFlag: true
   🚀 ~ getCount: 30
   init-----------
   tom
   tom
 */

分支

var SimpleXhrFactory =(function(){const standard ={createXhrObjec(){returnnewXMLHttpRequest();},};const activeXNew ={createXhrObject(){returnnewActiveXObject("Microsoft.XMLHTTP");},};const activeOld ={createXhrObject(){returnnewActiveXObject("Msxml2.XMLHTTP");},};var testObject;try{
    testObject = standard.createXhrObject();return standard;}catch(error){try{
      testObject = activeXNew.createXhrObject();return activeXNew;}catch(error){try{
        testObject = activeOld.createXhrObject();return activeOld;}catch(error){thrownewError("can't create xhr object");}}}})();