命令式编程与声明式编程的区别

最新推荐文章于 2023-08-15 14:04:38 发布

白纸一样

最新推荐文章于 2023-08-15 14:04:38 发布

阅读量748

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45670042/article/details/121129797

版权

命令式编程与声明式编程

二者的区别

我们将通过js和vue写一个小案例来体会：

基础页面结构

<!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>Document</title>
</head>
<body>
  <button id="btn">
    <span id="num"></span>
  </button>
</body>
</html>

要求

点击按钮使数字加一

命令式实现

<!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>Document</title>
</head>
<body>
  <button id="btn">
    <span id="num"></span>
  </button>

  <script>
    const btn = document.querySelector("#btn");
    const numBox = document.querySelector("#num");

    let counter = 0;
    numBox.innerHTML = counter;
    btn.addEventListener("click",()=>{
      counter++;
      numBox.innerHTML = counter
    })
  </script>
  
</body>
</html>

对于命令式js代码的描述：

首先我得获取到按钮和数字节点=》我需要声明一个变量放入节点中显示=》对节点进行监听，点击后让节点显示的数字+1，并将更新新后的变量覆盖节点内的显示。

细节

不难看出，从按钮的获取一直到按钮逻辑的实现，整个过程是紧密联合的，上一步执行完下一步等着继续执行。

拿经典做饭来比喻：先让小明去菜市场选菜(获取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>Document</title>
</head>
<body>
  <div id="app"></div>
  
  <!-- CDN引入Vue3 -->
  <script src="https://unpkg.com/vue@next"></script>

  <script>
    Vue.createApp({
        template:`
	   <div>
		<button @click='increase'>{{counter}}</button>
           </div>
	`,
        data: function(){
            return {
                counter: 0
            }
        },
        methods:{
            increase(){
                this.counter++;
            }
        }
    }).mount('#app')
  </script>
</body>
</html>

对于声明式vue代码的描述：

声明节点、方法、变量，并初始化=》为节点绑定事件、显示的值

细节

对于声明式代码，我们可以观察到，对于DOM操作，事件的监听我们都看不到了其逻辑，只是需要一些配置即可实现我们想要的效果。

拿经典做饭来比喻：告诉小明这有一堆切好洗好的菜和一些做法（实际上可能有多个method；写template，初始化变量、方法。而不需要关心如何获取的DOM，如何显示）=》告诉小明这个菜对应的做法（@click绑定，无需关心是如何绑定的）

区别

对比两种方式我们就可以看出，声明式的编程相对于命令式来说，帮助我们减少了工作量，能更好的让我们去关注逻辑。可以说是更高一层的方式，而不是偏底层的方式。

白纸一样

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
命令式编程与声明式编程的区别

命令式编程与声明式编程二者的区别我们将通过js和vue写一个小案例来体会：基础页面结构<!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, in
复制链接

扫一扫