javascript - 通过 JSON 传递 JavaScript 函数

Question

我有一个服务器端 Python 脚本，它返回一个包含客户端 JavaScript 参数的 JSON 字符串。

# Python
import simplejson as json

def server_script()
  params = {'formatting_function': 'foobarfun'}
  return json.dumps(params)

这个 foobarfun 应该引用一个 JavaScript 函数。这是我的主要客户端脚本

// JavaScript
function client_script() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, async=true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      options = JSON.parse(xhr.responseText);
      options.formatting_function();
    }
  };
  xhr.send(null);
}

function foobarfun() {
  //do_something_funny_here...
}

当然，options.formatting_function() 会提示“字符串不可调用”或类似的东西。

在使用 Chrome 的 Inspect Element 后，在 Resources 选项卡下，导航左侧边栏以获取 XHR > query，我发现 client_script 解释选项如下。 foobarfun 被视为一个字符串。

// JavaScript
options = {"formatting_function": "foobarfun"}

我希望 client_script 将 options 视为

// JavaScript
options = {"formatting function": foobarfun}

当然，在 Python 中执行以下操作会提示它对 foobarfun

一无所知

# Python
params = {'formatting_function': foobarfun}

问题:
我应该如何从服务器端准备我的 JSON 字符串，以便客户端脚本可以正确解释它？在这种情况下，我希望将 foobarfun 解释为函数对象，而不是字符串。

或者这可能是我应该在客户端做的事情？

Answer 1

你无法在 JSON 中做任何事情来获得你想要的结果，因为 JSON 没有函数的概念，它纯粹是一种数据符号。但是您可以在客户端执行一些操作。

如果您的 foobarfun 函数是一个全局函数(我不建议这样做，我们会谈到这一点)，那么您可以这样调用它:

window[options.formatting_function]();

之所以可行，是因为全局函数是 window 对象的属性，您可以通过使用点分符号和文字 (window.foobarfun) 或使用括号符号和字符串 (window["foobarfun"])。当然，在后一种情况下，字符串不必是字符串文字，它可以是来自属性的字符串——例如您的 options.formatting_function 属性。

但是我不推荐使用全局函数，window对象已经很拥挤了。相反，我将所有函数(或在某些边缘情况下尽可能多的函数)保留在一个主作用域函数中，因此我不会向全局命名空间添加任何内容:

(function() {
    function foobarfun() {
    }
})();

现在，如果你这样做，你就不能在 window 上访问 foobarfun，因为这样做的全部意义在于避免让它出现在 window 上。相反，您可以创建自己的对象并使其成为该对象的属性:

(function() {
    var myStuff = {};

    myStuff.foobarfun = foobarfun;
    function foobarfun() {
    }

    function client_script() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, async=true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          options = JSON.parse(xhr.responseText);
          myStuff[options.formatting_function]();   // <== using it
        }
      };
      xhr.send(null);
    }
})();

经常，而不是这样:

myStuff.foobarfun = foobarfun;
function foobarfun() {
}

你会看到人们写:

myStuff.foobarfun = function() {
};

我也不建议这样做，因为这样你的函数就是匿名的(myStuff 上引用该函数的属性有一个名称，但该函数没有)。给你的函数命名是一件好事，它 helps your tools help you (向您展示调用堆栈、错误消息等中的名称)。

您可能还会看到:

myStuff.foobarfun = function foobarfun() {
};

应该是有效的，它是正确的 JavaScript。但不幸的是，各种 JavaScript 实现都有各种错误(称为命名函数表达式)，尤其是 IE9 之前的 Internet Explorer，它将创建 two completely different functions在两个不同的时间。

综上所述，在客户端和服务器之间传递函数名称通常表明您想要退后一步，重新审视设计。数据应该驱动逻辑，但不是以这种字面意义上的方式。尽管如此，这样做肯定有有效的用例，您的情况很可能有一个。