2011年10月18日

javascript:関数で別の関数をクロージャ化してローカル変数を与える

関数をクロージャ化してローカル変数を与えてみる。
※ ローカル変数云々というより、関数を encloser でラップして、スコープチェーンを encloser につなげるって言った方がいいのかな。(同日追記)

function f(){
  alert(v);
}


辿れるスコープ内に v という変数が無ければ、v は当然 undefined。
で、以下の関数。

function encloser(){
  eval('var ' + arguments[1] + ' = "' + arguments[2] + '";');
  return eval('arguments[0] = ' + arguments[0]); // ※ () 追加では ie が ng
}

※ とりあえず string のみ対応。json 化すれば object でも。

この encloser関数にさきほどの f関数を渡してやると……。

f = encloser(f, 'v', 'I am closer!');
f(); // I am closer!


v に値が入れられる。

続きを読む
posted by HiFa at 14:01 | 愛知 ☀ | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2010年11月10日

Extend.js に関して 404 Blog Not Found さん

■ 404 Blog Not Found
javascript - making primitive types extendable
http://blog.livedoor.jp/dankogai/archives/51529944.html

の記事で、これだと予期しない不具合を増やしかねないよなぁ。と。
上の記事は、下記の Extend.js に言及しているのですが、こんな無防備に晒しちゃっていいのか?っと思ったのが今回記事。コメントに書こうと思ったらログインしなくちゃいけない orz

■ あゆたブログ - 株式会社あゆた
【連載】Extend.jsで楽しくJavaScriptプログラミング! - 第1回 Extend.jsのつかいかた (JavaScript,javascript,extend.js) - 株式会社あゆた
http://blog.ayuta.co.jp/blog/2010/07/22/Extend.js%E3%81%A7%E6%A5%BD%E3%81%97%E3%81%8FJavaScript%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%EF%BC%81-Extend.js%E3%81%AE%E3%81%A4%E3%81%8B%E3%81%84%E3%81%8B%E3%81%9F

続きを読む
posted by HiFa at 01:34 | 愛知 ☀ | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2010年04月12日

javascript:遅い push も使い方次第?

Array.prototype.push が遅いのは割と知られていると思う。なので何も考えずにひたすら length を使ってましたが・・・、使い方として push の方が有利な場合について。

続きを読む
posted by HiFa at 15:23 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2010年03月26日

javascript:for の小ネタ

for の小ネタと checkbox を同期させる tip の例です。
すみません。色々間違ってましたので改めて書き直しました。(同日追記)

ふと、さらに追記w(10/03/29)

for で走査したいとき・・・。

elements = document.getElementsByTagName('DIV');
for(var i = 0, l = elements.length; i < l; i++) 処理・・・

なんてのが常道なのかな。
ちなみに l に length 入れるのは、その方が速いから。
そこで

elements = document.getElementsByTagName('DIV');
for(var l = elements.length; l--;) 処理・・・

こうするともっと速くなるし、変数も一つ減る。
で以降、実例です。

続きを読む
posted by HiFa at 01:30 | 🌁 | Comment(1) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2010年03月18日

javascript:ちょっと粋な配列の定義だけども

たまに見かける split を使った配列の定義ですが、当然の事ながら遅いです。それに、ff3 では驚いた事に new Array() を使った方が圧倒的に速い。

ary = 'a b c d e'.split(' ');
ary = ['a', 'b', 'c', 'd', 'e'];
ary = new Array('a', 'b', 'c', 'd', 'e');

ie7 で 3倍程度、op10 で 2倍弱、safari/chrome では信じられないほどの差になります。ただ vista, ff3 は安定していないようです。[e1,e2,e3,…] と普通に列挙したものは安定しているのですが、split を使うと早い時と遅い時で 5倍近いブレがあるようです。ただ、他のブラウザでは2番目と3番目に有意義な違いはなかったのに ff では圧倒的に3番目が速いです。

とは言え、何度も回すような事をしなければ split は分かりやすい。・・・なんて事を言いながら自分は使ってない ^^;;; 一つや二つならまだしも、意識せず使いまくれば体感で差がでる可能性もある。

結局、split は使わない。[] が良いんでしょうけど、ff を考えれば new Array が最も無難。ただ、一々 new Array なんてやると「知らない」と思われそうでイヤですね(笑)

