2012年2月25日

JavaScriptコードをトークンに分解する正規表現

view plainprint?
  1. /(\/\*[\s\S]*?\*\/|\/{2,}[^\r\n]*(?:\r\n|\r|\n|)|"(?:\\[\s\S]|[^"\r\n\\])*"|'(?:\\[\s\S]|[^'\r\n\\])*'|(?:(?:\/(?!\*)(?:\\.|[^\/\r\n\\])+\/)(?:[gimy]{0,4}|\b)(?=\s*(?:(?!\s*[\/\\<>*+%`^"'\w$-])[^\/\\<>*+%`^'"@({[\w$-]|===?|!==?|\|\||[&][&]|\/[*\/]|[,.;:!?)}\]\r\n]|$)))|<([^\s>]*)[^>]*>[\s\S]*?<\/\2>|>>>=?|<<=|===|!==|>>=|\+\+(?=\+)|\-\-(?=\-)|[=!<>*+\/&|^-]=|[&][&]|\|\||\+\+|\-\-|<<|>>|0(?:[xX][0-9a-fA-F]+|[0-7]+)|\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[1-9]\d*|[-+\/%*=&|^~<>!?:,;@()\\[\].{}]|(?![\r\n])\s+|(?:\r\n|\r|\n)|[^\s+\/%*=&|^~<>!?:,;@()\\[\].{}'"-]+)/g  
これがパターンです。

