この記事では、データの追加、削除、変更、確認の機能をカプセル化するためのデザインパターンにおけるシングルトンモードに基づく 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("新增出现异步,请得新增加或联系技术管理员");
}
});
});
改善しましょう
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 サイトの他の関連記事を参照してください。