如何将一个jsfiddle作为资源引用到另一个jsfiddle中调用其函数

可行性说明 #

可以实现跨fiddle调用定义的函数，不能直接使用普通编辑页的fiddle地址，需要按照以下规则处理源fiddle和导入路径：

操作步骤 #

1. 处理源工具fiddle #

• 完成工具函数编写后点击顶部「Run」→「Save」生成固定版本的fiddle，记录fiddle ID和版本号（fiddle地址格式为jsfiddle.net/[用户ID]/[fiddle ID]/[版本号]/）
• 所有需要对外暴露的工具函数必须挂载到全局window对象，避免被JSFiddle默认的沙箱作用域包裹导致外部无法访问，示例修正代码如下：

window.divide = function(a, b, callback) {
    var quot = Math.floor(a / b),
        rem = a % b;
    callback(quot, rem);
}

如果有多个工具函数可以统一挂载到一个自定义全局对象避免污染全局命名空间：

window.DataUtils = {
  divide: divide,
  // 其他工具函数
}

2. 目标fiddle导入配置 #

有两种导入方式可选：

方式1：资源栏直接添加

在目标fiddle左侧的「Resources」输入框中填写以下格式的脚本地址，点击加号完成添加即可：
https://fiddle.jshell.net/[源fiddle ID]/[源fiddle版本号]/show.js

方式2：动态加载脚本

如果需要控制加载时机，可以在目标fiddle的JS代码中用脚本加载方法引入：

// 示例：动态加载源fiddle脚本
const script = document.createElement('script');
script.src = 'https://fiddle.jshell.net/[源fiddle ID]/[源fiddle版本号]/show.js';
script.onload = function() {
  // 加载完成后再调用工具函数
  divide(10, 3, (quot, rem) => {
    console.log(`计算结果：商为${quot}，余数为${rem}`);
  })
}
document.body.appendChild(script);

注意事项 #

• 源fiddle的工具代码不要依赖当前fiddle独有的DOM、样式或其他资源，否则导入后运行会报错
• 调用工具函数的逻辑必须放在脚本加载完成之后执行，避免出现函数未定义的报错

内容的提问来源于stack exchange，提问作者wahab memon