jquery与vue实现多级评论和回复的功能代码对比

jquery与vue实现多级评论和回复的功能代码对比

jquery与vue实现多级评论和回复的功能代码对比

jquery是dom操作的辅助工具,随着html5的发布,jquery逐渐也退出历史的舞台,我接替jquery的就是虚拟dom插件,而虚拟dom插件中属vue比较流行,今天我们来通过用jquery和vue分别写一个多级评论和回复的页面效果,看看jquey和vue的真实差别到底在哪?

一、评论数据源

评论数据源我们采用的嵌套式数据结构,顶级评论的pid为0,子评论或回复的pid为上一级的id,每个评论都有子评论replyComments数组,如果没有就是空数组,有的话就是一个评论数组,数据源如下表,可以在mysql中创建好数据结构,然后取出来的时候通过递归形成下面的数据结构。

 var comments= [{
		"id": 1,
		"pid": 0,
		"nickname": "张三",
		"content": "你们好",
	
		"createTime": "2020-04-12T06:32:20.613+0000",
		"replyComments": [{
			"id": 2,
			"pid": 1,
			"nickname": "李四",
			"content": "你好",
		
			"createTime": "2020-04-12T06:32:31.699+0000",
			"replyComments": []
		}]
	},
	{
		"id": 3,
		"pid": 0,
		"nickname": "王五",
		"content": "猪吗?",
	
		"createTime": "2020-04-12T06:34:37.146+0000",
		"replyComments": [{
			"id": 4,
			"pid": 3,
			"nickname": "赵六",
			"content": "??",
		
			"createTime": "2020-04-12T07:03:47.873+0000",
			"replyComments": [{
			"id": 5,
			"pid": 4,
			"nickname": "老李",
			"content": "你们在耍啥",
		
			"createTime": "2020-04-12T07:03:47.873+0000",
			"replyComments": []
		}]
		}]
	},
];

二、评论html

这是一个嵌套式的多楼层评论html效果,不管通过jquery还是vue,最终的效果都是这样的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
  <style>
        .comment-box{
             padding: 5px 10px;
             border: 1px solid  grey;
             margin:5px;
         }
         .reply{
             color: red;
             font-weight: bold;
            
         }
    </style>
</head>
<body>
  <div id="comment"><div class="comment-box"><span>张三说</span> <span>你们好</span> <span toid="1" touser="张三" class="reply">回复</span><div class="comment-box"><span>李四回复说</span> <span>你好</span> <span toid="2" touser="李四" class="reply">回复</span></div></div><div class="comment-box"><span>王五说</span> <span>猪吗?</span> <span toid="3" touser="王五" class="reply">回复</span><div class="comment-box"><span>赵六回复说</span> <span>??</span> <span toid="4" touser="赵六" class="reply">回复</span><div class="comment-box"><span>老李回复说</span> <span>你们在耍啥</span> <span toid="5" touser="老李" class="reply">回复</span></div></div></div></div>
</body>
</html>
		


三、jquery实现多级评论

jquery主要通过each对数组进行循环,然后进行递归输出一个总的html字符串,最后再插入到dom节点中,完整代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript">
        $(function() {
          var comments= [{
		"id": 1,
		"pid": 0,
		"nickname": "张三",
		"content": "你们好",
	
		"createTime": "2020-04-12T06:32:20.613+0000",
		"replyComments": [{
			"id": 2,
			"pid": 1,
			"nickname": "李四",
			"content": "你好",
		
			"createTime": "2020-04-12T06:32:31.699+0000",
			"replyComments": []
		}]
	},
	{
		"id": 3,
		"pid": 0,
		"nickname": "王五",
		"content": "猪吗?",
	
		"createTime": "2020-04-12T06:34:37.146+0000",
		"replyComments": [{
			"id": 4,
			"pid": 3,
			"nickname": "赵六",
			"content": "??",
		
			"createTime": "2020-04-12T07:03:47.873+0000",
			"replyComments": [{
			"id": 5,
			"pid": 4,
			"nickname": "老李",
			"content": "你们在耍啥",
		
			"createTime": "2020-04-12T07:03:47.873+0000",
			"replyComments": []
		}]
		}]
	},
];
$("#comment").html(diGui(comments))
$(".reply").click(function(){
   var tonickname=$(this).attr("touser");
   var toid=$(this).attr("toid");
    $("#toid").val(toid);
   $("#replycontent").attr("placeholder","回复"+tonickname);
});
        });
        
        function diGui(children_list){
                var html = "";
                $.each(children_list,function (ck,cv) {
                    
                       var b = '<div class="comment-box">';
                       if(cv.pid>0){
                            b+= "<span>"+cv.nickname+'回复说</span> ';
                       }else{
                            b+= "<span>"+cv.nickname+'说</span> ';
                       }
                       b+= "<span>"+cv.content + "</span> <span  toid='"+cv.id+"' touser='"+cv.nickname+"' class='reply'>回复</span>";
                       b += diGui(cv.replyComments);
                       b += "</div>";
                       html += b;
                 });
                return html;
            }
    </script>
    <style>
        .comment-box{
             padding: 5px 10px;
             border: 1px solid  grey;
             margin:5px;
         }
         .reply{
             color: red;
             font-weight: bold;
            
         }
    </style>
