【命令式编程和声明式编程】

一、命令式编程和声明式编程

先从一个简单的例子说起，这能帮你快速抓住两者的精髓：

想象一下，你在家对妈妈说：“妈，我要吃糖醋排骨！” 很明显，你只关心“吃到糖醋排骨”这个结果。至于这盘排骨是妈妈亲自下厨忙活半天做出来的，还是她顺手点了个外卖送来的，只要最终能让你大快朵颐，过程如何，你可能并不在意。

同样的道理，公司领导对你说：“这个月业绩必须上千。” 领导要的是“业绩上千”这个结果。至于你是靠加班加点拼出来的，还是轻轻松松就达成了目标，说实话，领导通常不会过问细节。

再来看一个技术场景：操作网页的DOM时，你想获取所有包含“beautiful”这个class的元素。你只需要写下 document.querySelectorAll(‘.beautiful’) 这一句声明，而完全不用操心Ja vaScript引擎是如何在DOM树里翻箱倒柜，把这些元素一个个找出来交给你的。

从这几个例子能得出什么结论呢？

在家里，你关注“吃什么”（糖醋排骨），妈妈操心“怎么弄来”（烹饪或点餐）。你是在做声明式编程，而你妈妈是在做命令式编程。

在公司，领导关注“要什么”（业绩上千），你操心“怎么做”（完成工作）。领导是在做声明式编程，而你是在做命令式编程。

在DOM操作中，你关注“结果”（拿到元素），Ja vaScript引擎操心“过程”（查找并返回）。你是在做声明式编程，而引擎是在做命令式编程。

总结一下：

声明式编程，关注的是 What to do（做什么）。
命令式编程，关注的是 How to do（怎么做）。

(1) 命令式编程

特点非常鲜明：注重过程。开发者需要像指挥官一样，明确告诉程序每一步具体该做什么。用原生的DOM操作来创建页面元素，就是个典型的例子。

☀️ 来看一个具体实例：

  添加一条信息

  

    
西安又有疫情了
    
高校推迟开学
  
  

效果展示：

(2) 声明式编程

它的核心是注重结果。开发者直接告诉程序“我想要什么”，而不必事无巨细地指导每一步。使用React等现代框架编写UI，就是这种风格的体现。

☀️ 举个实例（与上例功能对比）：

效果展示与上例完全一样：

需要注意的一点是：

命令式编程与声明式编程本身并没有绝对的优劣之分。当使用者是我们人类时，声明式风格往往更受欢迎，这多少源于我们追求简洁高效的“惰性”。但对机器而言，命令式编程显然更易于理解和执行，说得更直白点，机器码本身就是一连串精确的“命令”。

此外，从代码调试的角度看，声明式编程有时会带来挑战。比如，当 querySelectorAll 这个接口出错时，你很难像调试普通函数一样一步步跟踪进去。这就对底层命令式代码的稳定性提出了更高要求——我们必须确保提供的“脏活累活”服务足够稳定和可靠。