最近分别使用 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"}>
购物车
style='display: none;'<{/if}> >
购物车空空如也
<{if !empty($cart.cartList)}>
<{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
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