jquery vue 替代_拥抱Vue，抛弃jQuery

做阶梯价销售提报系统着实被自己的代码恶心了一把，jQuery这个曾经无比优秀的框架对于日益变化的需求也显得有点力不从心。抽空研究了一下vue，觉得不能比jQuery好更多，相见恨晚，含泪推荐~~

下面看两个页面，一个是jQuery实现版本，另一个是vue实现版本。后端接口一模一样。

jQuery版

毛利活动列表

body{margin: 10px;}

活动ID活动名称行业本月准入交易额交易额增幅指标佣金收入增幅指标生效日期

未选择任何活动

确定

var form;

var laypage;

function queryEvents(page) {

$.ajax({

type: "GET",

url: "/discount/submit/queryEvents",

dataType: "json",

data: {

page: page

},

success: function(data) {

$("#eventListTable tbody").empty();

var page = data.page;

var pageSize = data.pageSize;

var recordCount = data.recordCount;

var pageCount = data.pageCount;

laypage({

cont: 'pageBar' //分页容器的id

,pages: pageCount //总页数

,skin: '#FF5722' //自定义选中色值

,curr: page

//,skip: true //开启跳页

,jump: function(obj, first){

if(!first){

//layer.msg('第'+ obj.curr +'页');

queryEvents(obj.curr);

}

}

});

$("#pageBar").find("div").append("" + "共" + recordCount + "条记录" + "");

var eventList = data.records;

if (eventList == null || eventList.length == 0) {

//无数据

var tr = $("

");

tr.append("

未查询到数据");

$("#EventListTable tbody").append(tr);

return;

}

//var eventList = data.eventList;

var selectedEventId = $("#selectedQuote").attr("selectedEventId");

var poiIdListStr = "";

for (var i = 0; i < eventList.length; i++) {

var tr = $("

");

var eventEndTime = new Date(eventList[i].eventEndTime);

var timeout = (new Date()) > eventEndTime;//是否过期

if (timeout) {

tr.append("

过期");

//tr.append("

ဇ");

} else {

if (eventList[i].id == selectedEventId) {

tr.append("

");

} else {

tr.append("

");

}

}

tr.append("

" + eventList[i].id + "");

tr.append("

" + eventList[i].eventName + "");

var pOISecondCategoryTd = $("

");

var accessAmountTd = $("

");

var amountRiseIndexTd = $("

");

var commissionRiseIndexTd = $("

");

var eventConfigDTOList = eventList[i].eventConfigDTOList;

if (eventConfigDTOList != null) {

for (var j = 0; j < eventConfigDTOList.length; j++) {

if (eventConfigDTOList[j].attributeKey == "POISecondCategory") {

//行业

poiIdListStr += eventConfigDTOList[j].attributeValue;

poiIdListStr += ",";

pOISecondCategoryTd.append(eventConfigDTOList[j].attributeValue);

} else if (eventConfigDTOList[j].attributeKey == "AccessAmount") {

//本月准入交易额

accessAmountTd.append(eventConfigDTOList[j].attributeValue);

} else if (eventConfigDTOList[j].attributeKey == "AmountRiseIndex") {

//交易额增幅指标

var amountRiseIndex = eventConfigDTOList[j].attributeValue;

amountRiseIndex = (Number(amountRiseIndex) * 100).toFixed(2);

amountRiseIndexTd.append(amountRiseIndex + "%");

} else if (eventConfigDTOList[j].attributeKey == "CommissionAmountRiseIndex") {

//佣金收入增幅指标

var commissionAmountRiseIndex = eventConfigDTOList[j].attributeValue;

commissionAmountRiseIndex = (Number(commissionAmountRiseIndex) * 100).toFixed(2)

commissionRiseIndexTd.append(commissionAmountRiseIndex + "%");

}

}

}

tr.append(pOISecondCategoryTd);

tr.append(accessAmountTd);

tr.append(amountRiseIndexTd);

tr.append(commissionRiseIndexTd);

//生效日期

if (eventList[i].eventBeginTime == null) {

tr.append("

");

} else {

tr.append("

" + new Date(eventList[i].eventBeginTime).format("yyyy-MM-dd hh:mm:ss") + "");

}

$("#eventListTable tbody").append(tr);

}

//重新渲染页面

form.render();

queryPoiName(poiIdListStr);

$(".layui-form-checkbox").click(function () {

var checked = $(this).hasClass("layui-form-checked");

if (checked) {

var selectedEventId = $(this).parent().next().text();

var selectedEventName = $(this).parent().next().next().text();

var accessAmount = $(this).parent().next().next().next().next().text();//准入门槛

var amountRiseIndex = $(this).parent().next().next().next().next().next().text();//交易额增幅

amountRiseIndex = Number(amountRiseIndex.substr(0, amountRiseIndex.length - 1)) / 100;

var commissionAmountRiseIndex = $(this).parent().next().next().next().next().next().next().text();//佣金收入增幅指标

commissionAmountRiseIndex = Number(commissionAmountRiseIndex.substr(0, commissionAmountRiseIndex.length - 1)) / 100;

$("#selectedQuote").attr("selectedEventId", selectedEventId);

$("#selectedQuote").attr("selectedEventName", selectedEventName);

$("#selectedQuote").attr("accessAmount", accessAmount);

$("#selectedQuote").attr("amountRiseIndex", amountRiseIndex);

$("#selectedQuote").attr("commissionAmountRiseIndex", commissionAmountRiseIndex);

$("#selectedQuote").text("已选择活动：" + selectedEventName);

//取消其他选中项

$(".layui-form-checked").removeClass("layui-form-checked");

//保持自己为选中状态

$(this).addClass("layui-form-checked");

} else {

$("#selectedQuote").attr("selectedEventId", "0");

$("#selectedQuote").attr("selectedEventName", "");

$("#selectedQuote").attr("accessAmount", "0");

$("#selectedQuote").attr("amountRiseIndex", "0");

$("#selectedQuote").attr("commissionAmountRiseIndex", "0");

$("#selectedQuote").text("未选择任何活动");

}

});

}

});

}

function queryPoiName(poiIdListStr) {

$.ajax({

type: "GET",

url: "/discount/submit/queryPoiNameByIdList",

dataType: "json",

data: {

poiIdListStr: poiIdListStr

},

success: function (data) {

data.forEach(function(element) {

//console.log(element);

for (var i = 0; i < $("#eventListTable").find("tbody").find("tr").length; i++) {

var poiId = $("#eventListTable").find("tbody").find("tr").eq(i).find("td")[3].innerHTML;

if (poiId == element.key) {

$("#eventListTable").find("tbody").find("tr").eq(i).find("td")[3].innerHTML = element.value;

}

}

});

},

error: function () {

console.log("查询门店POI名称失败");

}

});

}

layui.use(['layer', 'form', 'laypage', 'element'], function(){

var layer = layui.layer;

form = layui.form();

laypage = layui.laypage;

var element = layui.element();

//初始化已选择的门店

$("#selectedQuote").attr("selectedEventId", parent.$("#eventIdTd").attr("selectedEventId"));

$("#selectedQuote").attr("amountRiseIndex", parent.$("#eventIdTd").attr("amountRiseIndex"));//交易额增幅指标

$("#selectedQuote").attr("selectedEventName", parent.$("#eventIdTd").attr("selectedEventName"));

$("#selectedQuote").attr("accessAmount", parent.$("#turnoverOfLastMonthTd").attr("accessAmount"));

$("#selectedQuote").attr("commissionAmountRiseIndex", parent.$("#eventIdTd").attr("commissionAmountRiseIndex"));

if (parent.$("#eventIdTd").attr("selectedEventId") != "0") {

$("#selectedQuote").text("已选择活动：" + parent.$("#eventIdTd").attr("selectedEventId") + " " + parent.$("#eventIdTd").attr("selectedEventName"));

}

//默认页面初始加载时自动查询第一页的数据

queryEvents(1);

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

//关闭页面

$('#closeButton').on('click', function(){

var selectedEventId = $("#selectedQuote").attr("selectedEventId");

var selectedEventName = $("#selectedQuote").attr("selectedEventName");

var accessAmount = $("#selectedQuote").attr("accessAmount");

var amountRiseIndex = $("#selectedQuote").attr("amountRiseIndex");

var chooseEventButton = parent.$("#eventIdTd button");

var commissionAmountRiseIndex = $("#selectedQuote").attr("commissionAmountRiseIndex");

parent.$("#eventIdTd").empty();

parent.$("#eventIdTd").append(chooseEventButton);

if (selectedEventId != "0") {

parent.$("#eventIdTd").prepend(selectedEventName + " ");

parent.$("#eventIdTd").attr("selectedEventId", selectedEventId);

parent.$("#eventIdTd").attr("selectedEventName", selectedEventName);

parent.$("#eventIdTd").attr("amountRiseIndex", amountRiseIndex);

parent.$("#turnoverOfLastMonthTd").attr("accessAmount", accessAmount);

parent.$("#eventIdTd").attr("commissionAmountRiseIndex", commissionAmountRiseIndex);

parent.checkAccessRights();

} else {

parent.$("#eventIdTd").prepend("ဇ未选择活动");

parent.$("#eventIdTd").attr("selectedEventId", "0");

parent.$("#eventIdTd").attr("selectedEventName", "");

parent.$("#eventIdTd").attr("amountRiseIndex", "0");

parent.$("#turnoverOfLastMonthTd").attr("accessAmount", "0");

}

parent.layer.close(index);

});

});

vue版

毛利活动列表

body{margin: 10px;}

活动ID活动名称行业本月准入交易额交易额增幅指标佣金收入增幅指标生效日期

未查询到数据

{{event.id}}{{event.eventName}}

足浴-->

{{getConfig(event.eventConfigDTOList, 'POISecondCategory')}}

{{getConfig(event.eventConfigDTOList, 'AccessAmount')}}

{{

(Number(getConfig(event.eventConfigDTOList, 'AmountRiseIndex')) * 100).toFixed(2) + '%'

}}

{{

(Number(getConfig(event.eventConfigDTOList, 'CommissionAmountRiseIndex')) * 100).toFixed(2) + '%'

}}

{{(new Date(event.addTime)).format("yyyy-MM-dd hh:mm:ss")}}

未选择任何活动

已选择活动：{{eventName}}

确定

-->

var layer;

var form;

var laypage;

var element;

var app = new Vue({

el: '#event-list',

data: {

eventList: [],

eventId: 0,

eventName: "",

commissionAmountRiseIndex: 0

},

methods: {

getConfig: function (eventConfigDTOList, key) {

for (var i = 0; i < eventConfigDTOList.length; i++) {

if (eventConfigDTOList[i].attributeKey == key) {

return eventConfigDTOList[i].attributeValue;

}

}

return 0;

},

Number: function (str) {

return Number(str);

}

}

});

function queryEvents(page) {

$.ajax({

type: "GET",

url: "/discount/submit/queryEvents",

dataType: "json",

data: {

page: page

},

success: function (data) {

app.eventList = data.records;

var page = data.page;

var pageSize = data.pageSize;

var recordCount = data.recordCount;

var pageCount = data.pageCount;

laypage({

cont: 'pageBar' //分页容器的id

,pages: pageCount //总页数

,skin: '#FF5722' //自定义选中色值

,curr: page

//,skip: true //开启跳页

,jump: function(obj, first){

if(!first){

//layer.msg('第'+ obj.curr +'页');

queryEvents(obj.curr);

}

}

});

setTimeout(function () {

form.render();

$(".layui-form-checkbox").click(function () {

var checked = $(this).hasClass("layui-form-checked");

if (checked) {

var selectedEventId = $(this).parent().next().text().trim();

app.eventId = selectedEventId;

var selectedEventName = $(this).parent().next().next().text().trim();

app.eventName = selectedEventName;

var commissionAmountRiseIndex = $(this).parent().next().next().next().next().next().next().text().trim();//佣金收入增幅指标

commissionAmountRiseIndex = Number(commissionAmountRiseIndex.substr(0, commissionAmountRiseIndex.length - 1)) / 100;

app.commissionAmountRiseIndex = commissionAmountRiseIndex;

//取消其他选中项

$(".layui-form-checked").removeClass("layui-form-checked");

//保持自己为选中状态

$(this).addClass("layui-form-checked");

} else {

app.eventId = 0;

app.eventName = "";

app.commissionAmountRiseIndex = 0;

}

});

}, 200 )

}

});

}

layui.use(['layer', 'form', 'laypage', 'element'], function() {

layer = layui.layer;

form = layui.form();

laypage = layui.laypage;

element = layui.element();

queryEvents(1);

});

小结

功能上，vue版比jQuery版少了查询poi分类名称的功能，代码量约30行。

jQuery版js代码行数：214

vue版js代码行数：90+30=120

可见实现同样的功能，vue版比jQuery版代码里少了近50%。而且vue不用关心数据模型与页面同步的问题，只要更新了数据，页面会立即同步更新，简直不能更省心。

本次项目中js代码量约2650行，其中大量的代码都是为了更新数据模型与页面的对应关系。写代码时要时刻关心页面是否显示了最新的数据，虐心！！！

今后项目中将尽量避免使用jQuery