Javascript : Eval external script within defined namespace

Question

抱歉这篇文章，找不到解释这个的简短方法:(

语境

我目前正在为 Office 365 构建一个 WebPart，它非常像一个客户端应用程序，用户可以将其添加到他们的页面并通过 UI 进行配置。

WebPart 呈现一些内容，我希望用户能够提供可以在呈现过程之后运行的外部脚本。到目前为止，这很容易，我可以简单地在 WebPart 代码中执行以下操作:

// Render the WebPart
this.render();

// Load external script
this.loadExternalScript(this.props.externalScriptUrl);

问题是我希望外部脚本起到回调的作用，我的 WebPart 可以调用它来为其提供一些上下文。

解决方案 1

我找到的第一个解决方案是为用户提供有关如何使用基于文件名的特定命名空间和精确函数创建外部脚本的指导，以便我的 WebPart 可以:

渲染

加载外部脚本(将填充该特定命名空间)

检索外部脚本的命名空间(基于文件名)

使用命名空间调用外部脚本回调并提供上下文

效果很好，看起来像这样:

MyExternalScript.js

MyNamespace.ExternalScripts.MyExternalScript = {

    onPostRender: function(wpContext) {
        console.log(wpContext);
    }
}

网页部件

// Render the WebPart
this.render();

// Load external script
this.loadExternalScript(this.props.externalScriptUrl);

// Calls the script callback if available
var scriptNamespace = MyNamespace.ExternalScripts.MyExternalScript;
var scriptCallback = scriptNamespace  ? scriptNamespace.onPostRender : null;

if(scriptCallback) {
    scriptCallback(this.wpContext);
}

这工作正常，但根据文件名构建命名空间是要求用户做的一件非常粗略的事情，我很想找到比这个 hacky 解决方案更直接的东西。

解决方案 2

我想到的另一个解决方案是执行以下操作:

从外部脚本中删除时髦的命名空间并保留定义的函数签名

将脚本内容加载为字符串

让 WebPart 为该特定脚本动态创建唯一的命名空间名称

在脚本内容前面加上命名空间

eval() 整个过程

调用回调

这将看起来沿着这些路线:

MyExternalScript.js

onPostRender: function(wpContext) {
    console.log(wpContext);
}

网页部件

// Render the WebPart
this.render();

// Load external script content
$scriptContent = this.readExternalScript(this.props.externalScriptUrl);

// Append unique namespace
$scriptContent = "MyNamespace.ExternalScripts.MyExternalScript = {" + $scriptContent + "}";

// Eval everything within that namespace
eval($scriptContent);

// Calls the script callback if available
var scriptNamespace = MyNamespace.ExternalScripts.MyExternalScript;
var scriptCallback = scriptNamespace  ? scriptNamespace.onPostRender : null;

if(scriptCallback) {
    scriptCallback(this.wpContext);
}

我做了一些快速测试，看起来它正在工作，事实上 WebPart 动态生成命名空间比要求用户遵守复杂的命名空间要好得多，但是我不确定是否有比使用 eval( )。

在一天结束时，我所需要的只是找到一种方法来让我的 WebPart“意识到”它需要调用的回调。我还必须确保命名空间是唯一的 WebPart 和唯一的脚本，因为同一页面上可能有 4 个 WebPart，加载不同的脚本，因此我必须不惜一切代价避免命名空间冲突。

有人有更好的主意吗？

谢谢!

Answer 1

我不太明白这里的上下文，但是如何将 post render 函数作为回调传递？

var runExternalScript = Function('onPostRender', `
// your external script
  console.log('rendering...');
  console.log('rendering finished');
  if (onPostRender) onPostRender();
`)

function postCallback(){ console.log('finished!') }

runExternalScript(postCallback)