单例模式封装ajax,JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能_放手_前端开发者...

本文实例讲述了

单例模式

单例模式的核心结构中只包含一个被称为单例的特殊类。通过单例模式可以保证系统中一个类只有一个实例

单例模式最初的定义出现于《设计模式》(艾迪生维斯理, 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: "//www.jb51.net/",

data: {name:"csdn博客",dir:"

删除功能

$(".del").click(function(){

$.ajax({

type: "post"

dataType:"json",

url: "//www.jb51.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: "//www.jb51.net/",

data: data,

success: function( result ){

if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }

},

error: function(){

alert("新增出现异步，请得新增加或联系技术管理员");

}

});

}，

remove: function( data ) {

$.ajax({

type: "post"

dataType:"json",

url: "//www.jb51.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("//www.jb51.net/", data, function( result ){

if ( result.status ) { alert("新增成功！") } else { alert("新增失败") }

});

}，

remove: function( data ) {

this.ajax("//www.jb51.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)，隐藏内部细节，对外暴露一个接口；

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。