简介
你将学习本章包含的主题，其中包括使用 npm、组件架构模式以及使用 CSS。
在国际象棋中，战术与战略之间存在明显区别。战术是一系列或组合的走法，旨在达成特定目标，属于短期行为，相对容易定义和教授。而战略则是一种抽象的概念，用于判断在棋盘某一区域哪一方更具影响力。战术解决眼前的问题，而战略则是为应对未来可能出现的问题而合理分配资源。
大多数编程书籍关注的都是战术。例如：“如何转换数组？”“如何编写一个处理异步数据的函数？”
本章内容包括什么？
现在你将开始学习战略。在软件开发领域，将代码组织成可扩展、可复用、易维护的形式，被称为架构。你不再专注于解决明确的具体问题，而是学习如何拆分和组织代码，以便将来更容易应对诸如“扩展类”“处理边界情况”“排查错误”等问题。当你在技巧32《编写可测试的函数》中学到依赖注入时，就已经初步接触过代码架构。那是你第一次看到代码如何被拆分，以保持单个函数专注且灵活。
大多数书籍回避讨论架构，因为它很复杂。解决方案并不清晰，通常要等到几个月后发现问题时才意识到错误，但那时修改代码结构已为时过晚且代价高昂。在本章中，你将学习如何从零开始构建项目的架构。你还将了解如何利用现代 JavaScript 工具，将各个部分整合成最终可用的产品。
你将首先学习如何使用 import 和 export 将代码拆分为不同的文件。接着学习如何通过 npm 引入第三方代码。然后学习如何运用组件架构模式，将应用程序分解为设计良好的模块。虽然这不是唯一的架构模式，但目前最为流行，且与大多数服务端架构模式有显著不同。
之后，你将使用构建工具将各个模块组合成最终可用的产物。最后，你将学习如何使用 CSS 来处理原本由 JavaScript 负责的动画效果。
本章内容会稍显困难。涉及的组件更多，示例也更复杂——尽管相比生产环境中的实际项目，这些例子仍然非常简化。但只要你能理解：良好的架构与良好的代码一样重要，也完全可以通过努力实现，我保证你的项目一定会因此受益。
构建清晰架构的第一步，是使用 import 和 export 将代码拆分为可重用、可共享的模块。接下来的课程我们将深入探讨这一点。