JSのシングルトンモードはデータの追加、削除、変更、クエリを実装します

この記事では、データの追加、削除、変更、確認の機能をカプセル化するためのデザインパターンにおけるシングルトンモードに基づく JS の実装を主に紹介し、サンプルフォームと組み合わせて、シングルトンに基づく JavaScript の関連操作スキルを分析します。データベースの追加、削除、変更、確認のためのモードと ajax を必要とする友人はそれを参照できます

この記事の例では、JS がデータの追加、削除、変更、確認をカプセル化する機能をどのように実装するかを説明します。デザインパターンのシングルトンパターン(Singleton)。参考のために皆さんと共有してください。詳細は次のとおりです:

シングルケース パターン

シングルケース パターンのコア構造には、シングルトンと呼ばれる特別なクラスのみが含まれています。シングルトン パターンは、システム内のクラスがインスタンスを 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;
   }
  }
 }
})();

上記は皆さんのためにまとめたものです、使っていただければ幸いです。将来的にはみんなの役に立ちます。

関連記事:

ES6で子コンポーネントを使用して親コンポーネントを呼び出す方法

angularで動的フォームを作成する方法

angularjsで$httpを使用してExcelファイルの非同期アップロードを実装する

以上がJSのシングルトンモードはデータの追加、削除、変更、クエリを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。