一、传统网页开发步骤
我们的传统网页开发步骤是:首先通过ajax请求数据,然后生成HTML代码结构,然后用户通过我们书写的网页结构呢,去监听变化,监听变化呢就是监听用户输入的内容,或者操作的内容,比如说用户点击了按钮,再输入框中输入了某些数据,然后呢我们的元素会随之发生变化,然后再次发送我们的变化后的结构的请求,最后更新我们用户最终操作后应该展示的HTML结构,并渲染到我们的浏览器网页当中。
二、原生js方式操作DOM示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生Js操作DOM</title>
</head>
<body>
<div class="box">
<p id="text">当前数值为:100</p>
<button id="jia">+</button>
<button id="jian">-</button>
<script>
var text = document.querySelector('.box>#text')
var jia = document.querySelector('.box>#jia')
var jian = document.querySelector('.box>#jian')
var num = 100;
jia.onclick = function () {
num++;
text.innerText = '当前数值为:' + num
}
jian.onclick = function () {
num--;
text.innerText = '当前数值为:' + num
}
</script>
</div>
</body>
</html>
通过我们最原始的js去操作dom,我们发现dom操作很麻烦,还需要写很长的选中元素的属性。
三、使用JQuery库方式操作DOM示例
然后我们后面又学习了jQuery库去操作dom,简化了我们的代码,但是它仍然还是简化了我们的代码。还不够优秀,因为它没有帮我们简化逻辑代码,让我们用更少的逻辑去实现功能,只是单纯的把代码简化了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02.JQuery操作dom</title>
</head>
<body>
<div class="box">
<p id="text">当前数值为:100</p>
<button id="jia">+</button>
<button id="jian">-</button>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
var num = 100
$('.box>#jia').click(function(){
num++;
$('#text').text('当前数值为:'+num)
})
$('.box>#jian').click(function(){
num--;
$('#text').text('当前数值为:'+num)
})
</script>
</body>
</html>
通过如上我们学过的2个技术示例:缺点:DOM 操作频繁,代码繁杂、DOM 操作与逻辑代码混合,可维护性差、不同功能区域书写在一起,可维护性低、模块之间的依赖关系复杂。