12月 2011
10件の投稿
windows環境にjsdom入れる方法
詰まるのが、htmlparserとcontextifyのインストール https://github.com/tautologistics/node-htmlparser htmlparserはgithubからファイル落としてpackage.json内のdebug.webをdebug.urlに書き換えて再圧縮後、「npm install 最圧縮したhtmlparser.tar.gz」で入る ただし、再圧縮はGNU Tar 1.2以上で行うこと(1.1系とかWin系のTarだとnpmが受け付けない) contextifyはファイルを解凍してC:\Users\{ユーザ名}\node_modules以下にそのまま突っ込む。 windowsの環境変数にNODE_PATH=C:\Users\{ユーザ名}\node_modulesを指定すれば普通に見えるようになる。 ...
12月 31
WebStormでMochaを動かす
・WebStorm入れる 入れる ・npm入れる 入れる ・module入れる npm install mocha npm install chai ・設定する WebStormのRun/Debug Configurationsの+を押して設定を追加 Path to Nodeにnode.jsのパスを指定 Path to Node App JS Fileにmochaのパスを指定 (winの場合C:\Users\{ユーザ名}\AppData\Roaming\npm\node_modules\mocha\bin\mocha) Working Directoryにプロジェクトの/を指定 ・実行する Run(Shift+F10)でmochaで実行してくれる
12月 31
1タグ
JSコードTips
// 任意の連続した文字列生成 (new Array(10)).join(‘a’); // 任意の内容で初期化された配列生成(要Underscore.js) _(_.range(100)).map(function(n) { return ‘hoge’ }); // 高速なepoch秒生成 +(Date.now ? Date.now() : new Date()) // event throttle(scrollイベントの発生を100msに1回以下に抑える) var timer; $(window).on(‘scroll’, function (e) {     if (timer) {         return;     };     /* hoge */     timer = setTimeout(function () {         timer =...
12月 17
16リアクション
1タグ
JSで表示用htmlをキャッシュするときに考える事
JSで画面遷移を制御する場合、各ページのテンプレート用htmlをキャッシュするのはよくあるけど、このキャッシュをどの程度キャッシュするかは結構悩ましい。 単純に変数として保持してページ読み込み時に再度取得し直すなら簡単だけど、そうすると最初の読み込みに時間がかかるようになるので出来ればlocalStorageに保持したい。 ただ、localStrageに保持するとhtmlを修正しても反映されなくなる問題がある。 これは一定時間ごとにキャッシュを破棄して取得し直すことで解決するけど、ページの初期表示を高速化したい場合最初のページはキャッシュから読み込む必要がある。 ただ、その場合JS、CSSも過去のテンプレートhtmlに適応されても問題ない形式にする必要があって、更にパーマネントリンクを持っている場合全ページに対して互換性をもたせる必要がある。 ...
12月 17
6リアクション
2タグ
もしもjQueryでクラスっぽく書くなら
(※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの15日目の記事です) jQueryとクラスベースはうまく混ぜるのがむつかしいけど、こんな感じにすれば割とクラスっぽく書けると思う。 (function () {     var $ = jQuery.sub();     jQuery.klass = jQuery.klass || {};     jQuery.klass.myKlass = $;     var klassVar = ‘hoge’;     $.fn.myMethod = function () { alert(klassVar); }; })(); (function () {     var $ = jQuery.klass.myKlass.sub();   ...
12月 14
9リアクション
1タグ
「コードを後ろまで読まないと処理内容が確定しない」問題
JSは無名関数伸びだし方にいくつかあってよくあるのが(function () {})()だけど、この方法だとコードを最後まで読まないと処理内容が確定しないという問題がある。 (function () { /* この時点では処理内容は未確定 */ })();// ここまで読んでようやく実行されることが確定する 基本的には「(function」で始まってれば大抵「})();」で終わるのでそこまで問題じゃないけど、こういうコードだと結構困る。 var hoge = (function () { /* 最期まで読まないとfunction objectをhogeに保持したいのか、無名関数を実行した結果をhogeに保持したいのかわからない */ })(); この点、new function () {}は最初の「new...
12月 11
33リアクション
1タグ
プログラムという奇跡
プログラムを奇跡と考えるとSEは司祭でPGは僧侶でコーディングは呪文詠唱でプログラミングは神降ろしみたいな感じ。 大規模な奇跡を起こそうとすると数千人規模の司祭と僧侶が何ヶ月も呪文詠唱を行い続けてようやく発動する。 そうなると呪文詠唱も複雑になり失敗する危険も高くなる。 呪文詠唱に失敗した場合、発動しないだけならいいけど、間違った形で発動してしまい本来呼んではならない神が降りてくることもある。 また、基本的に降ろせる神は司祭の力量に依存するけど、力量が足りない場合生贄が必要になる場合もあるしそれでも望んだ神が降ろせるとは限らない。 —- 「神に魅入られた僧侶」であればたった一人で何十人規模の司祭、僧侶が数ヶ月かかる呪文詠唱を短時間でこなることも可能。 そういう僧侶は常に神を身にまとい、神を降ろし続けることですごい速度で力量を上げ続ける。
12月 11
103リアクション
2タグ
jQueryはそろそろ実装と仕様を分離すべきじゃないか
jQueryがでかすぎて小分け版のjQuipが出たり、スマホ向けのZepto.jsが出たりしてるけど、そろそろjQueryも仕様と実装を分離して、素のjQueryとそれ以外を分ける方向に進んだらいいんじゃないか。 このへんPythonはうまくやっててCPython、Jython、IronPython、PyPyって感じで上手く分かれてる(ように見える) jQueryも今のJS実装はCjQuery的な名前にして「jQuery」はテスト群とドキュメントの名前にすれば、他のjQuery実装も並立しやすくなると思う。 各種実装は「*jQuery」的な名前にして、「jQueryテストカバー率nn%でxx環境向け」ッテ感じの表記にするか、CCっぽく「xx APIセットサポート」みたいな表記にすればわかりやすくていいと思う。 CC的な表記であればPluginも「xx...
12月 10
32リアクション
2タグ
「もし"use strict"が複数のモードをサポートしたら」
perlにはuse Strictに引数渡すことができて、それによって幾つかのモードを切り替えることができる。 もしJSでも同じようなことができるならこんなことができたらいいなというのを思いつきで書いてみた。 —- ・Automatic Semicolon Insertion禁止 JSは末尾の;を省略しても自動的に補ってくれる機能があるけど、これを禁止にして「文法上必要な末尾の;が省略されている場合構文エラー」モードを付けたい。 —- ・変数の書き換え禁止(全部定数モード) varの代わりにconst使えばいいけど、functionの引数とかも全部constにしたい。objectのpropertyを書き換え禁止にするかどうかは微妙だけど、「propertyも書き換え禁止モード」があってもいいかも(全部freeze状態) —- ...
12月 6
11リアクション
2タグ
JSでラベルがサポートされ続けなければならない理由
あまり知られてないし、実際殆ど使われてないけど、JSにはこんな感じで使うラベル構文がある。 hoge: for (;;) { while (1) { break hoge; }; }; 使われてない理由は色いろあると思うけど、functionの中から外に飛べないのでイテレータとの相性がわるいというのもあって、これがなんとかなれば多少は使われるのかなーという感じ。 ただ、それでもこの言語仕様はJSの実装上非常に重要な構文で、これがないとsyntax errorになるコードは結構多いはず。 具体的には以下のようなコードがsyntax errorにならないのはhttp:がラベルと解釈されてその後の//がコメントの開始と解釈されてるから。 http://example.com/ if (true) { alert(1); }; ...
12月 3
24リアクション