Javascript的单例模式-tutorial js-php.cn

Javascript的单例模式

php中世界最好的语言

Lepaskan： 2018-03-13 18:08:11

asal

1748 orang telah melayarinya

这次给大家带来Javascript的单例模式，Javascript单例模式的注意事项有哪些，下面就是实战案例，一起来看一下。

单例模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。

划分命名空间，减少全局变量

组织代码为一体，便于阅读维护

并非所有的对象字面量都是单例，比如模拟数据

基本结构：

let Cat = {   name: &#39;Kitty&#39;,   age: 3,   run: ()=>{      console.log(&#39;run&#39;);
   }
}

Salin selepas log masuk

上面对象字面量结构是创建单例模式的方法之一，但并不是单例模式，单例模式的特点是仅被实例化一次
要实现单例模式可以使用变量来标示该类是否被实例

基本实现：

class Singleton {    constructor(name){        this.name = name;        this.instance = null;    }    getName(){        return this.name;    }}let getInstance = (()=> {    let instance;    return (name)=> {        if(!instance) {            instance = new Singleton(name);        }        return instance;    }})()let cat1 = getInstance(&#39;Hello&#39;);let cat2 = getInstance(&#39;Kitty&#39;);console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //&#39;Hello&#39;console.log(cat2.getName()) //&#39;Hello&#39;

Salin selepas log masuk

用instance变量标示实例Singleton，如果没有实例创建一个，如果有则直接返回实例，由于仅能被实例化一次，cat2得到的实例和cat1相同

实用
在创建dom元素时为避免重复创建，可以使用单例模式创建

//单例模式let createModal = function() {    let content = document.createElement(&#39;div&#39;);
    content.innerHTML = &#39;弹窗内容&#39;;
    content.style.display = &#39;none&#39;;    document.body.appendChild(content);
}//代理获取实例let getInstance = function(fn) {    let result    return function() {        return result || (result = fn.call(this,arguments));
    }
}let createSingleModal = getInstance(createModal);document.getElementById("id").onclick = function(){    let modal = createSingleModal();
    modal.style.display = &#39;block&#39;;
};

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！