定义样板化的配置_使用响应式配置生成器简化响应式图像消除样板

定义样板化的配置

简化在前端Javascript项目中指定响应式图像url的过程。

响应式图像是任何现代&＃xff0c;快速网站的关键要素。 用于创建响应图像的工具和服务比比皆是-npm脚本&＃xff0c;webpack和babel插件&＃xff0c;grunt和gulp任务&＃xff0c;尤其是Cloudinary&＃xff0c;Imgix和Kraken等平台&＃xff08;仅举几例&＃xff09;。 同样&＃xff0c;有许多工具和教程可用于优化图像&＃xff0c;生成低分辨率的嵌入式占位符等。

当然&＃xff0c;如果没有它自己对图像管理的特殊关注&＃xff0c;每个名副其实的CMS或静态网站生成工具也不会完整。 在众多&＃xff08;通常称为&＃xff09;解决方案中&＃xff0c;我不断发现自己遇到了一个看似琐碎但最终重要的问题…… 指定了整个网站中使用的所有响应式图像所需的所有图像变体 。

例如&＃xff0c; TheGuardian.com上的标准文章图片。 这被渲染为使用11种不同图像变体的元素。 并使用另外七个作为文章缩略图。 NYTimes.com在其商品图片中使用了一个响应元素&＃xff0c;在srcand srcset属性中具有四个变体。

尽管排名最高的是Vox.com 。 其首页上的特色文章图片使用元素&＃xff0c;共有33种不同的图片变体。 文章页面上显示的同一图像使用了另外17种不同的变体&＃xff08;再次是元素&＃xff09;。 对于不同大小的缩略图&＃xff0c;还有更多变体&＃xff0c;那就是同一图像的50多个不同版本&＃xff01;

快速指定所有这些导数成为一项挑战&＃xff0c;而不是说a **中的正确痛苦。 无论您使用的是哪种环境&＃xff0c;无论是使用模板环境&＃xff08;例如Twig或Nunjucks&＃xff09;还是更传统的服务器渲染&＃xff0c;还是使用React或Vue等现代Javascript框架&＃xff0c;问题仍然存在&＃xff0c;并且本质上是相同的&＃xff1a;

如何以简洁&＃xff0c;可重复且理想情况下可重用的方式指定响应式网站所需的大量图像变体&＃xff1f;

因此&＃xff0c;响应式配置生成器&＃xff08;RCB&＃xff09;是我在这种情况下的经验和沮丧的结果。 我希望至少是答案的开始。

是给谁用的&＃xff1f;

RCB被设计为实用程序库&＃xff0c;供使用Javascript渲染的前端开发人员使用。 因此它几乎可以在任何环境下工作-Nunjucks&＃xff0c;把手&＃xff0c;Angular&＃xff0c;Vue&＃xff0c;React等。

就个人而言&＃xff0c;我已将其应用于使用Nunjucks进行服务器端渲染的项目&＃xff0c;以及用于基于Next.js和Gatsby的基于React的项目。

在Gatsby案例中&＃xff0c;React Configuration Builder帮助将通过GraphQL从无头CMS提取的数据与Cloudinary上托管的图像进行组合&＃xff0c;以使用React进行渲染。

它是如何工作的&＃xff1f;

顾名思义&＃xff0c;RCB是配置构建器。 用最简单的术语来说&＃xff0c;它需要一个规范和一些图像数据&＃xff0c;并将两者结合起来以构建一个配置对象&＃xff0c;几乎任何模板或组件环境都可以使用它。

对于具有React意识的阅读器&＃xff0c;可以将生成的配置对象直接作为props传递给组件。

这是一个简单的例子&＃xff1a;

这里发生了什么&＃xff1f;

在这个非常简单的示例中&＃xff0c;我们使用模板字符串导入并初始化TokenBuilder实例。 然后设置一个spec对象和一些图像数据&＃xff0c;并将它们传递给构建器进行处理。

然后&＃xff0c;构建器执行两项关键任务&＃xff1a;

1. 它扩展了 spec对象的简写格式&＃xff1b; 和&＃xff0c;
2. 它将spec对象解析为最终的url字符串或一组url /描述符对。

在上面的示例中&＃xff0c; srcset字段使用spec对象的简写形式-使用数组指定所需的宽度。 因此&＃xff0c;在扩展阶段&＃xff0c;构建器将其转换为三个单独的宽度/高度规范。

最后&＃xff0c;构建器解析扩展的规范&＃xff0c;将其与提供的图像数据和先前配置的模板字符串组合在一起&＃xff0c;以生成所需的三个url /描述符对。

整个结果将作为一个普通的旧Javascript对象&＃xff08;所有已解析的url为字符串值&＃xff09;返回&＃xff0c;可以使用您喜欢的任何模板或视图呈现方式发出。

就其本身而言&＃xff0c;这看起来可能并不多。 将这种方法应用于更复杂的结构时&＃xff0c;将带来真正的好处-IMO。

