（1）传统网页开发

最新推荐文章于 2024-06-04 13:04:19 发布

泽哥ins

最新推荐文章于 2024-06-04 13:04:19 发布

阅读量832

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_36213140/article/details/122648638

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、传统网页开发步骤

我们的传统网页开发步骤是：首先通过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 操作与逻辑代码混合，可维护性差、不同功能区域书写在一起，可维护性低、模块之间的依赖关系复杂。

四、需要解决的问题

泽哥ins

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
（1）传统网页开发

一、传统网页开发步骤我们的传统网页开发步骤是：首先通过ajax请求数据，然后生成HTML代码结构，然后用户通过我们书写的网页结构呢，去监听变化，监听变化呢就是监听用户输入的内容，或者操作的内容，比如说用户点击了按钮，再输入框中输入了某些数据，然后呢我们的元素会随之发生变化，然后再次发送我们的变化后的结构的请求，最后更新我们用户最终操作后应该展示的HTML结构，并渲染到我们的浏览器网页当中。二、原生js方式操作DOM示例<!DOCTYPE html><html lan
复制链接

扫一扫