JSON 对象传递给外部 JavaScript - 很酷的技术答案

【问题标题】：JSON Object passed to External JavaScript - Cool TechniqueJSON 对象传递给外部 JavaScript - 很酷的技术
【发布时间】：2011-09-02 09:08:04
【问题描述】：

我查看了FireBug Lite，发现他们使用了一种非常酷的技术将选项传递到外部脚本文件中。

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js">
{
    overrideConsole: false,
    startInNewWindow: true,
    startOpened: true,
    enableTrace: true
}
</script>

我想知道是否有人知道这种技术的名称以及在哪里可以找到有关它的更多信息或它的工作原理。看起来很酷。谢谢！

【问题讨论】：

这个和JSONP类似吗？ en.m.wikipedia.org/wiki/JSONP

标签： javascript json design-patterns external options

【解决方案1】：

这不是您想象的自动变量传递技术。

他们的代码所做的就是遍历所有script标签，直到找到加载代码的标签（通过将src属性与正则表达式（/(firebug-lite(?:-\w+)?(?:\.js|\.jgz))(?:#(.+))?$/;）进行比较。

如果找到标签，它会简单地获取script 标签的.innerHTML，并对其进行评估。

我猜这个（未命名的）技术在现实世界中是不相关的，因为我们没有保证找到哪个 script 标记引用我们的库的方法（尤其是所有脚本的共同点）在实时服务器上合并为一个脚本文件）。

~~此外，我怀疑这是如何跨浏览器的；因为它肯定不会通过spec，它指出：~~

话虽如此（并考虑过）：spec 声明浏览器不应同时解释两者。但是，这与此技术无关。浏览器不必对两者进行交互，因为脚本的内容是通过innerHTML 读入的（即使它确实读入了内容，也不会造成任何伤害）。只要浏览器符合规范，并加载 URI（所有浏览器都这样做），就没有问题！（除了不知道/保证您的库属于哪个script 标签）。

脚本可以在 SCRIPT 元素的内容或在一个外部文件。如果 src 属性未设置，用户代理必须解释元素的内容作为脚本。如果 src 有一个 URI 值，用户代理必须忽略元素的内容并通过检索脚本 URI。

（即，不要同时解释两者）。

【讨论】：

打开getfirebug.com/firebug-lite.js文件；并搜索 'var getScriptURL' 和 'var options=fileOptions.split(",");'
@Theo: fileOptions 用于“脚本 URL 选项”(getfirebug.com/firebuglite#ScriptURLOptions)。你想让我看getScriptUrl干什么？
@Matt 我不是说你，我是在补充你的答案。我的意思是'var url=getScriptURL(script);'，就是你解释的地方。
@Theo: Ahhhhhhhh :)。我不再那么迷茫了！
@Matthew：我没有想到将 HTML/XML 放在那里，但我想你可以。我已经在最新版本的 IE、Firefox 和 Chrome 中尝试过，如果设置了 src（即使 src 指向无效的 URI），则不会评估脚本内容。我仍然对将无效的 JS 放在那里有点警惕。它不仅“看起来不正确”，而且如果浏览器决定评估它，您将收到 JS 解析错误（考虑将 HTML/XML 用引号括起来/JS cmets /* */ 到使其成为有效的 JS（转义引号等放在一边）。

【解决方案2】：

进一步@Matt 的回答，并澄清我的评论：

var doc = Firebug.browser.document;
var script = doc.getElementsByTagName("script")[index];
var url = getScriptURL(script);
var isExternal = url && url != doc.location.href;

try
{
  if(isExternal)
  {
    Ajax.request({url:url, onSuccess:renderProcess, onFailure:onFailure})
  }
  else
  {
    var src = script.innerHTML;
    renderProcess(src)
  }
}
catch(e)
{
  onFailure()
}

【讨论】：