</head>

<body>
    <div id="comment">

    </div>
    <form><input placeholder="" id="replycontent" />
        <input type="hidden" id="toid" /><input type="button" value="回复" /></form>
</body>

</html>

四、vue实现多级评论

vue只要自定义个reply组件,然后通过引入组件直接输出即可完成上面的效果,完整代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>

    <style>
        .comment-box{
             padding: 5px 10px;
             border: 1px solid  grey;
             margin:5px;
         }
         .reply{
             color: red;
             font-weight: bold;
            
         }
    </style>
</head>

<body>

    <div id="app">

        <div id="comment">
            <Reply :commentdata="comments"  v-on:replyit="replyit" ></Reply>
        </div>
        <form><input :placeholder="touser"  id="replycontent" />
            <input type="hidden" id="toid" :value="toid"  /><input type="button" value="回复" /></form>
    </div>
    <script type="text/javascript">
        Vue.component('Reply',{
        	template: '<div><div class="comment-box"  v-for="item in commentdata"><span>{{item.nickname}}说</span> <span>{{item.content}}</span> <span  @click="replyit(item.id,item.nickname)" class="reply">回复</span><Reply v-bind="$attrs" v-on="$listeners" v-if="item.replyComments"  :commentdata="item.replyComments" ></Reply></div></div>',
            props: ['commentdata'],
            data: function () {
                return {
                   
                };
            },
            mounted: function () {
               
            },
            methods: {
                replyit(toid,touser){
                  
                      this.$emit('replyit', [toid,touser]);
                    
                }
            }
        });
        new Vue({
        		el: '#app',
        		components: { // 不需要注册也能使用
        		},
        		mounted: function () {
        			console.log("vue挂载完成");
        		},
        		data: {
        		    touser:"",
        		    toid:"",
        		comments: [{
            		"id": 1,
            		"pid": 0,
            		"nickname": "张三",
            		"content": "你们好",
            	
            		"createTime": "2020-04-12T06:32:20.613+0000",
            		"replyComments": [{
            			"id": 2,
            			"pid": 1,
            			"nickname": "李四",
            			"content": "你好",
            		
            			"createTime": "2020-04-12T06:32:31.699+0000",
            			"replyComments": []
            		}]
            	},
            	{
            		"id": 3,
            		"pid": 0,
            		"nickname": "王五",
            		"content": "猪吗?",
            	
            		"createTime": "2020-04-12T06:34:37.146+0000",
            		"replyComments": [{
            			"id": 4,
            			"pid": 3,
            			"nickname": "赵六",
            			"content": "??",
            		
            			"createTime": "2020-04-12T07:03:47.873+0000",
            			"replyComments": [{
            			"id": 5,
            			"pid": 4,
            			"nickname": "老李",
            			"content": "你们在耍啥",
            		
            			"createTime": "2020-04-12T07:03:47.873+0000",
            			"replyComments": []
            		}]
            		}]
            	},
            ]
        		},
        		methods: {
        			replyit(data){
        			    this.touser="回复"+data[1];
        			      this.toid=data[0];
        			}        	
        		}
        	});
    </script>
</body>

</html>

性能对比总结

两种方式都实现了多级评论和回复,但是我们从性能上来对比一下:

jquery与vue实现多级评论和回复的功能代码对比

jquery与vue实现多级评论和回复的功能代码对比

我们发现jquery的执行脚本时间更短,这是由于jquery直接操作dom树,二vue还是经过复杂计算后再生成dom树,这个数据量太小,看不出太大差异,在数据量大和交互比较频繁的场景下,vue的性能优势就会凸显出来。

那么代码写法上,jquery比较直接,直接操作dom树,而vue通过组件化方式编写,使用更方便,以上仅代表个人观点,大家觉得呢?

{{collectdata}}

网友评论0