背景:插件开发,使用后端提供的 API 接口。
问题描述
我现在正在迁移之前开发的插件,然后发现了插件中之前没发现的一个 bug。
我在代码中需要按照顺序 DOM 的顺序获取一个标题块下的子块。
经过探索,我发现虽然一个标题块不是容器块,但是标题下的直接子块的 parent_id
是等于这个标题块的 id
的,所以用来查询的代码很自然就写成这样的:
async function queryChildren(parentId: string): Promise<Array<Block>> {
let sql = `select * from blocks where parent_id = '${parentId}'`;
let result: Array<Block> = await serverApi.sql(sql);
return result;
}
也就是根据 parent_id
直接执行一个 SQL 语句。我之前一致以为这个语句可以保证 blocks 按照 DOM 中的顺序排列,但是今天才他偶尔会不按照我期望的顺序来。(这个偶尔就很神奇,不稳定触发)
实验
以下面一个实验为例,现在我需要按照顺序获取 # 测试
大标题下的子块。
然而实际查询到的顺序是不一样的。可以看到
- 查询到的 0:
测试一
实际是排在第二位的子块 - 查询到的 1:
测试二
实际是排在第三位的子块 - 查询到的 2:
一 二
实际是排在第一位的子块
总结
- 我需要按照顺序 DOM 的顺序获取一个标题块下的直接子块
- 前端的 DOM 标题块没有层级关系,所以我只能使用后端 API
- 但是后端 SQL 查询无法保证维持和 DOM 一致的顺序
所以要怎么解决这个问题呢?
有问题的源代码如下:
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于