外贸
网站建设前端架构排版程序员常说的“原子”是什么意思？
网站建设公司在本站前面关于前端设建设设计的文章中详细介绍过网站建设前端设计的诸多方法，本文继续就网站前端设计我们还需要解决最后调用的模板 {{> atoms-landscape-16x9 }}。就像我们在首页模板中看到的，这个标签导入了名为“landscape-16x9”的原子，但是这里并没有改变数据的上下文。这意味着这个负责显示广告图的 Mustache 文件会和 block-hero 使用完全一样的数据，不过这也不算什么大问题，因为 block-hero 模板中几乎没有多个 img 属性的需求。因此，可以使用和 block-hero 相同的数据调用模板并传入广告图。
<！—— 02-landscape-16x9.mustache ——>
<img src="{{ img.16x9.src }}" alt="{{ img.16x9.alt }}" />
Pattern Lab 让我们可以抽象最简单的标记块，这个图片标签就是一个很好的例子。这个模板只调用了图片源码及其 alt 标签，因此看起来可能多此一举。为什么不直接放一个图片标签到广告图板块里，就像那个 H2 标题一样？话说回来，究竟把模板抽象到什么程度，还是应该由你和你的团队来决定，不过所有图片标签都用单一的模板生成是很有意义的。想象一下将来你决定给所有的图片标签添加一个 CSS 类名或者 data 属性。如果每个模板只处理自己的图片标签，那就需要更新很多“分子”。但是如果所有的图片都用一个单独的模板来处理，那么只需更新一处，Pattern Lab 就会帮你更新其他任何用到这个原子的地方。
网站建设前端模板涉及怎样发挥原子的作用
现在，我们已经见识了在首页显示广告图的方法，还可以采取同样的方法分解页面上的每一个 UI 元素。这种方法的强大之处在于，在持续构建的过程中，你很快就会发现可以重复使用之前建好的片段。如今，当我们着手构建网站的页面时，面对的已经不再是一张白纸，以及各种独特标记和样式的组合。我们能够通过系统已有的原子、分子、有机体和模板创建一个完整的页面。由于整个网站共享相同的代码，如果要调整“发布日期”的行高，那么不必挨个修改每个页面各自的日期数据条目；只需更新一个原子，这个改变就会自动应用到整个系统中。
如今，Pattern Lab 文档网站成为了由构建网站的各个单元有机结合而成的动态系统。它对品牌颜色、字体、商标规格甚至动画都进行了分类。因此，Pattern Lab 成为了最完整而高效的网站文档记录方式之一。它不仅是一个极好的开发平台，也起到了团队成员之间进行沟通的通用语言的作用。
不要觉得前端开发是在原地绕圈。假如只是构建不同的网页，工作只会随着时间推移变得越来越难。但是如果专注于运用类似 Pattern Lab 的工具构建系统，那么实际上工作会随着时间的推移变得越来越简单。请不要担心这样会让我们失业！一旦从枯燥的网站独立页面开发工作中解放出来，就能有更多的心思来研究如何完善我们的系统。这也正是我要介绍 JSON 模式的原因。第 17 章不会再介绍一般类型的示例，而会以 Red Hat 网站为例来具体说明，JSON 模式是如何将 Red Hat 从类似 Pattern Lab 的系统转变为完全集成的设计系统的。这个系统不仅可以生成样式规范，同时也是内容编辑系统的基础，而且还是网站的主要渲染引擎。好了，
深圳网站建设公司本文关于“外贸网站建设前端架构排版程序员常说的“原子”是什么意思？”就分享到这里。如果您需要定制高端外贸网站平台，请联系我们我们网站平台客服或者拨打我们网站联系电话。有专业技术人员为您免费提供解决方案。谢谢关注，博纳网络编辑整理。
