自学内容网 自学内容网

(二)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;
  function getCount() {
    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;
  function init() {
    let isFlag = true;
    let count = 30;
    function getCount() {
      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() {
      return new XMLHttpRequest();
    },
  };
  const activeXNew = {
    createXhrObject() {
      return new ActiveXObject("Microsoft.XMLHTTP");
    },
  };
  const activeOld = {
    createXhrObject() {
      return new ActiveXObject("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) {
        throw new Error("can't create xhr object");
      }
    }
  }
})();

原文地址:https://blog.csdn.net/qq_27702739/article/details/140490749

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!