摘要：中定義的處理業務邏輯與提供數據源，中的綁定負責渲染與響應用戶點擊拖拽等行為，這樣就最大保證了視圖邏輯相分離。遠離的世界，圍繞層控制器路由從后端放到前端，更加適合開發。

最近分別使用 Zepto 和 Avalon框架寫了個 SPA項目，貼出來討論下 JS DOM操作為主 JS庫 與 MV* 框架的對比

以列表方式展示購物車商品

每件商品有"+"、"-" 按鈕，點擊該按鈕則：

檢測是否達到購買極限（如：最小購買數量不能小于 1件）

達到購買極限則給該按鈕添加相應的 class 以便提示用戶該按鈕不能再點擊

反之則去掉該按鈕上的該 class（如：現在商品數量為 1，"-" 為不可用狀態，現在點擊 "+" 則 "-"變為可用狀態）

改變該件商品數量

計算 并 更新該商品總價金額

重新計算 并 更新 購物車所有商品金額

移除單種商品

從視圖上找到該 DOM

然后移除該 DOM

重新計算 并 更新 購物車所有商品金額

移除購物車所有商品

顯示購物車無商品 div，引導用戶到商品列表等其它頁面

  
以 DOM操作 JS庫實現：jQuery、Zepto、MooTools）

通過后端控制器渲染頁面

view：

<{css src="page/cart.css"}>


    

        ←
    
    購物車





 style="display: none;"<{/if}> >
購物車空空如也

">去添加




<{if !empty($cart.cartList)}>



    

        商品總價（不含運費）
          <{$cart.totalAmount|cur}>
        " class="topBtn">去結算
    
    

        <{foreach from=$cart.cartList item=item}>
        

            

                
            
            

                
<{$item.cashcoupon.name}>

                

                    

                        －
                        
                            
                        
                        ＋
                    
                    

                        
                    
                
            
            

                <{$item.cashcoupon.price|cur}>
                <{$item.cashcoupon.mktprice|cur}>
            
        
        <{/foreach}>

        

    
    

        商品總價（不含運費）<{$cart.totalAmount|cur}>
    
    

        

            
            清空全部
        
        

            " class="bottomBtn">去結算
        
    



<{script src="page/cart.js"}>
<{/if}>

JS 邏輯

javascript
// 全局常量

var UA = navigator.userAgent;
var ipad = !!(UA.match(/(iPad).*OSs([d_]+)/)),
    isIphone = !!(!ipad && UA.match(/(iPhonesOS)s([d_]+)/)),
    isAndroid = !!(UA.match(/(Android)s+([d.]+)/)),
    isMobile = !!(isIphone || isAndroid);

var CLICK = isMobile ? "tap" : "click";    // 移動端觸摸、PC單擊 事件

// 購物車
var Cart = {

    // 更新 info
    update: function ($id, $number, fun) {

        var data = {
            id: $id || "",
            number: $number || 0
        };
        CGI.POST("wecart-update.html", data, function (data) {
            // 回調方法
            fun && fun(data);
        });
    },

    // 計算總價
    figurePrice: function () {

        var goodsList = $(".goodslist");
        console.log(goodsList);

        if (0 === goodsList.length) {
            this.removeAll();
            return false;
        }

        // 當前商品金額
        var price;
        // 當前商品數量
        var number;
        // 總金額
        var allPrice = 0;
        $.each(goodsList, function (index, item) {
            item = $(item);

            price = parseFloat(item.attr("data-price"));
            number = parseInt(item.find("input").val());
            console.log({"數量": number, "單價": price});

            allPrice += price * number;
        });
        console.log("總價：" + allPrice);
        // DOM 操作
        $(".total").text("￥" + allPrice.toFixed(2));
    },

    // 移除所有
    removeAll: function () {
        // DOM 操作
        $("#emptyBox").show();
        $(".box").hide();
    }

};

// 遞增、遞減
$(".numBox").on(CLICK, function (e) {

    // numBox
    var _t = $(this);

    var dom = $(e.target);

    // 商品數量 DOM
    var numDom = _t.find("input");
    //console.log(numDom);

    // 數量
    var _v = parseInt(numDom.val()), now_v;

    // 最大購買數
    var max = parseInt(numDom.attr("data-max-count"));

    if (dom.hasClass("plus")) {
        // 遞增
        // 最大購買數量限制
        if (_v === max) {
            return false;
        }
        now_v = (_v < 1) ? 1 : (_v >= max ? max : _v + 1);

    } else if (dom.hasClass("minus")) {
        // 遞減
        // 最小購買數量限制
        if (_v === 1) {
            return false;
        }
        now_v = (_v < 1) ? 1 : (_v > max ? max : _v - 1);

    } else {
        return false;
    }

    var cartId = dom.parents(".goodslist").attr("data-cashcoupon-id");
    // ajax
    Cart.update(cartId, now_v, function (data) {

        // 更改數量
        numDom.val(now_v);

        // 遞減數量按鈕
        var minus = _t.find(".minus");
        // 遞增數量按鈕
        var plus = _t.find(".plus");

        now_v > 1 && minus.hasClass("bg_gray") && minus.removeClass("bg_gray");
        now_v === 1 && !minus.hasClass("bg_gray") && minus.addClass("bg_gray");

        now_v < max && plus.hasClass("bg_gray") && plus.removeClass("bg_gray");
        now_v >= max && !plus.hasClass("bg_gray") && plus.addClass("bg_gray");

        // 計算總價
        Cart.figurePrice();
    });

    event.preventDefault();
});

