【JS 设计模式 】用单例模式（Singleton）来封装对数据的增删除改查

标签：

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("新增出现异步，请得新增加或联系技术管理员");
	}
   });
});

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），隐藏内部细节，对外暴露一个接口；

【JS 设计模式 】用单例模式（Singleton）来封装对数据的增删除改查

标签：

原文地址：http://blog.csdn.net/itpinpai/article/details/51355342