以下是代码 ,我点击按钮时能创建多个div,现在我要的是只创建一次,第一次创建成功后以后就不创建,或者每次都创建然后把上一次创建的删除,有没有什么方法能做到啊? 或者有没有什么设计模式可以用在这里的?想了很久都没有思路。
var CreateDiv = function() {
};
CreateDiv.prototype.create = function() {
var Div = document.createElement("div");
Div.innerHTML="测试";
document.body.appendChild(Div);
};
document.getElementById('btn').onclick = function() {
(new CreateDiv()).create();
};
-
使用惰性函数(这个方法很巧妙哦~)
function createDiv(){ var div = document.createElement("div"); div.innerHTML = "测试"; document.body.appendChild(div); createDiv = function(){ return div; } return div }
使用单例模式(不赘述了,答案里有)
毫无疑问啦,使用单例模式,如果对象存在直接返回。
单例模式
var btn = document.getElementById('btn1');
btn.onclick = function(){
singleton(createDiv);
};
//创建DIV
function createDiv(){
var div = document.createElement('div');
div.style.cssText = "width:100px;height:100px;background:#f00;";
document.body.appendChild(div);
return true;
}
//单例方法
function singleton(fn){
var instance = null;
return function(){
if(!instance){
instance = fn.apply(this,arguments);
}
return instance;
}
}
var CreateDiv = function() {
};
CreateDiv.prototype.create = function() {
var Div = document.createElement("div");
document.getElementById("onlyDiv") && document.body.removeChild(document.getElementById("onlyDiv"));
Div.id = 'onlyDiv';
Div.innerHTML = "测试";
document.body.appendChild(Div);
};
document.getElementById('btn').onclick = function() {
(new CreateDiv()).create();
};
看了问题答案之后去查了单例模式,找到了AlloyTeam的这篇介绍单例模式的文章http://www.alloyteam.com/2012/10/common-javascript-design-patterns/
然后发现单例模式就是解决楼主提出的那类型问题的
毫无疑问,使用单例模式啦!
var getSingle = function(fn){
var result;
return function(){
return result || (result =fn.apply(this, arguments));
};
};
var createDiv = function(){
var Div = document.createElement("div");
document.getElementById("onlyDiv");
Div.id = 'onlyDiv';
Div.innerHTML = "测试";
document.body.appendChild(Div);
};
var createSingleDiv=getSingle(createDiv);
哇,这个问题提得好,学习了