<!DOCTYPE html>
<html lang='en'>
<head>
<meat charset='UTF-8'>
<meat name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<button id='app'>顯示單例按鈕</button>
<button id='hide'>隱藏單例按鈕</button>
<script>
function func() {
let a = 15;
return function (num) {
console.log(a);
a = num;
console.log(a);
}
}
// 單例模式--始終只返回一個實例
// let Test = (function(name) {
// let div;
// return function (name) {
// if (!div) {
// div = document.createElement('div');
// div.innerText = name;
// div.style.display = 'none';
// document.body.appendChild(div);
// }
// return div;
// }
// })()
function createAlert(name) {
let div;
if (!name) {
throw new Error('請傳遞參數');
}
div = document.createElement('div');
div.innerText = name;
div.style.display = 'none';
document.body.appendChild(div);
return div;
}
// 封裝單例模式 --- 顯示
function getSengle(func) {
let result;
let preArgs;
return function () {
if (!result && !preArgs) {
preArgs = arguments[0]
result = func.apply(this, arguments);
console.log(result)
} else if (result && arguments[0] == 'hide') {
result.style.display = 'none';
} else if (result && preArgs != arguments) { // 修改創建DOM元素的文本內容
result.innerText = arguments[0];
}
return result;
}
}
let single = getSengle(createAlert);
let hideSin = single;
let count = 0;
let showSengle = document.getElementById('app');
let hideSengle = document.getElementById('hide');
showSengle.onclick = function () {
count++;
let oDom = single('小明' + count);
oDom.style.display = 'block';
}
hideSengle.onclick = function () {
hideSin('hide');
}
</script>
</body>
</html>
1-單例模式
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JsDesignMode第四篇
行爲型設計模式 不同對象之間職責劃分或算法抽象,類或對象之間的交流模式並加以實現 1.模板方法模式 父類定義一組操作算法骨架,將實現步驟延遲到子類中 子類可以不改變父類算法結構的同時重新定義算
JsDesignMode第二篇
創建型設計模式 處理對象創建的設計模式,控制對象的創建來避免基本對象創建時 可能導致設計上的問題或增加設計上的複雜度1.簡單工廠模式 1.1也稱爲靜態工廠方法 由一個工廠對象決定創建