Googleコンパイラが変数に空の配列を割り当てていませんか？

Question

私はGoogleコンパイラを使い始めたばかりで、いくつかの問題を抱えています。最初は私の前処理されたコードでは空の配列を後で作成される変数に設定していますが、コンパイルすると変数が完全に削除されるので、後で使用しようとすると未定義になります。

ここでは少し修正したコードを示します。私は以下のフラグを使用しています、コンパイラの設定について

/** 
* 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); 

：19行目はとてものでrowDivsは、ライン44上の未定義まで表示されて削除されてしまいます。私も高度な最適化の複雑化レベルを使用していないことに注意してください：

--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が決して使用できないと判断します。

修正するには、closureコンパイラに詳細を伝える必要があります。

（免責事項：私はjqueryを使用したことがないので、次の章ではオフトラックになるかもしれません。また、ノードやモジュールを使用したこともありません。 。しようとする）

ことの一つは、jqueryのための特別なフラグです：--process_jquery_primitives参照 https://github.com/google/closure-compiler/wiki/jQuery-Expansions

jquery-1.9 externは、グローバル変数として$を定義しますので、あなたの関数にそれを渡す必要はありません。

定義した関数をエクスポートするには、closure-compilerに指示する必要があります。 「保持したいシンボルをエクスポートする」を参照してください。 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); 

    } 
} 

は、その後、あなたのスタートアップコードで：

var $el = $(this); 

をthisの値は次のようになります。

goog.require('EqualHeights'); 

var eh = new EqualHeights(); 

// = Equalize columns on load and resize 
eh.equal_heights(); 

$(window).resize(function(){eh.equal_heights();}); 

を、私は、この行が何をしているかは不明ですEqualHeights各メソッド内のオブジェクト。あなたがthisがその機能のために望むものであることを確認するために、goog.bind機能を利用することができます（利用可能な場合）。