0

所以我对使用谷歌编译器很陌生，并且遇到了一些问题。第一个是在我的预处理代码中，我将一个空数组设置为稍后将填充的变量，但是在编译它时会完全删除该变量，以便以后尝试使用它时它变得未定义。

这是我稍微修改的代码。第 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

我可能遗漏了一些明显的东西，但只是想走上正轨。谢谢。

4

1 回答 1

0

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

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

（免责声明：我从未使用过 jquery，所以我可能会在接下来的内容中偏离轨道。我也从未使用过节点或模块，并且对于我不熟悉的那些有特殊的编写方法。）

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

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

您可能需要告诉闭包编译器导出您定义的函数。请参阅https://developers.google.com/closure/compiler/docs/api-tutorial3中的“导出要保留的符号”

如果您愿意使用“面向对象的风格”，这里有一些想法。可能有一种方法可以在不更改为面向对象样式的情况下编写代码，但我对这种样式还不够熟悉，无法为您提供帮助。

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

看起来您将此代码设计为一个自执行函数，只要您说goog.require('EqualHeights'). 但是您实际上并没有为 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是您希望该功能的功能。

于 2016-12-28T20:54:16.680 回答