以下テスト用コード
var t = (new Date()).getTime();
for(var i = 100000; i--; ){
  r = '0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49'.split(' ');
}
t = (new Date()).getTime() - t;

var j = (new Date()).getTime();
for(var i = 100000; i--; ){
  r = [
    '0','1','2','3','4','5','6','7','8','9',
    '10','11','12','13','14','15','16','17','18','19',
    '20','21','22','23','24','25','26','27','28','29',
    '30','31','32','33','34','35','36','37','38','39',
    '40','41','42','43','44','45','46','47','48','49'
  ];
}
j = (new Date()).getTime() - j;

var k = (new Date()).getTime();
for(var i = 100000; i--; ){
  r = new Array(
    '0','1','2','3','4','5','6','7','8','9',
    '10','11','12','13','14','15','16','17','18','19',
    '20','21','22','23','24','25','26','27','28','29',
    '30','31','32','33','34','35','36','37','38','39',
    '40','41','42','43','44','45','46','47','48','49'
  );
}
k = (new Date()).getTime() - k;

alert(t + "\n" + j + "\n" + k);

このテストに限りませんが、実は評価の順序でも「差」がでる事があります。当然、立ち上がっているアプリケーションの影響も受けます。何度か入れ替えながら評価すると良いかも。

addon について語れるほど知りませんけど、addon が山の様に積めこまれてれば影響を疑った方がいいかもしれません。たまーに spinoff のモノで云々あったり・・・。

posted by HiFa at 12:38 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2010年01月26日

javascript:「new」そんなに嫌わないで・・・

前の「javascript:クラス風の定義をしないメソッドチェーンです」で、new なんて・・・。とか言いながら下記の記事を見つけたので、天の邪鬼に走った思考がムクムク。と。

あと味さん
JavaScriptのnewって本当にいらない子?
http://d.hatena.ne.jp/jdg/20090706/1246840565

function f(){}
f.prototype.m = function (){
  alert(this == window);
}; //「;」は略せない! 試すと分かるけど下の結果が変わる。よく抜けてしまうけどw

(new f()).m(); // false



続きを読む
posted by HiFa at 04:32 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2010年01月12日

javascript:クラス風の定義をしないメソッドチェーンです

37toさんとの意見交換での補足です。
動的なscriptタグの読み込みを同期的に行う
http://blog.37to.net/2008/08/script/

発端:javascript の動的読込みで依存関係に考慮するのって・・・

結局、読込み成功に対して処理をすると言う基本的なアルゴリズムには変わりがないんですよね。それでも敢えてコメントしたのは、依存を考慮するためにあの形式にしているような印象を受けたからです。なので、私の方のブログには「書き方で対処できる」とした訳です。
つまり、メソッドチェーンやタグ入れ込み、関数かクラスかは枝葉であって、私としては関心が薄かったんですね。でもせっかくなので、クラス風の定義無しでのメソッドチェーンを自分のブログでUP。

ちなみに。インデントが深くなるということですが、実際の処理が直列でない以上、インデントの深さは実際の実行や意味(成功時に起動するという)により則した表現だとも思う。なによりコールバックの直接記述で複雑なコードを入れ込まれる事を抑止できるというのは、ついやってしまう私としては大きい(笑)


続きを読む
posted by HiFa at 00:57 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2010年01月06日

javascript: var v = a || b; の利点欠点と応用

var v = a || b;

評価式の利点欠点と応用(?)を考え始めたら、結局 switch-case も侮れんなぁ。という結果。ちなみに式は式だけど「評価式」と呼んで良いのかな?

利点・欠点、応用の前にまず確認。
// ■ 動作確認
alert(3 || 4); // 3
alert(3 && 4 || 5); // 4
alert(3 < 4 || 5); // true

// ■ false 扱いに関して
var o = {};
alert(0 || '' || null || false || undefined || void(0) || o.noprop || '全部 false 扱い'); // 全部 false 扱い
alert(undefined || 0); // 0 <- 注意
alert(0 || undefined); // undefined <- 注意

// ■ if と等価な処理
function test(){
  alert('処理');
}
if(!o.noprop) test(); // 処理
o.noprop || test(); // 処理

// ■ くどいけど確認
o.noprop || (o.noprop = '入れてやる');
alert(o.noprop); // 入れてやる
o.noprop || (o.noprop = 'すでに入っていると?');
alert(o.noprop); // 入れてやる <- 当然代入まで行っていない


