MV* 框架 与 DOM操作为主 JS库 的案例对比


最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库 与 MV* 框架的对比

案例(MV* 框架 与 DOM操作 JS库 实例对比)

购物车页面 JS业务逻辑(忽略 Ajax请求–Ajax请求时机根据产品具体情况而定)

  • 以列表方式展示购物车商品
  • 每件商品有”+”、”-” 按钮,点击该按钮则:
    • 检测是否达到购买极限(如:最小购买数量不能小于 1件)
    • 达到购买极限则给该按钮添加相应的 class 以便提示用户该按钮不能再点击
    • 反之则去掉该按钮上的该 class(如:现在商品数量为 1,”-” 为不可用状态,现在点击 “+” 则 “-“变为可用状态)
    • 改变该件商品数量
    • 计算 并 更新该商品总价金额
    • 重新计算 并 更新 购物车所有商品金额
  • 移除单种商品
    • 从视图上找到该 DOM
    • 然后移除该 DOM
    • 重新计算 并 更新 购物车所有商品金额
  • 移除购物车所有商品
    • 显示购物车无商品 div,引导用户到商品列表等其它页面

实现:

实现一:Zepto 版

以 DOM操作 JS库实现:jQuery、Zepto、MooTools)

通过后端控制器渲染页面

view:

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

<header class="titleHead">
    <div class="leftBtns">
        <a class="leftBack goBack" href="javascript:void(0)">←</a>
    </div>
    <b>购物车</b>
</header>




<div id="emptyBox" <{if !empty($cart.cartList)}> style='display: none;'<{/if}> >
<p>购物车空空如也</p>

<p><a href="<{link app='wechatecoupon' ctl='site_cashcoupon' act='group'}>">去添加</a></p>
</div>



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


<div class="box">
    <div id="topTotal">
        <span>商品总价(不含运费)
          <b class="total"><{$cart.totalAmount|cur}></b></span>
        <a href="<{link app='wechatecoupon' ctl='site_order' act='create'}>" class="topBtn">去结算</a>
    </div>
    <div class="goodslistWrap">
        <{foreach from=$cart.cartList item=item}>
        <div class="goodslist" data-cart-id="<{$item.cart_id}>" data-cashcoupon-id="<{$item.obj_id}>"
             data-price="<{$item.cashcoupon.price}>">
            <div class="imgWrap">
                <img src="<{$item.cashcoupon.image_id|storager}>" height="100%"/>
            </div>
            <div class="txtWrap">
                <p><{$item.cashcoupon.name}></p>

                <div class="handleBox">
                    <div class="numBox">
                        <span class="handle minus <{if 1==$item.quantity}>bg_gray<{/if}>">-</span>
                        <span>
                            <input type="text" name="num" value="<{$item.quantity}>"
                                   data-max-count="<{$item.cashcoupon.sale_count}>" maxlength="4"
                                   readonly="readonly" />
                        </span>
                        <span class="handle plus <{if $item.quantity >= $item.cashcoupon.sale_count}>bg_gray<{/if}>">+</span>
                    </div>
                    <div class="trashBox del">
                        <i class="trash"></i>
                    </div>
                </div>
            </div>
            <div class="priceWrap">
                <span><strong><{$item.cashcoupon.price|cur}></strong></span>
                <span><del><{$item.cashcoupon.mktprice|cur}></del></span>
            </div>
        </div>
        <{/foreach}>

        <div class="clear"></div>
    </div>
    <div class="goodslistTotal">
        <span>商品总价(不含运费)<b class="total"><{$cart.totalAmount|cur}></b></span>
    </div>
    <div class="bottomTotal">
        <div class="delAll">
            <i class="trash_b"></i>
            <span>清空全部</span>
        </div>
        <div class="payBtnBox">
            <a href="<{link app='wechatecoupon' ctl='site_order' act='create'}>" class="bottomBtn">去结算</a>
        </div>
    </div>
</div>


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

JS 逻辑

javascript
// 全局常量 var UA = navigator.userAgent; var ipad = !!(UA.match(/(iPad).*OS/s([/d_]+)/)), isIphone = !!(!ipad && UA.match(/(iPhone/sOS)/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: '再忍忍' } }); });

实现二:Avalon版

以 MV* 框架实现:Angular、Avalon)
通过后端接口获取购物车数据,JS动态渲染页面

view:

html

<div ms-controller="cart"> <div id="emptyBox" ms-visible="goodsList.length==0" style="display: none"> <p>购物车空空如也</p> <p><a href="#!/">去添加</a></p> </div> <div ms-visible="goodsList.length>0"> <div id="topTotal"> <span>商品总价(不含运费)<b>{{price|currency}}</b></span> <a href="pay.html" class="topBtn">去结算</a> </div> <div class="goodslistWrap"> <div class="goodslist" ms-repeat="goodsList"> <div class="imgWrap"> <img ms-src="{{el.cashcoupon.image}}" height="100%"/> </div> <div class="txtWrap"> <p>{{el.cashcoupon.name}}</p> <div class="handleBox"> <div class="numBox"> <span class="handle minus" ms-class-bg_gray="el.quantity<=1" ms-click="minus($index)">-</span> <span><input type="text" ms-attr-value="{{el.quantity}}"/></span> <span class="handle plus" ms-click="plus($index)">+</span> </div> <div class="trashBox" ms-click="remove($index,$remove)"> <i class="trash"></i> </div> </div> </div> <div class="priceWrap"> <span><strong>{{el.cashcoupon.price|currency}}</strong></span> <span><del>{{el.cashcoupon.mktprice|currency}}</del></span> </div> </div> <!--last--> <div class="clear"></div> </div> <div class="goodslistTotal"> <span>商品总价(不含运费)<b>{{price|currency}}</b></span> </div> <div class="bottomTotal"> <div class="delAll" ms-click="removeAll"> <i class="trash_b"></i> <span>清空全部</span> </div> <div class="payBtnBox"> <a href="pay.html" class="bottomBtn">去结算</a> </div> </div> </div> </div>

JS 业务代码

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中的绑定负责渲染与响应用户点击拖拽等行为,这样就最大保证了视图逻辑相分离。

优点

  • JS 与 view 解耦。远离 DOM的世界,围绕 model层
  • 控制器、路由从后端放到前端,更加适合 Web APP开发。SPA应用可以提供更好的用户体验
  • 业务实现的方式转变(由直接操作 DOM变为 操作 VM,更加适合后端童鞋思维方式)
  • 更容易实现前后端分离
  • 官方讲代码量比 jQuery减少50%
  • ….

缺点

  • MV* 框架学习成本高,概念多(控制器、路由、指令、过滤器、服务、依赖注入…)[哈哈、后端同学最喜欢这种了,学习起来无压力]
  • 发展时间没有 jQuery这种时间长,组件相比 jQuery相差比较大(大多数需要自己实现)
  • 动画
  • SEO(貌似有解决方案了)

具体选择就看场景了吧,动画效果、特效多用 jQuery这种,业务复杂用 MV* 这种

原文发在:http://www.webdevs.cn/article/93.html


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>