実践JavaScriptリファクタリング

2005-10-06 22:52 | WriteBacks (23) |
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。
例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。

短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。

グローバル関数を定義

2年前なら、多分こういう具合だった。
//ふつうに関数として定義する
function x(str,num){
    var tmp = "";
    for(var i=0;i<num;i++){
        tmp += str;
    }
    return tmp;
}
x("abcde",80)

Stringのメソッドとして定義

1年前だとこんな感じ。
//Stringのメソッドとして定義する
String.prototype.x = function(num){
    var tmp = "";
    for(var i=0;i<num;i++){
        tmp += this
    }
    return tmp;
}
"abcde".x(80)

最近になって短くかけるところはなるべく短く書くようにしている。
//forの初期化ついでにtmpも宣言、{}を省略
String.prototype.x = function(num){
    for(var i=0,tmp="";i<num;i++) tmp += this;
    return tmp
}

こんな具合。見た目がすっきりする。

配列を使うようにする

ちょっとパフォーマンスが気になるので、高速化してみる。
文字列を加算していくのは、計算の途中で、
abcde、abcdeabcde、abcdeabcdeabcde
という文字列オブジェクトがその都度生成されていくのでメモリにやさしくない。
巨大な文字列の連結にはjoinを使ったほうが良い。数が大きくなると速度に差が出てくる。
//配列にpushしてjoin
String.prototype.x = function(num) {
    var tmp = [];
    for(var i=0;i<num;i++){
        tmp.push(this)
    }
    return tmp.join("")
}
//短く書くとこうなる
String.prototype.x = function(num){
    for(var i=0,tmp=[];i<num;tmp[i++]=this);
    return tmp.join("")
}

メソッドを使いまわす←いまここ

配列を埋めるArray#fillを作って、使いまわすようにする。
Array.prototype.fill = function(v){
    for(var i=0;i<this.length;this[i++]=v);
    return this
}
String.prototype.x = function(num){
    return Array(num).fill(this).join("")
}
"abcde".x(80)

これでString.prototype.xは、一行に収まった。
長さ80のArrayを"abcde"で埋めて連結する、と、意味そのままのコードになる。

もしも、あらゆるforループや一時変数を排除したいならば、次のように書くこともできる。
Array.prototype.fill = function(v){
    return this.map(function(){return v})
}
String.prototype.x = function(num){
    return Array(num).fill(this).join("")
}

まあ、どのみちArray.prototype.mapを自前で定義するならforループが必要ってことにはなるんだけど。
これは"abcde".x(10000)だったら1万回function(){return v}が呼ばれるので、動作が遅くなる。

※Array.prototype.mapはFirefox1.5でサポートされる新しいArrayのメソッドを参照。

まとめ

ビルトインオブジェクト拡張してしまうというのは、まあ行儀悪いと言えば行儀悪いんだけど、JavaScriptのprototypeベースとかオブジェクト指向とかの仕組みを理解するのには多分一番の近道なんじゃなかろうか。と思う。

Edit

WriteBacks

[IT]最速インターフェース研究会 :: 実践JavaScriptリファクタリング

勉強になりそうなので、メモ。

Posted by ノンセクションの135 at 2005/10/07 (Fri) 13:00:34

[JavaScript] ”abc”.x(2) -&gt; ”abcabc”

