溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了js設計模式之單例模式原理與用。分享給大家供大家參考，具體如下：
關于設計模式，我的理解是它是業務代碼的提前解決方案。意思就是說在沒有真正的業務之前，設計模式就存在了，這個是顯然的。設計模式是人長期從事業務總結的具有普通適用性的解決方案。
就個人來講，寫了太多的命令式編程代碼，所謂命令式代碼就是業務需要怎樣就寫怎么樣的功能，比如添加一個點擊事件，比如進行一個驗證等扥。寫就寫了很少站在設計模式的角度或者前人的角度去改善代碼。
不給自己找客觀原因，最近開始關注設計模式，嘗試從設計模式的角度改善開發。
在開始單例設計模式之前首先要搞清楚js之中的apply和call的作用。
apply和call的直接作用首先是運行函數，其次是根據對象是否發生改變，產生借方法和用方法的情況。apply和call的區別是前者接收數組作為第二個參數，而call接手的是參數列表。這個區別不具體說，說他們的作用
1）運行函數栗子
//運行函數
function test(){
alert(1);
}
test.apply();
函數即便沒有apply一樣可以運行，但是在有些場合用到apply會顯得專業。
2）apply(this,arguments)中的this不發生改變，也就是直接利用對象方法，不存在借的概念
var arr=[1,2,3]; var max=Math.max.apply(null,arr); alert(max);
3）this發生改變，這個時候是借助this這個對象借助其他對象的方法
<script>
/*定義一個人類*/
function Person(name, age) {
this.name = name;
this.age = age;
}
/*定義一個學生類*/
function Student(name, age, grade) {
Person.apply(this, arguments);
this.grade = grade;
}
//創建一個學生類
var student = new Student("qian", 21, "一年級");
//測試
alert("name:" + student.name + "\n" + "age:" + student.age + "\n" + "grade:" + student.grade);
//測試結果name:qian age:21 grade:一年級
//因為在執行過程中this的對象發生改變，所以是this借助了Persion對象的方法。
</script>
運行結果：
介紹完apply和this下面是單例設計模式解釋。
單例設計模式，核心是創造并且只返回一個對象。因為只有一個對象所以有緩存的概念。本文采用的是別人的案例，能夠說清楚問題就是好案例；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 單利模式應用</title>
</head>
<body>
<div>
<button id="openbtn">
創建按鈕
</button>
<script type="text/javascript">
//設計模式核心代碼
var getSingle = function(fn) {
var result;
return function() {
return (result || (result = fn.apply(this,arguments)));
}
}
//業務代碼之創建div代碼
var createDiv = function() {
var div = document.createElement("div");
div.innerHTML = "我是創建對象";
console.warn('11');//多次點擊只輸出一次
return div;
}
var createSingleDiv = getSingle(createDiv);
//業務代碼之觸發事件
document.getElementById("openbtn").onclick = function() {
var div = createSingleDiv();
document.getElementsByTagName("body")[0].appendChild(div);
}
</script>
</div>
</body>
</html>
運行結果：
上面的 || 有個小技巧，就是就近計算，如果result有值了后面就不會計算了。還有上面的apply只是起到運行作用。
單例模式據說用處很多， 目前我知道的創建彈窗，創建遮罩層，實現jquery的one函數效果等。
最后這里設計模式核心代碼運用的是閉包，閉包可以保存作用域鏈，因此產生了靜態變量的改變。因此產生了緩存的效果。
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調試運行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。
更多關于JavaScript相關內容還可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
