我对以下单页 Web 应用案例的实用建议和最佳实践感兴趣。
- 有没有更好的方法来处理这些事件？
- 我已经抽象了 ShoppingCart 对象并使用了原型模式，因此我可以在将来扩展它以使用任何指定的框架，如 jQuery、下划线、Zepto 或其他任何东西。有没有更好的办法？
我将 jQuery/jQuery Mobile 用于单页购物车。当然，购物车有多个可以通过 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 或任何其他衍生产品。