以这个沙箱为例。 &＃xff08;继续&＃xff0c;我将等待&＃xff01;&＃xff09;

在这里&＃xff0c;我们使用内置的CloudinaryBuilder来处理更复杂的spec对象&＃xff0c;以获取完整的元素。

请注意&＃xff0c;RCB将通过它无法识别的任何规范值。 因此&＃xff0c;任何媒体&＃xff0c;尺寸&＃xff0c;高度或标题属性都可以包含在规范中。
spec对象还可以包括顶级选项对象。此处指定的任何键/值对都将与各个规范合并。

这仅有助于减少样板数据和冗余数据&＃xff0c;即保持规格干燥。 图像对象的功能也类似于选项对象。 在解析最终输出之前&＃xff0c;此处提供的所有键/值对也将与各个规范合并。

最后&＃xff0c;值得注意的是&＃xff0c;RCB将处理&＃xff08;即扩展和解析&＃xff09;其标识为规范的任何属性值。 规范密钥是src &＃xff0c; srcset &＃xff0c; data-srcset &＃xff0c; placeholder &＃xff0c; lqip还是其他都lqip 。 如果构建者识别出该规范&＃xff0c;它将对其进行处理。 以这种方式&＃xff0c;RCB规范对象可用于生成几乎任何图像类型的配置&＃xff08;或道具&＃xff09;&＃xff0c;包括大多数延迟加载技术。

动机

响应式配置生成器背后的主要动机是提供一种简洁&＃xff0c;可组合和可重用的方法来生成响应式图像。 毕竟&＃xff0c;RCB使用并产生普通的旧Javascript对象&＃xff0c;因此可以轻松地将其合并到几乎任何Javascript环境&＃xff0c;管道或框架中。

但是&＃xff0c;更重要的是RCB促进了体系结构上的分离。

特定元素&＃xff08; 图片或图像 &＃xff09;所需的尺寸和变体的实际规范正确地是前端问题。 规范应与负责渲染图像标记的视图层或模板位于同一位置。

任何图像的来源&＃xff0c;无论是本地文件系统还是外部图像服务&＃xff0c;都是特定于环境的&＃xff0c;并且通常会因站点而异&＃xff0c;并且在本地开发&＃xff0c;暂存和生产中会有所不同。 因此&＃xff0c;域&＃xff0c;主机名&＃xff0c;端口&＃xff0c;API密钥和密钥等应在外部进行配置&＃xff08;根据环境变量&＃xff09;。 当然&＃xff0c;因为我们都遵循12要素原则&＃xff0c;对吗&＃xff1f;

最后&＃xff0c;要渲染的特定图像是内容管理或数据层的关注点。 该层应该很大程度上不考虑所使用的特定图像服务以及表示方面的问题。 当然也有例外&＃xff0c;但是在大多数情况下&＃xff0c;内容层中应仅保留少量图像数据。

足以唯一地标识图像&＃xff0c;请提供任何其他元数据&＃xff0c;例如替代文本&＃xff0c;标题&＃xff0c;标题和版权信息。 在某些情况下&＃xff0c;包括一些其他渲染提示&＃xff08;例如焦点&＃xff09;可能是适当的&＃xff0c;以帮助自动裁剪。

在极端情况下&＃xff0c;可能需要包括非常明确的渲染数据-作物大小&＃xff0c;缩放比例和边界框坐标。 例如&＃xff0c;高度艺术指导的英雄形象。 这仍然与响应式配置构建器的设计和意图完全一致。

到目前为止&＃xff0c;在使用RCB时&＃xff0c;我发现它有助于保持上述关注点的分离。 此外&＃xff0c;它还有助于防止出现很多我经常遇到的问题-领域知识会不断深入&＃xff0c;深入到组件层次结构中&＃xff0c;污染组件&＃xff0c;并使重用和维护几乎变得不可能。

灵感

使用Craft CMS作为我选择的网站&＃xff08;无论大小&＃xff09;的平台&＃xff0c;我都赞赏并有赖于三个出色的第三方插件。 ImageOptimize和Imager都简化了图像变体的创建。 重要的是&＃xff0c;从配置对象创建它们。

但最重要的是&＃xff0c;Marion Newlevant出色的Picture插件捕捉了响应图像规范格式的本质。 Marion的插件使我以前摸索过的方法变得更加具体&＃xff0c;并为后来的响应式配置构建器奠定了基础。

结论

如果您要构建使用响应式图像&＃xff08;尤其是元素&＃xff09;的网站&＃xff0c;则建议您尝试一下响应式配置生成器。 至少&＃xff0c;它应该有助于简化所有这些srcset分辨率的指定。 它甚至可以帮助简化组件组成树&＃xff0c;从而更清晰地分离图像处理代码。

下一步

在以后的文章中&＃xff0c;我将详细介绍不同的规范格式以及相关的扩展器功能。 以及演示如何使用RCB实施自定义生成器。

参考资料

• 实践中的响应式图像-单独列出
• 尺寸和大小— ericportis.com