前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端仔学学设计模式--单例模式

前端仔学学设计模式--单例模式

作者头像
Jimmy_is_jimmy
发布2019-07-31 16:54:40
2970
发布2019-07-31 16:54:40
举报
文章被收录于专栏:call_me_Rcall_me_R

设计模式知识提取将分为N篇文章,本篇文章是个开篇文,后期会进行其他相关的同步(会就分享,不会就折腾),旨在提升技能,更好地享受敲键盘的快感~

定义

单例模式保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就保证了一个类只有一个实例对象。

使用场景:一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。

比如下面的代码:

代码语言:javascript
复制
class CreateUser {
    constructor(name) {
        this.name = name;
        this.getName();
    }
    getName() {
        return this.name;
    }
}
// 代理实现单例模式
var proxyMode = (function() {
    var instance = null;
    return function(name) {
        if(!instance) {
            instance = new CreateUser(name);
        }
        return instance;
    }
})();

// 测试单例模式
var a = proxyMode('aaa');
var b = proxyMode('bbb');
// 因为单例模式是只实例化一次,所以下面的实例是相等的
console.log(a === b); // true
// 打印下a,b连个对象的名字,其实是一个对象的名字
console.log(a.name); // aaa
console.log(b.name); // aaa
复制代码

上面是讲了一些单例模式的原理,下面我们来用这个模式实现下弹窗功能。

实现一个弹窗

直接show you the code

代码语言:javascript
复制
<button id="btn1">
    点我创建新窗口
</button>
<button id="hide">
    点我隐藏
</button>
复制代码
代码语言:javascript
复制
.common-box {
    background: rgb(233, 90, 90);
    width: 100px;
    height: 100px;
    overflow: hidden;
}
代码语言:javascript
复制
const btn1 = document.querySelector('#btn1');
const createWindow = (() => {
    let div = null;
    return (words) => {
        if (!div) {
            div = document.createElement('div');
            div.innerHTML = words || '我是默认的语句';
            div.className = 'common-box';
            div.style.display = 'none';
            document.body.appendChild(div);
        }
        
        return div;
    }
})();   

btn1.addEventListener('click', ()=>{
    let box = createWindow('content');
    box.style.display = 'block';
}, false);

//隐藏
document.querySelector('#hide').addEventListener('click', ()=>{
    document.querySelector('.common-box').style.display = 'none';
}, false);
复制代码

效果如下:

参考和后话

更多的内容可以戳这里了解 逃:)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年07月05日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 定义
  • 实现一个弹窗
  • 参考和后话
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档