阻止 Google Closure Compiler 重命名设置对象

Question

我试图让 Google Closure 编译器在作为设置或数据传递给函数时不重命名对象。通过查看 jQuery 中存在的注释，我认为这会起作用：

/** @param {Object.<string,*>} data */
window.hello = function(data) {
    alert(data.hello);
};
hello({ hello: "World" });

但是，它最终是这样的：

window.a = function(b) {
  alert(b.a)
};
hello({a:"World"});

The ajax function find 这里 有这个注释，它似乎可以工作。那么，为什么不会呢？如果数据是来自外部源或设置对象的返回值，我希望能够告诉编译器不要触及它，使用 this["escape"] 技巧是侵入性的我认为是这样的。

这是一个更好的示例

function ajax(success) {
      // do AJAX call
    $.ajax({ success: success });
}
ajax(function(data) {
    alert(data.Success);
});

输出：

$.b({c:function(a){alert(a.a)}});

success 已重命名为 c，Success（大写 S）已重命名为 a< /代码>。

我现在使用 jQuery 1.6 externs 文件< /a> 并获得以下输出：

$.ajax({success:function(a){alert(a.a)}});

它还会生成一条警告，指出属性 Success 未定义，正如我所期望的那样，但它无法将 Success 重命名为简单的a，那仍然会破坏我的代码。我查看了 ajax 的注释，发现了这个类型表达式 {Object.=}，我相应地注释了我的代码，然后重新编译。仍然没有工作...

Answer 1

由于您的重点似乎是源而不是输出，因此您关注的似乎是 DRY（不要重复自己）。这是另一种 DRY 解决方案。

您可以使用 --create_name_map_files 运行闭包编译器。这样做会发出一个名为 _props_map.out 的文件。您可以让发送 JSON 的服务器端调用（ASP.Net MVC 或其他任何形式）在发送 JSON 时使用这些映射，这样它们实际上会发送缩小的 JSON，利用闭包编译器执行的重命名。通过这种方式，您可以更改控制器和脚本上的变量或属性的名称，添加更多内容等，并且缩小从脚本一直返回到控制器输出。您的所有源代码（包括控制器）仍然是非缩小且易于阅读的。

Answer 2

我认为您真正想要做的是阻止它重命名从服务器上的 AJAX 控制器返回的对象上的属性名称，这显然会中断调用。

所以当你打电话时

$.ajax({
    data: { joe: 'hello' },
    success: function(r) {
        alert(r.Message);
    }
});

你希望它只留下消息，对吗？

如果是这样，那就按照您之前提到的方式完成，但它会很好地编译为输出中的 .Message 。上面的内容变为：

var data = {};
data['joe'] = 'hello';

$.ajax({
    data: data,
    /**
    @param Object.<string> r
    */
    success: function (r) {
        alert(r['Message']);
    }
});

现在缩小为：

$.ajax({data:{joe:"hello"},success:function(a){alert(a.Message)}});

通过使用 r['Message'] 而不是 r.Message，可以防止缩小器重命名属性。这称为导出方法，正如您在闭包编译器文档中注意到的那样，该方法优于外部方法。也就是说，如果你使用 externs 方法来执行此操作，你会让 Google 的一些人生气。他们甚至在标题上添加了一个名为“no”的 ID：
http://code.google.com/closure/compiler/docs /api-tutorial3.html#no

也就是说，你也可以使用 externs 方法来做到这一点，这就是它的奇怪之处：

externs.js

/** @constructor */
function Server() { };

/** @type {string} */
Server.prototype.Message;

test.js

$.ajax({
    data: { joe: 'hello' },
    /**
    @param {Server} r
    */
    success: function (r) {
        alert(r.Message);
    }
});

C:\java\closure>java -jar编译器.jar --externs externs.js --js jquery-1.6.js --js test.js --compilation_level ADVANCED_OPTIMIZATIONS --js_output_file output.js

结果如下：

$.ajax({data:{a:"hello"},success:function(a){alert(a.Message)}});

Answer 3

不幸的是，在各处执行 data["hello"] 是推荐的（也是官方的）防止变量重命名的闭包方法。

我完全同意你的观点，我一点也不喜欢这个。然而，所有其他解决方案都会给您带来次优的编译结果，或者可能会在模糊的情况下中断——如果您愿意接受次优的结果，那么为什么首先要使用闭包编译器呢？

然而，从服务器返回的数据实际上是您需要处理的全部内容，因为您应该能够安全地允许 Closure 重命名程序中的其他所有内容。随着时间的推移，我发现最好编写包装器来克隆从服务器返回的数据。换句话说：

