摘要

WordPress 6.5中引入了脚本模块.wp_add_inline脚本通常用于初始化或使数据可用于脚本。关于脚本模块的反馈和探索建议这将是脚本模块的一个有用功能，但目前还不存在。这篇文章将详细描述这个问题并提出解决方案。建议的解决方案包括三个要点：

• 一个新的滤波器过滤器 过滤器是两种挂钩之一https://codex.wordpress.org/Plugin_API/挂钩。它们为函数修改其他函数的数据提供了一种方法。它们是Actions的对应物。与Actions不同，过滤器是以孤立的方式工作的，不应该有副作用，例如影响全局变量和输出。为排队或依存关系图中的每个脚本模块运行。此过滤器允许将任意数据与给定的脚本模块关联并添加到呈现的页面。
• 脚本模块数据在页面中嵌入为JSON格式JSON格式 JSON或JavaScript Object Notation是结构化数据的最小可读格式。它主要用于在服务器和web应用程序之间传输数据，作为XML的替代方案。在一个<script type=“application/json”> 标签标签 Subversion中的目录。WordPress使用标签来存储版本（3.6、3.6.1等）的单个快照，这是版本控制系统中标签的常见约定。（不要与帖子标签混淆。）.
• 脚本模块负责读取数据并执行自己的初始化。

这是一个提议。这篇文章中的所有内容都是开放的，可以进行反馈和讨论。请分享你的想法和想法。

阅读更多：建议：脚本模块的服务器到客户端数据共享

反馈期将于2024-05-24结束（5月24日，星期五）。请在此之前提供任何反馈。

这篇文章将用“脚本”来指代WP脚本，用“模块”来指WP脚本模块.

脚本还是模块？

大多数JavaScript脚本JavaScript脚本 JavaScript或JS是一种面向对象的计算机编程语言，常用于在web浏览器中创建交互效果。WordPress广泛使用JS以获得更好的用户体验。当PHP在服务器上执行时，JS在用户的浏览器中执行。https://www.javascript.com/.for WordPress可能正在使用脚本 除非它是作为模块专门编译的。现代JavaScript通常使用从“@wordpress/api-fetch”导入apiFetch，这是模块语法。直到最近WordPress构建工具总是删除模块语法并编译脚本。

仅最近的WordPress 6.5版引入了对模块的支持.WordPress核心核心 核心是运行WordPress所需的一组软件。核心开发团队构建WordPress。此时正好包含两个模块来公开功能：@wordpress/互动和@wordpress/交互式路由器.使用交互的JavaScript美国石油学会美国石油学会 API或应用程序编程接口是一种软件中介，允许程序以有限的、明确定义的方式相互交互和共享数据。可能是一个模块.

这篇文章将讨论一个常见的脚本依赖关系，wp-api-蚀刻. The@wordpress/api-回迁 模块本文中提到的是假设；目前还不存在。

关于模块的注释

在本文的上下文中，了解一些关于脚本和模块的知识是很重要的。几个关键区别：

• 即使从未直接使用依赖项，脚本及其依赖项也会在解析页面时执行。
• 脚本“导出”附加到窗口对象，例如。wp-api-蚀刻可用作window.wp.api获取.
• 模块将在页面解析完成后执行。
• 模块依赖项可以按需加载。
• 模块具有真正的封装，使用进口和出口分享价值观。

有关脚本和模块的更多信息…

已排队或已排队脚本的依赖项的脚本将作为脚本标记添加到页面中，如<script src=“path/to/script.js”>。浏览器将在继续分析页面之前获取并执行这些脚本。有如下属性异步和推迟这可能会改变浏览器执行脚本的方式。

排队的模块将在页面上显示为类型为的脚本标记模块，比如<script src=“path/to/module.js”type=“module”>.模块的处理是推迟，它们将在整个文档被解析后执行。这个异步属性将导致模块在解析文档时并行执行。WordPress脚本模块不使用异步此时。

排队模块的依赖关系图中的模块将出现在一个导入映射。这是名称到URL的映射，以便浏览器在看到导入时知道要获取的模块。它将语句中使用的模块关联起来，如导入“a-module”；用一个统一资源定位地址统一资源定位地址 互联网上网站或网页的特定网址，例如网站的URL www.wordpress.org {“imports”：{“a-module”：“path/to/a-module.js”}}.

这个问题

脚本通常需要一些初始化或其他数据才能在WordPress中正常工作。这个wp-api-蚀刻脚本就是一个很好的例子，它需要大量的配置。例如，Core使用以下内联脚本进行初始化wp-api-蚀刻这样它可以将请求发送到适当的位置：

$脚本->add_inline_script('wp-api获取'，短跑('wp.apiFetch.use（wp.apiPetch.createRootURLMiddleware（“%s”）；'，清理url（get_rest_url（））),“之后”);

