js設計模式之單例模式原理與用法詳解

2024-05-06 16:54:14

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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>

運行結果：

js,設計模式,單例模式

介紹完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>

運行結果：

js,設計模式,單例模式