script.aculo.usを読み解く

第1回 scriptaculous.js

この記事を読むのに必要な時間:およそ 3 分

0026: var Scriptaculous = {
0027:   Version: '1.8.1',
0028:   require: function(libraryName) {
0029:     // inserting via DOM fails in Safari 2.0, so brute force approach
0030:     document.write('<script type="text/javascript" src="'+libraryName+'"><\/script>');
0031:   },
0032:   REQUIRED_PROTOTYPE: '1.6.0',

28行目のScriptaculous.requireは,動的にライブラリのロードを行う関数です。

Safari 2.0ではDOM経由で<script ...>を挿入しても動的ロードできないので,document.writeを使っています。

32行目で,依存するprototype.jsのバージョン(1.6.0)を指定しています。


0033:   load: function() {
0034:     function convertVersionString(versionString){
0035:       var r = versionString.split('.');
0036:       return parseInt(r[0])*100000 + parseInt(r[1])*1000 + parseInt(r[2]);
0037:     }
0038: 
0039:     if((typeof Prototype=='undefined') ||
0040:        (typeof Element == 'undefined') ||
0041:        (typeof Element.Methods=='undefined') ||
0042:        (convertVersionString(Prototype.Version) <
0043:         convertVersionString(Scriptaculous.REQUIRED_PROTOTYPE)))
0044:          throw("script.aculo.us requires the Prototype JavaScript framework >= " +
0045:         Scriptaculous.REQUIRED_PROTOTYPE);
0046:   
0047:     $A(document.getElementsByTagName("script")).findAll( function(s) {
0048:       return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
0049:     }).each( function(s) {
0050:       var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
0051:       var includes = s.src.match(/\?.*load=([a-z,]*)/);
0052:       (includes ? includes[1] : 'builder,effects,dragdrop,controls,slider,sound').split(',').each(
0053:        function(include) { Scriptaculous.require(path+include+'.js') });
0054:     });
0055:   }
0056: }
0057: 
0058: Scriptaculous.load();

33行目のScriptaculous.loadは,ライブラリをロードする関数です。

34~38行目のconvertVersionStringは,'1.6.0'といった文字列を106000と数字にする関数です。これでバージョンの比較を,数字の大小で判断できるようになります。

39~46行目で,prototype.jsが適切にロードされているかチェックしています。

47行目で,タグ名が"script"のDOM要素を集めて,prototype.jsの$A関数を使って配列の形にしてから,配列のfindAllメソッドを使っています。

48行目で,<script ... src="...scriptaculous.js...">となっているDOM要素をfindAllで集めていることがわかります。

9~51行目で,"...scriptaculous.js..."を分解して,pathの部分と,scriptaculous.js?load=以降の部分とに分解してpath/scriptaculous.js?load=effectsやpath/scriptaculous.js?load=effects,dragdropといった指定を扱っています。

52行目で,それらの結果を組み合わせて,load=effects,dragdropとなっていたときはpath/effects.jsやpath/dragdrop.jsを,単にscriptaculous.jsとなっていたときは全てのライブラリを,28行目で定義したrequire関数で動的にロードしています。

著者プロフィール

源馬照明(げんまてるあき)

名古屋大学大学院多元数理科学研究科1年。学部生のときにSchemeの素晴らしさを知ったのをきっかけに,関数型言語の世界へ。JavaScriptに,ブラウザからすぐに試せる関数型言語としての魅力と将来性を感じている。

ブログ:Gemmaの日記