// 刪掉商品
$(".del").on(CLICK, function () {
    var dom = $(this).parents(".goodslist");
    var cartId = dom.attr("data-cashcoupon-id");
    cartId && Cart.update(cartId, 0, function (data) {
        // 提示
        SD.Toast({"text": "刪除成功！"});

        // 移除當先列
        dom.remove();
        // 計算總價
        Cart.figurePrice();
    });
});

// 刪掉所有商品
$(".delAll").on(CLICK, function (event) {

    SD.Confirm({
        content: "你確定要清空購物車嗎?",
        //lock: false,
        ok: {
            text: "殘忍清空",
            fun: function () {
                Cart.update("", 0, function (data) {
                    // 提示
                    SD.Toast({"text": "刪除成功！"});
                    // DOM 操作
                    Cart.removeAll();
                });
            }
        },
        cancel: {
            text: "再忍忍"
        }
    });
});

  
以 MV* 框架實現：Angular、Avalon）
通過后端接口獲取購物車數據，JS動態渲染頁面

html



    

        
購物車空空如也

        
去添加
    

    

        

            商品總價（不含運費）{{price|currency}}
            去結算
        
        


            

                

                    
                
                

                    
{{el.cashcoupon.name}}

                    

                        

                            －
                            
                            ＋
                        
                        

                            
                        
                    
                
                

                    {{el.cashcoupon.price|currency}}
                    {{el.cashcoupon.mktprice|currency}}
                
            
            
            

        
        

            商品總價（不含運費）{{price|currency}}
        
        

            

                
                清空全部
            
            

                去結算
            
        
    

javascriptdefine("cart", ["avalon", "request"], function (avalon) {

    var avalonAjax = avalon.ajax;

    var model = avalon.define({
        $id: "cart",
        toggle: true,
        price: 0, // 總金額
        goodsList: [],
        // 遞加數量
        plus: function (index) {
            model.goodsList[index].quantity = parseInt(model.goodsList[index].quantity) + 1;

            // 計算總數量 和 總金額
            count();
        },
        // 遞減數量
        minus: function (index) {
            if (model.goodsList[index].quantity <= 1) {
                return false;
            }
            model.goodsList[index].quantity = parseInt(model.goodsList[index].quantity) - 1;

            // 計算總數量 和 總金額
            count();
        },
        // 移除當前
        remove: function (index, perish) {
            perish();   // 移除
        },
        // 移除所有
        removeAll: function () {
            avalon.vmodels.cart.goodsList.clear();

            // 計算總數量 和 總金額
            count();
        }
    });

    // 獲取數據
    var getData = function () {
        if (avalonAjax) {
            avalon.getJSON("", {method: "ecoupon.cart.list"}, function (data) {
                model.price = data.totalAmount;
                model.goodsList = data.cartList;
            })
        }
    }();

    // 計算總數量 和 總金額
    function count() {
        var _count = 0;
        var _price = 0;
        model.goodsList.forEach(function (goods, index) {
            _count += parseInt(goods.quantity);
            _price += parseFloat(goods.cashcoupon.price) * parseInt(goods.quantity);
        });
        avalon.vmodels.page.cartNum = _count;
        model.price = _price.toFixed(2);
    };

    // 購物車數量監聽(目前只能監聽商品種類變化, 不能監聽商品數量變化)
    model.goodsList.$watch("length", function () {
        count();
    });

    return model;

});

  
zepto 版本中，js 業務代碼大量使用了 選擇器 來 操作DOM，導致 js 與 view 極度耦合。

  
avalon版本，利用avalon可以大大加快我們項目的開發速度，可以使我們遠離 DOM的世界，我們的編程變成了只圍繞 model層而不圍繞 DOM，即操作 model就是操作 DOM，同時能讓我們開發人員離開 DOM都能輕松進行前端開發。avalon中定義的 VM處理業務邏輯與提供數據源，HTML中的綁定負責渲染與響應用戶點擊拖拽等行為，這樣就最大保證了視圖邏輯相分離。

  
具體選擇就看場景了吧，動畫效果、特效多用 jQuery這種，業務復雜用 MV* 這種