使用jquery和使用框架的區別

weixin_30588675發表於2020-04-05
jQuery框架
<!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進去的。

 

<!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物件裡面有對應關係。在點選按鈕的時候只需要操作裡面的資料就行了。



兩者的區別：
1、資料和檢視的分離
所謂檢視就是dom，jquery的檢視在html裡面，也有在js裡面，上面的例子比如li。他把檢視和資料混在一塊了，所以jquery，資料和檢視沒有分離。混在一塊的壞處1，不符合開放封閉原則，對擴充套件開放，對修改封閉。所有這種混在一塊的，都違背了擴充套件封閉原則。
vue中找資料和dom非常方便，資料是哪塊，dom是哪塊。資料和檢視是分離的，資料就是data，vue中的列表不是空殼是有內容的。

 

2、以資料驅動檢視
意思是我只改資料，jquery就違背了這點，li標籤是生生append到list中。這種清空value是直接以底層到api來操作的。所以jquery中以資料驅動檢視是完全沒有的，不存在的。以資料驅動檢視是通過資料的修改，由框架自動的把檢視改了，我們不用管dom元素是怎麼樣的。jquery是干預了檢視的修改。
vue中以資料驅動檢視更明顯了，在點選按鈕的時候，只是把資料push到list，沒有操作dom，只是關心資料到變化，資料到清空也是隻關心資料到變化。

 

這種是不是更符合我們到開發模式，我們希望把資料模型改了就好，不需要管dom，dom的渲染其實跟業務流程關係不大。我們只需要關心資料的變化。資料和檢視的分離，問題主要是解耦（開放封閉原則）。

轉載於:https://www.cnblogs.com/wzndkj/p/11037711.html

相關文章