JavaScript创建型设计模式---单例模式

参考书籍:JavaScript设计模式
单例模式,定义命名空间

function g(id) {
    return document.getElementById(id);
}
function css(id, key, value) {
    g(id).style[key] = value;
}
function attr(id, key, value) {
    g(id)[key] = value;
}
function html(id, value) {
    g(id).innerHTML = value;
}
function on(id, type, fn) {
    g(id)['on' + type] = fn
}

在上面的例子,在页面中定义了很多变量。如果后面有人使用了和你一样的命名,就会和已经存在的方法起冲突,鉴于这种情况可以使用单例模式提供一个命名空间

var Ming = {
    g: function (id) {
        return document.getElementById(id);
    },
    css: function (id, key, value) {
        g(id).style[key] = value;
    },
    attr: function (id, key, value) {
        g(id)[key] = value;
    },
    html: function (id, value) {
        g(id).innerHTML = value;
    },
    on: function (id, type, fn) {
        g(id)['on' + type] = fn
    }
}

加上命名之后还没有完成,单例模式在使用其定义的方法时需要在方法名前面加上命名空间Ming,所以在上面例子中使用到的g方法需要修改成Ming.g()。由于g()和其它的方法都是在单例对象Ming中,也就是说都是Ming的方法,而对象中this指代当前对象,所.以this.g替换Ming.g

var Ming = {
    g: function (id) {
        return document.getElementById(id);
    },
    css: function (id, key, value) {
        this.g(id).style[key] = value;
    },
    attr: function (id, key, value) {
        this.g(id)[key] = value;
    },
    html: function (id, value) {
        this.g(id).innerHTML = value;
    },
    on: function (id, type, fn) {
        this.g(id)['on' + type] = fn
    }
}

模块分明
在写自己的小型方法库的时候也可以用单例模式来规范自己的代码库

var Tools = {
    Util: {
        util_method1: function () { },
        util_method2: function () { }
    },
    Tool: {
        tool_method1: function () { },
        tool_method2: function () { }
    }
}
//使用
Tools.Util.util_method1();
Tools.Tool.tool_method1();

无法修改的静态变量
在javascript中,实现静态变量(只能访问不能修改,并且无创建就能使用)的一种方法
能访问:

  1. 定义在全局空间
  2. 定义在一个函数内部,并定义一个特权方法去访问

不能修改,全局就不能用,如果使用函数,就必须通过特权方法访问,如果不提供赋值变量的方法,只提供获取变量的方法,就可以做到限制变量的修改并且外界可以访问,但是还有一个问题是不创建就可以使用,为了实现这个需求,让创建的函数执行一次,此时我们创建的对象内 保存静态变量通过取值器访问,最后将这个对象作为一个单例放在全局空间里-----静态变量。

var Conf = (function () {
    //私有变量
    var conf = {
        MAX: 100,
        MIN: 1,
        COUNT: 1000
    }

    //返回取值器对象
    return {
        //取值器方法
        get: function (name) {
            return conf[name] ? conf[name] : 'have no data';
        }
    }
})();

测试

 console.log(Conf.get('COUNT'));//1000
    console.log(Conf.get('num'));//have no data

惰性单例

var LazySingle = (function () {
    //单例实例引用
    var instance = null;
    //单例
    function Single() {
        return {
            publicMethod: function () {
                console.log('Single object public method');
            },
            publicProperty: 'publicProperty'
        }
    }
    //获取单例对象接口
    return function () {
        if (!instance) {
            instance = Single();
        }
        //返回单例
        return instance;
    }
})();

测试

 LazySingle().publicMethod();//Single object public method
    console.log(LazySingle().publicProperty);//publicProperty
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值