例えば、
view plainprint?
  1. /* comment */  
  2. var regex = /[\/\\"']*/g;  
  3. var str = "hoge\"fuga'\  
  4. piyo";  
  5. // 'comment'  
  6. var arr = [  
  7.     0x0FFF, 1e8, 0, 12345,  
  8.     3.524603890386048e+24,  
  9.     0.0006215, 0666 // (classic mode)  
  10. ];  
  11. var i = 0;  
  12. var e4x = <>{{///*E4X*///}}</>;  
  13. var xml = <root><hoge fuga="piyo" /></root>;  
  14. var ほげ = '/*"ほ//げ"*/';  
  15. var $var = re.test(str) && arr[2] || (i+++i) === 1;  
このコードを文字列として code.match(pattern) すると、以下の要素を持った配列が得られます。
view plainprint?
  1. 0: /* comment */  
  2. 1:   
  3.   
  4. 2: var  
  5. 3:    
  6. 4: regex  
  7. 5:    
  8. 6: =  
  9. 7:    
  10. 8: /[\/\\"']*/g  
  11. 9: ;  
  12. 10:   
  13.   
  14. 11: var  
  15. 12:    
  16. 13: str  
  17. 14:    
  18. 15: =  
  19. 16:    
  20. 17: "hoge\"fuga'\  
  21. piyo"  
  22. 18: ;  
  23. 19:   
  24.   
  25. 20: // 'comment'  
  26.   
  27. 21: var  
  28. 22:    
  29. 23: arr  
  30. 24:    
  31. 25: =  
  32. 26:    
  33. 27: [  
  34. 28:   
  35.   
  36. 29:     
  37. 30: 0x0FFF  
  38. 31: ,  
  39. 32:    
  40. 33: 1e8  
  41. 34: ,  
  42. 35:    
  43. 36: 0  
  44. 37: ,  
  45. 38:    
  46. 39: 12345  
  47. 40: ,  
  48. 41:   
  49.   
  50. 42:     
  51. 43: 3.524603890386048e+24  
  52. 44: ,  
  53. 45:   
  54.   
  55. 46:     
  56. 47: 0.0006215  
  57. 48: ,  
  58. 49:    
  59. 50: 0666  
  60. 51:   
  61.   
  62. 52: ]  
  63. 53: ;  
  64. 54:   
  65.   
  66. 55: var  
  67. 56:    
  68. 57: i  
  69. 58:    
  70. 59: =  
  71. 60:    
  72. 61: 0  
  73. 62: ;  
  74. 63:   
  75.   
  76. 64: var  
  77. 65:    
  78. 66: e4x  
  79. 67:    
  80. 68: =  
  81. 69:    
  82. 70: <>{{///*E4X*///}}</>  
  83. 71: ;  
  84. 72:   
  85.   
  86. 73: var  
  87. 74:    
  88. 75: xml  
  89. 76:    
  90. 77: =  
  91. 78:    
  92. 79: <root><hoge fuga="piyo" /></root>  
  93. 80: ;  
  94. 81:   
  95.   
  96. 82: var  
  97. 83:    
  98. 84: ほげ  
  99. 85:    
  100. 86: =  
  101. 87:    
  102. 88: '/*"ほ//げ"*/'  
  103. 89: ;  
  104. 90:   
  105.   
  106. 91: var  
  107. 92:    
  108. 93: $var  
  109. 94:    
  110. 95: =  
  111. 96:    
  112. 97: re  
  113. 98: .  
  114. 99: test  
  115. 100: (  
  116. 101: str  
  117. 102: )  
  118. 103:    
  119. 104: &&  
  120. 105:    
  121. 106: arr  
  122. 107: [  
  123. 108: 2  
  124. 109: ]  
  125. 110:    
  126. 111: ||  
  127. 112:    
  128. 113: (  
  129. 114: i  
  130. 115: ++  
  131. 116: +  
  132. 117: i  
  133. 118: )  
  134. 119:    
  135. 120: ===  
  136. 121:    
  137. 122: 1  
  138. 123: ;  
そもそもシンタックスハイライトのほうが崩れてる…。

jsFiddle でテストできます。

文字列は、改行の前にバックスラッシュ (\) がある場合も対応してみました。
セミコロン挿入もあって、スペースと改行は区別されます。

E4X はシンプルなのだけ対応してます。
view plainprint?
  1. var x = <root<div id={(function() {  
  2. return '</root>' ? 'hoge' : 'fuga';  
  3. }())}></root>  
こういうのは無理っぽい。あとネストとか。


match() に g つけて match(/(...)/g) がこんな便利だなんて…。


投稿者 時刻: 21:27 0 コメント コメントを投稿する
ラベル: , , , , ,

2012年2月24日

同期処理を非同期に変換-JavaScriptライブラリPot.js+PotLite.jsリリースノート






Pot.js 1.14 と PotLite.js 1.31 リリースしました。



その前に Pot.js + PotLite.js リファレンス が完成しました (ということにしたい) ので、
お時間あるときにでも覗いてみてください。

結局 /test-for-new-design/ に置いてあるのはファイル消すのも嫌だし
全部リダイレクトさせるようにしました。



Pot.js 1.14 と PotLite.js 1.31 では、Pot.deferreed() ていう関数つくりました。

deferreed は、関数の中の for, for-in, for-of, do, while 等の同期ループを
Pot.Deferred.forEach() などの非同期イテレータに置き換えて関数を再定義します。

前の記事「JavaScript whileループとPot.Deferred.forEverイテレータでCPU使用率を比較」 でも書いてますが、
Pot.js ライブラリのイテレータは CPU の負荷なく実行できます。

ループを置き換えることで、巨大な文字列を扱ったり、ループ回数が未知な処理をする際に
重さについて考えなくて済むようにと、作ってみまみた。

もともとは deferrize() という関数から派生しています。

関数内のコードをトークン単位に分解して、
単純にトークンの数が多いループブロックをメインループとして解析して、
その文に見合った Pot.Deferred イテレータを割り当ててるんですが
ぜんぜん思ったよりたいへんで まだ複雑なものは対応できてないです。
とくに三項演算子 (?:) と function のコンボとか、E4X とかまでは今後の課題。。 にしたいけど、
そこまでしてたらライブラリの方向性違うんじゃないのって思ってしかたないです。

deferreed の 1 コールで zip.deflate 圧縮とかファイル規模への md5 とか非同期化できたら楽そう。

例えば以下のような関数が

view plainprint?
  1. // 文字列を charCode からなる配列にして返す関数  
  2. var toCharCode = function(string) {  
  3.     var result = [];  
  4.     for (var i = 0; i < string.length; i++) {  
  5.         result.push(string.charCodeAt(i));  
  6.     }  
  7.     return result;  
  8. };  
  9.   
  10. // deferreed により for 文を非同期イテレータにした関数を生成  
  11. var toCharCodeDefer = Pot.deferreed(toCharCode);  
  12.   
  13. // 例えば toCharCodeDefer は内部で以下のような感じに変換される  
  14. //  
  15. //  function(string) {  
  16. //      var result = [];  
  17. //      return Pot.Deferred.repeat(string.length, function(i) {  
  18. //          result.push(string.charCodeAt(i));  
  19. //      }).then(function() {  
  20. //          return result;  
  21. //      });  
  22. //  };  
  23. //  
  24.   
  25. // Pot.Deferred インスタンスが返るため then() などで繋げられる  
  26. toCharCodeDefer('abc').then(function(res) {  
  27.     Pot.debug(res); // [97, 98, 99]  
  28. });  
  29.   
  30. // この変化により、巨大な文字列でも負荷を分散させ実行できる  
  31. var largeString = new Array(100000).join('abcdef');  
  32.   
  33. // 'slow' などの指定が可能  
  34. toCharCodeDefer.slow(largeString).then(function(res) {  
  35.     Pot.debug(res.length); // 599994  
  36. });  

あと、プラグインみたいなことしたくて Pot.Plugin ての作ったんですが
なにか違うような気がしてならないです。

プラグイン = ただのオブジェクト
になってしまった。

Pot.addPlugin() という関数で任意の関数とかオブジェクトを登録。
Pot.removePlugin() で削除。
Pot.hasPlugin() で確認、Pot.listPlugin() で列挙。

addPlugin した関数は Pot.xxx でアクセスできる。
・・・それって Pot.myFunc = function() {}; でいいじゃん! てなったので、
以下のようにしてみました。
view plainprint?
  1. var string = '\t abc\n \t ';  
  2.   
  3. // オリジナルの Pot.trim()  
  4. debug(Pot.trim(string)); // 'abc'  
  5.   
  6. // プラグイン関数の登録により Pot.trim() を上書き  
  7. Pot.addPlugin('trim', function(s) {  
  8.     return s.replace(/^ +| +$/g, ''); // スペース (U+0020) だけ削除するようにする  
  9. });  
  10.   
  11. // 登録した Pot.trim()  
  12. debug(Pot.trim(string)); // '\t abc\n \t'  
  13.   
  14. // プラグインの trim を削除  
  15. Pot.removePlugin('trim');  
  16.   
  17. // 元に戻る  
  18. debug(Pot.trim(string)); // 'abc'  
元に戻せる (むしろ消えない) ので、
一時的に挙動を変えたい時とか便利かもしれないです。
あと、Pot.globalize() したときに プラグイン関数もグローバル化します。
Pot.globalize() しなくても with (Pot) {...} でもいい気がしてきました。

プラグインの詳細は
Pot.Plugin リファレンス あたりから参照ください。

マニュアルは英語版も含めてちょっとずつ進めています。

以下はレポジトリとかのリンクなど。

Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。
PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

その他の情報についてはマニュアル/マニュアルからのリンク から参照ください。



レポジトリ



その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。


投稿者 時刻: 22:11 0 コメント コメントを投稿する
ラベル: , , , , , , ,

2012年2月18日

Tumblrのリブログ/ポストのリミット残数が確認できるTomblooパッチ

Firefox アドオン Tombloo のパッチです。

機能概要

Tumblr でリブログ/ポスト できる残りリミット数を表示する Tombloo パッチです。


前々から作ろうとしてて、でも正確に計算できないと思って困ってましたが
べつに ちょっとくらい違ってもいいやって作りました。

リセットされる正確な時間がずっとわからずに
16:00 なのか 14:00 なのか 14:15 なのか
いろんな違う情報があって曖昧です。
先日、このパッチのテストのため リミットまでリブログして
次の日の 14:00 過ぎにポストしたらリセットされてました。
タンブリストが 14:00 だよ! て言ってくれたので間違いないと思います。

それと、タイムゾーンで考えると 14 が自然な数値だともわかります。
Tumblr, Inc. はニューヨークにあります。
ニューヨークのタイムゾーンは EST (Eastern Standard Time) で、
GMT -5 時間になり、 日本との時差は -14 時間です。
人間が考えそうなリセット時間はおそらく 0:00 ですので、
日本ではちょうど 14:00 にリセットされることになります。

そんなわけでパッチでは 14:00 にリセットされる設定になってます。

このパッチはテストに日数がかかるので、まだ完全な状態じゃないかもしれません。
そもそも Tombloo 以外からリブログしたら、その数だけ狂っていきます。
とは言っても、http://www.tumblr.com/new/photo を見ているので
ある程度リミットに近くなったら整合性はとれるはずです。


機能:

「ポスト完了時に通知メッセージを表示するパッチ」と連携 は、
Tumblr にリブログ/ポストすると、以下のような Post と Reblog の表示が付くようになります。


上のメッセージを表示させるパッチは、
「ポスト完了時に通知メッセージを表示するパッチ」 からインストールできます。


修正や改善策などあれば地味にアップデートしていきます。


問題等あればパッチ削除してください。

パッチの削除がわからなかったら、
パッチ一括アップデートぱっち で削除もできます。

パッチ (Download or Update):

インストール/アップデート:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール/アップデート。


※直接右クリックからインストールできない場合:

できない場合は

「Tomblooパッチのインストールに失敗しなくなるパッチ」 のパッチ/記事をインストールもしくは参照ください。

レポジトリ



投稿者 時刻: 5:40 0 コメント コメントを投稿する
ラベル: , , , , , , , , ,

2012年2月11日

JavaScript whileループとPot.Deferred.forEverイテレータでCPU使用率を比較-Pot.js+PotLite.jsリリースノート

Pot.js 1.13 と PotLite.js 1.30 リリースしました。

Pot.js 1.13 と PotLite.js 1.30 では、主に内部ループ処理を大幅に高速化しました。
(そろそろ ChangeLog 作らないとまずいかも…)

あとは、変数宣言とか 例の (function(){}()) とか (結局直してる)
細かい修正などです。

先日、Hacker News や Echo JS で Pot.js が紹介されました (ありがとうございます)。
でもアクセスが今までの 1000 倍くらいになって、すごいことになってちょっとビビった。
(API サーバのほうは適当に調節しておいたので大丈夫だった。よかった。。)


それで Pot.js の本来の存在意義ですが、

実行環境の CPU に負荷をかけることなく JavaScript が実行できる。

といったことが本来の目的であり、常に追求している目標でもあります。
Deferred が重点にとらわれがちですが、Pot.Deferred はそれの足がかりであり、
Pot.Deferred だけがライブラリの中核ではないので、いろいろ使ってみてください。

新しいデザインのリファレンス

現在、新しいデザインでリファレンスを書き直しています。


前は 全部で 1 ファイルになっちゃってて、どんどん重くなるし更新もやり難くて
どうしようもなかったのですが、今回は 各ページを非同期読み込みにして
英語版と日本語版で見れるようにして、戻るボタンとかも再現したり、がんばってます。

でもまだ作成途中です (2012-02-11 現在)。

ある程度完成したら 本来の /index.html に移動させようと思ってるんですが、
先ほどの Echo JS などが /test-for-new-design/ にリンクしちゃってるもんだから
どうしようかと考え中。(たぶん リダイレクトか、もうこのままでいいか…)。

CPU 比較を実行

jsFiddle のほうで
JavaScript の while ループと、Pot.js の非同期イテレータとで CPU 使用率の比較を書いてみました。
前に書いた Pot.js イテレータと jQuery.each と for ループの CPU 使用率をグラフで比較
と同じ事ですが、実際に実行できます (ただし負荷テストなのでブラウザクラッシュに気をつけてください)。
もっとも最近のブラウザはループでクラッシュしないと思いますが。。

CPU 使用率は、Web ブラウザからの JavaScript では取得できないと思うので、
CPU モニタリングするアプリとか、
なければ Win ならタスクマネージャから「パフォーマンス」→ 「CPU 使用率」
を見ながら実行してみるとわかりやすいと思います。


今回は while 文と Pot.Deferred.forEver の比較ですが、
Pot.js 非同期イテレータは CPU 負荷が一定量に抑えられたループが可能になっていると思います。
ただし、この例のような処理だと実行時間はある程度伸びてしまいます。

実行時間に関しては 速度調整 が可能なので、処理に応じたスピードを選ぶこともできます。
(このへんは今後改善したいです)。

サンプルのソースコード

jsFiddle でも確認できますが、今回使用したサンプルのソースコードです。
ループ処理の部分だけ抽出しています。

JavaScript while ループを使ったソースコード:
view plainprint?
  1. // while で同期ループして圧縮  
  2. compressSync : function(s) {  
  3.     var a = 53300, b, c, d, e, f, g = -1,  
  4.         h, i, r = [], x = String.fromCharCode;  
  5.   
  6.     s = new Array(a--).join(' ') + s;  
  7.     while ((b = s.substr(a, 256))) {  
  8.         for (c = 2, i = b.length; c <= i; ++c) {  
  9.             d = s.substring(  
  10.                 a - 52275,  
  11.                 a + c - 1  
  12.             ).lastIndexOf(b.substring(0, c));  
  13.             if (!~d) {  
  14.                 break;  
  15.             }  
  16.             e = d;  
  17.         }  
  18.         if (c === 2 || c === 3 && f === g) {  
  19.             f = g;  
  20.             h = s.charCodeAt(a++);  
  21.             r.push(  
  22.                 x(h >> 8 & 255),  
  23.                 x(h & 255)  
  24.             );  
  25.         } else {  
  26.             r.push(  
  27.                 x((e >> 8 & 255) | 65280),  
  28.                 x(e & 255),  
  29.                 x(c - 3)  
  30.             );  
  31.             a += c - 1;  
  32.         }  
  33.     }  
  34.     return r.join('');  
  35. }  

Pot.js 非同期イテレータ (今回は Pot.Deferred.forEver) を使ったソースコード:
view plainprint?
  1. // Pot.js 非同期イテレータで圧縮  
  2. compressAsync : function(s) {  
  3.     var a = 53300, b, c, d, e, f, g = -1,  
  4.         h, i, r = [], x = String.fromCharCode;  
  5.   
  6.     var deferred = new Pot.Deferred();  
  7.   
  8.     s = new Array(a--).join(' ') + s;  
  9.   
  10.     // whileループを forEver に置き換え  
  11.     Pot.Deferred.forEver[SPEED](function() {  
  12.   
  13.         b = s.substr(a, 256);  
  14.         if (!b) {  
  15.             throw Pot.StopIteration;  
  16.         }  
  17.   
  18.         for (c = 2, i = b.length; c <= i; ++c) {  
  19.             d = s.substring(  
  20.                 a - 52275,  
  21.                 a + c - 1  
  22.             ).lastIndexOf(b.substring(0, c));  
  23.             if (!~d) {  
  24.                 break;  
  25.             }  
  26.             e = d;  
  27.         }  
  28.         if (c === 2 || c === 3 && f === g) {  
  29.             f = g;  
  30.             h = s.charCodeAt(a++);  
  31.             r.push(  
  32.                 x(h >> 8 & 255),  
  33.                 x(h & 255)  
  34.             );  
  35.         } else {  
  36.             r.push(  
  37.                 x((e >> 8 & 255) | 65280),  
  38.                 x(e & 255),  
  39.                 x(c - 3)  
  40.             );  
  41.             a += c - 1;  
  42.         }  
  43.     }).then(function() {  
  44.         deferred.begin(r.join(''));  
  45.     }, function(err) {  
  46.         deferred.raise(err);  
  47.     });  
  48.     return deferred;  
  49. }  

同期か非同期かの違いがありますが、
単に、メインの while 文を Pot.Deferred.forEver に変えてるだけです。
forEver は、StopIteration が throw されるまで、永久にループする関数です。

あと、この関数は LZ77アルゴリズムによる圧縮関数をJavaScript最短コードで | 圧縮電子精神音楽浮遊構造体 (見れないかも)
で作ったソースコードをちょっとだけ手直ししたものです。
文字列を圧縮解凍します。

Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。

PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

マニュアルは上に書いたように 2012-02-11 現在、まだすべてのオブジェクトの解説ができてません。。

その他の情報についてはマニュアル/マニュアルからのリンク から参照ください。

レポジトリ




その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。


投稿者 時刻: 22:15 0 コメント コメントを投稿する
ラベル: , , , , , , , , , ,
登録: 投稿 (Atom)