JavaScript の便利なテクニック集

2018年8月24日金曜日

t f B! P L

JavaScript の便利なテクニック集

global スコープを汚さない処理の書き方

//無名関数を作成し、その中で変数を宣言する
//その後、関数を即座に実行する
;(function() {
	var foo = 123;
})(window);

[補足] 先頭のセミコロン(";") って必要なの?

JavaScriptのライブラリ・JQueryのプラグイン等で、
ファイルの先頭にセミコロン(";")が付いているものがあります。
これは JavaScriptが行末のセミコロンを省略してもよい言語仕様に関連しており、
以下の例の通り、複数の jsファイルを1つにまとめる圧縮を行うと、
意図しない動作を引き起こす可能性があるため、
ファイルの先頭にセミコロン(";")が付いています。
/*********************************
圧縮前
*********************************/
//file1.js
var foo = function(bar) {
  console.log("foo関数 ");
  return bar;
}

//file2.js
(function() {
	console.log("即時無名関数");
})(window);

//-> "即時無名関数"

ファイルの圧縮を行うと、意図しない "foo関数"が実行されてしまう

/*********************************
圧縮後
*********************************/
//build.js
var foo = function(bar) { console.log("foo関数 "); return bar; }(function() {
	console.log("即時無名関数");
})(window);

//-> "foo関数 即時無名関数"
スポンサーリンク

QooQ