2014年10月5日日曜日

即時関数を使ってグローバル汚染を最小にする


関数単位でスコープが決まる性質を利用する。

  • 即時関数を使ってローカルスコープ化することにより、グローバル汚染を防ぐ。
  • strictモードでは関数内のthisがundefinedになるため、callメソッドを使用する。
  • 関数前の「;」はファイル連結時に不具合が出ないようにするための予防策。
<!DOCTYPE html>
<html>
<head lang="ja">
  <meta charset="UTF-8">
  <title>即時関数によるスコープ閉じ込め</title>
</head>
<body>
  <ul>
    <li id="first">1行目</li>
    <li id="second">2行目</li>
    <li id="third">3行目</li>
  <ul>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
  <script src="./js/app.js"></script>
</body>
</html>
;(function ($) {
  'use strict';

  alert('outside ready method: this = ' + this);
  alert('outside ready method: $ = ' + $);
  alert('outside ready method: _.VERSION = ' + _.VERSION);

  $(function () {
    alert('inside ready method: this = ' + this);
    alert('inside ready method: $ = ' + $);
    alert('inside ready method: _.VERSION = ' + _.VERSION);
    $('#third').css('color', 'red');
  });

  alert('this = ' + this);
  alert('$ = ' + $);
  alert(_.VERSION);

}).call(this, jQuery);
//}.bind(this)(jQuery));

[参考URL]
知ってて当然?初級者のためのJavaScriptで使う即時関数(function(){...})()の全て - 三等兵
callで関数を即時実行すると何が嬉しいのか(と、ちょっとおまけ) - ただぱそこんしてるだけ
便利なjavascriptテクニック集 - Thujikun blog
"use strict" - blog.niw.at