Google编译器不为变量分配空数组

Question

因此，我对使用Google编译器的新手很新，并且遇到了一些问题。首先是，在我的预处理代码中，我将一个空数组设置为一个变量，该变量将在以后填充，但是在编译时，它将完全删除变量，以便在以后尝试使用时在尝试时变得不确定。

这是我经过略微修改的代码。第19行最终被删除，因此Rowdivs在第44行中显示为未定义：

/**
 * Equal Heights
 *
 * @see https://css-tricks.com/equal-height-blocks-in-rows/
 */
goog.provide('EqualHeights');
(function($) {
    // =  Equalize columns on load and resize
    equal_heights();
    $(window).resize(function() {
        equal_heights();
    })
    var currentTallest = 0;
    var currentRowStart = 0;
    var rowDivs = new Array();
    function setConformingHeight(el, newHeight) {
        // set the height to something new, but remember the original height in case things change
        el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
        el.height(newHeight);
    }
    function getOriginalHeight(el) {
        // if the height has changed, send the originalHeight
        return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
    }
    function equal_heights() {
        // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
        $('[data-equalizer-watch]').each(function() {
            // "caching"
            var $el = $(this);
            var topPosition = $el.position().top;
            if (currentRowStart != topPosition) {
                // we just came to a new row. Set all the heights on the completed row
                for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
                // set the variables for the new row 
                rowDivs.length = 0; 
                // empty the array 
                currentRowStart = topPosition; 
                currentTallest = getOriginalHeight($el);
                rowDivs.push($el);
            } 
            else { 
                // another div on the current row. Add it to the list and check if it's taller
                rowDivs.push($el);
                currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);
            }
        }); 
        // do the last row
        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
            setConformingHeight(rowDivs[currentDiv], currentTallest);
        }
    } 
})(jQuery);

对于编译器设置，我使用以下标志。请注意，我什至不使用高级优化并发症级别：

--closure_entry_point main.js
--externs node_modules/google-closure-compiler/contrib/externs/jquery-1.9.js
--language_in ECMASCRIPTS5
--warning_level: VERBOSE

我可能缺少明显的东西，但只想走正确的轨道。谢谢。

Answer 1

具有简单编译模式的局部变量被最小化，如果不使用，则可能会删除。可能发生的可能是：根据您指定的入口点，闭合编译器确定rowDivs永远无法使用。

要修复您需要告诉关闭编译器更多信息。

（免责声明：我从未使用过jQuery，所以我可能会偏离以下内容。我也从未使用过节点或模块，并且有一些特殊的方法可以为那些我不熟悉的人写作。）

要尝试的一件事是jQuery的特殊标志：--process_jquery_primitives请参阅https://github.com/google/clususy-compiler/wiki/jquery-expansions

jquery-1.9 extern将 $定义为全局变量，因此您无需将其传递给您的函数。

您可能需要告诉闭合杂货商以导出您定义的功能。请参阅"导出要保留的符号"https://developers.google.com/cluse/compiler/docs/api-tutorial3

如果您愿意使用"面向对象的样式"，请有一些想法。可能有一种编写代码而不更改为面向对象样式的方法，但我对这种样式不太熟悉以帮助您。

（我不知道如何在程序启动时如何激活jQuery，但我认为这在您的启动代码中发生。）

看起来您将此代码设计为一个自我执行功能，每当您说goog.require('EqualHeights')时就会发生。但是您实际上并没有为平等的名称空间定义任何内容。也许是这样：

goog.provide('EqualHeights');
/**
* @constructor
*/
EqualHeights = function() {
    this.currentTallest = 0;
    this.currentRowStart = 0;
    this.rowDivs = new Array();
};
/**
* @param {!Element} el
* @param {number} newHeight
*/
EqualHeights.prototype.setConformingHeight = function(el, newHeight) {
    // set the height to something new, but remember the original height in case things change
    el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
    el.height(newHeight);
};
/**
* @param {!Element} el
* @return {number}
*/
EqualHeights.prototype.getOriginalHeight = function(el) {
    // if the height has changed, send the originalHeight
    return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}
/**
* @return {undefined}
*/
EqualHeights.prototype.equal_heights = function() {
    // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
    $('[data-equalizer-watch]').each(function() {
        // "caching"
        var $el = $(this);
        var topPosition = $el.position().top;
        if (this.currentRowStart != topPosition) {
            // we just came to a new row. Set all the heights on the completed row
            for(currentDiv = 0 ; currentDiv < this.rowDivs.length ; currentDiv++) 
              setConformingHeight(this.rowDivs[currentDiv], this.currentTallest);
            // set the variables for the new row 
            this.rowDivs.length = 0; 
            // empty the array 
            this.currentRowStart = topPosition; 
            this.currentTallest = getOriginalHeight($el);
            this.rowDivs.push($el);
        } 
        else { 
            // another div on the current row. Add it to the list and check if it's taller
            this.rowDivs.push($el);
            this.currentTallest = (this.currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (this.currentTallest);
        }
    }); 
    // do the last row
    for (currentDiv = 0 ; currentDiv < this.rowDivs.length ; currentDiv++) { 
        setConformingHeight(this.rowDivs[currentDiv], this.currentTallest);
    }
} 

然后在您的启动代码中具有以下方式：

goog.require('EqualHeights');
var eh = new EqualHeights();
// =  Equalize columns on load and resize
eh.equal_heights();
$(window).resize(function(){eh.equal_heights();});

我不清楚这条线在做什么：

var $el = $(this);

this的值应为每个方法内的EqualHeights对象。您可以使用goog.bind函数（如果适合您的话）来确保this是您想要的功能。