JavaScriptファイルに引数を渡す

前回のエントリで触れたscript要素のsrc属性に指定したJavaScriptファイルに引数を渡す方法。ネタ元はscript.aculo.usで、script.aculo.usでは読み込むライブラリを指定するために使っている模様。引数が指定できるというのは夢が拡がる(った)。

asamashi.jsでは以下のようなコードで引数に指定したASINコードを取得している。

$A(document.getElementsByTagName("script")).findAll(function(s) {
  return (s.src && s.src.match(/asamashi\.js(\#.*)?$/))
}).each(function(s) {
  asin = s.src.replace(/http:\/\/hail2u\.net\/pub\/test\/056_asamashi\.js\#/, '');
});

$A()やfindAll()などprototype.jsを利用したコードなので短くまとまっている。

var ss1 = document.getElementsByTagName("script");
var ss2 = new Array();

for (var i = 0; i < ss1.length; i++) {
  var s = ss1[i];
  if (s.src && s.src.match(/asamashi\.js(\#.*)?$/)) ss2.push(s);
}

for (var i = 0; i < ss2.length; i++) {
  var s = ss2[i];
  asin = s.src.replace(/http:\/\/labs\.hail2u\.net\/amazon\/asamashi\/asamashi\.js\#/, '');
}

普通に書くとこんな感じ(あんまりチェックしてないので多分)。つまりscript要素を列挙して、src属性をチェック。自分自身への参照でかつ引数があれば配列に格納し、正規表現の置換で引数をゲットというわけ。

実際には、

<script type="text/javascript">
  var asin = "4844322222";
</script>
<script type="text/javascript" src="asamashi.js"></script>
<div id="asamashi-4844322222"></div>

などという形(Google AdSenseなんかみたいなスタイル)で良いことが多い(と思う)。そのためこういった引数を与えるというテクニックは使う場所が限られそう。もちろんscript.aculo.usのような動的ロードの仕組みなどはその限られた場所のひとつで、大いに力を発揮するだろう。前回のエントリでやったような仕組みを汎用的にし、第三者に積極的に利用してもらう場合にも良いアプローチだと思う。上記のようなコードよりも、

<script type="text/javascript"
  src="http://hail2u.net/pub/test/056_asamashi.js#4844322222"></script>
<div id="asamashi-4844322222"></div>

の方がすっきりしてて気持ちが良いし、利用する第三者に優しいと思うので。コーダー的なメリット(アプリケーションにおいて引数を渡すことができるというメリット)よりも、ユーザー的なメリット(JavaScriptファイルの呼び出しが簡略化できたりするメリット)という面でポイントが高いテクニックかなとかいう印象。

例えばGoogle AdSenseが、

<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js#pub-8712792805045949:Seaside">
</script>

という感じだったとしたらすっきりしてて良くない？　みたいな。