这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

一、本次笔记的重点内容：

声明式编程介绍
利用声明式编程做个交通灯

二、知识点介绍：

声明式编程和命令式编程

声明式和命令式是两种编程方式，Vue/React都是声明式的，JQuery是命令式的。

声明式编程：告诉“机器”你想要的是什么，让机器去想如何做这件事。就像你告诉你朋友画一幅画，你不用管他是怎么画出来的。
命令式编程：命令“机器”如何做这件事，按照你的命令一步步实现。就像按照你的命令，你朋友一步步把画画出来。
例子：求一个list里所有值的和。

命令式编程方式实现：

var arr = [1,2,3,4,5];  
var total = 0;  
for(var i = 0; i < arr.length; i++) {  
  total += arr[i]  
}  
console.log (total)

声明式编程方式实现：

var arr = [1,2,3,4,5];  
var total = arr.reduce (function (sum, n) {  
  return sum + n;  
});  
console.log (total)

声明式编程方式其实就是把一些功能封装成一个函数，用的时候直接调用该方法即可，或是直接利用第三方的函数实现某些功能。

开发过程中，尽量使用声明式编程方式编程，把一些复用率高的功能抽象成一个个函数，来使代码更加优雅和整洁。

三、交通灯例子：

这边在写css时有个小技巧，通过设置父元素的特定状态来使不同的class名称对应其特定的灯亮，例如当父元素class为wait的时候，第一个灯亮红色，其他灯不亮。

.wait li:nth-child(1) {
      background-color: red;
    }

    .stop li:nth-child(2) {
      background-color: yellow;
    }

    .pass li:nth-child(3) {
      background-color: green;
    }

html很简单，简单列表描述即可

<ul id="traffic" class="wait">
      <li></li>
      <li></li>
      <li></li>
    </ul>

进入js部分，既然是声明式编程，我们就先声明好每个状态以及它所需要持续亮的时间

 const stateList = [
    {
      state: "wait",
      last: 5000,
    },
    {
      state: "stop",
      last: 2000,
    },
    {
      state: "pass",
      last: 3000,
    },
  ];

获取traffic元素列表，通过控制traffic的class来改变它的子元素状态，通过获取状态列表的参数来对它进行控制，这边因为递归调用所以用setTimeout和setInterval是一样的效果。

 var traffic = document.getElementById('traffic');
    function start(lights, stateList) {
      function applyState(Idx) {
        const {state,last} = stateList[Idx]
        traffic.className=state
        setTimeout(()=>{
            applyState((Idx+1)%stateList.length)
        },last)
      }
      applyState(0);
    }
    start(traffic, stateList);

这样一个交通灯的函数就封装好了，如果我们想调整灯的状态，添加灯的状态，修改时间什么的就会方便很多，这就是声明式编程的好处

QQ录屏20230207102700.gif

四、总结：

这次笔记学习了声明式编程和命令式编程的区别，学到了如何使用声明式编程，我们应学会养成一个声明式编程的习惯，有利于代码的整洁，维护。

JS声明式编程|青训营笔记

一、本次笔记的重点内容：

二、知识点介绍：

声明式编程和命令式编程

三、交通灯例子：

四、总结：