次の単一ページ Web アプリのケースについて、実用的な提案とベスト プラクティスに関心があります。
- イベントを処理するより良い方法はありますか?
- ShoppingCart オブジェクトを抽象化し、プロトタイプ パターンを使用したので、将来、jQuery、アンダースコア、Zepto などの指定されたフレームワークを使用できるように拡張できます。もっと良い方法はありますか？
単一ページのショッピング カートに jQuery/jQuery Mobile を使用しています。もちろん、Shopping Cart には複数の疑似ページがあり、AJAX 呼び出しを介して挿入できます。ページは、主にフォームといくつかのグリッドで構成されます。ビューはサーバー側で生成されます。
メインShoppingCartオブジェクトは抽象化されており、jQuery のみ、または jQuery と jQuery Mobile の両方で動作します。
次のようになります。
var ShoppingCart = function(){
// Some general vars.
}
ShoppingCart.prototype.init = function(){
this.router();
}
このrouterメソッドは、イベントのバインドや特定の動的 HTML 要素の描画など、現在のページ イベントとアクションを処理します。
ShoppingCart.prototype.router = function(){
switch(this.currentPageId()){
case 'productPage':
this.bindProductQty();
this.bindProductPricingOptionsElements();
this.bindOrderButton();
break;
case 'checkoutPage':
this.bindDeleteProduct();
this.paintStates();
// [...]
break;
// [...]
}
}
jQuery Mobile を使用した初期化の例:
var myShoppingCart = new ShoppingCart();
// Override some of the original methods methods.
myShoppingCart.paintPopup = function( msg, options ) {
return $.dynamic_popup(msg);
}
myShoppingCart.paintPaymentMethods = function(){
ShoppingCart.prototype.paintPaymentMethods();
// Refresh the menu in jQuery Mobile.
$('#payment').selectmenu('refresh');
}
// [...]
// Init the ShoppingCart using jQuery Mobile
// myShoppingCart.setDebug(true);
myShoppingCart.init();
PS: 私はまだ Node.js やその他の派生物に慣れていません。