MyApp.namespace = function (name) { var parts = name.split('.'); var current = MyApp; for (var i in parts) { if (!current[parts[i]]) { current[parts[i]] = {}; } current = current[parts[i]]; } }
var loginLayer = (function () { var div = document.createElement('div'); div.innerHTML = '我是一个小小的悬浮框'; div.style.display = 'none'; document.body.appendChild(div); return div; })();
document.getElementById('loginBtn').addEventListener('click', function () { loginLayer.style.display = 'block'; });
但是,不管我们登录与否,都会创建悬浮窗,所以我们可以修改为:在点击登录的时候再创建悬浮窗。
1 2 3 4 5 6 7 8 9 10 11 12
var createLoginLayer = function () { var div = document.createElement('div'); div.innerHTML = '我是一个小小的悬浮框'; div.style.display = 'none'; document.body.appendChild(div); return div; };
document.getElementById('loginBtn').addEventListener('click', function () { var loginLayer = createLoginLayer(); loginLayer.style.display = 'block'; });
这时候,虽然达到了惰性的目的,却失去了单例的效果,每次点击登录,都会创建一个新的悬浮窗。
所以我们需要一个变量来判断是否已经创建过悬浮窗:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
var createLoginLayer = (function () { var div; returnfunction () { if (!div) { // 判断是否已创建 div = document.createElement('div'); div.innerHTML = '我是一个小小的悬浮框'; div.style.display = 'none'; document.body.appendChild(div); } return div; } })();
document.getElementById('loginBtn').addEventListener('click', function () { var loginLayer = createLoginLayer(); loginLayer.style.display = 'block'; });
var getSingle = function (fn) { var result; returnfunction () { return result || (result = fn.apply(this, arguments)); } }
var createLoginLayer = function () { var div = document.createElement('div'); div.innerHTML = '我是一个小小的悬浮框'; div.style.display = 'none'; document.body.appendChild(div); return div; }
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById('loginBtn').addEventListener('click', function () { var loginLayer = createSingleLoginLayer(); loginLayer.style.display = 'block'; });
这时,我们创建其他标签就只需要关系如何创建该标签就可以:
1 2 3 4 5 6 7 8 9 10 11 12
var createIframe = function () { var iframe = document.createElement('iframe'); iframe.src = 'https://baidu.com'; document.body.appendChild(iframe); return iframe; }
var createSingleIframe = getSingle(createIframe);
document.getElementById('loginBtn2').addEventListener('click', function () { createSingleIframe(); });