QA@IT

if ( typeof define === 'function' && define.amd )とはどのような意味でしょうか?

7946 PV

お世話になります。jsの勉強のため、フレキシブルなグリッドレイアウトを実現するJquery互換ライブラリmasonryのコードリーディングをしていたのですが、開始数秒で早速よくわからない場所が出てきました。とても基本的な事項かもしれませんがどうかお助けお願いします。

読み込んでいたソースはmasonry.pkgd.jsなのですが、こちらの48行目などに登場するif ( typeof define === 'function' && define.amd ) {....}とは一体なんなのでしょうか?自分なりに調べた所、jsのモジュール化に関する変数らしいのですが、なにぶん勉強中なもので理解できませんでした。

また35行目のpropName =...はなぜvar propName = ...としないのかも理解できません。

以下は該当箇所周辺のソースです。

/*!
 * getStyleProperty by kangax
 * http://perfectionkills.com/feature-testing-css-properties/
 */

/*jshint browser: true, strict: true, undef: true */
/*globals define: false */

( function( window ) {

'use strict';

var prefixes = 'Webkit Moz ms Ms O'.split(' ');
var docElemStyle = document.documentElement.style;

function getStyleProperty( propName ) {
  if ( !propName ) {
    return;
  }

  // test standard property first
  if ( typeof docElemStyle[ propName ] === 'string' ) {
    return propName;
  }

  // capitalize
  propName = propName.charAt(0).toUpperCase() + propName.slice(1);

  // test vendor specific properties
  var prefixed;
  for ( var i=0, len = prefixes.length; i < len; i++ ) {
    prefixed = prefixes[i] + propName;
    if ( typeof docElemStyle[ prefixed ] === 'string' ) {
      return prefixed;
    }
  }
}

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( function() {
    return getStyleProperty;
  });
} else {
  // browser global
  window.getStyleProperty = getStyleProperty;
}

})( window );

回答

35行目の方は引数だからですね。
グローバル変数ではないと思います。

AMDはjs読み込み効率化の仕組みで、それが使えるかを判断してます。
参考リンクは置いておきますが、わからなければそういうものかと思っておけばいいかと。

http://kumatchs.blogspot.jp/2012/10/nodeamd.html?m=1

編集 履歴 (0)
  • ちなみに35行目の方、以前のグローバル変数対策の時の使い方がきっかけで気になったのであれば、あれ(私の回答)がトリッキーなやり方でこちらが正しい使い方です。 -
  • 先日はわかりやすく教えていただいてありがとうございました!if ( typeof define === 'function' && define.amd )は、「defineが関数として定義済み、且つdefine.amd(遅延読み込み用メソッド)が定義済みである場合処理を実行する」という意味だと思いますが、この部分はもしmasonryだけで使う場合は使用しない部分ということになりますでしょうか? -
  • masonry自身がどうやってロードされたかを判断している部分だと思いますので、どのようにロードしたか次第ですね。そこも踏まえて(ロードも特殊なことはしていないという意味で)の「masonryだけで」であれば、使用されないと思います(elseに入ると思います)。 -
  • なるほど、ありがとうございます!またよろしくお願いします^^ -
ウォッチ

この質問への回答やコメントをメールでお知らせします。