建议:脚本模块的服务器到客户端数据共享

摘要

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/交互式路由器.使用交互的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-fetch”,短跑('wp.apiFetch.use(wp.apiPetch.createRootURLMiddleware(“%s”);',清理url(get_rest_url())),“之后”);

此代码段使用菲律宾比索菲律宾比索 WordPress主要使用的web脚本语言。WordPress需要PHP 5.6.20或更高版本以创建一个JavaScript代码字符串,其中嵌入了来自PHP的一些数据。这将包含在脚本紧跟在脚本的标记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中用于将Interactivity 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'})
浏览器控制台屏幕截图,显示“@wordpress/api-fetch”模块按需初始化并用于发出REST请求。

相关链接

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

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