配列に続いて、文字列の乗算メソッドも実装してみましょう。ただし、全然違うアルゴリズムを用います。 [http://kaoriya.net/:title=KaoriYa.net] さんの BBS ブラウザ ”Chalice” の文字列乗算関数 (AL_string_multiplication in alice.vim) からほぼそのまま拝借しています。 どういう理屈か説明しますと、要はビット演算なんですね。1 回のループで要素を倍のサイズに、なおかつループカウンタを 2 で割っています。このこと ...

Posted by (new Hatena).blog() at 2006/04/29 (Sat) 16:41:26

[PHP]文字列連結に配列を使うと遅い

以前、最速の人が、JavaScriptでは文字列連結に配列を使ったほうが高速と言っていたので、ああそういうもんかなと思って、PHPでも無意識に使っていた。

で、ふと思い立ってPHPで実験してみたら、PHPではどうやら配列作ってjoinのほうが文字列連結演算子より遅かった。以下コード。
<?php

define('COUNT', 1000000);

function test1() {
$str = "";
for($i = 0; $i < COUNT; $i++) {
$str .= "" . $i % 50;
}
...

Posted by とっくりばー at 2006/06/22 (Thu) 10:14:01

Is very interesting craps roulette [url=http://xoomer.alice.it/casq/craps-roulette/]craps roulette[/url] http://xoomer.alice.it/casq/craps-roulette/

Posted by John at 2006/10/04 (Wed) 09:10:52

Hi, nice site! aladdin resort and casino [url=http://xoomer.alice.it/burka/aladdin-resort-and-casino/]aladdin resort and casino[/url] http://xoomer.alice.it/burka/aladdin-resort-and-casino/

Posted by John at 2006/10/04 (Wed) 16:49:28

Thanks for taking choctaw casino [url=http://xoomer.alice.it/burka/choctaw-casino/]choctaw casino[/url] http://xoomer.alice.it/burka/choctaw-casino/

Posted by Brian at 2006/10/05 (Thu) 01:00:43

Very nice site shreveport casino [url=http://xoomer.alice.it/burka/shreveport-casino/]shreveport casino[/url] http://xoomer.alice.it/burka/shreveport-casino/

Posted by Ada at 2006/10/05 (Thu) 14:30:57

Exciting website. casino party [url=http://xoomer.alice.it/burka/casino-party/]casino party[/url] http://xoomer.alice.it/burka/casino-party/

Posted by Joshua at 2006/10/05 (Thu) 20:03:08

Cool design auto junk yard [url=http://xoomer.alice.it/vip2/auto-junk-yard/]auto junk yard[/url] http://xoomer.alice.it/vip2/auto-junk-yard/

Posted by Dale at 2006/10/06 (Fri) 01:43:12

this site rocks! auto shop [url=http://xoomer.alice.it/vip2/auto-shop/]auto shop[/url] http://xoomer.alice.it/vip2/auto-shop/

Posted by John at 2006/10/06 (Fri) 19:30:01

Exciting website. foreclosure
http://accountingmontreal.com

Posted by Alt6on at 2006/10/31 (Tue) 23:15:30

Exciting website. foreclosure
http://accountingmontreal.com

Posted by Alt6on at 2006/11/01 (Wed) 01:52:06

Good Luck! http://megamozg.com/online-trading/map.html

Posted by John at 2006/11/11 (Sat) 08:57:25

Great work on website. http://megamozg.com/travel-insurance/map.html

Posted by Jasmine at 2006/11/11 (Sat) 10:49:20

Hi, nice site! http://megamozg.com/homeowners-insurance/map.html

Posted by Anthony at 2006/11/11 (Sat) 12:40:57

VERY GOOD I THINK http://megamozg.com/need-money/map.html

Posted by Maureen at 2006/11/11 (Sat) 14:39:28

Thanks for taking http://megamozg.com/bachelor-degree/map.html

Posted by Daniel at 2006/11/11 (Sat) 16:31:04

Is very interesting http://wwwwtahoo.com/canon-inkjet-printer-cartridge/

Posted by Carol at 2006/11/15 (Wed) 20:55:00

Very useful http://wwwwtahoo.com/caribbean-stud-poker-game/

Posted by Ada at 2006/11/15 (Wed) 22:42:15

Your hard work paid off http://wwwwtahoo.com/horse-racing-wager/

Posted by Lori at 2006/11/16 (Thu) 00:35:41

Good site

wallmart
lemon detox diet
kohls department store
coach handbag outlet
royal caribean cruises
atkins diet negative
dj cammy
al4a
diana death crash photo
skimpy bikini
艢鞐瘤鴈蒂獺驟鱶 蓁鱚齏纈

Posted by boss at 2006/12/30 (Sat) 07:14:18

鱶赭鱶 ��湃
骭銜鞳鴾 頌髑褌窖闔齏賍
��聚粮韲肭�
骭銜鞳鴾 闔齏賍驤髴褂
闊舮瑩瓠 闊舮湃
謫�蒹 闔齏賍礦粤賍
頌髑褂窖闔齏賍窶諷鞳聚
粮痼礦鴾 �纃
痳髀諤鴉� 關鉐跪鴃 闔齏賍鉈諤蜊
痳髀諤鴉鈬 頌髑褌窖闔齏賍journal

Posted by at 2008/10/14 (Tue) 03:45:21

Link/Javascript/Tips/Dev

Link/Javascript/Ajax Link/Javascript/Ajax/lib Link/Javascript/lib/jQuery Link/Javascript/lib/Prototype Link/Javascript/Tips Link/Javascript/Tips/Design Link/Javascript/Tips/Dev Link/Javascript/Tips/UI Link/Javascript/Tips/Dev ▲&nbsp;▼Cont...

Posted by [ abs+ ] (PukiWiki/TrackBack 0.3) at 2009/05/04 (Mon) 02:42:29
TrackBack ping me at
http://la.ma.la/blog/diary_200510060733.trackback
Post a comment

writeback message: Ready to post a comment.







spam yoke. nanimo ireruna.