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