此代码段使用PHP程序PHP程序 WordPress主要使用的web脚本语言。WordPress需要PHP 5.6.20或更高版本使用嵌入的PHP数据创建JavaScript代码字符串。这将包含在脚本紧跟在脚本的标记wp-api-蚀刻，大致如下：

<script src=“path/to/wp-api-fetch.js”></script><脚本>//JavaScript代码打印在此处：wp.apiFetch.use（wp.apiPetch.createRootURLMidleware（“…/index.php？rest_route=/”））；//其他调用`wp_add_inline_script`后可能会有更多代码…</script>

注意，JavaScript依赖于wp-api-蚀刻，它迫切地呼叫wp.apiFetch.use（…）相同的方法和假设@wordpress/api获取模块将如下所示：

<script type=“importmap”>{“导入”：{“@wordpress/api-fetch”：“…url/to/api-fetch-module.js”}}</script><script type=“模块”>从“@wordpress/api-fetch”导入apiFetch；wp.apiFetch.use（wp.apiPetch.createRootURLMidleware（“…/index.php？rest_route=/”））；</script>

在这种方法中，初始化模块将获取并执行@wordpress/api-回迁模块只是为了初始化它！这消除了模块的一个重要优势，即按需加载的能力。🤔 看起来这种命令式初始化不太适合模块。让我们看看是否有更好的解决方案…

提案

以下是初始实现产生的一些要求：

• 应根据需要获取和初始化模块。
• 模块在执行时应该负责自己的初始化。
• 变量的作用域应该是模块，而不是污染全局命名空间。
• 数据应引入最小的开销。

通过筛选器添加服务器数据

过滤器提供了一种收集模块所需数据的好方法。这个WP_脚本_模块类引入了一个新的过滤器，该过滤器针对排队或存在于依赖关系图中的每个模块运行。为模块添加或修改数据如下所示：

添加筛选器('scriptmoduledata_@wordpress/api取'，函数（$data）{$data['rootURL']=清理url（get_rest_url（））返回$data；});

可以添加多个筛选器来添加或修改向脚本公开的数据，如果没有添加任何数据，则不会在客户端的页面上序列化任何内容。值得一提的是，没有用PHP编写JavaScript代码，这是一个很好的改进wp_add_inline脚本这需要添加有效的JavaScript。

这种方法的一个缺点是，传递的所有数据都必须通过JSON。默认情况下不支持没有有效JSON表示的数据。

使用惰性气体脚本标记以在客户端上公开数据

数据被嵌入到HTML格式HTML格式 超文本标记语言。主要用于在web浏览器中输出内容的语义脚本语言。在一个脚本标签：

<script id=“scriptmoduledata_@wordpress/api-fetch“type=”application/json“>{“theData”：“可以共享JSON序列化数据”}</script>

这个脚本标签实际上被浏览器忽略，因为它类型属性。此方法是如何在HTML中嵌入数据的MDN示例而且它是已在WordPress中用于将交互API数据传递给客户端.

因为模块总是被延迟，所以在页面底部打印这些脚本标记应该是安全的。它们对页面加载的影响应该是有限的，因为浏览器不会解析或执行内容。

模块从脚本标记读取数据

这个脚本标记本身不做任何事情。模块负责获取数据，并在执行以下操作时执行初始化：

if（文档类型！==“未定义”）{const serializedData=文档.getElementById('scriptmoduledata_@wordpress/api提取')?.text内容；if（序列化数据）{让config=null；尝试{config=JSON.parse（序列化数据）；}捕捉{//解析序列化数据时出现问题}执行初始化（配置）；}}函数performInitialization（config）{if（配置？.rootURL）{注册表中间件（createRootURLMiddleware（config.rootURL））；}//等。}

此方法用于@wordpress/互动检索客户端上的存储数据。

试试看！

我在以下PR中创建了该提案的原型：

• WordPress开发PR 6433应用筛选器并添加必要的筛选器以将数据公开到@wordpress/api-回迁。本职位中的提案包含在本PR中。

• 古腾堡PR 60952生成并注册@wordpress/api-回迁模块。此PR有助于测试，但超出了本文的范围。

在WordPress Playground试试。如果在检查器控制台中运行以下JavaScript，请确保选择JavaScript上下文，如下所示wp（范围：abc123）-你会看到@wordpress/api-回迁模块在导入时记录一些初始化，然后按预期工作：

const{apiFetch}=等待导入（'@wordpress/api-fetch'）；等待apiFetch（{path:'/wp/v2/block-types'}）

相关链接

• 为脚本模块添加更多功能的Core Trac票证。
• 公关部在WordPress（概念证明）中添加了提议的更改。
• 请购单新增@wordpress/api-回迁Gutenberg中的模块和建议的初始化策略（概念证明）。

道具@你知道riad,@卡布拉沃伯纳尔,@前列腺增生、和@安卓类供审查。

#javascript脚本,#脚本加载程序