使用jquery和使用框架的區別

時間 2019-12-06

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　<title>Document</title>
</head>
<body>
　　<div>
　　　　<input type="text" name="" id="txt-title"/>
　　　　<button id="btn-submit">submit</button>
　　</div>
　　<div>
　　　　<ul id="ul-list"></ul>
　　</div>

　　<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
　　<script>
　　　　var $txtTitle = $('#txt-title');
　　　　var $ulList = $('#ul-list');
　　　　var $btnSubmit = $('#btn-submit');

　　　　$btnSubmit.click(function(){
　　　　　　var title = $txtTitle.val();
　　　　　　var $li = $('<li>'+ title +'</li>')
　　　　　　$ulList.append($li);
　　　　　　$txtTitle.val('');
　　　　})
　　</script>
</body>
</html>

這是jquery實現一個todolist的過程，經過點擊事件，初始化一個新的li標籤，append進去的。css

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　<title>Document</title>
</head>
<body>
　　<div id="app">
　　　　<input v-model='title'/>
　　　　<button v-on:click='add'>submit</button>
　　　　<ul v-for='item in list'>
　　　　　　{{item}}
　　　　</ul>
　　</div>

　　<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
　　<script>
　　　　var data = {
　　　　　　title: '',
　　　　　　list: []
　　　　}
　　　　var vm = new Vue({
　　　　　　el: '#app',
　　　　　　data: data,
　　　　　　methods: {
　　　　　　　　add: function(){
　　　　　　　　　　this.list.push(this.title);
　　　　　　　　　　this.title = ''
　　　　　　　　}
　　　　　　}
　　　　})
　　</script>
</body>
</html>

這是vue實現todolist的過程。無論裏面的變量仍是函數都跟vue對象裏面有對應關係。在點擊按鈕的時候只須要操做裏面的數據就好了。html

二者的區別：

一、 數據和視圖的分離

所謂視圖就是dom，jquery的視圖在html裏面，也有在js裏面，上面的例子好比li。他把視圖和數據混在一塊了，因此jquery，數據和視圖沒有分離。混在一塊的壞處1，不符合開放封閉原則，對擴展開放，對修改封閉。全部這種混在一塊的，都違背了擴展封閉原則。

vue中找數據和dom很是方便，數據是哪塊，dom是哪塊。數據和視圖是分離的，數據就是data，vue中的列表不是空殼是有內容的。

二、 以數據驅動視圖

意思是我只改數據，jquery就違背了這點，li標籤是生生append到list中。這種清空value是直接以底層到api來操做的。因此jquery中以數據驅動視圖是徹底沒有的，不存在的。以數據驅動視圖是經過數據的修改，由框架自動的把視圖改了，咱們不用管dom元素是怎麼樣的。jquery是干預了視圖的修改。

vue中以數據驅動視圖更明顯了，在點擊按鈕的時候，只是把數據push到list，沒有操做dom，只是關心數據到變化，數據到清空也是隻關心數據到變化。

這種是否是更符合咱們到開發模式，咱們但願把數據模型改了就好，不須要管dom，dom的渲染其實跟業務流程關係不大。咱們只須要關心數據的變化。數據和視圖的分離，問題主要是解耦（開放封閉原則）。