rcmdnk's blog

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで

JavaScriptに関するメモ。

JavaScriptの関数に配列を展開して渡す

前回の basket.jsでスクリプトのlocalStorage保存を試してみる の所で、 実際には色々沢山のスクリプトを一緒に入れてることを試したくて、 最初、

1
2
3
<script>
bs_scripts=[];
</script>

みたいなのを用意して、各箇所で

1
2
3
4
5
6
7
8
<script>
bs_scripts.push({url: "//ajax.googleapis.com/ajax/libs/jquery/2.4.1/jquery.min.js"});
</script>
{% unless site.share_static %}
<script>
bs_scripts_jquery.push({url: "{{root_url}}/javascripts/share-custom.js", expire: expire});
</script>
{% endunless %}

みたいに必要な物を詰めていって

1
2
3
<script>
basket.require(bs_scripts);
</script>

にしてました。

公式 には

details: Either an object or an array of objects with the following fields:

と書いてあるのでこんな感じで連想配列の配列で良いかと思ってましたがこれはダメ。

basket.js の中身を見てみると

basket.js
1
2
3
4
5
6
7
8
9
10
11
12
  window.basket = {
    require: function() {
      for ( var a = 0, l = arguments.length; a < l; a++ ) {
        arguments[a].execute = arguments[a].execute !== false;
        
        if ( arguments[a].once && inBasket.indexOf(arguments[a].url) >= 0 ) {
          arguments[a].execute = false;
        } else if ( arguments[a].execute !== false && inBasket.indexOf(arguments[a].url) < 0 ) {  
          inBasket.push(arguments[a].url);
        }
      }
      ...

みたいになってます。

なので受け取った一つ一つの引数を連想配列として受け取って 処理しています。

引数のtypeofとかして配列そのものを理解してくれるのではないらしい。 (そういう意味ではarrayって書くのは紛らわしい感じがしますが (A, B, C)って渡すのもarrayというもの。。。?)

ということで、この様な場合、せっかく配列にしたので それをそのまま渡したいわけですが、 そうするにはapplyを使って以下の様に書きます。

1
2
3
<script>
basket.require.apply(this, bs_scripts);
</script>

こんな感じで関数にapplyを加えて最初の引数をthisにして その後配列を与えると

basket.require(bs_scripts[0], bs_scripts[1], bs_scripts[2],...);

と展開して実行してくれます。

Sponsored Links
Sponsored Links

« basket.jsでスクリプトのlocalStorage保存を試してみる Incapeでドット絵的なアイコンを作る »

}