TOPシステム開発> 外部JavaScriptの呼び出し方法
まるごとJavaScript&Ajax!
JSライブラリ・ラボ - これで君もライブラリ開発者だ!

第3回:YUIライブラリと外部JSの呼び出し手法
著者:川崎 有亮   2007/4/2
前のページ  1  2
外部JavaScriptの呼び出し方法

   YUIライブラリのように大規模になると、ライブラリ自体のコードが長くなり、メモリ消費やページ描画処理速度への影響が懸念されます。実際のWebページ中でライブラリ内の全てのモジュールを同時に使用することは皆無ですから、モジュールごとの分割呼び出しが必要になるわけです。

   YUI以外のライブラリでも、例えばエフェクト関係ライブラリscript.aculo.us(図4、注6)も複数のファイルで構成されます。
script.aculo.usライブラリの配布サイト
図4:script.aculo.usライブラリの配布サイト


   リスト3に示すように「?load=」という特殊記法で外部JavaScriptファイルの動的呼び出しをサポートしています。

リスト3:script.aculo.usでエフェクトを利用する例
<script src="inc/prototype.js" type="text/javascript"></script>
<script src="inc/scriptaculous.js?load=effects" type="text/javascript"></script>

   その他、dojoライブラリ(図5、注7)ではリスト4のようにオブジェクト名を指定して必要な外部ファイルを動的に読み込むdojo.require()メソッドを実装しています。

dojoの配布サイト
図5:dojoの配布サイト


リスト4:dojoライブラリを利用する例
<script src="inc/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
   dojo.require("dojo.event.*"); // sophisticated AOP event handling
   dojo.require("dojo.io.*"); // for Ajax requests
   dojo.require("dojo.storage.*"); // a persistent local data cache
   dojo.require("dojo.json"); // serialization to JSON
   dojo.require("dojo.dnd.*"); // drag-and-drop
   dojo.require("dojo.lfx.*"); // animations and eye candy
   dojo.require("dojo.widget.Editor2");// stable, portable HTML WYSIWYG
</script>

   JavaScript言語としては外部ファイルを動的に読み込む標準仕様が存在しませんが、dojoでは他言語と近い感覚でプログラムを記述できるように配慮しているわけです。

   このように大規模なライブラリを構築する際には、複数ファイルの分割構成を検討する必要があります。しかし、そこまで豊富な機能を提供しない軽量ライブラリでは、無理にファイルを分割せずにscript要素1つだけで利用できるような、お手軽な構成にした方がライブラリ利用者(開発者)にとっても便利でしょう。


次回は

   次回は、オリジナルのWebサービスとJavaScriptライブラリを作成していきます。

前のページ  1  2

川崎 有亮
著者プロフィール
川崎 有亮
1977年東京生まれ。AjaxなどWeb技術のアーキテクト。株式会社かっぺを経て、現在は株式会社リクルート事業開発室に所属。技術評論社「Ajax/実装のための基礎テクニック」(共著)など書籍・雑誌記事の執筆も多数。

Kawa.net xp:http://www.kawa.net/


INDEX
第3回:YUIライブラリと外部JSの呼び出し手法
  YUIライブラリを解剖する
外部JavaScriptの呼び出し方法