原型

好的程序员喜欢模式，好的设计师也喜欢模式。模式容易为人所熟悉，并且有助于重用。SMACSS能够帮助我们抽象出设计模式。

一个原型应该能帮助人们从局部或是全局的视角观察组件，并且能将设计语言转换为构件。web设计行业喜欢可重用的组件，这在Bootstrap (opens new window)（有各种网站组件）和960.gs (opens new window)（布局网格）有显著的体现。

在雅虎，原型团队也创造了很多这样的构件，并将它们用于生产活动。这使得各个项目有更高的一致性，因为它们都基于相同的框架。

原型的目标

一个原型需要满足多个目标：

• 展示状态
• 审查本地化
• 隔离依赖关系

状态

从默认状态到收缩状态，再到错误状态，甚至到任何你定义的状态，使状态可视化并保证模块正确实现是非常重要的。

如果一个模块是数据驱动的，那么可以在你的原型中使用真实或者模拟的数据使得产品获得正确的渲染。

本地化

对于需要支持多个地区的项目来说，能够使用不同地区的字符串来测试模块以保证布局不会乱掉也是十分重要的。

依赖

最后，隔离状态是十分重要的。正确渲染一个模块需要哪些CSS和JavaScript依赖呢？在使用懒加载的项目中，能够将依赖关系隔离至最低要求意味着你构建了一个有效的模块，并且可以将模块集成到站点中，而不用担心对其他模块造成影响。

在雅虎，模块被隔离成一个个单独的CSS文件，并在需要的时候使用组合处理程序（combo）输出。例如，当收件箱加载时，网站会将按钮，信息列表，侧边栏，标签以及头部的CSS组合成一个CSS文件，然后输出到浏览器。而用户请求搜索页面时，组合处理程序会将特定的搜索样式进行组合，并通过管道运输。搜索使用的是默认消息列表和侧边栏的变体，所以这意味着它只需要加载子类模块。

拼图

在雅虎，我们搭建了原型引擎，这样有助于模块隔离测试。你是否需要和类似的东西取决于你的项目大小。

原型引擎基于mustache模板 (opens new window)，并将模拟数据存储为JSON数据，本地化数据则以键值对的形式存在text文件中，CSS和JavaScript依赖会在需要的时候被获取。这使得团队查看菜单，对话框，或者是表单组件时，都能基于单个组件或者是整个网站查看对应的效果。这样做，每个人都能在工程化之前审查功能和设计。我们也可以将静态资源转移到工程中，这样的集成也是无缝的。

雅虎原型引擎

我们的原型引擎，一些状态的管理会在模块被渲染之前被处理。比如，条件项目处理，数据过滤，以及其他一些功能，通常会通过服务器端处理。状态管理并不仅仅是将类名应用于HTML元素。

你的原型

对于小的站点来说，用一个成熟的引擎去编译你的模块可能是不必要的。但是让组件拥有易于查看的模式仍然是有好处的。例如MailChimp，他们有一份用于建设站点的设计模式的备忘录。这个文件描述了网站使用的各个模块以及每个模块所需的代码。

记住，模式是个好东西，能实现这些模式更好，而能有一个流程能够重现和测试这些模式那就棒极了！