擁抱Vue，拋棄jQuery

本文轉載自查看原文 2017-06-20 18:03 7056

做階梯價銷售提報系統着實被自己的代碼惡心了一把，jQuery這個曾經無比優秀的框架對於日益變化的需求也顯得有點力不從心。抽空研究了一下vue，覺得不能比jQuery好更多，相見恨晚，含淚推薦~~
下面看兩個頁面，一個是jQuery實現版本，另一個是vue實現版本。后端接口一模一樣。

jQuery版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>毛利活動列表</title>
    <link rel="stylesheet" href="/discount/submit/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/discount/submit/static/css/style.css">
    <style>
        body{margin: 10px;}
    </style>
</head>
<body>
<div class="layui-form">
    <table class="layui-table" id="eventListTable">
        <colgroup>
            <col width="60">
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th></th>
            <th>活動ID</th>
            <th>活動名稱</th>
            <th>行業</th>
            <th>本月准入交易額</th>
            <th>交易額增幅指標</th>
            <th>佣金收入增幅指標</th>
            <th>生效日期</th>
        </tr>
        </thead>
        <tbody>
        <!--
        <tr>
            <td>
                <input type="checkbox" name="" lay-skin="primary">
            </td>
            <td>123456</td>
            <td>活動名稱A</td>
            <td>
                <i class="layui-icon layui-btn layui-btn-mini apollo-label">足浴</i>
            </td>
            <td>45500</td>
            <td>20%</td>
            <td>
                20%
            </td>
            <td>
                2017-07
            </td>
        </tr>
        -->
        </tbody>
    </table>
</div>
<div id="pageBar"></div>
<blockquote class="layui-elem-quote" id="selectedQuote" selectedEventId="" selectedEventName="" commissionAmountRiseIndex="" style="border-left: 5px solid #FF5722;">
    未選擇任何活動
</blockquote>
<button class="layui-btn layui-btn-danger" id="closeButton">確定</button>
<script src="/discount/submit/static/js/date-util.js"></script>
<script src="/discount/submit/static/js/jquery-3.2.1.min.js"></script>
<script src="/discount/submit/static/layui/layui.js"></script>
<script src="/discount/submit/static/js/event-list.js"></script>
 
</body>
</html>

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("<span class='layui-laypage-total'>" + "共" + recordCount + "條記錄" + "</span>");
            var eventList = data.records;
            if (eventList == null || eventList.length == 0) {
                //無數據
                var tr = $("<tr></tr>");
                tr.append("<td colspan='8'>未查詢到數據</td>");
                $("#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 = $("<tr></tr>");
                var eventEndTime = new Date(eventList[i].eventEndTime);
                var timeout = (new Date()) > eventEndTime;//是否過期
                if (timeout) {
                    tr.append("<td>過期</td>");
                    //tr.append("<td><i class='layui-icon audit-rejected-label timeout-label'>&#x1007;</i></td>");
                } else {
                    if (eventList[i].id == selectedEventId) {
                        tr.append("<td><input type='checkbox' lay-skin='primary' name='selectedEvent' checked></td>");
                    } else {
                        tr.append("<td><input type='checkbox' lay-skin='primary' name='selectedEvent'></td>");
                    }
                }
                tr.append("<td>" + eventList[i].id + "</td>");
                tr.append("<td>" + eventList[i].eventName + "</td>");
 
                var pOISecondCategoryTd = $("<td></td>");
                var accessAmountTd = $("<td></td>");
                var amountRiseIndexTd = $("<td></td>");
                var commissionRiseIndexTd = $("<td></td>");
 
                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("<td></td>");
                } else {
                    tr.append("<td>" + new Date(eventList[i].eventBeginTime).format("yyyy-MM-dd hh:mm:ss") + "</td>");
                }
                $("#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("<i class='layui-icon' style='font-size: 14px; color: #FF5722;'>&#x1007;未選擇活動</i>");
            parent.$("#eventIdTd").attr("selectedEventId", "0");
            parent.$("#eventIdTd").attr("selectedEventName", "");
            parent.$("#eventIdTd").attr("amountRiseIndex", "0");
            parent.$("#turnoverOfLastMonthTd").attr("accessAmount", "0");
        }
        parent.layer.close(index);
    });
 
});