続きを読む
posted by HiFa at 03:19 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2010年01月04日

javascript の動的読込みで依存関係に考慮するのって・・・

blog.37to.netさん
動的なscriptタグの読み込みを同期的に行う
http://blog.37to.net/2008/08/script/

例え非同期でも依存関係に考慮するのは、書き方次第で幾らでも対処できる事だと思う。ちまたにある非同期で動的な読み込みを行う関数で、成功時のコールバックさえ出来る関数なら、別段難しくない。

例えば前回挙げた関数 load なら

load('script1.js', function(){load('script2.js')})

でやれば依存関係はクリアする。
折角コールバックがあるならそれで十分だと思う。
posted by HiFa at 16:23 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2009年12月27日

javascript:同期/非同期で動的なjavascriptの読込み3種

同期/非同期で動的な javascript の読込み3種

・ eval(firefox etc)/execScript(ie)で直書きタイプ(非同期)
・ eval(firefox etc)/execScript(ie)で直書きタイプ(同期)
・ script タグ追加タイプ(非同期)


※ それぞれ再読み込みを防止している。
※ 非同期は call back 指定付き。

今更な気もしますが、動的な javascript の読み込み3種を書いたので全部UP。必要に駆られたのは1番目だけなのに、余計なもん作ってるあたり現実逃避です。そもそも同期が要るのかどうか疑問だけども、まぁインクルードのような使い方になるのでしょうか。call back を意識しない分、同期の方(インクルードの方)が構築も単純かな。

■ 追加・修正
・ 2010/01/19

■ 確認環境
msie 7
firefox 3
opera 10
chrome 3
safari 4

関数化していなかった物を関数化したのでバグがあるかも知れません。一応確認環境は上記です。

■ 一応メリットとデメリット

eval や execScript で直接実行している方は、XMLHttpRequest でコードを取得します。そのため以下の留意事項があります。
・ js の文字セットは html の文字セットに関わらず utf-8
・ 外部 js ファイルは取得できない。


script タグ追加タイプの方の留意点。
・ js の文字セットは html の文字セットと同一にしなければならない。もしくは charset 属性を指定できるように改造か meta で chaset 指定。
・ タイマを利用して call back している。
・ 読み込んだかどうかの判定は、対象のスクリプトにある変数や関数名を指定してやる事で対処している。


あと、全体を通して・・・。
再読み込みを防止しつつ call back 出来るようにしているために冗長。他、Ajax 部分は他のライブラリ使うべきなんだろうけど、極力1関数で完結させたい!などというのが、そもそもの間違いなのかも知れない。

続きを読む
タグ:javascript
posted by HiFa at 02:58 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2009年12月15日

Javascript:ユーザーエージェントに頼るのは良くないけども

クロスブラウジングのために UA(user agent)判定するのは良くないけども、それでも UA による判定が必要な場合があるかも知れない。ということで何年もほったらかしていた UA 判定(バージョンもついでに取得)をようやく書き換えたので、こっちにもアップ。

ただやはり、Javascript のために UA 判定が要る場合って無い。CSS のためにわざわざ Javascript 書くのも安定感を損なうだけだし、そもそも UA なんてねぇ。

うーん。最近はサーバサイド(主に PHP)ばかりで、あまり楽しくない・・・。

■ ずっとよさげな記事があったのでリンク
(10/01/06)
Magicantさん
UAIdentifier - JavaScript によるユーザエージェント判別
http://homepage2.nifty.com/magicant/sjavascript/uai-spec.html
※ ざっと目を通しただけだけど良さそう。覚えも含めて。
(10/01/19)
tanablog さん
JavaScript ライブラリの、ブラウザ判定ロジックを調べてみた
http://blog.kaihatsubu.com/archives/001593.html
※ 自分としては、やはりUA判定より実装の方が好きだなぁ。

■ 確認環境
msie 7
firefox 3
opera 10
chrome 3
safari 4

その他、単純にユーザーエージェントの文字列によるテストはこちら
※ ブラウザーそのものによる判定ではなく、単純にユーザーエージェントの文字列を突っ込んでいる事に注意。

