文章首发:微信公众号
若非的日志
,欢迎关注 😉
个人站点:若非的日志
一般网站中的登录弹框,在整个页面中是唯一的,无论我们单击多少次登录按钮,登录弹框总是创建一次。类似的,DOM 元素的事件处理程序中,单例模式同样适用,比如重绘 DOM 元素后避免点击事件累加。
let getSingle = function(fn) {
let result;
return function() {
return result || (result = fn.apply(this, arguments));
};
};
let createLayer = function() {
let div = document.createElement('div');
div.textContent = 'I am a layer.';
div.style.display = 'none';
document.body.appendChild(div);
return div;
};
let createSingleLayer = getSingle(createLayer);
document.querySelector('.login').onclick = function() {
let loginLayer = createSingleLayer();
loginLayer.style.display = 'block';
};