jquery - 从 String 加载 jQuery 插件

Question

我想做一些有点黑客的事情。

假设我在这个变量中有 jQuery 插件代码:

var script = '!function( some jQuery plugin )(window.jQuery)';

我想加载它。我尝试了 eval(script) 和 jQuery.globalEval(script)。这是行不通的。如果我在文件中包含此插件代码，我可以执行 jQuery.getScript(url,callback)。但我只有字符串中的代码。我考虑过在与模拟 URL 键关联的缓存中加载此字符串，但我不知道是否可行。

有什么建议吗？ ...除了“不要这样做”。我知道“评估是邪恶的”这句口头禅，但请将此视为一个学术问题。

脚本变量中代码的主要特征:

序言:

!function(a){"use strict";

结语:

gister(b)})}}(window.jQuery||window.Zepto);

Answer 1

有几种方法可以做到这一点。可以使用eval，但它并不是真正理想的。使用字符串构造 Function() 也是如此。这里有两种有用的方法。

<小时/>

反直觉的方法

这个非常整洁。它的理念是您可以从 url 执行代码(基本上与书签的工作方式相同)。假设您有这个变量，其中包含您的扩展程序:

var scriptData = "$.fn.jQueryExtension = function(){ this.each(function(){/*code*/}); };";

并且您希望将该字符串作为代码运行。一条内衬:

window.location = "javascript:"+scriptData;

<小时/>

使用.html()将其放置在页面中

您可以使用 jQuery 的 .html() 将其放入页面中。它将执行脚本代码。这是一种非常常见的方法，用于放置带有从 ajax 调用返回的脚本的部分 html 页面(如果代码旁边确实有一些 html，它也很有用)。假设这是在您的 scriptData 变量中。

var scriptData = "$.fn.jQueryExtension = function(){ this.each(function(){/*code*/}); };";

将其包装在脚本元素中。

var scriptHtml = "<script>"+scriptData+"</script>";

并将其作为 html 放置在 dom 中。

var scriptDiv = $("<div>").html(scriptHtml);
$("body").append(scriptDiv);

测试其是否有效的一个非常简单的方法是从此页面中的浏览器控制台执行此代码

var scriptData = "alert('test');";
var scriptHtml = "<script>"+scriptData+"</script>";
var scriptDiv = $("<div>").html(scriptHtml);
$("body").append(scriptDiv);