今回は 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("新增出现异步,请得新增加或联系技术管理员");
}
});
});
改善しましょう
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 サイトの他の関連記事を参照してください。