NO TEST, NO LIFE. NO DOC, NO LIFE - latest log
uupaa.js や mofmof.js には {@hoge 〜 }@hoge のようなコードブロックを切り落として Minify する機能があるので、「ソースコードにテストもドキュメントも全部埋め込むことが可能だな〜」って3年程前から考えてました。 そこで、Function.prototype.spec というメソッドを追加し、これにスペックを書き貯めたらどうだろうか(?)とか考えました。 たとえば Array.range(1,7) で [1..7] 的な連続した数値の配列を生成する Array.range 関数があったとすると // Array.range - range generator function Array_range(begin, // @param Number: begin end, // @param Number: end filter) { // @param
最適化前後のコードを一緒に配布し技術共有を促進する(BaseCode) - latest log
数ヶ月前までは、Google Chrome に実装されている JSON よりも、お手製の msgpack.js のほうが速かったりした事もありました。でも気がついたら、いつの間にか Google Chrome 9 dev にぶっちぎられていました。 で、速度差を挽回すべくコードをいじりだして、ふと思ったんです。いじり倒す前のベースとなるコードは取っとくと、後で役に立つんじゃないか? と。速度差の比較材料になるし、ベリファイも取れるし、いいことあるんじゃないかな? と。 たとえば、Hash を MessagePack にエンコードする処理は、以下(↓)のコードが原型になりますが、 // 先にサイズを求める if (Object.keys) { size = Object.keys(mix).length; } else { for (i in mix) { mix.hasOwnPropert
uupaa.js と jQuery を機能を中心にざっくりと比較 - latest log
Classの継承についてサンプルを追記しました。 jQuery の特徴的な構文を uupaa.js で表現する方法を追記しました。 デバッグ支援機能について追記しました。 特徴 uupaa.js jQuery 初版 version 0.1 (2008-06-07) version 1.0 (2006-10-27) 最新版 version 0.8 (2010年末を予定) version 1.4.2 (2010-02-19) ライブラリの目標 WebOSのフロントエンド 不明 本来の用途 WebOS / WebApp DOMの操作とサイトの装飾 使われ方 導入実績なし 小〜中規模サイト / ポータルサイト等 想定されるコアユーザ層 エンジニア デザイナー / コーダー / エンジニア 名前空間 uu (1つ) jQuery と $ (2つ) ライブラリによる識別子プリフィクスの予約 uu また
Array に Hash を被せる(AOH) - latest log
配列を返す関数は、素の配列を返すよりも、first や last などの付加情報も一緒に返すといいんじゃないかな。 というお話です。 たとえば FakeArray → Array NodeList や arguments は FakeArray(Array Like Object) と呼ばれる擬似配列です。 FakeArray には join() や push() などの便利なメソッドがないため、FakeArray を一旦 Array に変換する(↓)toArray のような関数が、どうしても必要になります。 # Array.prototype.slice.apply(fakeArray) を使うケースは説明しないよ 素の Arrayを返す toArray 関数 function toArray(fakeArray) { // @param Array/FakeArray: // @ret
Flashのように滑らかなアニメーションを実装するには(uupaa.js vs jQueryデモ) - latest log
JavaScript で Flash のような滑らかなアニメーションを行うためには、クロスブラウザな知識の他に、GC(ガベージコレクション)や「どうすれば安定した品質がだせるのか」といったスキルが求められます。 # GC の話は WEB+DB PRESS 57 でちょっと書いてます。 派手目なアニメーションが目的で jQuery を採用している方もいるとは思いますが、実は uupaa.js でも アニメーションや easing が利用できるんです。あらびっくり。 ただ「機能がありますよ〜」だと、さみしいので みんな大好き jQuery と uupaa.js のアニメーションの品質の違いが分かるようなデモを作成してみました。 iPhone/iPad や、IE6〜IE8で opacity を切り替えて見ると、ハッキリと違いが分かると思います。 http://jsdo.it/uupaa/uufx
WebStorageで、ワンライナー IE8, IE9pp3 ブラクラ - latest log
localStorage.removeItem() 以外にも、localStorage.setItem(); や localStorage[key] = value; でも落ちるようです(コメント欄参照) <input id="A" type="text" value="" /><script>localStorage.removeItem(A.value)</script> 上記のコードをIE8で実行すると、タブクラッシュ → 復元 → タブクラッシュ → 復元機能停止 が発生します。 IE9pp3ではブラウザがクラッシュします。 回避するには テキストフィールドに値を入れるか、A.value を文字列型にキャストすることにより回避できます。 <input id="A" type="text" value="hoge" /><script>localStorage.removeItem(
IE8の開発者ツールはスクリプトの実行結果に悪影響を及ぼすことがある - latest log
IE8 で以下のページを表示し開発者ツールで[デバッグ]を開始すると debugger; の位置で自動的に停止します。 # debugger はハードブレイクポイントです。大抵のブラウザで利用可能です。 <!DOCTYPE html><html><head><title></title> <style> div { border: 1px solid gray; width: 200px; height: 200px } </style> <script> window.onload = function() { var node = document.createElement("div"); debugger; document.body.appendChild(node); }; </script></head><body> </body></html> ここで、[コンソール]タブを
textContent を使うと Opera10.60 がどんどん重くなる - latest log
追記 http://jsdo.it/uupaa/u0QX に最小化したコードを載せました 今回のケースでは、条件(1)と(2)を満たす場合に、どんどん重くなっていくようです。 function bench() { // (1) nodeList を関数内部で毎回取得している var nodeList = document.getElementsByTagName("li"); i = 0, iz = nodeList.length; for (; i < iz; ++i) { // (2) textContent に代入している nodeList[i].textContent = i; } } 本文 原稿書きの資料用に、最新のブラウザでベンチマークを取得していたところ、Opera10.60 のスコアだけがどんどん悪くなる(遅くなる)ケースがあることに事に気が付きました。 条件を絞り込んでい
uupaa.js の これまでと これから - latest log
uupaa の中の人は28ヶ月前にペットショップからウーパールーパーを2匹連れ帰りました。 同じ日に、「作れども作れども UI 速くならず、じっとコード見る」な感じから脱却するため、中の人は、"uupaa" という固有名詞がWeb上に存在しないことを確認し uupaa.js というオレオレライブラリを作りはじめました。 なぜ当時、百花繚乱な他のjsライブラリを使うことを考えなかったか… 飲みながらじゃないと言えないっ JavaScript勉強前(2年ぐらいまえ)は… JavaScriptを真面目に勉強するまえだと、これで精一杯でした CoverFlow - http://pigs.sourceforge.jp/old_uupaa/uupaa.js.0.3.18/demo/coverflow/coverflow.htm 画像が表示されない場合は何度かリロードしてください(当時はこういうのでも
String.toJSON(), JSON.stringify(), JSON.parse() の実装比較一覧 - latest log
"あa".toJSON() JSON.stringify("あa") JSON.stringify({"あa": null}) Google Chrome6(dev) "あa" ""\u3042a"" "{"\u3042a":null}" Safari5 not impl ""あa"" "{"あa":null}" Opera10.60β not impl '"あa"' '{"あa":null}' Firefox3.6.3 "あa" ""あa"" "{"あa":null}" IE8 "あa" ""\u3042a"" "{"\u3042a":null}" IE6, IE7 not impl not impl not impl JSON.parse('"あa"') JSON.parse('"\u3042a"') Google Chrome6(dev) "あa" "あa" Safari5 "あa"
msgpack.js RC - latest log
MessagePack 発案者様から「末席あいてますよ」とお言葉をいただいたので、uupaa.js に一切依存せず、ソースコード単体で利用可能なスピンオフ版を作成しました。 Many bugfix(especially - IEEE754) Test case was enhanced msgpack codec test msgpack download / upload demo benchmark msgpack vs json Download and Upload functions msgpack.download(url, option, callback) -> download binary data by GET method. msgpack.upload(url, option, callback) -> upload base64 data by PUT meth
Web Workers用と通常のJavaScript用のコードを共存させる - latest log
Web Workers の調べ物してました。 Web Workers は、Google Chrome 4+, Firefox3.5+ , Safari4+ で既に利用可能です。 Google Chrome5 では、Web Workers 内で Web Socket を動かすこともできます。 js の基本であり鬼門といえば this オブジェクト 各ポイントで this.toString() や self.toString() を行い、this や self が何を指しているのか調べました。 <script> var globalScope = this.toString() </script> // WebWorkers.js var workersGlobalScope = this.toString(); var self1 = self.toString(); onmessage =
MessagePack + WebWorkers - latest log
追記 @os0X さんと @edvakf さんからアドバイスをいただいたので、本文とコードを修正しました。 postMessageが文字列に限定されているのは旧仕様で、Firefoxや最近のWebKit(Chrome5とか)はオブジェクトをやり取りできると思います via @os0X http://twitter.com/edvakf/statuses/15644433920 自分でも試してみました。 http://javascript.g.hatena.ne.jp/edvakf/20100607/1275931930 via @edvakf http://twitter.com/os0x/statuses/15621293442 本文 昨日の日記の続きです。 IE9 と Opera で動くようになり、ちょっと速くなり、WebWorkers でデコードするモードを追加しました。 http:
JavaScript で MessagePack を実装してみた - latest log
140文字を超えちゃうので、こちらで。 id:viver さんの MessagePack を JavaScript で実装してみました。 HOT TO USE <script src="misc/msgpack.js"></script> <script src="misc/utf8.js"></script> <script> var pack = msgpack.pack("こんにちはこんにちは"); alert(msgpack.unpack(pack)); // こんにちはこんにちは </script> 現時点の仕様 / 制限事項 仕様 msgpack.pack(data:Mix):ByteArray で、data に指定されたオブジェクトをエンコードし、ByteArray( [数値, ...] ) を返します。 文字列は UTF8 な raw data として数値化します。 エンコ
JavaScript で C++ っぽいクラスを実装してみた - latest log
js で、C++ ライクなクラス コンストラクタ(init)とデストラクタ(fin)が使える 生成は 親親⇒親⇒子, 廃棄は子⇒親⇒親親 の順で実行 デストラクタ(fin)を明示的に呼ぶと、インスタンスの全てのプロパティが null で上書される(使えなくなる)。 window.onunload で、オートデストラクト 三階層まで継承できる(子<親<親親) uu.Class("B : A", {}) や uu.Class("C < B", {}) で簡単に継承できる 継承が不要なら uu.Class("C", {}) で素のクラスを定義できる 下位のクラスから上位のクラスのメソッドが呼べる this.superMethod(arguments.callee, "呼び出すメソッド名", var_args...) または this.superMethod(呼び出し元のメソッド名, "呼び出すメ
arguments と Function.apply(this) を上手に扱う - latest log
追記: apply("add string") で何が渡ってるのか見てみました。 Chrome以外のブラウザは new String("add string") が渡されてました function func1(var_args) { func2.apply("add string", arguments); // this に "add string" そのものを渡す } function func2(var_args) { alert("typeof this = " + typeof this); if (this instanceof String) { alert("this instanceof String"); } alert(this); // -> "add string" } typeof this this instanceof String Google Chrom
理由がない限り、Array.join("") による文字列連結は使わないほうがいいみたい - latest log
JavaScript の勉強を開始したときに「文字列の連結には Array.join() を使え」といった記事を見た覚えがあります(ソース失念したけど、 Operaの技術文書だった気がする ⇒ IE の技術文書だったかも)。 一年ほど信じてて、念のためベンチとってみたら「うそやーん」でした。ってお話。 ベンチの条件は、 3種類の文字列連結方法を試す 1. + Operator 2. String.concat() 3. Array.join("") 文字列の要素数を 11個 と 55個で試す <!doctype html><html><head><title></title> </head><body> <script> window.onload = function() { var now = +new Date, lp = 100; while (lp--) { job(); } d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
uuAltCSS.js をリリースしました。 - latest log