建议:脚本模块的服务器到客户端数据共享
摘要
一个新的 滤波器 过滤器 过滤器是两种挂钩之一 https://codex.wordpress.org/Plugin_API/挂钩 。它们为函数修改其他函数的数据提供了一种方法。 它们是Actions的对应物。 与Actions不同,过滤器是以孤立的方式工作的,不应该有副作用,例如影响全局变量和输出。 为排队或依存关系图中的每个脚本模块运行。 此过滤器允许将任意数据与给定的脚本模块关联并添加到呈现的页面。 脚本模块数据在页面中嵌入为 JSON格式 JSON格式 JSON或JavaScript对象表示法是一种用于结构化数据的最小可读格式。 它主要用于在服务器和web应用程序之间传输数据,作为XML的替代。 在一个 <script type=“application/json”> 标签 标签 Subversion中的目录。 WordPress使用标签来存储版本(3.6、3.6.1等)的单个快照,这是版本控制系统中标签的常见约定。 (不要与帖子标签混淆。) . 脚本模块负责读取数据并执行自己的初始化。
脚本还是模块?
. The
关于模块的注释
即使从未直接使用依赖项,脚本及其依赖项也会在解析页面时执行。 脚本“导出”附加到 窗口 对象,例如。 wp-api-蚀刻 可用作 window.wp.api获取 . 模块将在页面解析完成后执行。 模块依赖项可以按需加载。 模块具有真正的封装,使用 进口 和 出口 分享价值观。
有关脚本和模块的详细信息…
这个问题
$脚本->add_inline_script( “wp-api-fetch”, 冲刺( 'wp.apiFetch.use(wp.apiFetch.createRootURLMiddleware(“%s”));', 清理url(get_rest_url()) ), “之后” );
<script src=“path/to/wp-api-fetch.js”></script> <脚本> //JavaScript代码打印在此处: wp.apiFetch.use(wp.apiFetch.createRootURLMiddleware(“…/index.php?rest_route=/”)); //其他调用`wp_add_inline_script`后可能会有更多代码… </script>
<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>
提案
应根据需要获取和初始化模块。 模块在执行时应该负责自己的初始化。 变量的作用域应该是模块,而不是污染全局命名空间。 数据应引入最小的开销。
通过筛选器添加服务器数据
添加筛选器( ' scriptmoduledata_@wordpress /api取', 函数($data){ $data['rootURL']=清理url(get_rest_url()) 返回$data; } );
使用惰性气体 脚本
标记以在客户端上公开数据
<script id=“ scriptmoduledata_@wordpress /api-fetch“type=”application/json“> {“theData”:“可以共享JSON序列化数据”} </script>
模块从脚本标记读取数据
if(文档类型!==“未定义”){ const serializedData=文档.getElementById( ' scriptmoduledata_@wordpress /api提取' )?. text内容; if(序列化数据){ 让config=null; 尝试{ config=JSON.parse(序列化数据); }捕捉{ //解析序列化数据时出现问题 } 执行初始化(配置); } } 函数performInitialization(config){ if(配置?.rootURL){ registerMiddleware(createRootURLMiddleware(config.rootURL)); } //等。 }
试试看!
WordPress开发PR 6433 应用筛选器并添加必要的筛选器以将数据公开给 @wordpress/api-回迁 。本职位中的提案包含在本PR中。
古腾堡PR 60952 生成并注册 @wordpress/api-回迁 模块。 此PR有助于测试,但超出了本文的范围。
const{apiFetch}=等待导入('@wordpress/api fetch'); 等待apiFetch({path:'/wp/v2/block-types'})