开始使用模块和模块化前端开发

每个人都知道并喜欢乐高积木。 当我还是个孩子的时候，我就迷上了乐高积木，今天我仍然喜欢它们。 你可以用各种方式用各种乐高积木组装你的玩具，一次一件。 然后，您可以重新开始并用这些相同的部件构建不同的玩具。 可能性是无止境。

网站上的模块很像乐高积木。 将模块视为乐高积木，使您能够构建您的网站。 当您以正确的方式将它们连接在一起时，它们就会形成网页。 要构建像乐高积木这样的网站，您必须将网站视为独立模块的集合。 本文将帮助您在前端开发和设计中做到这一点。

模块拼贴

当进入一个项目的设计阶段时，我倾向于通过组装设计灵感拼贴和模块拼贴来开始。 这是一个很像 Dan Mall 的过程，他将这些拼贴画设计为后压缩时代的可交付成果。 灵感拼贴是我呈现给客户的屏幕截图集合，只是为了大致了解我们前进的视觉方向。它们只是我和客户都喜欢的网站的屏幕截图。

一旦我们确认我们在风格方面处于同一页面上，我就可以进入我的图形编辑器（我更喜欢 Sketch）并创建模块拼贴画。 这些拼贴画是最常用模块的集合——按钮、表单、标题、段落、列表、图片等。 模块拼贴让我可以快速创建网站的外观和感觉。

这是我最近的一个模块拼贴的一部分，一个我在项目开始时在 Sketch 中设计的按钮示例：

也许您想知道静态合成和向客户展示像素完美设计何时发挥作用。 他们没有——我在我的过程中几乎完全跳过了这些。 跳过这部分过程使我能够在项目和代码原型的早期进入代码（我很快就会得到这些），或者换句话说，在浏览器中进行设计。 以下是在浏览器中进行设计的一些优点：

• 浏览器是网站的自然环境，坚持图形编辑器中的想法可能会适得其反。 在浏览器中测试和做出设计决策是很自然的。 你以前听过它，你会再次听到它——这不是关于它的外观，而是关于它是如何工作的。

• 静态模拟与您在将它们翻译成代码后最终在浏览器中获得的内容之间总会存在设计不一致。 为避免这些不一致，请跳入代码编辑器和浏览器来解决实际的设计问题。

• 静态组合可能无法传达正确的信息。 一旦你整合了交互性，外观和感觉就会有很大不同——比如悬停状态、过渡和动画。

• 与其花几个小时为几个分辨率设计几个静态模型，我可以通过尽早编写代码来节省大量时间。 调整 CSS 使我能够在各种设备（智能手机、平板电脑等）上快速向客户端演示更改和响应方面。

因此，请节省时间并打开您的代码编辑器和浏览器以尽早开始创建 UX。 根据我的经验，大多数客户会在我们继续编码之前要求一两个页面的完整模型，这完全没问题。 对客户来说，对未来的设计有一个很好的认识是很重要的。 我通常使用 InVision，它是跟踪早期模型、更改、评论等的好工具。 但是，对于客户来说，了解 Sketch 和 InVision 不会让他们走得太远非常重要。

构建前端开发模块

一旦客户对我设计的模块拼贴和模型感到满意，我就可以开始编码并定义这些元素的真实外观和感觉。

模块化设计与迭代过程中的模块化开发交织在一起。 我编写了一个模块，然后在浏览器中试用它以查看它是如何工作的，然后在需要时进行迭代。 同样，这个过程很像建造乐高积木——你基本上同时设计和开发，并尝试不同的变化，直到你感觉良好为止。

我经常从构建一些简单的东西开始开发模块，比如一个按钮。 想象一下，您正在自己构建一个，您需要编写一个橙色按钮，通常用于联系表格。 以下是您可能想出的：

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

很简单，对吧？ 您将 .submit-button 类应用于您的 HTML，这将解决您当前的问题。 现在，当您需要创建一个新按钮时会发生什么，就像那个按钮一样，但背景颜色为蓝色？ 您可能会复制那个确切的类，然后更改类名和背景颜色。 又快又脏。 现在，假设您需要使用相同的按钮，但背景为橙色。 你可以看到这是怎么回事——你最终可能会重复大量的 CSS。 在一个超小的项目上，这可能不会成为一个真正的问题，但在更大的项目上它可能会。 在不知不觉中，您的 CSS 变得臃肿且难以维护。

