シングルトンカプセル化の追加、削除、変更、およびクエリ

今回は Singleton パッケージの追加、削除、変更、確認についてお届けします。 以下は実際のケースです。

この記事の例では、デザインパターンのシングルケースパターン(Singleton)に基づいてデータの追加、削除、変更、チェックをカプセル化する機能をJSで実装する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

シングルケース パターン

シングルケース パターンのコア構造には、シングルトンと呼ばれる特別なクラスのみが含まれています。シングルトン パターンは、システム内のクラスがインスタンスを 1 つだけ持つことを保証します。シングルトン パターンの元の定義は、「デザイン パターン」(Addison Wesley、1994 年) に記載されています。「クラスが 1 つのインスタンスだけを持つことを保証し、そのインスタンスへのアクセスを提供します。」グローバル アクセス ポイント。"

シングルトン パターン定義: "

クラスにはインスタンスが 1 つだけあり、それがインスタンス化されてシステム全体に提供されます "

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.jb51.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.jb51.net/",
    data: {id:"1"},
    success: function( result ){
    if ( result.status ) { alert("删除成功！") } else { alert("删除失败") }
  },
    error: function(){
    alert("新增出现异步，请得新增加或联系技术管理员");
  }
  });
});

上記の 2 つのコード スニペットは、次のように簡単に説明しています。関数を削除するための JS コードを追加します。一部の学生は、共通点があること、つまり、ajax リクエストの一部が同じであることを発見しました。また、削除関数が他の場所でも使用されている場合はどうなるでしょうか?場合は、別の場所に同じコードを記述する必要があります。とても不快に感じます

改善しましょう

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 );
});

私はいくつかのツールツールクラスを作成するためにシングルトンインスタンスをよく使用します;

デザインパターンを使用する利点:分離、強力な可読性、明確なコード構造;

上記の小さな例を通して, クリックイベントでデータ取得（クリックイベント関数）と操作データ（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.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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jsのスコープと事前解析の詳細な説明

選択されたドロップダウンリストデータの動的表示

以上がシングルトンカプセル化の追加、削除、変更、およびクエリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。