克服心理障碍

我们都懂这种感觉。你接到一项新任务，却不知道该如何实现；或者你有了个想法，却不知从何下手。无论是什么，你都面临着一个问题，却苦于没有解决方案。别担心，你并不孤单，你也不是个糟糕的开发者。

这个问题困扰了我很久，贯穿了我整个开发生涯，直到最近我才找到一个解决办法。请注意，每个人的情况可能不同。适合我的方法可能不适合你，而且这也不是什么万全之策，但我还是建议你好好尝试一下 :)

首先，让我们发挥一下想象力。想象一下，你被要求在现有基础上构建一个 API 层。我说的 API 指的是一系列执行特定相关任务的函数或方法。例如，假设我们需要用 JavaScript 构建一个辅助库来生成媒体查询字符串。我之前就为我的Shades 库构建过这样一个工具（不好意思，顺便宣传一下）。

我处理这项任务的方法是反向思考。等等，什么？让我来解释一下。我们知道最终结果，因为它已经明确说明：我们要生成媒体查询字符串。这个封装库需要能够生成任何有效的媒体查询。所以，第一步，我们来看几个中等规模的媒体查询示例，这些示例结合了多种媒体查询功能，同时我们也要弄清楚媒体查询中可以包含哪些不同类型的值。

以下是一些摘自MDN 文档的示例：

• @media print
• @media screen, print
• @media (max-width: 1245px)
• @media screen and (min-width: 30em) and (orientation: landscape)
• @media screen, print and (min-width: 30em) and (max-width: 100em) and (orientation: landscape) and (color)

在查看了这些内容并浏览了 MDN 上关于该主题的其他文档后，我们发现媒体查询支持以下功能：

• 媒体“类型”只有 4 个可能的值：all，，，print和，screen并且speech在单个查询中可以有 0 个到所有这些值。
• 媒体“特性”，其中大多数可以接受自己的值（例如，width接受height像素值的），有些只允许一组可能值中的一个（例如orientation，只能是portrait或landscape），还有一些在包含它们但未指定值时会被隐式设置为 true（例如color，或monochrome）。
• 逻辑运算符（例如not，，and等）

现在我们了解了查询中所有可能的值（或者至少我们知道了不同的​​类型！），并且有了媒体查询的各种示例。它们可以小到只有一个值，可以是媒体“类型”或媒体“特征”。或者，它们可以非常大，包含所有可能的“特征”和所有有效的“类型”，包括各种逻辑运算符和组合器。所以，这确实令人望而生畏，但我们不需要从头开始逐一实现它们！完全不需要！

让我们先想象一下，我们已经拥有一个完美的库，可以立即使用。如果我们需要用这个库编写媒体查询，它会是什么样子呢？想象一下，它是世界上最好的 JavaScript 库，无需担心实现细节、复杂性或其他任何问题。假设一切都已为你准备就绪。让我们尝试用这个神奇的“假想库”编写一个媒体查询。我最初编写的“理想 API”大致如下：

media.screen.portrait.width(950).hover

翻译过来大概是这样的：

@media screen and (orientation:portrait) and (width:950px) and (hover:hover)

现在我们对真正想要构建的东西有了大致的了解！最终结果可能会略有不同，但总体目标非常明确。我们现在也可以开始编写第一个测试用例了！最终，我构建的实际 API 看起来更像是这样：

media().screen().portrait().width(950).hover()

只是做了一些细微的改动，但改动是可以接受的。我们先设计了 API，但这并不意味着它就一成不变。至少现在我们有了努力的方向。

希望这个方法对你也有帮助。下次见！