本文實例講述了js設(shè)計模式之單例模式原理與用。分享給大家供大家參考,具體如下:
成都創(chuàng)新互聯(lián)公司長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為那坡企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè),那坡網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
關(guān)于設(shè)計模式,我的理解是它是業(yè)務(wù)代碼的提前解決方案。意思就是說在沒有真正的業(yè)務(wù)之前,設(shè)計模式就存在了,這個是顯然的。設(shè)計模式是人長期從事業(yè)務(wù)總結(jié)的具有普通適用性的解決方案。
就個人來講,寫了太多的命令式編程代碼,所謂命令式代碼就是業(yè)務(wù)需要怎樣就寫怎么樣的功能,比如添加一個點擊事件,比如進行一個驗證等扥。寫就寫了很少站在設(shè)計模式的角度或者前人的角度去改善代碼。
不給自己找客觀原因,最近開始關(guān)注設(shè)計模式,嘗試從設(shè)計模式的角度改善開發(fā)。
在開始單例設(shè)計模式之前首先要搞清楚js之中的apply和call的作用。
apply和call的直接作用首先是運行函數(shù),其次是根據(jù)對象是否發(fā)生改變,產(chǎn)生借方法和用方法的情況。apply和call的區(qū)別是前者接收數(shù)組作為第二個參數(shù),而call接手的是參數(shù)列表。這個區(qū)別不具體說,說他們的作用
1)運行函數(shù)栗子
//運行函數(shù) function test(){ alert(1); } test.apply();
函數(shù)即便沒有apply一樣可以運行,但是在有些場合用到apply會顯得專業(yè)。
2)apply(this,arguments)中的this不發(fā)生改變,也就是直接利用對象方法,不存在借的概念
var arr=[1,2,3]; var max=Math.max.apply(null,arr); alert(max);
3)this發(fā)生改變,這個時候是借助this這個對象借助其他對象的方法
<script> /*定義一個人類*/ function Person(name, age) { this.name = name; this.age = age; } /*定義一個學生類*/ function Student(name, age, grade) { Person.apply(this, arguments); this.grade = grade; } //創(chuàng)建一個學生類 var student = new Student("qian", 21, "一年級"); //測試 alert("name:" + student.name + "\n" + "age:" + student.age + "\n" + "grade:" + student.grade); //測試結(jié)果name:qian age:21 grade:一年級 //因為在執(zhí)行過程中this的對象發(fā)生改變,所以是this借助了Persion對象的方法。 </script>
運行結(jié)果:
介紹完apply和this下面是單例設(shè)計模式解釋。
單例設(shè)計模式,核心是創(chuàng)造并且只返回一個對象。因為只有一個對象所以有緩存的概念。本文采用的是別人的案例,能夠說清楚問題就是好案例;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 單利模式應(yīng)用</title> </head> <body> <div> <button id="openbtn"> 創(chuàng)建按鈕 </button> <script type="text/javascript"> //設(shè)計模式核心代碼 var getSingle = function(fn) { var result; return function() { return (result || (result = fn.apply(this,arguments))); } } //業(yè)務(wù)代碼之創(chuàng)建div代碼 var createDiv = function() { var div = document.createElement("div"); div.innerHTML = "我是創(chuàng)建對象"; console.warn('11');//多次點擊只輸出一次 return div; } var createSingleDiv = getSingle(createDiv); //業(yè)務(wù)代碼之觸發(fā)事件 document.getElementById("openbtn").onclick = function() { var div = createSingleDiv(); document.getElementsByTagName("body")[0].appendChild(div); } </script> </div> </body> </html>
運行結(jié)果:
上面的 || 有個小技巧,就是就近計算,如果result有值了后面就不會計算了。還有上面的apply只是起到運行作用。
單例模式據(jù)說用處很多, 目前我知道的創(chuàng)建彈窗,創(chuàng)建遮罩層,實現(xiàn)jquery的one函數(shù)效果等。
最后這里設(shè)計模式核心代碼運用的是閉包,閉包可以保存作用域鏈,因此產(chǎn)生了靜態(tài)變量的改變。因此產(chǎn)生了緩存的效果。
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具:http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
當前名稱:js設(shè)計模式之單例模式原理與用法詳解
轉(zhuǎn)載來于:http://bm7419.com/article6/pcsjog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、響應(yīng)式網(wǎng)站、App設(shè)計、企業(yè)建站、網(wǎng)站收錄、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)