htcブログでAjaxロードしたときの手ごたえが寂しいのでX01HTでも動作する jKamoライブラリのテスト実装としてのグレイフェイドを試しに付けてみました 。たとえば、次のような書き方でIDが'test'の要素をフェイドイン/フェイドアウトします。引数はtrueで黒→白、falseで白→黒です。
jk('test').fadeBgGry(false);
サンプルは、
ここ。
対応は、 e4,e5,e6,n6,n7,f1,f2,o6,o7,o8,o9,s1,s2,k3,wme(x01ht)の予定(まだ全部は確認していません)
こんなことをしていたら、backgroundColorの戻り値が、そういえばブラウザごとにバラバラだったことを思い出したので、ColorNameをColorCodeに変換するための
JSON JSリテラルを作ってみました。サイズは
3.17k 2.8k です。(JSONで作ると "orange" とかのプロパティ名にも付けるダブルクオート280個が無駄なのでやめました。一応、JavaScriptだけで使う想定なので。)
サンプルとソース
http://jsgt.org/lib/colorname2code/
ColorNameをプロパティ、ColorCodeを値として持つオブジェクトです。たとえば、
alert(oj.orange);
alert(oj['orange']);
なら「#ffa500」が返ります。Win IE6やFirefoxのように色を調べたらColorNameが返ってくる場合に、ColorCodeへ変換できるようになります。たいしたものではありませんが、一度作っておけば、作業を多少は節約できるかと。
とりあえず、colorname2code140.js内では、
ColorName2Code140({white:"#ffffff",snow:"#fffafa",......});
という書式で、コールバック関数ColorName2Code14の引数として渡すJSONPのような
半スクリプト状態にしてあります。（ちなみに「140」は140色版という意味です）
これによって、あらかじめ関数ColorName2Code140を自分のページへ定義しておいて読み込めば、次のように、このJSONを読み込んだタイミングあるいはロード後に処理を起こすことができるようになります。ま、たぶん、そんなに意味は無いですが。
<script>
var colorOj;
function ColorName2Code140(oj){
colorOj=oj;
alert("orangeは、"+colorOj['orange']);
};
</script>
<!-- ここで読み込む -->
<script src="./colorname2code140.js"></script>
当然ながらPublic Domainですが、間違いがあったらごめんなさい。例によって、切り貼りもかまいませんし、連絡も不要ですが、使う場合はスクリプトを自分のサーバーに置いてください。そろそろjsgt.orgもいっぱいなので。
/*ColorName2Code140(Public Domain)@see http://jsgt.org/mt/archives/01/001481.html*/
ColorName2Code140({white:"#ffffff",snow:"#fffafa",ghostwhite:"#f8f8ff",whitesmoke:"#f5f5f5",floralwhite:"#fffaf0",linen:"#faf0e6",antiquewhite:"#faebd7",papayawhip:"#ffefd5",blanchedalmond:"#ffebcd",bisque:"#ffe4c4",moccasin:"#ffe4b5",navajowhite:"#ffdead",peachpuff:"#ffdab9",mistyrose:"#fff4e1",lavenderblush:"#fff0f5",seashell:"#fff5ee",oldlace:"#fdf5e6",ivory:"#fffff0",honeydew:"#f0fff0",mintcream:"#f5fffa",azure:"#f0ffff",aliceblue:"#f0f8ff",lavender:"#e6e6fa",black:"#000000",darkslategray:"#2f4f4f",dimgray:"#696969",gray:"#808080",darkgray:"#a9a9a9",silver:"#c0c0c0",lightgrey:"#d3d3d3",gainsboro:"#dcdcdc",lightslategray:"#778899",slategray:"#708090",lightsteelblue:"#b0c4de",steelblue:"#4682b4",royalblue:"#4169e1",midnightblue:"#191970",navy:"#000080",darkblue:"#00008b",mediumblue:"#0000cd",blue:"#0000ff",dodgerblue:"#1e90ff",cornflowerblue:"#6495ed",deepskyblue:"#00bfff",lightskyblue:"#87cefa",skyblue:"#87ceeb",lightblue:"#add8e6",powderblue:"#b0e0e6",paleturquoise:"#afeeee",lightcyan:"#e0ffff",cyan:"#00ffff",aqua:"#00ffff",turquoise:"#40e0d0",mediumturquoise:"#48d1cc",darkturquoise:"#00ced1",lightseagreen:"#20b2aa",cadetblue:"#5f9ea0",darkcyan:"#008b8b",teal:"#008080",seagreen:"#2e8b57",darkolivegreen:"#556b2f",darkgreen:"#006400",green:"#008000",forestgreen:"#228b22",mediumseagreen:"#3cb371",darkseagreen:"#8fbc8f",mediumaquamarine:"#66cdaa",aquamarine:"#7fffd4",palegreen:"#98fb98",lightgreen:"#90ee90",springgreen:"#00ff7f",mediumspringgreen:"#00fa9a",lawngreen:"#7cfc00",chartreuse:"#7fff00",greenyellow:"#adff2f",lime:"#00ff00",limegreen:"#32cd32",yellowgreen:"#9acd32",olivedrab:"#6b8e23",olive:"#808000",darkkhaki:"#bdb76b",palegoldenrod:"#eee8aa",cornsilk:"#fff8dc",beige:"#f5f5dc",lightyellow:"#ffffe0",lightgoldenrodyellow:"#fafad2",lemonchiffon:"#fffacd",wheat:"#f5deb3",burlywood:"#deb887",tan:"#d2b48c",khaki:"#f0e68c",yellow:"#ffff00",gold:"#ffd700",orange:"#ffa500",sandybrown:"#f4a460",darkorange:"#ff8c00",goldenrod:"#daa520",peru:"#cd853f",darkgoldenrod:"#b8860b",chocolate:"#d2691e",sienna:"#a0522d",saddlebrown:"#8b4513",maroon:"#800000",darkred:"#8b0000",brown:"#a52a2a",firebrick:"#b22222",indianred:"#cd5c5c",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightcoral:"#f08080",salmon:"#fa8072",lightsalmon:"#ffa07a",coral:"#ff7f50",tomato:"#ff6347",orangered:"#ff4500",red:"#ff0000",crimson:"#dc143c",mediumvioletred:"#c71585",deeppink:"#ff1493",hotpink:"#ff69b4",palevioletred:"#db7093",pink:"#ffc0cb",lightpink:"#ffb6c1",thistle:"#d8bfd8",magenta:"#ff00ff",fuchsia:"#ff00ff",violet:"#ee82ee",plum:"#dda0dd",orchid:"#da70d6",mediumorchid:"#ba55d3",darkorchid:"#9932cc",darkviolet:"#9400d3",darkmagenta:"#8b008b",purple:"#800080",indigo:"#4b0082",darkslateblue:"#483d8b",blueviolet:"#8a2be2",mediumpurple:"#9370db",slateblue:"#6a5acd",mediumslateblue:"#7b68ee"});
コメントを書ける場所についての覚書で、XHRのリクエストヘッダでRangeを使って、ファイルの先頭に書いたコメントを読むという検討をしましたが、このテクニックは、実際に、どの程度有効なのか？を押さえておきます。
http://jsgt.org/lib/ajax/051/test/test_setHeader_range_bench.htm
約2Mのファイルを、Rangeをセットして200バイトのみAjax読み込みする場合と、0バイト目以降を全部読み込む場合、そして、普通にファイル全部を読み込む場合の三通りで処理時間を計測しました。
ちなみに、LAN接続＋Win XP IE6+Pentium4 2.6G+2GRAM では、下記の結果でしたので充分に効果はあるといえると思います。
- 200バイト分のみをAjax読み込みする場合-->15/1000秒
←超早い
- 0バイト目以降を全部Ajaxで読み込む場合-->208/1000秒
- 普通にファイル全部をAjaxで読み込む場合-->218/1000秒
追記:2006.12.7
上記は静的.txtファイルでの計測でしたが、php、perlからのベンチも試してみました。phpでは、効果が逆転していることが要注意です。(p.s. PHPの設定は、チューンナップをしていません)
perlからデータを受け取る場合
- 200バイト分のみをAjax読み込みする場合-->62/1000秒
←早い
- 0バイト目以降を全部Ajaxで読み込む場合-->281/1000秒
←遅い
- 普通にファイル全部をAjaxで読み込む場合-->281/1000秒
phpからデータを受け取る場合
- 200バイト分のみをAjax読み込みする場合-->421/1000秒
←遅い
- 0バイト目以降を全部Ajaxで読み込む場合-->640/1000秒
←超遅い
- 普通にファイル全部をAjaxで読み込む場合-->235/1000秒
#しかし、.txtで15/1000秒に対して、.phpで421/1000秒という違いは大きいですね。。。やはり、まめに静的ファイル化すると幸せがくる？かなぁ。
#とりあえず今日の結論::リクエストヘッダにRangeを使用した、データの部分取得では、.txtや.htmlなどの静的ファイルを対象とすると、取得データ量に見合った、パフォーマンスアップを期待できる。PHPやPerlなどを介するケースでは、逆に、遅くなるケースもあるので要注意。
JavaMan ( 2006年12月07日 22:09 )
右のBBSのスパムがひどいですね。
http://blog.drecom.jp/naito/archive/319#comments
みたいに、数字を入力しないと書き込めないようにすると少しはへるのでしょうかね。
た ( 2006年12月07日 22:57 )
JavaManさんおひさしぶりです。スパムはきりが無いので、多少対策した後、放ってあったのですが、このBBSでの放置は、やはり、気になりますか、、、f^^;。
(←clickで入力欄open)
リクエストヘッダ
Rengeを使って、ページの先頭○バイトだけ取ってくる、ということをしたいのですが、HTML/XHTMLの仕様的にどうなのかをちょっと確認。
やりたいのは、たとえば、いきなりファイルの頭の何バイトかにAjaxやサーバー側プログラムが利用するデータをコメントとして書いておくというのが「仕様的には」許されるか？ということ。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...といった無駄な宣言部や要素を読みたくないので。
<!--{data1:xxxxx,data2:xxxx,data3:xxxxx,...}-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
<html>
:
ようするに、こうすると、たとえば、
oj.setRequestHeader("Range","bytes=0-199");
これだけで、ファイルの先頭200バイト分だけを、Ajaxで取ってきて、いろいろに利用ができるわけです。（このワザは、Operaは駄目ですが、IE,Firefox,Safariで使えます）
で、HTML は問題なさそうですが、XHTMLには該当しそうな記述を見つけられなかったので、XMLを見ると、、、良さそうでもあり、、、よくわからない、、、。どうなんでしょう？
HTML 4.01
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.1
7.1 HTML文書の構造の概説
1つのHTML 4文書は、次の3つの部分から構成される。
HTMLバージョン情報を含む行。
宣言的ヘッダの部分 (HEAD要素として区切られる)。
文書の実際のコンテンツを含む、本体。本体は、BODY要素か FRAMESET要素のどちらで実装されてもよい。
空白類(space、new line、tab、及びコメント)は、上記3部分の前後どちらに出現してもよい。
XML 1.0 (Second Edition)
2.5 Comments
http://www.w3.org/TR/2000/REC-xml-20001006#sec-comments
Comments may appear anywhere in a document outside other markup
コメントは、他のマークアップの外ならdocumentのどこに現れても良い。
第7回 XMLで使ってもいい文字データとコメント(@IT)
コメントの書き方
http://www.atmarkit.co.jp/fxml/rensai/w3cread07/w3cread07.html#g
odz ( 2006年12月03日 02:48 )
最後のリンクにも書いてありますが、コメント中には「--」を書くことができません。なので、XML、HTML 的に valid なまま JSON をコメントに直接書くのは無理です。データが限定されているとか、いちいち encode, decode してもいいというのなら、別ですが。
た ( 2006年12月03日 10:55 )
--が使えないのは、当たり前なので、そういう使い方、ということで、まぁしょうがないかな、と思います。どうしても使いたい時は、使いたい側の都合でエスケープでもすればよいわけで、HTMLやXMLは関知しないことになってるわけですし。
た ( 2006年12月03日 11:18 )
で、書ける場所ですが、XMLの場合は、ドキュメント宣言だけではなくて<?xml で始まるXML宣言が「文書先頭」に必要なので、これは許容しないといけないかも。
た ( 2006年12月03日 11:39 )
あと、utf-8でBOMを付けたときには、3バイトずらす必要があります。まぁ、有る程度ざっくり受け取って、スプリッタで切り出すとかで良いとは思いますが。
た ( 2006年12月03日 16:19 )
それから、使えない文字としては、「--」の他に、「<」 と「>」は、実装が許してくれない可能性があります。ということで、もし、実体参照にするなら、「– 」は–か– 、「<」は< か < 、 「>」は> か > かなぁ。encode/decodeURIComponentでやっといた方が簡単かな?
(←clickで入力欄open)
#アップするの忘れてた(^^;
【jKamo】1.
オブジェクトでドメインを表現したネームスペース
【jKamo】2.
org.jsgt.jKamoのショートカットと戻り値
【jKamo】3.DOMアクセスとorg.jsgt.jKamo内のローカルショートカット
前項で繰り返し出てきた「document.getElementById」など、DOMメソッドやアトリビュートの多くは、DOM特有の長い名前が付けられています。そのせいで、DOMを扱う時には、コード全体も長々と読みにくいコードになりがちです。
ここでは、それらと同じ機能をもっと短く表記し、ショートカットのように利用するいくつかの方法を試し、実装してみます。
1.DOM表記のショートカット
たとえば、何の対策もせずに、同じDOM要素を操作すると、次のように、ソースの文字数の半分以上が、なんと同じコードの単純な繰り返しになることさえあります。
document.getElementById('onaziName').style.visibility='visible';
document.getElementById('onaziName').style.zIndex=z;
document.getElementById('onaziName').innerHTML='うんぬん';
しかし、ソースの文字数がそのまま、ネットワークやサーバーの負荷にも影響してしまうJavaScriptとしては、普通は、こういう種類の冗長さはいただけません。
そこで、同じ機能をもっと短く表記し、ショートカットのように利用する方法を見てみます。
たとえば、次のように、withを利用して、スコープを省略表記する方法があります。
with(document.getElementById('onaziName')){
style.visibility='visible';
style.zIndex=z;
innerHTML='うんぬん';
}
あるいは、関数やメソッドの戻り値としてセットすることで省略する方法もあります。
function getE(){return document.getElementById('onaziName');}
getE().style.visibility='visible';
getE().style.zIndex=z;
getE().innerHTML='うんぬん';
また、たとえば、オブジェクトのインスタンスとしてセットする方法もあります。
function GetE(){this.e=document.getElementById('onaziName');}
var e=new GetE();
e.style.visibility='visible';
e.style.zIndex=z;
e.innerHTML='うんぬん';
さらに、単純に変数へ代入してショートカットを作る方法もあります。
var e=document.getElementById('onaziName');
e.style.visibility='visible';
e.style.zIndex=z;
e.innerHTML='うんぬん';
これら以外にもいろいろな方法はあるわけですが、速度的には、このケースでは、WinIE Opera Firefox MacSafari共に、最後の変数への代入が最も早く動作しています。
ベンチマークサンプル
2.他のライブラリとjKamo
いずれにせよ、そんなわけで、「じゅげむじゅげむ」となりがちなDOMの記述を省略表記することは、prototype.jsやjQueryの$関数をはじめ、どのライブラリでもやっています。
ちなみに、prototype.jsは、グローバルスコープ内へ $ という関数を用意してどこからでも使えるようになっています。Spryの$関数は、prototype.jsと同じです。
jQueryの$は関数jQueryのコピーで、これもグローバルスコープ内へ作成します。
YUIでは、YAHOO.util.Dom 下に get(el) というメソッドがあり、必要ならdom.jsを読み込んで利用します。Dojoなら、dojoオブジェクト直下にdojo.byId(id, doc)というメソッドがあり、これは基本のdojo.jsに含まれています。
ま、ようするに、いろいろです。
問題は、どこでどう縮めるかです。(どのスコープ内で、変数にするのか、インスタンスにするのか、どのファイルで、どんな名前にするのかなど。)
ひるがえって、今回リメイクしようとしているライブラリでは、もうすでに場所は限られています。ライブラリ内にネームスペース以外のグローバルメンバを作らないということでここまで来たわけですから。
ようするに、org.jsgt.jKamo配下に置くしかありません。
グローバルなのはorgと、これ以外では、あえて言っても、ライブラリ外のorg.jsgt.jKamoショートカットまでです。なにしろ、私が、これ以上覚えたくありませんし(笑)。
3.org.jsgt.jKamo内のローカルショートカット
ということで、前回は、org.jsgt.jKamo自身のショートカットについて書きましたが、ここでは、「document.getElementById」などのショートカットをorg.jsgt.jKamoの配下へ置き、コードをシンプルにしてみようと思います。
では、試しに、やってみます。
サンプル
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
org.jsgt.jKamo = function(layName){
var o=document.getElementById(layName);
return {
show: function(){
o.style.visibility='visible';
},
hide: function(){
o.style.visibility='hidden';
}
}
};
var jk= org.jsgt.jKamo;
うまくいきましたが、更に欲がでてきます。この際、styleもまとめて、layNmaeという引数名も短くします。
サンプル
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
org.jsgt.jKamo = function(e){
var o=document.getElementById(e),s=o.style;
return {
show: function(){s.visibility='visible'},
hide: function(){s.visibility='hidden'}
}
};
var jk= org.jsgt.jKamo;
で、org.jsgt.jKamoと内部メソッドの処理方法について、検証もせずにここまで来たわけですが、ふと、この際テストしておいた方が良いかもということで、oj.visibility='visible'とoj.visibility='hidden'を1万回繰り返すベンチマーク。
ベンチマークサンプル。
ベンチマークが実際の場面で必ず有効とは限りませんが、 一応、判断材料にできるかもしれないし、案外思いがけない発見があるかもしれないので念のためにやっておきます。*Win XP Pro /Pentium4 2.6GHz 2GRAM
ベンチ
| OS | ブラウザ : | 1回目 | 2回目 | 3回目 | 4回目 | 5回目 |
|---|
| Win | firefox1.5 : | 954 | 1000 | 1000 | 1047 | 1000 |
| ie6 : | 565 | 565 | 672 | 671 | 672 |
| Opera9 : | 516 | 500 | 516 | 500 | 516 |
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
if(!org.jsgt.jKamo)org.jsgt.jKamo={};
org.jsgt.jKamo.fx = function(e){
var es=es||(document.getElementById(e).style||e.style);
return {
visi: function(v){es.visibility=v}
};
};
var jk= function(e){
return jk.e||(jk.e=new org.jsgt.jKamo.fx(e));
};
var s=(new Date()).getTime(),e;
for(var i=0;i<10000;i++){
jk('test0').visi('hidden');
jk('test0').visi('visible');
}
var e =(new Date()).getTime();
var sa=e-s;
alert(sa)
試しに比較します。ソースの書き方で結構違うことがわかります。(とはいえ、これは、こういうベンチマークだから、キャッシュしている方が早いという違いではありますが。)
ベンチ
| OS | ブラウザ : | 1回目 | 2回目 | 3回目 | 4回目 | 5回目 |
|---|
| Win | firefox1.5 : | 4079 | 3547 | 3625 | 3593 | 3703 |
| ie6 : | 1875 | 1829 | 1844 | 1844 | 1860 |
| Opera9 : | 1203 | 1188 | 1187 | 1188 | 1250 |
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
org.jsgt.jKamo = function(e){
var es=es||(document.getElementById(e).style||e.style);
return {
visi: function(v){es.visibility=v;}
};
};
var jk= org.jsgt.jKamo;
var s=(new Date()).getTime(),e;
for(var i=0;i<10000;i++){
jk('test0').visi('hidden');
jk('test0').visi('visible');
}
var e =(new Date()).getTime();
var sa=e-s;
alert(sa)
ただ、グローバルな関数 jk にキャッシュを使った前者は早いのですが、ポリシー的に納得いかない(笑)というのはあります。が、今日はここまで。
というわけで、時々ベンチなどもしながら、のんびり行きます。
...つづく
最近、jslbなどいじっていて、ひとつのAjaxライブラリでしか動かないのはつまらないし、いちいちライブラリ移植の手間をかけるのもめんどくさい、と感じることが増えてきたので、互換処理を試してみました。
でも、まともに書き始めると、それぞれのライブラリ毎に特徴もあって、それらをすべて互換できるようにしようとすると、それだけのことで結構大きなライブラリができてしまうこともわかりました(笑)。
で、それは、無駄というか、それをやる気は無いので、とりあえず、あるjsgt_ajaxを使った処理に限定して、いくつかのライブラリを互換させてみるというのを試しました。まぁ、普通に動きますが、並べて動作比較などしてみるといくつか新たな発見があったりして面白いです。
//=====================================================================
// ライブラリ互換処理
// jslb_ajax.jsのsendRequest、prototype.jsのAjax.Request、
// YUIのConnect.asyncRequest、Dojoのdojo.io.bindを互換させます。
// 使わないライブラリは、実装現場で最後に
// case 'ライブラリ名':から;break;までの該当するブロックを削除
// することで、このソースの軽量化が可能です。
//
use : '',//使用するライブラリ名
//使用するライブラリ名を指定します。
setUse :function(libName){
this.use=(libName=='auto')?this._autoUse():((libName)?libName:'');
},
//setUseの第一引数が'auto'時に、下記配列順に検査しライブラリを自動指定します。
_autoUse :function(){
var lib=['prototype.js','yahoo.js','dojo.js','jslb_ajax.js'];
var liboj=[window.Prototype,window.YAHOO,window.dojo,window.sendRequest];
for(var i=0;i<=liboj.length;i++){
var t=typeof liboj[i];
if(t=='object'||t=='function'){return this.use=lib[i];};
};
},
//置き換え
_sendRequest :function(callback,data,method,url,async,sload){
function mkPrams(b){
var p='';
for(var i in b){
p+='&'+encodeURIComponent(i)+'='+encodeURIComponent(b[i]);
};
return p
};
switch(this.use){
case 'prototype.js':
var op={
method:method,
parameters:mkPrams(data),
onComplete:callback,
asynchronous:async
};
url=(sload)?url+'?'+(new Date()):url;
return new Ajax.Request(url,op);
;break;
case 'dojo.js':
dojo.require("dojo.io.*");
var postContent=''
url=(sload)?url+'?'+(new Date()):url;
if(method.toLowerCase()=='get')url+mkPrams(data)
else postContent=mkPrams(data);
dojo.io.bind({
method:method,
url:url,
load: function(type,data){
callback({responseText:data})
},
sync:async,
postContent:postContent
});
;break;
case 'yahoo.js':
var postData='';
url=(sload)?url+'?'+(new Date()):url;
if(method.toLowerCase()=='get')url+mkPrams(data)
else postData=mkPrams(data);
YAHOO.util.Connect.asyncRequest(
method,url,{success:this.onloaded},postData
)
;break;
case 'jslb_ajax.js':
sendRequest(callback,data,method,url,async,sload);
;break;
}
}
前項で作成した org.jsgt.jKamo は、一応ネームスペースであると同時に、org.jsgt 配下のオブジェクトです。ここでは、このオブジェクトをどう使い、どんな役割を与えるかについて、とりあえずざっくりと考えておきます。(今後、作業を進めるうちに変化していくとは思いますが)
何はともあれ、org.jsgt.jKamoを使って、試しに
クロスブラウザ関数群の中の
showLAYER関数を機能をほとんどそのまま実装してみます。
サンプル
<script type="text/javascript">
//<![CDATA[
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
org.jsgt.jKamo= {
show: function(layName){
document.getElementById(layName).style.visibility='visible';
}
};
//]]>
</script>
<!--↓このリンクをクリックすると/////////////////////////////////-->
<p><a href="#" onclick="org.jsgt.jKamo.show('test0');return false">
クリックするとレイヤ−が現れます</a></p>
<!--↓このレイヤ−が現れます/////////////////////////////////////-->
<div id="test0"
style="position : absolute ;
left : 180px ;
top : 80px ;
font-size : 24pt ;
visibility : hidden ;">
ほらね
</div>
クロスブラウザ関数では、showLAYER('DOM要素のID名') で済んでいたものが、org.jsgt.jKamo.show('DOM要素のID名') という長い名前になってしまいました。ネームスペースを適用した結果とはいえ、これではちょっと面倒です。
また、以前から気にはなっていたのですが、引数に 'test0' のようなDOM要素のID名を与えると、同じ要素への処理が並ぶ時に、何度も 'test0' を繰り返し記述することになり不細工です。この際、oj.show() のようなオブジェクトを有効利用したスタイルにして、現場のコードをすっきりと減らしたいと思っています。
というわけで、この2点を、まず処置してみます。、
1.現場ではショートカットの利用
まず、org.jsgt.jKamo という長いネームスペースは、実際に使う現場ではショートカットに縮めてしまいます。
つまり、たとえば、
//org.jsgt.jKamoを作成後ショートカットを作る
var jk=org.jsgt.jKamo;
こうすると、org.jsgt.jKamo.show('DOM要素のID名') は、jk.show('DOM要素のID名') で済むようになります。
サンプル
もちろん、せっかく作成したネームスペースの外へ新たなメンバを用意するわけですから、名前の衝突には注意が必要ですが、この名前を付けるのは、ライブラリの作者ではなく、(この場合ならjkを用意するのは、)ライブラリを利用する自分自身です。
もし、その状況で自分自身が今書いているコード内の名前の衝突がわからない時は、ネームスペースの助けを求めるよりも休息などが必要かも知れません。
当然、単体のグローバルにはせずに、
var my={};
my.jk=org.jsgt.jKamo;
のような別のネームスペースを与えて管理する、といった書き方にするのも自由です。
サンプル
2.戻り値に機能を与える
次に、oj.show()のような書き方にする方法ですが、いろいろな手法はありますが、ここでは、戻り値にメソッド群を抱えたオブジェクトを使おうと思っています。
ただ、これは、他の方法との比較をちゃんと行っていないので、これを選んだ理由は特にありません;;。最近少し癖になっている書き方というだけなので、他の方法が、もし、もっと良いとわかれば変更するかも。あえて、言うなら、たぶん後で考えないといけない、機能追加の場面で多少楽ができそうな予感がしていることです。＜違うかも;;;
具体的には、こういうことです。
サンプル
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
org.jsgt.jKamo = function(layName){
return {
show: function(){
document.getElementById(layName).style.visibility='visible';
}
}
};
var jk=org.jsgt.jKamo;
こうしておくと、
jk('test0').show();
で動作するようになります。もし、 jk('test0') を何度も使うときは、 oj=jk('test0') とでもしておけば、予定通り、 oj.show() で動作するメソッドが完成します。
サンプル
こうなると、もう気づかれてしまったかもしれませんが、たとえば、ショートカット名を仮に $ とした時には、
var $=org.jsgt.jKamo;
$('test0').show();
こんな、jQueryのような使い方も可能になるわけです。今となっては、多くのライブラリと衝突する可能性が高いので、お勧めはしませんが(笑)。
ここまでできたら、あとは、下記のように、戻りオブジェクトリテラルの中へ、欲しいメソッドを列挙していけば、とりあえず、まぁ、それなりの仕組みはできあがり、すぐに、oj.show()、oj.hide()、oj.zindex(n)てな具合で使えるようになります。
return {
show: function(){
document.getElementById(layName).style.visibility='visible';
},
hide: function(){
document.getElementById(layName).style.visibility='hidden';
},
zindex: function(z){
document.getElementById(layName).style.zIndex=z;
}
}
でも、document.getElementByIdが鬱陶しいので、これはなんとかします。
つづく、、、 (
明日今日からお彼岸なので、たぶんゆっくりです)
今回のライブラリリメイクで使う、変数などの名前の衝突を回避する方法について簡単にメモしておきます。
一般的に再利用を目的とするコードには、グローバル変数は少ない方が良いわけですが、それは、おもに再利用する人がそのコードの作者とは限らないことによります。
ライブラリなどの再利用を目的とするコードにグローバルな変数や配列がいくつもある場合には、スクリプト内のそれらをすべて把握せずに利用すると、意図せずに大事なデータを書き換えてしまうリスクを抱え込むことになります。
しかし、それは、中身をよく知っている作者以外にとってはしんどい作業、というわけです。 (もちろん、作者でも時間が経つと、まるで他人のコードように見えたりすることもあります 笑;;)
たとえば、prototype.jsは、その便利さと引き替えに汎用性のハードルを上げてしまいました。いくつものグローバルメンバを利用してしまったことで、他のライブラリなどと組み合わせる際に、変数や関数などの名前の衝突が起こらないための労力を必要とします。
また、ネイティブなオブジェクトへprototypeしたことで、スコープのあらゆる場所へ、良くも悪くも問答無用でprototype.jsの独自メンバが顔を出します。
もちろん使い慣れれば、問題ないわけですけれど、今回作るライブラリは、prototype.jsが進んだ道と異なり、org.jsgt.jKamoオブジェクト配下にすべてを収める予定です。
この考え方は、YUIにおけるYAHOOオブジェクト、あるいは、jQueryのjQuery関数、Dojoのdojoオブジェクトなどと同じですが、命名規則が、インターネットのドメイン名に従っているという点が異なります。名前の重複を避け、一意性を保証したいということです。
なぜ、org.jsgt.jKamoなのか、というと、jsgt.orgのJavaScript++かも日記(jKamo)が作業場所だからです。
1.オブジェクトシステムを利用したネームスペース
JavaScriptの仕様には、ネームスペースという概念はありませんが、名前の衝突を回避するためのテクニックとして一般的に、JavaScriptのオブジェクトシステムを利用する方法が多く用いられています。
たとえば、次のようにHOGEオブジェクトを作成して、メソッドやプロパティなどのすべてのメンバをその配下へ収めてしまうことで名前の衝突を回避し、それをネームスペースと呼んでみる方法です。
var HOGE={};
もちろん、new Object()やnew function名()などで作ってもかまいません。
名前については、一意性を意識して、このサイトのドメイン名jsgt.orgを利用します。URIと違ってJavaScriptですので大文字小文字が区別されますから、一応、小文字に統一しておきます。(ただし、クラス名(コンストラクタ関数名)は大文字で始める方が一般的なので、たとえば、classではなくClassなどの方が良いかな、と思っています。)
というわけで、まず、jsgt.orgを
表現するネームスペース用のオブジェクトを作ってみます。
サンプル
var org={jsgt:{}};
alert(org) ; //[object Object]が表示されます
alert(org.jsgt) ; //[object Object]が表示されます
これで、オブジェクトorgとその下のオブジェクトorg.jsgtが生成されました。オブジェクトシステムに合わせるために、包括的な名前から順番に書いていきますので、もし、game.gr.jpならjp.gr.gameとしていたと思いますが、今回はjsgt.orgベースなので、org.jsgtとなります。
2.ネームスペースの衝突回避
そして、もし、すでにorgやorg.jsgtネームスペースが存在している場合には、もしかするとそれは、たとえば、orgやorg.jsgt下のjKamo以外のライブラリかもしれませんので(今はorg.jsgt下には存在しませんが)、上書きして壊したりしないように分岐すると、次のようになります。
if(!org)var org={};
if(!org.jsgt)org={jsgt:{}};
注:if(!org.jsgt)org={jsgt:{}};では、
odz さんのご指摘のようにorg以下を
破壊してしまうので、下記に修正。
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
これで、orgやorg.jsgtオブジェクトが存在すればそのままで、存在しなければ、新たにグローバルスコープへorg.jsgtを作成するようになります。
この分岐を行わずに、再度org.jsgtを生成するとどうなるかを、一応、参考までに確認してみます。
サンプル
var org={jsgt:{}};
org.jsgt.ClassA=1;
alert(org.jsgt.ClassA) ; //1が表示されます
var org={jsgt:{}};
org.jsgt.ClassB=1;
alert(org.jsgt.ClassA) ; //undefinedが表示されます
alert(org.jsgt.ClassB) ; //1が表示されます
最初の、org.jsgt.ClassAは、次のorg.jsgt.ClassBを定義されることで、undefinedになってしまいます。そこで、これに前述の処理を加えるとこうなります
サンプル
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
org.jsgt.ClassA=1;
alert(org.jsgt.ClassA) ; //1が表示されます
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
org.jsgt.ClassB=1;
alert(org.jsgt.ClassA) ; //1が表示されます
alert(org.jsgt.ClassB) ; //1が表示されます
これで、ClassB定義によってClassAを破壊することなく利用できるようになりました。もちろん、逆に、var org={jsgt:{}};と書いてしまうことですべてを初期化して始めることもできます。
最後に、今回のライブラリ名「jKamo」を追加して完成です。
if(!org)var org={};
if(!org.jsgt)org.jsgt={};
org.jsgt.jKamo= {};
つづく、、、
odz ( 2006年09月19日 11:28 )
別のライブラリが org.example を名前空間として使っていたら内容が全部吹っ飛ぶ気がするのですが、大丈夫でしょうか。
Bar ( 2006年09月19日 11:31 )
マイクロソフトがcom.msを使ってモルガン・スタンレーに文句を言われるのに500カノッサ。
高橋 ( 2006年09月19日 11:37 )
あとで、追記した、「2.ネームスペースの衝突回避 」でどうですか?
odz ( 2006年09月19日 11:49 )
いや、普通にトレースするとわかると思うんですけど、
if (!org.jsgt) org={jsgt:{}};
ですから、org.example がどっかに消えてしまいませんか？
高橋 ( 2006年09月19日 12:13 )
あ〜、ほんとだ。言ってることと書いてるコードが全然違いますね(^^;;有り難うございます。修正しました。
odz ( 2006年09月19日 12:14 )
やるなら
if (!org.jsgt) org.jsgt = {};
でいいじゃないかと思いますが・・・
odz ( 2006年09月19日 15:07 )
トラックバックをクリックすると404と表示されるだけなんですが・・・うちからだけでしょうか？
高橋 ( 2006年09月19日 15:30 )
修正しました。トラックバックURL内の◎を手動で置換えないと使えない、という不便な仕組みですが、スパム対策のひとつなので、お手数ですがよろしくお願い致します。
(←clickで入力欄open)
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
ページ全体の読み込み完了まで少々お待ちください...