如果您曾经开发过一个中型到大型项目，那么您无疑会遇到相当多的头痛。 这些可能是由以下任何原因引起的：

• 混乱、不一致、难以扫描和理解的代码。
• 臃肿的代码和带有大量重复的 XXL CSS 文件。
• 难以维护的代码。
• 缺乏结构和皮肤的分离。

别担心，你并不孤单。 我敢打赌，所有前端开发人员都会不时遇到这些痛苦的问题，而且可能更多。 我可以肯定地说，过去我有很多项目遇到过所有这些典型问题。

避免或最小化这些问题的一种方法是以模块化方式构建。

模块化按钮

如何以模块化方式编写该按钮？ 模块化方法是编写可以重用的代码。 记住那些乐高积木，它们可以重新使用和重复使用。

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

我们所做的是巧妙地分离样式。 .button 类包含项目中每个按钮使用的样式，因此您不必重复它。 .button-orange 类仅使用与橙色按钮相关的样式。 您将对所有其他按钮执行相同的操作并定义它们的背景和文本颜色。

您的按钮模块最终可能由几个独立的按钮组成，随时可以在需要时使用。

更复杂的东西呢？

您可能需要的每个其他组件都遵循相同的原则。 目的是创建独立元素的模块，独立于其他模块。 组合后，这些模块将形成模板，您只需根据需要重复使用这些模块并努力完成您的设计。

对于模块化前端开发的进一步阅读，我强烈推荐 SMACSS，这是我倾向于在所有项目中使用的架构，无论大小。

请记住，模块化过程都是关于构建、测试和迭代的。 一个模块首先在您的编辑器中生成，然后在浏览器中进行测试，然后在需要时进行迭代。 必要时重复该循环。

让客户参与

不要忘记客户的需求——他们希望随时了解情况并确认他们的钱物有所值。 这个开发过程的美妙之处在于客户可以成为您团队的活跃成员。 您可以安全地向他们展示模块，他们可以忽略开发过程并随时投入以使产品更好。 在看到真正的进展之前，他们不必等待静态组合完成或达到里程碑。 如果您花一些时间向您的客户解释模块的工作方式，他们将对设计过程和构建它们所花费的时间有更好的理解和欣赏。

我通常向客户展示模块的方式很像 Bootstrap 的做法——设置一个独立的模块及其代码是让所有设计人员、开发人员和客户参与到流程中的好方法。

使用您构建的模块作为页面的构建块。 对于您的索引页面，您可以将导航模块放在顶部，然后放置一个英雄模块，然后放置一些内容模块，然后将页脚放在底部。 在不知不觉中，您已经有了一个 HTML 原型页面。 但究竟什么是原型？ 我一直很喜欢 Leah Buley 在她的巨著《The User Experience Team of One》中对原型的定义：

一旦实施，设计应该如何表现和操作的功能性或半功能性示例。

通过构建原型，这正是您将在项目的早期阶段得到的——一个半功能的网站。 在静态模型和 InVision 的不足之处，HTML 原型表现出色。 原型为您的客户提供了完美的响应式交付物。 一旦客户对您的原型的外观和感觉感到满意，您需要做的就是对其进行润色，直到它按需要的方式工作。 构建、测试、迭代。

重用构建块

模块和原型将使您能够重用当前项目的代码，但也适用于未来的项目。 调整上一个项目中的模块可以节省大量时间——每个项目中需要的模块通常是相似的。 我有一个经常重用的大型模块库：选项卡、导航菜单、按钮、面包屑、表单、表格、分页、列表等。虽然这些模块的代码在所有项目中并不完全相同，但其中有很多可以重复使用，为我节省了大量的开发时间。 我对您的建议是也为自己创建可重用的模块。 查看 BASSCSS、Pure 和 Refills 以获得灵感。

如果切换到模块化设计和开发需要时间，请不要灰心。 当然，如果模块化原则对您来说是新的，它们将需要对您的设计和开发过程进行调整，但这种改变可能被证明是值得的。

我在本文中介绍的模块化方法和技术只是皮毛。 尽管如此，我真诚地希望这篇文章对您有所帮助，并激发您深入了解模块化设计和开发。