js設(shè)計(jì)模式之單例模式原理與用法詳解

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:52:23

js設(shè)計(jì)模式之單例模式原理與用法詳解

js設(shè)計(jì)模式之單例模式原理與用法詳解:本文實(shí)例講述了js設(shè)計(jì)模式之單例模式原理與用。分享給大家供大家參考，具體如下：關(guān)于設(shè)計(jì)模式，我的理解是它是業(yè)務(wù)代碼的提前解決方案。意思就是說(shuō)在沒有真正的業(yè)務(wù)之前，設(shè)計(jì)模式就存在了，這個(gè)是顯然的。設(shè)計(jì)模式是人長(zhǎng)期從事業(yè)務(wù)總結(jié)的具有普通適用性的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js設(shè)計(jì)模式之單例模式原理與用法詳解:本文實(shí)例講述了js設(shè)計(jì)模式之單例模式原理與用。分享給大家供大家參考，具體如下：關(guān)于設(shè)計(jì)模式，我的理解是它是業(yè)務(wù)代碼的提前解決方案。意思就是說(shuō)在沒有真正的業(yè)務(wù)之前，設(shè)計(jì)模式就存在了，這個(gè)是顯然的。設(shè)計(jì)模式是人長(zhǎng)期從事業(yè)務(wù)總結(jié)的具有普通適用性的

本文實(shí)例講述了js設(shè)計(jì)模式之單例模式原理與用。分享給大家供大家參考，具體如下：

關(guān)于設(shè)計(jì)模式，我的理解是它是業(yè)務(wù)代碼的提前解決方案。意思就是說(shuō)在沒有真正的業(yè)務(wù)之前，設(shè)計(jì)模式就存在了，這個(gè)是顯然的。設(shè)計(jì)模式是人長(zhǎng)期從事業(yè)務(wù)總結(jié)的具有普通適用性的解決方案。

就個(gè)人來(lái)講，寫了太多的命令式編程代碼，所謂命令式代碼就是業(yè)務(wù)需要怎樣就寫怎么樣的功能，比如添加一個(gè)點(diǎn)擊事件，比如進(jìn)行一個(gè)驗(yàn)證等扥。寫就寫了很少站在設(shè)計(jì)模式的角度或者前人的角度去改善代碼。

不給自己找客觀原因，最近開始關(guān)注設(shè)計(jì)模式，嘗試從設(shè)計(jì)模式的角度改善開發(fā)。

在開始單例設(shè)計(jì)模式之前首先要搞清楚js之中的apply和call的作用。

apply和call的直接作用首先是運(yùn)行函數(shù)，其次是根據(jù)對(duì)象是否發(fā)生改變，產(chǎn)生借方法和用方法的情況。apply和call的區(qū)別是前者接收數(shù)組作為第二個(gè)參數(shù)，而call接手的是參數(shù)列表。這個(gè)區(qū)別不具體說(shuō)，說(shuō)他們的作用

1）運(yùn)行函數(shù)栗子

//運(yùn)行函數(shù)
function test(){
 alert(1);
}
test.apply();

函數(shù)即便沒有apply一樣可以運(yùn)行，但是在有些場(chǎng)合用到apply會(huì)顯得專業(yè)。

2）apply(this,arguments)中的this不發(fā)生改變，也就是直接利用對(duì)象方法，不存在借的概念

var arr=[1,2,3];
var max=Math.max.apply(null,arr);
alert(max);

3）this發(fā)生改變，這個(gè)時(shí)候是借助this這個(gè)對(duì)象借助其他對(duì)象的方法

<script>
/*定義一個(gè)人類*/
function Person(name, age) {
 this.name = name;
 this.age = age;
}
/*定義一個(gè)學(xué)生類*/
function Student(name, age, grade) {
 Person.apply(this, arguments);
 this.grade = grade;
}
//創(chuàng)建一個(gè)學(xué)生類
var student = new Student("qian", 21, "一年級(jí)");
//測(cè)試
alert("name:" + student.name + "\n" + "age:" + student.age + "\n" + "grade:" + student.grade);
//測(cè)試結(jié)果name:qian age:21 grade:一年級(jí)
//因?yàn)樵趫?zhí)行過(guò)程中this的對(duì)象發(fā)生改變，所以是this借助了Persion對(duì)象的方法。
</script>

運(yùn)行結(jié)果：

介紹完apply和this下面是單例設(shè)計(jì)模式解釋。

單例設(shè)計(jì)模式，核心是創(chuàng)造并且只返回一個(gè)對(duì)象。因?yàn)橹挥幸粋€(gè)對(duì)象所以有緩存的概念。本文采用的是別人的案例，能夠說(shuō)清楚問(wèn)題就是好案例；

<!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è)計(jì)模式核心代碼
 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)建對(duì)象";
 console.warn('11');//多次點(diǎn)擊只

輸出一次 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>

運(yùn)行結(jié)果：

上面的 || 有個(gè)小技巧，就是就近計(jì)算，如果result有值了后面就不會(huì)計(jì)算了。還有上面的apply只是起到運(yùn)行作用。

單例模式據(jù)說(shuō)用處很多，目前我知道的創(chuàng)建彈窗，創(chuàng)建遮罩層，實(shí)現(xiàn)jquery的one函數(shù)效果等。

最后這里設(shè)計(jì)模式核心代碼運(yùn)用的是閉包，閉包可以保存作用域鏈，因此產(chǎn)生了靜態(tài)變量的改變。因此產(chǎn)生了緩存的效果。

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js設(shè)計(jì)模式之單例模式原理與用法詳解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：使用 js 單例模式

熱門焦點(diǎn)

js設(shè)計(jì)模式之單例模式原理與用法詳解

js設(shè)計(jì)模式之單例模式原理與用法詳解

js設(shè)計(jì)模式之單例模式原理與用法詳解

最新推薦

猜你喜歡

熱門推薦