这只是一个实际的例子，说明为什么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(必须)

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

我发现基于幂等性和交换性更容易区分陈述性和命令性。通过参考资料来了解他们。

看看这个简化版，了解幂等性。

然后引入“WHAT”和“HOW”的定义，以理解“WHAT”和“HOW”的实际含义。在声明式中，通过定义数据之间的关系来连接数据。你没有提到这种关系应该如何实现，而是“这种关系是什么”。通过关系来描述输出数据的“样子”，而不是“如何”来实现输出数据。

开始在脑海中画一些图表，画一些点(数据)，用线(关系)连接起来。画所有可能的方式，一比多，多比一&一比一。为这些行添加箭头，如<-----------。所有箭头都应该朝左，因为必须先计算特定数据所基于的所有数据，然后再向左移动以计算该特定数据。

如果数据a基于数据b，那么数据c和数据d又可能基于其他一些数据。然后先计算b c d，然后才计算a。所以a在这条线的左边其他的都在右边。从b c d有3条线到达a。

这个图表有一些属性:

NO data will violate the relationship it has with all other data control flow or the order doesn't matter, of course b, c and d should be calculated before a but there is no preference between b, c and d i.e. it doesn't matter which one of these 3 is calculated first (commutative) a is only based upon b, c and d and no one else. Hence, it doesn't matter how many times the relationship operation that calculates a using b, c and d is executed, same a should be achieved (idempotent). a is the end result of the relationship operation here. Basically, everyone who is affecting a should have a line pointing to a.

这些关系(线)就像函数(数学函数而不是编程函数)。毫无疑问，函数式编程在学术界很有名。纯函数(在我们的编程中，因此不是粗体)就像函数(在数学中，因此是粗体)。

到目前为止，声明性可能听起来像PURE和IMMUTABLE(通常用于函数式编程)，如果是GOOD，如果不是GREAT。因为这不是这里的目的，这是从这个模式中自动出现的。

如果你的一段代码可以转换成这个图表，那么它就是完全声明性的，否则，它就在尺度上的其他地方。

说明性很接近数学。

现在让我们放大这些关系(行)，看看在程序执行期间计算机内部发生了什么。

命令式进来了。这就是底层工作完成的地方。在命令式中，你会一步一步地提到“如何”完成它，你知道这一系列步骤将在一个数据(输入b c d)和另一个数据(输出a)之间创建所请求的关系。在这里，你创建变量，改变它们，循环数组和所有其他事情。

命令式接近编程。

我不认为程序是声明式的或命令式的，我更喜欢把它放在最左边是完全声明式的，最右边是完全命令式的。记住，声明式是建立在命令式之上的，因此你看到的任何声明式的东西实际上都是命令式的。一般来说，程序是声明式和命令式的混合。

现在，让我们举两个例子:

第二个例子可以转换成这样的图表:

reduce_r map_r filter_r A <--------- b <--------- c <--------- d

Filter_r(关系):c只是d的偶数 Map_r(关系):b是所有数字乘以10的c Reduce_r (relationship): a是b加起来的所有数字

这应该看起来像数学的复合函数:reduce_r(map_r(filter_r(d)))

在声明中，开发人员的工作是将最终目标(a)分解为有助于实现最终目标的子目标(b, c)。

当然后台程序的映射、缩减和过滤是运行的必要代码。

值得思考的是:如果您需要对map函数做一个假设，从左到右，以使您的代码按预期工作，那么您实际上是在以声明的名义执行命令式操作。

参考资料:purpleidea (James)， www.dataops.live, wiki.c2.com

我将添加另一个在声明式/命令式编程讨论中很少出现的示例:用户界面!

在c#中，您可以使用各种技术构建UI。

在命令式端，你可以使用DirectX或OpenGL命令式地绘制按钮、复选框等。一行一行的(或者实际上是一个三角形一个三角形的)。如何绘制用户界面由您决定。

在声明端，有WPF。您只需编写一些XML(是的，是的，技术上是“XAML”)，框架就会为您完成工作。你说用户界面是什么样的。如何做到这一点取决于系统。

总之，这是另一件值得思考的事情。仅仅因为一种语言是声明式或命令式的，并不意味着它没有另一种语言的某些特性。

此外，声明式编程的一个好处是，通过阅读代码通常更容易理解目的，而命令式编程则可以更好地控制执行。

要点是:

说明性->你想做什么

命令式->你想怎么做

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

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

抽象程度:

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

声明性真实世界的例子:

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

现实世界的例子:

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

命令式编程是显式地告诉计算机做什么，以及如何做，比如指定顺序等

C#:

for (int i = 0; i < 10; i++)
{
    System.Console.WriteLine("Hello World!");
}

说明性是指你告诉计算机做什么，而不是如何做。Datalog / Prolog是在这方面首先想到的语言。基本上所有东西都是声明性的。你不能保证秩序。

c#是一种更命令式的编程语言，但某些c#特性更具有声明性，如Linq

dynamic foo = from c in someCollection
           let x = someValue * 2
           where c.SomeProperty < x
           select new {c.SomeProperty, c.OtherProperty};

同样的东西也可以写成命令式:

dynamic foo = SomeCollection.Where
     (
          c => c.SomeProperty < (SomeValue * 2)
     )
     .Select
     (
          c => new {c.SomeProperty, c.OtherProperty}
     )

(例子来自维基百科Linq)

声明性程序只是它的一些或多或少的“通用”命令式实现/虚拟机的数据。

pluses: specifying just a data, in some hardcoded (and checked) format, is simpler and less error-prone than specifying variant of some imperative algorithm directly. some complex specifications just cant be written directly, only in some DSL form. best and freq used in DSLs data structures is sets and tables. because you not have dependencies between elements/rows. and when you havent dependencies you have freedom to modify and ease of support. (compare for example modules with classes - with modules you happy and with classes you have fragile base class problem) all goods of declarativeness and DSL follows immediately from benefits of that data structures (tables and sets). another plus - you can change implementation of declarative language vm, if DSL is more-or-less abstract (well designed). make parallel implementation, for example. or port it to other os etc. all good specifed modular isolating interfaces or protocols gives you such freedom and easyness of support.

缺点: 你猜对了。一般的(通过DSL参数化的)命令式算法/虚拟机实现可能比特定的算法慢和/或占用内存。在某些情况下。 如果这种情况很罕见，那就忘了它吧，让它慢慢来。如果这种情况经常发生，你总是可以扩展你的DSL/vm。某个能减缓其他案件的地方，当然…

P.S.框架介于DSL和命令式之间。作为所有的折中方案……他们结合了缺点，而不是优点。它们不是那么安全，也不是那么快:)看看万事通haskell——它介于强大的简单ML和灵活的元程序Prolog之间……真是个怪物。你可以把Prolog看作一个Haskell，它只包含布尔函数/谓词。它对Haskell的灵活性是多么简单……