■ 確認できるブラウザ
msie, firefox, opera, chrome, safari, konqueror, lunascape, netscape, sleipnir
とその各バージョン(上記の文字列で返ってきます。)
ないだろそれ!ってヤツも居座っていますが、まぁ気にしない。ちなみに不明の場合は、空文字として扱えます。その他 gecko や mozilla とも返ってきますが、ほとんどの場合は不明と同じです。
続きを読む
posted by HiFa at 14:10 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2009年05月02日

Javascript:element の判定とそれに関わる諸事

nodeType 調べるだけでは問題がある場合の element の判定方法です。

・ chrome での動作の相違
・ prototype.js では Element が使えない

以前も似たようなものをUPしたのですが、2年も!放置していたので、今使っているものを紹介。
Javascript:DOMオブジェクトかECMAオブジェクトかを判定する。
こちらで Element を使えば良いというお話しが出ているのですが、実は Element では prototype.js など使わざる得ない場合(他の人が作成したものの改造とか・・・)に期待どおり動きません。
しかも prototype.js の利用率って意外と馬鹿にならない。

■ 確認環境
ie 5.0, 6.0, 7.0, 8.0
ff 1.0, 1.5, 2.0, 3.0
op 7.02, 8.53, 9.01
ns 6.2, 7.1
safari 4.0beta(for win)
sleipnir 2.3
google chrome

各 prototype.js あるなしです。ちなみに ie5.0 は prototype.js 動きません。
最新が無いものも目立ちますが op とかw



続きを読む
posted by HiFa at 15:38 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2009年04月24日

javascript:変数を監視する関数

変数やオブジェクトプロパティの値を監視して変更があった際に callback を起動する関数です。watch の無い ie でも監視します。

但し、その変数やオブジェクトプロパティが配列などの"オブジェクト"を有している場合は、検出しません。クロージャとは言え参照渡しは変わらないためですが、それでもオブジェクトまで監視したい場合は string へパースするように改変の必要があります。
json 関数などの有用な関数は多いので改造は容易だと思います。

ただ、パースまでしていると遅くなる可能性が非常に高いです。なので軽いオブジェクトに限定するか、チェックサムの様なものにする方が良いと思います。

■ 確認環境
ie 6.0, 7.0
ff 3.0

ま、確認環境は少ないですが、環境に依存しやすいものは使ってないのでほとんどの環境で動くでしょう。

■ 同日追記(ローカル変数を監視する場合)
この関数の場合、ローカル変数の監視は出来ませんが、以前書いた。
Javascipt:関数ごとに終了状態をトレースしてゆく関数
を応用すれば可能です。あまり深く考えてませんがw
※ ただし、この場合は対象の関数が終了した後にしか、検出できません。

続きを読む
posted by HiFa at 01:43 | 🌁 | Comment(0) | TrackBack(1) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2009年01月31日

javascript:MIME type「image/gif」にDOM追加

MIME タイプ 「image/gif」のドキュメントに DOM を追加。

<iframe src="image.gif"></iframe>

このようなフレーム内のドキュメントは、MIME type が image/gif になります。
でもこの document.body を見ると単に html になっています。

実は、このフレームに DOM を追加してみると問題なく出来るようです。
また javascript も難なく動きます。
ただし、(当然ですが)以下の特性があるようです。
・ MIME タイプは(一見)変わらない。
・ 右クリックでソースを見る事ができない。
・ 名前を付けて保存が期待どおり動かない。

※ javascript で追加編集された内容は、html ドキュメントであっても上記方法では確認できませんが、これは一瞬かなり動揺すること請け合いですw
※ 試していませんが、おそらく別ウィンドウ(別タグ)で開いたものも同じだと思います。
※ 調査したのは ie7 と firefox3 です。用途が?なので面倒w

イメージドキュメントとしての扱いになるので、他にも見つけていない不具合や相違があると思いますが、ちょっと試行してみました。

続きを読む
posted by HiFa at 15:29 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2007年06月15日

Javascript:DOMオブジェクトかECMAオブジェクトかを判定する。

ドキュメントオブジェクトなのかスクリプトのオブジェクトなのか判定したい時って通常どうするのでしょう? typeof() ではどちらも "object" なのですが、実際のところ別物ですよね。(※1)

ということで、幾つか判定用関数を作成してみました。

・ Element かどうかの判定
要は、div とか span とかいったタグ物かどうか?です。
■ 最新はこちら(2009/05/02)
Javascript:element の判定とそれに関わる諸事


