javascriptライブラリの使い方

質問

aa.js bb.js cc.js の3つのjavascriptを使ったサイトを作成中です。

ヘッダーに
<script src="aa.js" type="text/javascript"></script>
<script src="bb.js" type="text/javascript"></script>
<script src="cc.js" type="text/javascript"></script>

と記載し、「aa.js bb.js cc.js 使う前提のスクリプト」をサイト上に記載しているのですが、aa.js bb.js cc.js のそれぞれが重いため、サイト記載のスクリプトがaa.js、bb.js、cc.jsより先に読み込まれてしまい、思ったような表示が出来ません。
(cc.jsが読み込まれないままの状態でサイトのスクリプトを読み終わってしまう)

そこで調べてみると、下記のようなライブラリを発見しました。

http://notnil-creative.com/blog/archives/1361

このライブラリ(script.js)を使うと、通常は以下のように書くJavascriptの読み込みが、

<script src="jquery.js"></script>
<script src="my-jquery-plugin.js"></script>
<script src="my-app-that-uses-plugin.js"></script>

下記のように書くことができるそうです。

$script('jquery.js', function () {
$script('my-jquery-plugin.js', function () {
$script('my-app-that-uses-plugin.js')
})
})

この書き方で、ページのレンダリングを阻害せず、非同期にJavascriptを読み込むことができ、なおかつ「jQueryが読み込まれてからjQueryプラグインを読み込み、そのあとウェブサイト用のスクリプトを読み込む」というような依存関係のある複数のJavascriptファイルの読み込みにも対応できちゃいます。

という優れものであり、私の要求にぴったりと思いました。

早速、http://notnil-creative.com/blog/archives/1361のページからscript.jsをダウンロードしたのですが、使い方がわかりません。

例ではヘッダーに
$script('jquery.js', function () {
$script('my-jquery-plugin.js', function () {
$script('my-app-that-uses-plugin.js')
})
})
と記載すればOKと書いてあります。

ただ、この記入方法で動くようにするためには、$scriptがscript.jsに連動していることを記載すべき
だと思いますが、javascriptでそのような例を見たことがなく困惑しています。

このスクリプトの使い方(ヘッダーの記入方法)について、ご教授頂けませんでしょうか?

宜しくお願い致します。

回答No.1

神崎 渉瑠（@taloo）

>(cc.jsが読み込まれないままの状態でサイトのスクリプトを読み終わってしまう)

状況がわかりません。

HTML、JavaScriptのルールとして、

<script src="aa.js"></script>
<script src="bb.js"></script>
<script src="cc.js"></script>
<script>
aa();
bb();
cc();
</script>

このように書かれている場合、aa.js、bb.js、cc.jsの読み込み完了を待ってから、
読み込みが完了したらaa()、bb()、cc()を順番に実行します。
aa.js、bb.js、cc.jsがネットワーク遅延などで読み込みが遅くなった場合でも、その遅延を待ちます。

もしaa.js、bb.js、cc.jsを読み込めないのであれば、パスが間違っているか、アップロードし忘れ、ネットワークエラーで接続が切れているなど、別の問題を疑ってみるべきではないでしょうか。
読み込めているけど実行できないのなら、単なるスクリプトエラー、書き方が間違っていることを疑ってみるべきだと思います。

お礼

わかりました。
EUROの最新価格をmySQLから拾ってくるときのPHPに無駄な改行コードが入っていたのが原因でした。javascriptの問題ではありませんでした。
有難うございました。

補足

ご回答有難うございます。

>aa.js、bb.js、cc.jsの読み込み完了を待ってから、
>読み込みが完了したらaa()、bb()、cc()を順番に実行します。

私もjavascriptとはそのようなものと信じていました。
下記は該当するサイトです。
直近48時間のユーロ/円を表示します。

http://sc.pro.ne.jp/chart/euro/

ここでリロードを繰り返すと、枠とチャートが表示される場合(完全読み込みの場合と、枠は表示されるがチャートは表示されない場合(不完全読み込み)が生じます。

枠表示も罫線表示も同じjsに記載されていますので、スクリプトが途中までしか読み込まれないまま表示されているとしか思えません。

この状態が、下記のスクリプトを使用すると解決すると考えています。

http://notnil-creative.com/blog/archives/1361

つきましては、上記スクリプトの使い方についてご教授いただきたくお願い致します。