Javascript的单例模式-js教程-PHP中文网

Javascript的单例模式

php中世界最好的语言

发布： 2018-03-13 18:08:11

原创

1874人浏览过

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

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

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

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

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

立即学习“Java免费学习笔记（深入）”；

基本结构：

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

登录后复制

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

基本实现：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

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('Hello');let cat2 = getInstance('Kitty');console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //'Hello'console.log(cat2.getName()) //'Hello'

登录后复制

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

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

//单例模式let createModal = function() {    let content = document.createElement('div');
    content.innerHTML = '弹窗内容';
    content.style.display = 'none';    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 = 'block';
};

登录后复制

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