var data1 = { hello:data["hello"] };
// Then use data1.hello anywhere else in your program

这样，任何未损坏的对象在从 Ajax 反序列化后只会短暂存在。然后它被克隆到一个可以通过 Closure 编译/优化的对象中。使用此克隆程序中的所有内容，您将获得 Closure 优化的全部好处。

我还发现，拥有这样一个“处理”函数来立即处理通过 Ajax 从服务器传入的所有内容非常有用——除了克隆对象之外，您还可以在其中放置后处理代码以及验证、纠错和安全检查等。在许多网络应用程序中，您已经拥有这样的功能来首先对返回的数据进行此类检查 - 您永远信任从服务器返回的数据，现在您也这样做吗？ ？

Answer 4

有点晚了，但我只是通过编写一对处理所有入站和出站 ajax 对象的网关函数来解决这个问题：

//This is a dict containing all of the attributes that we might see in remote
//responses that we use by name in code.  Due to the way closure works, this
//is how it has to be.
var closureToRemote = {
  status: 'status', payload: 'payload', bit1: 'bit1', ...
};
var closureToLocal = {};
for (var i in closureToRemote) {
  closureToLocal[closureToRemote[i]] = i;
}
function _closureTranslate(mapping, data) {
  //Creates a new version of data, which is recursively mapped to work with
  //closure.
  //mapping is one of closureToRemote or closureToLocal
  var ndata;
  if (data === null || data === undefined) {
    //Special handling for null since it is technically an object, and we
    //throw in undefined since they're related
    ndata = data;
  }
  else if ($.isArray(data)) {
    ndata = []
    for (var i = 0, m = data.length; i < m; i++) {
      ndata.push(_closureTranslate(mapping, data[i]));
    }
  }
  else if (typeof data === 'object') {
    ndata = {};
    for (var i in data) {
      ndata[mapping[i] || i] = _closureTranslate(mapping, data[i]);
    }
  }
  else {
    ndata = data;
  }
  return ndata;
}

function closureizeData(data) {
  return _closureTranslate(closureToLocal, data);
}
function declosureizeData(data) {
  return _closureTranslate(closureToRemote, data);
}

这里方便的一点是，closureToRemote 字典是平坦的 - 也就是说，即使你有要指定子属性的名称以便闭包编译器知道，您可以在同一级别上指定它们。这意味着响应格式实际上可以是一个相当复杂的层次结构，它只是您将通过名称直接访问的基本键，需要在某处进行硬编码。

每当我要进行 ajax 调用时，我都会通过 declosureizeData() 传递要发送的数据，这意味着我正在将数据从闭包的命名空间中取出。当我收到数据时，我做的第一件事是通过closureizeData()运行它，将名称放入闭包的命名空间中。

请注意，映射字典只需位于我们代码中的一个位置，如果您有结构良好的 ajax 代码，并且始终进出同一代码路径，那么集成它就是“一次性完成” “忘记它”类型的活动。

Answer 5

您可以尝试将其定义为记录类型，

/**
  @param {{hello: string}} data
*/

这告诉它数据具有字符串类型的属性 hello。

Answer 6

显然，这里不应该责怪注释，只需向设置对象引入一些未使用的属性就会导致编译器重命名内容。

我想知道这些来自哪里以及迄今为止我唯一合乎逻辑的解释（已确认这里），是编译器保留一个它不会重命名的事物的全局名称表。只要有一个具有名称的 extern，就会导致该名称的任何属性都被保留。

/** @type {Object.<string,*>} */
var t = window["t"] = {
  transform: function(m, e) {
    e.transform = m;
  },
  skew: function(m, e) {
    e.skew = m;
  }
}

/** 
 * @constructor
 */
function b() {
  this.transform = [];
  this.elementThing = document.createElement("DIV");
}

t.transform(new b().transform, new b().elementThing);

结果如下：

function c() {
    this.transform = [];
    this.a = document.createElement("DIV")
}(window.t = {
    transform: function (a, b) {
        b.transform = a
    },
    b: function (a, b) {
        b.b = a
    }
}).transform((new c).transform, (new c).a);

注意 transform 没有被重命名，但 elementThing 却被重命名，即使我尝试注释此类型，我也无法让它重命名 相应地进行变换。

但是如果我添加以下 extern source function a() {}; a.prototype.elementThing = function() {}; 它不会重命名 elementThing 尽管查看代码，我可以清楚地看出构造函数返回的类型与extern a，但不知何故，编译器就是这样做的。我想这只是闭包编译器的限制，我认为这真是太遗憾了。