読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

自作JavaScriptプラグイン改修 ~即時関数をつかってグローバル汚染を防ぐ~

JSプラグイン制作 JavaScript

どうも!chuckです。

JSのプラグインを開発しましたので、改修します。

 

chuckwebtips.hatenablog.com

 

github.com

 

 

今回追加するポイントは、「カプセル化」であります。

つまり、処理文を関数で包みます。それによって、外部に悪い影響を与えないようにします。

 

qiita.com

 

まず、こちらが以前のコード。

f:id:chuck0523:20150919064646p:plain

いきなりvar で始まってますね。

これではグローバル汚染が起こっています。

 

グローバル汚染についてはこの記事が分かりやすかったです。

ameblo.jp

 

なので、処理の全文を即時関数で包みます。

シンプルな例を出すとこんな感じ。

f:id:chuck0523:20150919065511p:plain

こうすることで、testという名前の変数がグローバル変数ではなくローカル変数となります。

 

ただし、これでは外部からアクセスできないので、1つ工夫を加えます。

f:id:chuck0523:20150919065756p:plain

4行目では、windowを即時関数の引数としてとっています。

それを1行目でwと置くことで、この関数内でwindowオブジェクトをwとして使うことができます。

そして3行目でw.test = test とすることで、windowオブジェクトにtestという名前で変数testを追加しています。

こうすることで、外部からも参照することができます。

 

さて、僕のコードはこうなりました。

f:id:chuck0523:20150919070142p:plain

処理全体を即時関数で包み込んで、

 

f:id:chuck0523:20150919070208p:plain

引数にwindowオブジェクトを渡しています。

 

そして、作成したcnvという変数を、以下の処理でwindowに追加しています。

f:id:chuck0523:20150919070238p:plain

w.cnv === undefined は、まだcnvというプロパティが存在していないことを確認しています。

 

これで、外部からもこの関数を呼び出せるようになりました。

f:id:chuck0523:20150919070456p:plain

ただし、cnvという関数が呼んでいるhasDataや、showResultという関数はローカルとなり、外部からは隠されています。

 

 

というわけで、今回は即時関数を利用して、このプラグインによるグローバル汚染を防ぎました。

 

 

書いたコード

gist5dc7f678c60b81077d45

 

GitHub

github.com