vue版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>毛利活動列表</title>
    <link rel="stylesheet" href="/discount/submit/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/discount/submit/static/css/style.css">
    <style>
        body{margin: 10px;}
    </style>
</head>
<body id="event-list">
<div class="layui-form">
    <table class="layui-table">
        <colgroup>
            <col width="60">
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th></th>
            <th>活動ID</th>
            <th>活動名稱</th>
            <th>行業</th>
            <th>本月准入交易額</th>
            <th>交易額增幅指標</th>
            <th>佣金收入增幅指標</th>
            <th>生效日期</th>
        </tr>
        </thead>
        <tbody>
            <tr v-if="eventList.length == 0">
                <td colspan="8">
                    未查詢到數據
                </td>
            </tr>
            <tr v-for="event in eventList">
                <td>
                    <input v-if="eventId == event.id" checked="checked" type="checkbox" name="" lay-skin="primary">
                    <input v-if="eventId != event.id" type="checkbox" name="" lay-skin="primary">
                </td>
                <td>{{event.id}}</td>
                <td>{{event.eventName}}</td>
                <td>
                    <#--<i class="layui-icon layui-btn layui-btn-mini apollo-label">足浴</i>-->
                        {{getConfig(event.eventConfigDTOList, 'POISecondCategory')}}
                </td>
                <td>{{getConfig(event.eventConfigDTOList, 'AccessAmount')}}</td>
                <td>
                    {{
                    (Number(getConfig(event.eventConfigDTOList, 'AmountRiseIndex')) * 100).toFixed(2) + '%'
                    }}
                </td>
                <td>
                    {{
                    (Number(getConfig(event.eventConfigDTOList, 'CommissionAmountRiseIndex')) * 100).toFixed(2) + '%'
                    }}
                </td>
                <td>
                    {{(new Date(event.addTime)).format("yyyy-MM-dd hh:mm:ss")}}
                </td>
            </tr>
 
        </tbody>
    </table>
</div>
<div id="pageBar"></div>
<blockquote class="layui-elem-quote" id="selectedQuote" selectedEventId="{{eventId}}" selectedEventName="{{eventName}}" commissionAmountRiseIndex="{{commissionAmountRiseIndex}}" style="border-left: 5px solid #FF5722;">
    <span v-if="eventId == 0">未選擇任何活動</span>
    <span v-if="eventId != 0">已選擇活動：{{eventName}}</span>
</blockquote>
<button class="layui-btn layui-btn-danger" id="closeButton">確定</button>
<script src="/discount/submit/static/js/date-util.js"></script>
<script src="/discount/submit/static/js/jquery-3.2.1.min.js"></script>
<script src="/discount/submit/static/layui/layui.js"></script>
<#--<script src="/discount/submit/static/js/event-list.js"></script>-->
<script src="http://apps.bdimg.com/libs/vue/1.0.8/vue.min.js"></script>
<script>
    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);
    });
 
</script>
</body>
</html>

小結

功能上，vue版比jQuery版少了查詢poi分類名稱的功能，代碼量約30行。

jQuery版js代碼行數：214

vue版js代碼行數：90+30=120

可見實現同樣的功能，vue版比jQuery版代碼里少了近50%。而且vue不用關心數據模型與頁面同步的問題，只要更新了數據，頁面會立即同步更新，簡直不能更省心。

本次項目中js代碼量約2650行，其中大量的代碼都是為了更新數據模型與頁面的對應關系。寫代碼時要時刻關心頁面是否顯示了最新的數據，虐心！！！

今后項目中將盡量避免使用jQuery

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 拋棄vue-resource擁抱axios 拋棄os.path，擁抱pathlib 拋棄jQuery：Why? 拋棄console.log()，擁抱瀏覽器Debugger Java文件IO操作應該拋棄File擁抱Paths和Files 拋棄vuex ，擁抱ts，手擼泛型Store ！ Java文件IO操作應該拋棄File擁抱Paths和Files 徹底拋棄 jQuery ，不然還留着過年？拋棄jQuery，深入原生的JavaScript 拋棄jQuery：DOM API之選擇元素