單例模式
單例模式的核心結構中只包含一個被稱為單例的特殊類。通過單例模式可以保證系統中一個類只有一個例項


單例模式最初的定義出現於《設計模式》（艾迪生維斯理, 1994）：“保證一個類僅有一個例項，並提供一個訪問它的全域性訪問點。”


單例模式定義：“一個類有且僅有一個例項，並且自行例項化向整個系統提供。”

var Singleton = (function(){
  SingletonClass() {
	
  }


  var singleton = null;


  return {
    getInstance: function() {
      if (singleton == null) {
	singleton = new singletonClass();
      } else {
	return singleton;
      }
    }
  }


})();
 

Singleton.getIntance();

前端經常用到一些和介面相關的增刪改查非同步操作。我們來舉例，我在操作資料列表時，常常少不了，增加 修改 刪除功能。有的方案是用同步的（重新整理頁面），使用者體驗好一些用非同步；


程式碼如下


增加功能

$(".add").click(function(){
   $.ajax({
	type: "post"
        dataType:"json",
        url: "http://www.csdn.net/",
        data: {name:"csdn部落格",dir:"web前端"},
        success: function( result ){
	    if ( result.status ) { alert("新增成功！") } else {  alert("新增失敗") }
	},
        error: function(){
	    alert("新增出現非同步，請得新增加或聯絡技術管理員");
	}
   });
});
 

刪除功能

$(".del").click(function(){
   $.ajax({
	type: "post"
        dataType:"json",
        url: "http://www.csdn.net/",
        data: {id:"1"},
        success: function( result ){
	    if ( result.status ) { alert("刪除成功！") } else {  alert("刪除失敗") }
	},
        error: function(){
	    alert("新增出現非同步，請得新增加或聯絡技術管理員");
	}
   });
});
 

上面這二個程式碼片段簡單描述了，增加和刪除功能的JS程式碼。有的同學發現了，他們有共同點，就是ajax請求中有一部分是相同的，並且刪除功能如果在其它地方也用到呢？，那在其它地方也要寫一程式碼這種相同的程式碼。感覺很不舒服

我們改進一下

var SingletonCRUD = (function(){
  SingletonClass() {}
  SingletonClass.prototype = {
     constructor: SingletonClass,
     add: function( data ) {
	$.ajax({
	  type: "post"
          dataType:"json",
          url: "http://www.csdn.net/",
          data: data,
          success: function( result ){
	    if ( result.status ) { alert("新增成功！") } else {  alert("新增失敗") }
	  },
          error: function(){
	    alert("新增出現非同步，請得新增加或聯絡技術管理員");
	  }
       });
     }，
    remove: function( data ) {
	$.ajax({
	  type: "post"
          dataType:"json",
          url: "http://www.csdn.net/",
          data: data,
          success: function( result ){
	    if ( result.status ) { alert("刪除成功！") } else {  alert("刪除失敗") }
	  },
          error: function(){
	    alert("新增出現非同步，請得新增加或聯絡技術管理員");
	  }
       });
     }
  }


  var singleton = null;


  return {
    getInstance: function() {
      if (singleton == null) {
	singleton = new singletonClass();
      } else {
	return singleton;
      }
    }
  }


})();

var curd = SingletonCRUD.getIntance();

$(".add").click(function(){
   var data = {"name":"name"};
   curd.add( data );
});

$(".del").click(function(){
   var data = {"id": 1};
   curd.remove( data );
});

經常用Singleton例項來做一些Tool工具類；

使用設計模式優點：解耦合、可讀性強、程式碼結構清晰；

通過上面的小例子，把點選事件裡的獲取資料（click的事件函式）和操作資料(ajax請求)相分離;

通過對單例模式的優化後的程式碼：

var SingletonCRUD = (function(){
  SingletonClass() {}
  SingletonClass.prototype = {
     constructor: SingletonClass,
     ajax: function(url, data success ){
	$.ajax({
	  type: "post"
          dataType:"json",
          url: url,
          data: data,
          success: success,
          error: function(){
	    alert("新增出現非同步，請得新增加或聯絡技術管理員");
	  }
       });
     },
     add: function( data ) {
	this.ajax("http://www.csdn.net/", data, function( result ){
	    if ( result.status ) { alert("新增成功！") } else {  alert("新增失敗") }
	});	
     }，
    remove: function( data ) {
	this.ajax("http://www.csdn.net/", data, function( result ){
	    if ( result.status ) { alert("刪除成功！") } else {  alert("刪除失敗") }
	});
     }
  }

  var singleton = null;

  return {
    getInstance: function() {
      if (singleton == null) {
	singleton = new singletonClass();
      } else {
	return singleton;
      }
    }
  }
})();

SingleClass中的ajax方法，也相當於一個門面模式（Facade），隱藏內部細節，對外暴露一個介面；