Imperative programming requires developers to define step by step how code should be executed. To give directions in an imperative fashion, you say, “Go to 1st Street, turn left onto Main, drive two blocks, turn right onto Maple, and stop at the third house on the left.” The declarative version might sound something like this: “Drive to Sue’s house.” One says how to do something; the other says what needs to be done. The declarative style has two advantages over the imperative style: It does not force the traveler to memorize a long set of instructions. It allows the traveler to optimize the route when possible.

卡尔弗特，C库尔卡尼，D(2009)。LINQ至关重要。艾迪森·韦斯利48岁

我喜欢剑桥一门课程的解释和他们的例子:

声明性-指定要做什么，而不是如何做 例如:HTML描述的是什么应该出现在网页上，而不是它应该如何在屏幕上绘制 命令式-同时指定“什么”和“如何” int x;-什么(陈述性的) x = x + 1;——如何

这种差异主要与抽象的总体水平有关。对于声明式，在某些情况下，您离单个步骤太远了，以至于程序在如何获得结果方面有很大的自由度。

你可以把每一条指令都看作是连续体上的某个地方:

抽象程度:

Declarative <<=====|==================>> Imperative

声明性真实世界的例子:

图书管理员，请帮我借一本《白鲸记》。 (图书管理员可酌情选择最佳的申请方式)

现实世界的例子:

进入图书馆 查找图书组织系统(卡片目录-老派) 研究如何使用卡片目录(你也忘了，对吧) 弄清楚货架是如何标记和组织的。 弄清楚书架上的书是如何排列的。 从卡片目录和组织系统中交叉引用图书位置以查找所述书籍。 带书到退房系统。 借书。

Imperative programming requires developers to define step by step how code should be executed. To give directions in an imperative fashion, you say, “Go to 1st Street, turn left onto Main, drive two blocks, turn right onto Maple, and stop at the third house on the left.” The declarative version might sound something like this: “Drive to Sue’s house.” One says how to do something; the other says what needs to be done. The declarative style has two advantages over the imperative style: It does not force the traveler to memorize a long set of instructions. It allows the traveler to optimize the route when possible.

卡尔弗特，C库尔卡尼，D(2009)。LINQ至关重要。艾迪森·韦斯利48岁

命令式编程——你编写完成工作的代码

声明式编程——由其他人编写完成工作的代码

这只是一个实际的例子，说明为什么CSS是声明式的，而JavaScript是命令式的。

假设我们有这个导航栏，用户当前正在查看“探索”选项，所以它被标记为当前选中。

<ul>
  <li class="selected">
    <p>Explore</p>
  </li>
  <li>
    <p>Suggestions</p>
  </li>
</ul>

我们希望当前选择的选项的标题是蓝色的，我们如何实现这与CSS和JavaScript?

CSS

li.selected > p {
  color: blue;
}

李在这里。Selected > p声明了我们想要属性颜色的元素的模式:蓝色;待应用。结果是“探索”用蓝色突出显示，而“建议”没有。注意，我们的代码描述了我们想要发生什么，而不是如何发生。CSS选择器引擎如何找到“探索”?我们不知道，通常也不在乎。

JavaScript

let liElements = document.getElementsByTagName("li")
for (let i = 0; i < liElements.length; i++) {
  if (liElements[i].className === "selected") {
    let children = liElements[i].childNodes
    for (let j = 0; j < children. length; j++) {
      let child = children[j]
      if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "P") {
        child.setAttribute("style", "color: blue")
      }
    } 
  }
}

这段代码要长得多，也更难理解。除此之外，它将蓝色应用于所选选项，但当所选类被删除时，它永远不会取消应用它。蓝色只有在页面重新加载时才会重置。注意，在这段代码中，我们一步一步精确地指定了需要做什么以及如何做。

结论

每种编程范例都有其优点。

CSS(声明)

简洁的 作为程序员，我们不能控制CSS内核如何做我们需要的事情。这给了CSS核心开发人员在任何时候改变CSS选择器实现的机会。为什么CSS核心需要改变?也许，CSS开发人员找到了一种更快的方法来应用属性。

JavaScript(必须)

定制。我们控制代码如何实现目标的所有方面。 适合解决各种各样的问题