动态加载代码片段

see https://ld246.com/article/1736035967300/comment/1736126600837?r=wilsons#comments

如果是代码片段，可以动态加载 js，然后，用 vscode 编辑 js 文件就可以了

比如代码片段输入

          js
          
        
{
    // 动态加载js
    const src = '/snippets/query.js';
    const script = document.createElement('script');
    script.src = src;
    document.head.appendChild(script);
}

比如这里动态加载 query.js，然后，vscode 里直接编辑 query.js 文件就行了。

注意这里大括号不要删除，这是为了隔离命名空间，防止污染全局变量。

这里为什么没用 import()函数，因为 import 存在跨域问题，如果加载外网 js 可能有问题。

如果是 SQL 嵌入块中的代码，有点麻烦，可以先在待加载的 js 中定义一个函数，然后 SQL 嵌入块中动态加载这个 js 并执行函数，

比如 someQuery.js 中定义一个函数 function someQuery()

比如

someQuery.js

          js
          
        
function someQuery(item, protyle) {
    return query(`
        SELECT
            '-' as 序号__no_w80_0,
            content as 标题__ref_1,
            CASE
                WHEN ial LIKE '%{: custom-avs="%' THEN '已加入'
                ELSE ''
            END AS 是否加入数据__2,
            id as id__hide
        FROM
            blocks
        WHERE
            type = 'd'
            AND box = '${protyle.notebookId}'
        ORDER BY created desc
        LIMIT 3;
        `, item);
}

然后，sql 查询嵌入块中的代码

          js
          
        
//!js
return (async ()=>{
    // 动态加载自己的查询js文件
    await loadJs('/snippets/someQuery.js');
    return someQuery(item, protyle);

    // 动态加载js
    function loadJs(url) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = url;
            script.type = 'text/javascript';
            script.onload = () => {
                resolve();
            };
            script.onerror = () => {
                reject(new Error(`Failed to load script: ${url}`));
            };
            document.head.appendChild(script);
        });
    }
})();

然后，在 vscode 中编辑 someQuery.js 就可以了。

不过，最简单的方式还是在外部编辑器中编辑好后粘贴过来。

Wilson@思源

动态加载代码片段