首頁 > web前端 > js教程 > Singleton封裝增刪改查

Singleton封裝增刪改查

php中世界最好的语言
發布: 2018-03-23 15:48:20
原創
2200 人瀏覽過

這次帶給大家Singleton封裝增刪改查,Singleton封裝增刪改查的注意事項有哪些,下面就是實戰案例,一起來看一下。

本文實例講述了JS基於設計模式中的單例模式(Singleton)實現封裝對資料增刪改查功能。分享給大家供大家參考,具體如下:

單例模式

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

單例模式最初的定義出現於《設計模式》(艾迪生維斯理, 1994):「保證一個類別只有一個實例,並提供一個存取它的全域存取點。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

var Singleton = (function(){

 SingletonClass() {

 }

 var singleton = null;

 return {

  getInstance: function() {

   if (singleton == null) {

  singleton = new singletonClass();

   else {

  return singleton;

   }

  }

 }

})();

Singleton.getIntance();

登入後複製
前端常用到一些和介面相關的增刪改查非同步操作。我們來舉例,我在操作資料清單時,常常少不了,增加 修改 刪除功能。有的方案是用同步的(刷新頁面),使用者體驗好一些用非同步;程式碼如下

##增加功能

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

  $.ajax({

  type: "post"

    dataType:"json",

    url: "http://www.jb51.net/",

    data: {name:"csdn博客",dir:"web前端"},

    success: function( result ){

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

  },

    error: function(){

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

  }

  });

});

登入後複製
刪除功能

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

  $.ajax({

  type: "post"

    dataType:"json",

    url: "http://www.jb51.net/",

    data: {id:"1"},

    success: function( result ){

    if ( result.status ) { alert("删除成功!") } else { alert("删除失败") }

  },

    error: function(){

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

  }

  });

});

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

我們改進一下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

var SingletonCRUD = (function(){

 SingletonClass() {}

 SingletonClass.prototype = {

   constructor: SingletonClass,

   add: function( data ) {

  $.ajax({

   type: "post"

     dataType:"json",

     url: "http://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: "http://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請求)相分離;

透過對單例模式的最佳化後的程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

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

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

  });

   },

  remove: function( data ) {

  this.ajax("http://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),隱藏內部細節,對外暴露一個介面;

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

js的作用域與預解析使用詳解

#動態顯示select下拉清單資料

以上是Singleton封裝增刪改查的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板