・ DOM Node かどうかの判定
attribute (id や value)、テキストは Element ではないんですが DOM Node を受け継ぐオブジェクトです。

・ ECMA object かどうかの判定
v = {apple : 'りんご'};
なんぞのオブジェクトを判定します。
ちなみにアトミックなもの。数値や文字列もオブジェクトである場合があります。そのような場合も真として検出します。

・ イベント object かどうかの判定

(※1) opera はかなり特殊です。Element をオブジェクトとして他のブラウザ以上に統一的に扱おうとしているようです。

確認環境
ie 6.0, 7.0
ff 1.5
ns 7.1
op 8.53

続きを読む
posted by HiFa at 14:08 | 🌁 | Comment(3) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2007年05月19日

Javascript:replace へ関数を渡すと非常に遅くなる事がある

replace メソッドの色々な使い方を紹介した記事を幾つか見つけたんですが、これって場合によっては想定外な結果になるんじゃないかな。
該当場所を見つける度に関数のオーバーヘッドが掛かる訳ですから、テスト文字列によってパフォーマンスが著しく変わるハズではないかと。

以下参考に致しました。
「escapeHTML の実装 3 パターン (ベンチマーク付き)」
http://d.hatena.ne.jp/reinyannyan/20060711/
「激しく誤差の範囲内の予感」
http://d.hatena.ne.jp/f99aq/20060714/

ということでやってみた結果、それほど置換数が多くなくても ie に限ると10倍以上の差がでるようです。ff と op は有意義な差が無いです。

告白すると、replace で正規表現使ったり、関数を渡したりする事ができるなんて・・・。知りませんでした。

おいおい大丈夫かよってなもんで。
「問題なければすべて良し」的な対応をしてきた自分に激しく反省。これからもポロポロ垢が出てくるんだろーなぁ。

以下。テスト内容

続きを読む
posted by HiFa at 11:08 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2007年05月17日

Javascript:エレメントの位置をコロコロと変える。

DOM element をスワップさせたり、最前部や最後部に移動させたりする関数群です。ま、簡単に出来ますし、大したコードでもないのですが、微妙に面白いw

・ 一つずつ上に移動
・ 一つずつ下に移動
・ 指定要素の最前部に移動
・ 指定要素の最後部に移動
・ 要素の入れ替え

のそれぞれの関数があります。

確認環境
ie 6.0, 7.0
ff 1.5
ns 7.1
op 8.53
メイン環境じゃ無いので少ない・・・。

続きを読む
posted by HiFa at 15:41 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2007年05月01日

javascript:厳密なイコール

ぜんっぜん、知らなかったんですが「===」が、ECMA では規定されています。
=== と == に関してちょこちょこっと。

今更何を言っとるんだ状態ですが、javascript === 曖昧 (笑)という図式が私ん中で出来上がっちゃってまして「そんなものはない」と信じ込んでたんですね。
Javascript を扱ってるサイトでも見かけませんよね。(というか気付かなかった)

正直、ECMAscript, DOM, javascript って何が何やら境界がよく分からん。Javascript や action script などが ECMAScript 準拠って事ぐらい。
ま、プロジェクト管理者の中ですら Ajax = javascript なんて人も居るんで、ま、分かり辛いって事で締めとくか。

以下、意外だった人には意外な事w

続きを読む
posted by HiFa at 13:53 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2007年02月28日

Ajax:画像を取得して表示する(Firefox)

XMLHttpRequest を使って取得したバイナリーデータ(画像)をブラウザに表示してみました。firefox のみ。
JavaScriptでバイナリを扱う &
 XPCOMを使ってローカルのデータベースにアクセス with Firefox

の記事を読んでいて、そういや Ajax ではどうなん?と思ってやってみた。

■ 他に参考にしたのは以下の記事。
[comp]JavaScriptでバイナリファイルの中身にアクセスできた

■ base64 エンコードには下記のコードを使いました。
JavaScript で Base64 の符号化と復号化
続きを読む
posted by HiFa at 02:44 | 🌁 | Comment(0) | TrackBack(2) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2007年02月26日

Javascript:if などの制御構文を使わない分岐

if などの制御構文を使わなくても分岐ができます。実際、当たり前の話なんですが、意図的に行うかどうかという、ただそれだけの違いです。

続きを読む
posted by HiFa at 13:06 | 🌁 | Comment(0) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。