javascript设计模式之单体模式

首先说一下定义

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

单体模式的创建方法有两种:1.字面量方法  2.闭包方法

首先,单体模式的字面量创建方法

var Singleton = {
    name:'hello',
    age:'22',
    get:function () {
        return this.age;
    }
}
console.log(Singleton.get());   //22  

这种方法的优点:1.创建最简单直接 2.有效防止变量污染

这种方法的缺点有: 1.所有变量和方法都是公有的,全可以被访问

创建只能被实例化一次的单体模式

// 单体模式
var Singleton = function(name){
    this.name = name;
};
// 获取实例对象
function getInstance(name) {
    if(!this.hehe) {
        this.hehe = new Singleton(name);
        console.log( this.hehe)
    }
    return this.hehe;
}
// 测试单体模式的实例
var a = getInstance("aa");
var b = getInstance("bb");
console.log(a,b);

单体模式创建弹窗

// 实现单体模式弹窗
var createWindow = (function(){
    var div;
    return function(){
        if(!div) {
            div = document.createElement("div");
            div.innerHTML = "我是弹窗内容";
            div.style.display = 'none';
            document.body.appendChild(div);
        }
        return div;
    }
})();
document.getElementById("Id").onclick = function(){
    // 点击后先创建一个div元素
    var win = createWindow();
    win.style.display = "block";
}

然后我们需要封装这个函数

// 创建div
var createWindow = function(){
    var div = document.createElement("div");
    div.innerHTML = "我是弹窗内容";
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
};
// 获取实例的封装代码
var getInstance = function(fn) {
    var result;
    return function(){
        return result || (result = fn.call(this,arguments));
    }
};
var createSingleDiv = getInstance(createWindow);
document.getElementById("Id").onclick = function(){
    var win = createSingleDiv();
    win.style.display = "block";
};

随机浏览