首页 > 解决方案 > 如何使用闭包编译器从另一个压缩文件中获取变量

问题描述

您好,我想通过 Google 集成 Closure 编译器以使用 ADVANCED_OPTIMIZATIONS 模式压缩我的文件,但我有 2 个压缩文件,我需要在两者之间共享变量。

我阅读了这份文档https://developers.google.com/closure/compiler/docs/api-tutorial3

问题

我收到了这个错误:

ReferenceError:getValue 未定义

所以我试图用 window['getValue'] 替换 getValue 但它不起作用。

基本代码

第一个 JS 文件:

var nb0 = 0;
var nb1 = 1;
var nb2 = 2;
var nb3 = 3;

function getValue( nb ) {
    return nb;
}

window['nb0']           = nb0;
window['nb1']           = nb1;
window['nb2']           = nb2;
window['nb3']           = nb3;
window['getValue']      = getValue;

第二个 JS 文件:

document.addEventListener("DOMContentLoaded", function() { 

    var val = getValue;

    document.querySelector( ".button" ).addEventListener( "click", upButton );

    function upButton() {

        val++;
        document.querySelector( ".show" ).innerText = val;

    }

} );

标签: javascriptgoogle-closure-compiler

解决方案


此问题的解决方案在您链接的文档中的从编译代码调出到外部代码的子标题下说明(如果简短的话) :外部代码。

我想您的困惑来自“第三方”和“外部”这两个词。在本文档的上下文中,您可以假设“第三方”和“外部”既指由他人编写的代码,也指来自单独编译的任何文件(由您或他人)的任何代码。

然后解决方案是预先/** @export */添加到您希望不重命名的变量,或者为您的源定义一个externs文件。

备选 1

如果您希望以这种方式继续使用window(它可能很难看,恕我直言,有时这是合适的),您应该更改

var val = getValue;

var val = window['getValue'];

例如:

document.addEventListener("DOMContentLoaded", function() { 

    var val = window['getValue'];

    document.querySelector( ".button" ).addEventListener( "click", upButton );

    function upButton() {

        val++;
        document.querySelector( ".show" ).innerText = val;

    }

} );

编译为

document.addEventListener("DOMContentLoaded", function() {
  var a = window.getValue;
  document.querySelector(".button").addEventListener("click", function() {
    a++;
    document.querySelector(".show").innerText = a;
  });
});

备选 2

使用ES6 模块。闭包编译器通过标志支持这些module_resolution

一般阅读:用模块封装代码

备选 3

使用Google Closure 库的模块(goog.module、goog.require 和(已弃用)goog.provide)。


推荐阅读