ユーザスクリプトでjQueryを利用する【ソースを読む】

ユーザスクリプトで、jQueryを使う場合の
ソースについて何をしているのか、読んでみる。

前のブログ記事で紹介したソースです。
http://iwa4.hatenablog.com/entry/2013/07/02/181645

動作の流れに沿って書く。

0.引数に、jQueryにて実行したい処理を書く

})(function ($) {
  //ここに、実行したい処理を書く
  alert('jQuery is ' + typeof $);
});

1.スクリプトタグ生成

jQueryを入れるスクリプトタグを生成

var script = document.createElement("script");
script.setAttribute("src", "//code.jquery.com/jquery-2.0.0.min.js");

ローカルで試しに実行するときに、file://になってると読み込めないので
注意。その場合は、http:を足してください。

2.生成したスクリプトタグをbodyタグの子要素として追加

document.body.appendChild(script);
script.textContent = "(" + callback.toString() + ")(jQuery.noConflict(true));";

3.イベント処理(scriptタグロード時)

引数(function型)を、スクリプトタグ生成して実行できるようにする。

var script = document.createElement("script");
script.textContent = "(" + callback.toString() + ")(jQuery.noConflict(true));";

textContentについては、下記記事が参考になった。

textContent も innerText もある要素の text 部分にアクセスするためのプロパティです.

http://d.hatena.ne.jp/cou929_la/20110517/1305644081

noConflict

jQuery.noConflict([extreme])
この関数を実行すると、$関数の動作が先に定義されている動作に戻します。
noConflictを使った場合、jQueryオブジェクトの呼び出しには明確に'jQuery'と書く必要があります。
第1引数 extreme (ブール値) を true とすると、$関数のみならず、jQueryオブジェクトも含めて完全にグローバルの名前空間から除去します。
これを設定すると、$関数だけでなくjQueryオブジェクトも、先に定義された動作に戻してしまいます。

http://www.hp-kyoto.info/jQuery/jquery3000.html

この文章の後の、参考例がわかりやすかった。

そして、スクリプトタグを、bodyタグの子要素として追加

document.body.appendChild(script);

どうなるか

bodyタグ内に、下記２つのscriptタグが生成される。

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
(function ($) {
    alert('jQuery is ' + typeof $);
})(jQuery.noConflict(true));
</script>

即時関数について

このソースでも利用されているが
即時関数のメリットは

・グローバル変数に関数の割り当てがされない
　変数の名前が衝突しないので、外を気にしなくてよくなる
・内部で宣言した変数や関数はローカルに限定される

function hoge(){
    alert(1);
}

hoge();

↑は↓と同じ

(function hoge(){
    alert(1);
})();