每个人都知道并喜欢乐高积木. 当我还是个孩子的时候，我就迷上了乐高积木，直到今天我仍然爱着它们. 你可以用各种乐高积木以各种方式组装你的玩具，一次组装一块. 然后你可以重新开始，用这些相同的零件制作一个不同的玩具. 可能性是无限的.

网站上的模块很像乐高积木. 把模块想象成乐高积木，可以让你建立自己的网站. 当你以正确的方式将它们连接在一起时，它们就形成了网页. 要像建乐高积木一样建网站，你必须把网站想象成一个个独立模块的集合. 本文将帮助您在前端开发和设计中做到这一点.

模块拼贴画

当进入项目的设计阶段时, 我倾向于从组装设计灵感拼贴和模块拼贴开始. 这个过程很像Dan Mall，他把这些叫做拼贴画 后竞争时代的设计成果. 灵感拼贴是我呈现给客户的截图集合, 只是为了大致了解一下我们前进的视觉方向. 它们只是我和客户都喜欢的网站截图.

一旦我们得到确认，我们就会在风格上达成一致, 我可以跳进我的图形编辑器(我更喜欢) 草图)和创建模块拼贴. 这些拼贴画是最常用的模块-按钮的集合, 形式, 标题, 段落, 列表, 图片, 等等....... 模块拼贴让我能够快速创建网站的外观和感觉.

这是我最近的一个模块拼贴画的一部分，一个我设计的按钮的例子 草图 在项目开始时:

也许你想知道静态对比和向客户呈现像素完美的设计何时开始发挥作用. 它们没有——我在我的过程中几乎完全跳过了这些. 跳过这部分流程使我能够在项目和代码原型的早期阶段就开始编写代码(我很快就会讲到这些)。, 换句话说, 在浏览器中设计. 以下是在浏览器中进行设计的一些优势:

• 浏览器是网站的自然环境, 坚持图形编辑器的想法可能会适得其反. 在浏览器中测试和做出设计决定是很自然的. 你以前听过，你还会再听一遍——重要的不是它的外观，而是它的工作方式.

• 静态模型和最终得到的模型之间总是存在设计上的不一致 在浏览器中 一旦它们被翻译成代码. 为了避免这些矛盾, 进入代码编辑器和浏览器来解决实际的设计问题.

• 静态竞争可能无法传达正确的信息. 一旦你整合了交互性——比如悬停状态——外观和感觉就会有很大的不同, 转换, 和动画.

• 而不是花几个小时为几个分辨率设计几个静态模型, 我可以通过尽早编写代码来节省很多时间. 调整CSS 使我能够快速演示的变化和响应方面的客户端在各种设备-智能手机, 平板电脑, 等.

因此，节省时间，打开代码编辑器和浏览器开始创建 UX 尽可能早. 根据我的经验, 在我们继续编码之前，大多数客户会要求提供一两个页面的完整模型, 这完全没问题. 对于客户来说，对未来的设计有一个很好的感觉是很重要的. 我通常使用 InVision，这是一个很好的工具，可以跟踪早期的模型、更改、注释等. 然而, 让客户明白草图和InVision并不能让他们走得太远是非常重要的.

构建前端开发模块

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

在迭代过程中，模块化设计与模块化开发交织在一起. 我编写了一个模块，然后在浏览器中试用它，看看它是如何工作的，如果需要的话，再进行迭代. 再一次。, 这个过程很像搭乐高积木——你基本上是同时设计和开发，并尝试不同的变化，直到你觉得满意为止.

我经常从构建一些简单的东西开始开发模块，比如一个按钮. 想象一下，你正在自己构建一个，你需要编写一个橙色按钮, 通常用于联系表单. 你可能会想到:

.提交按钮{ 
	背景:橙色;
	颜色:# fff;
	填充:10px 20px;
	字体大小:16 px;
}

A link

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

如果你曾经开发过一个中型到大型项目, 毫无疑问，你经历过不少头疼的事情. 这些可能是由以下任何一种原因引起的:

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

别担心，你不是一个人. 我敢打赌 前端开发人员 你是否不时地经历过这些痛苦的问题，甚至更多. 我可以肯定地说，在过去的许多项目中，我遇到了所有这些典型问题.

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

模块化按钮

如何以模块化的方式编写按钮? 模块化的方法是编写可以重用的代码. 还记得那些乐高积木吗，它们可以重复使用.

.按钮{
	填充:10px 20px;
	字体大小:16 px;
}

.button-orange {
	背景:橙色;
	颜色:# fff;
}

A link

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

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

更复杂的东西呢?

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

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

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

涉及客户

不要忘记客户的需求——他们想要保持在循环中，并得到确认，他们的钱是值得的. 这个开发过程的美妙之处在于，客户可以成为您团队的积极成员. 你可以放心地向他们展示模块，他们可以忽略开发过程，并随时投入工作，使产品更好. 在看到真正的进展之前，他们不必等待一个静态的比较完成或达到一个里程碑. 如果您花一些时间向您的客户解释模块的工作方式, 他们将更好地理解和欣赏设计过程和花在建造它们上的时间.

我通常向客户展示模块的方式是 引导 建立一个独立的模块和它的代码是一个伟大的方式参与所有的设计师, 开发人员, 客户也参与了这个过程.

使用您构建的模块作为页面的构建块. 对于索引页, 你可以把导航模块放在最上面, 下一个英雄模块, 下面介绍一些内容模块, 然后是底部的页脚. 在您意识到这一点之前，您已经为HTML原型创建了一个页面. 但是什么是原型呢? 我一直很喜欢Leah Buley在她的伟大著作的 用户体验 团队:

功能或半功能的例子，设计应该如何行为和操作一旦实现.

通过建立一个原型, 这正是你在项目的早期阶段会得到的——一个半功能的网站. 在静态模型和InVision的不足之处，HTML原型更胜一筹. 原型是一种完美 响应交付 为你的客户. 一旦客户对你的原型的外观和感觉满意, 你所需要做的就是打磨它，直到它按照它需要的方式工作. 构建、测试、迭代.

重用构建模块

模块和原型将使您能够在当前项目中重用代码, 但对未来的项目也是如此. 调整上一个项目中的模块可以节省很多时间——每个项目中需要的模块通常是相似的. 我有一个很大的模块库，我经常重用:标签, 导航菜单, 按钮, 面包屑, 形式, 表, 分页, 列表, 等. 而这些模块的代码在所有项目中并不完全相同, 好的部分可以被重复利用, 节省了我大量的开发时间. 我给您的建议是，也为自己创建可重用模块. 看看 BASSCSS, 纯 和 续杯 为了获得灵感.

如果切换到模块化设计和开发需要时间，不要气馁. 自然, 如果你对模块化原理很陌生, 它们需要你对设计和开发过程进行微调, 但事实可能证明，这种改变是值得的.

本文所介绍的模块化方法和技术只是皮毛. 不过, 我真诚地希望这篇文章对您有所帮助，并且能够激发您对模块化设计和开发的兴趣.