updated on 7/13/2006
Spry
http://labs.adobe.com/technologies/spry/
#Spry - Change Log に Spry is now compatible with frameworks based on Prototype 1.5 rc0 or later. と書いてありましたが、どこがコンパチブルなのかは一目ではわかりませんでした(1分半くらい、今日は時間が無くて、本当に一目しか見ていないのでアバウトです^^;)。ドル関数のエントリを書いた時に確認したように、一部同じコードをコピーし、使用しているのかな？少なくともドル関数についてだけですが、SpryData.js内のはPrototype 1.5 rc0 ではなくPrototype 1.4のコピーでした。
Spryがv1.1になって、 ドル関数をサポートしたということでしたので、早速、prototype.jsとの違いを調べてみました。
ダウンロードしたのは、Spry_P1_1_06-08.zipというファイルです。(v1.1の6/8バージョン?)
で、
includes/SpryData.jsという外部ファイルを調べたら、755行目にありました。
//Spry_P1_1_06-08
function $()
{
var elements = new Array();
for (var i = 0; i < arguments.length; i++)
{
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
なるほど。prototype.js と同じですね。
引数が文字列（typeof element == 'string')なら、ID名と解釈してgetElementByIdで検索した要素を返し、違えば、
要素を返す。引数は複数指定可能で、その場合は、配列に入れて返す。ということで、
たとえば、
<div id="
test0"></div>
<div id="
test1"></div>
<div id="
test2"></div>
という要素があるときに、
$('test0')ならdocument.getElementById('test0')を返し、
$(document.getElementById('test0'))ならそのままdocument.getElementById('test0')を返し、
$('test1','test2')なら[document.getElementById('test1'),document.getElementById('test2')]を返し、
$(document.getElementById('test1'),document.getElementById('test2'))なら同じく[document.getElementById('test1'),document.getElementById('test2')]
を返すというわけです。
これは、つまり、最近バージョンアップしたRicoなどで使われている、下記 prototype.js v1.4のドル関数と同じです。というか、そっくり同じコピーです。
//1.4.0_rc1 (Rico 1.1.2)
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
ただし、Scriptaculous 1.6などで使われているprototype.js v1.5とは違います。
v1.5では、下記のようにElement.extend(element)の戻り値を返すようになっています。
//1.5.0_pre1 (Scriptaculous 1.6)
function $() {
var results = [], element;
for (var i = 0; i < arguments.length; i++) {
element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
results.push(Element.extend(element));
}
return results.length < 2 ? results[0] : results;
}
ちなみに、Element.extend(element)は、Element.Methodsオブジェクトにあらかじめ用意されているメソッド群を該当要素へ強制的に追加します。
その結果、
display = 'none'にするoj.hide()、display = ''にするoj.show()をはじめ、toggle()、remove()、
update()、replace()、getHeight()、classNames()、hasClassName()、addClassName()、removeClassName()、
cleanWhitespace()、empty()、childOf()、scrollTo()、getStyle()、setStyle()、getDimensions()、
makePositioned()、undoPositioned()、makeClipping()、undoClipping()
という22個のメソッドが、ドル関数で返される要素へ、追加されることになります。
まぁ、これが検索したすべての要素に自動で付いてしまうわけですから、prototype.js系以外の他のライブラリとのマッシュアップ(＜それは単に組み合わせるってだけのことだろ)
は、そろそろ、あり得なくなくなくない?かもしれません。とはいえ、
この機能が便利機能か?、余計なお世話か^^?、は使い方次第というか、
prototype.jsを普通に使うなら、超便利間違いなしでしょう。＜というか、もっと追加したくなったりします(^^;;;;
#$14()と$15()と$15myExtend()を区別しても良いかも。＜複雑になると、元も子もf^^;;;
で、参考までに、このv1.5のドル関数でどう便利になるかといいますと、たとえば、DIVの表示/非表示が下記のように、超簡単になるわけです。
<script type="text/javascript"
src="../../lib/prototype.js"></script>
<div id = "test"
style = "width:100;height:100px;background-color:#4c95ff ;"
>Test</div>
<input type="button" value="消す" onclick="$('test').hide()">
<input type="button" value="出す" onclick="$('test').show()">
#ただ、一応念のために、書いておくと、このようにシンプルに書くために、prototype.js v1.5は2000行のソースをあらかじめ読み込んでおく必要はあります。とはいえ、50K弱ですから、それほど大きなものではありませんけれど、場合によっては、たとえば、100行程度しかない小さなホームページとか、あるいは、逆にサーバーの巨大なレスポンス量を極力絞りたい場合などで使いたいなら、その必要な機能だけを実装した方が良い場合もあります。
脱線ついでに(笑)、どうやって、実装するかというと、v1.5式のドル関数で、たとえばですが、show(),hide()だけを、prototype.js v1.5との互換性を完全に維持しつつ、最小構成で使いたいなら、下記のような60行程度を切り出して寄せ集めたソースがあれば動作します。
サンプル
/* These sources are parts from prototype.js v1.5.0_pre1.
* ---------------------------------------------------------------
* Prototype JavaScript framework, version 1.5.0_pre1
* (c) 2005 Sam Stephenson
*
* Prototype is freely distributable under the terms of an MIT-style license.
* For details, see the Prototype web site: http://prototype.conio.net/
*
/*--------------------------------------------------------------------------*/
function $() {
var results = [], element;
for (var i = 0; i < arguments.length; i++) {
element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
results.push(Element.extend(element));
}
return results.length < 2 ? results[0] : results;
}
if (!window.Element)
var Element = new Object();
Element.extend = function(element) {
if (!element) return;
if (!element._extended && element.tagName && element != window) {
var methods = Element.Methods;
for (property in methods) {
var value = methods[property];
if (typeof value == 'function')
element[property] = value.bind(null, element);
}
}
element._extended = true;
return element;
}
Element.Methods = {
visible: function(element) {
return $(element).style.display != 'none';
},
hide: function() {
for (var i = 0; i < arguments.length; i++) {
var element = $(arguments[i]);
element.style.display = 'none';
}
},
show: function() {
for (var i = 0; i < arguments.length; i++) {
var element = $(arguments[i]);
element.style.display = '';
}
}
// 上記hide,show以外に、さらに必要なメソッドがあれば、
// prototype.js ソース内の Element.Methods オブジェクトから切り取ったり、
// 自作などして、ここへ追記します。下記を参照。
}
var $A = Array.from = function(iterable) {
if (!iterable) return [];
if (iterable.toArray) {
return iterable.toArray();
} else {
var results = [];
for (var i = 0; i < iterable.length; i++)
results.push(iterable[i]);
return results;
}
}
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}
で、ドル関数の機能を追加したければ、
prototype.js v1.5のなかの「Element.Methods = {」で始まるブロックを探し、そこに書いてある下記のようなメソッドを、上記のhideやshowメソッドに続けて「,」で区切りながら追記します。
メソッド名: function() {
//スクリプト
}
#prototype.jsはMITスタイルのライセンスで配布されています。
MITライセンスはBSD系の緩いライセンスですが、著作権表示だけは必要です。(*下記追記を参照)
追記2007.4.15
prototype.jsのライセンスは、MITスタイルで配布されていますが、MITの肝心な著作権表示に関する行を削除しているようにみえます(Thanx confさん)。
http://www.prototypejs.org/license (MIT-style licenseをクリック) ただ、この重要な件についての説明がみあたらなかったので、どう判断すべきかちょっと逡巡しています。ちなみに、お仲間である? script.aculo.usの方は正式なMITになっており、著作権表示義務の行も表記された全文になっているようです。
script.aculo.us
http://wiki.script.aculo.us/scriptaculous/show/License
参考
The MIT License（和訳）
http://www.opensource.gr.jp/licenses/mit-license.html
つづく
【Mini AJAX,prototype.js】$()ドル関数を比較する2
http://jsgt.org/mt/archives/01/001114.html
【最近の記事】
かも日記
![[Valid RSS]](http://jsgt.org/mt/archives/01/valid-rss.png "Validate my RSS feed"){kind=small}
