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年02月04日

粗悪品は粗悪品を望む人に売れば良い?

営業に俗っぽさを感じる事って多い。
よく「大人の事情」と茶化される内容のものが多いのだけれども。

ま、営業話での目から鱗な話。
続きを読む
posted by HiFa at 13:52 | 🌁 | Comment(0) | TrackBack(0) | よもやま | このブログの読者になる | 更新情報をチェックする

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雑感 | このブログの読者になる | 更新情報をチェックする

2009年01月16日

やばい。厳密に一致する

エンジニアと「ベーマガ」について from IDEA*IDEA 〜 百式管理人のライフハックブログ 〜
http://www.ideaxidea.com/archives/2008/10/post_863.html

プログラミング環境の変遷 from COBOL技術者の憂鬱
http://d.hatena.ne.jp/quill3/20081005/p1

う。一種、負い目すら感じる程に一致する。

「絶対あっているはずなのに!どうしてもわからない!えーい、プリントアウトして一行一行比較だ(← よくやった)」

コレ、かなり笑った。自分もよくやりました。
そういやプログラムポシェットって雑誌も結構好きだったなぁ

当時、パソコンはテレビにつなぐもんだと思ってましたねー。
ファミコンがそうだったしね。
自分は中古の FM-7 が初めてのパソコンで、CRT(≒ディスプレイ)なるものが必要と知った時は、もー愕然です。
わずかな小遣いかき集めて買ったのに!それでもすげーうれしかったw

まぁ。情報が少ないのなんのって興味があるってだけで変人扱いでした。
というか田舎のガキンチョにはファミコンすら珍しかった。

***

この時代にノスタルジーを感じるなんて公言するのは、ちょっとした勇気が要ったりします。
まだ30代なのにレガシー世代なんだよなぁ。
「趣味は仕事にしねぇ」なんて思ってたのに仕事にしちゃったしなぁ。
posted by HiFa at 09:55 | 🌁 | Comment(0) | TrackBack(0) | よもやま | このブログの読者になる | 更新情報をチェックする

2009年01月14日

php:インスタンスのクラスを変えてしまう

php で擬似的に以下2つ
・ インスタンスのクラスを変更
・ メソッドの動的な追加

幾つかのオブジェクトシステムではインスタンスのクラスを変えられますが、それを php で真似る。

■ まずは結果
// 変換先クラスサンプル
class foo{
  public $p = 'yo!';
  public function dump(){var_dump($this);}
}

// 変更させるインスタンス
$obj = new stdClass;
$obj->d = 'hi!';

// 変更前のvar_dump
var_dump($obj);// object(stdClass)#1 (1) { ["d"]=> string(3) "hi!" }
echo "<br><br>";

// クラスを変えてしまう
change_class(&$obj, 'foo');

// 変更後のvar_dump
$obj->dump();// object(foo)#2 (2) { ["p"]=> string(3) "yo!" ["d"]=> string(3) "hi!" }
echo "<br><br>";

// foo そのものから作ると
$foo = new foo;
var_dump($foo);// object(foo)#1 (1) { ["p"]=> string(3) "yo!" }
echo "<br><br>";

// 一見するとメソッドの動的な追加のような事も
add_method(&$obj, 'public function hello(){echo "hello!<br />";}');
$obj->hello();// hello!

// メソッド追加後の var_dump
$obj->dump();// object(add_method_0)#3 (2) { ["p"]=> string(3) "yo!" ["d"]=> string(3) "hi!" }
echo "<br><br>";


■ 自前の環境
PHP Version 5.2.3
System Windows NT
Server API Apache 2.0

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

2009年01月12日

PHP:var_dump だって見やすくなりたい(デバッグ用 var_dump)

「この程度のスクリプトでデバッグ用ライブラリなんてかったりぃなぁ。」
ってな時などにvar_dumpをより見やすくする関数。
前回、var_dump が循環参照に意外と抵抗力があるってな記事を流したんで、これに乗じて今まで使ってた関数をアップグレードしました。しかも、調子こいて色付けやら強調やらも。
var_dump()を使う前に
http://blog.cles.jp/item/1512

pre タグでもいいのですが、string データに html ドキュメントや改行があるとそれもまた見難いので、ついでにそれも変換します。
PHPでvar_dump()を使ったお手軽デバッグコード by ウェブライフハック
http://www.mapee.jp/wlh/phpvar_dump.html

まー。実のところ、いままでは var_export の出力結果を整形してたんですが、これがいっつも循環参照でひっかかる。どうせデバッグ用なので、面倒がって見て見ぬ振りしましたが、とうとう我慢し切れず前回のテストに至った訳ですw
てことで var_dump を可視化エンジン(笑)にしたオブジェクトビジュアライズ関数(!)

■ やってくれること
・ WEBページで var_dump を見やすくする
・ 重要要素には文字修飾する

■ 出力例
object(stdClass)#1 (3) {
      ["ary"]=>
      array(3) {
          [0]=>
          int(100)
          [1]=>
          int(200)
          ["key"]=>
          string(5) "value"
      }
      ["txt"]=>
      string(34) "<div>html ドキュメント</div>"
      ["obj"]=>
      object(stdClass)#2 (1) {
          ["child"]=>
          object(stdClass)#3 (3) {
              ["name"]=>
              string(6) "太郎"
              ["old"]=>
              string(6) "4歳"
              ["recursive"]=>
              object(stdClass)#1 (3) {
                  ["ary"]=>
                  array(3) {
                      [0]=>
                      int(100)
                      [1]=>
                      int(200)
                      ["key"]=>
                      string(5) "value"
                  }
                  ["txt"]=>
                  string(34) "<div>html ドキュメント</div>"
                  ["obj"]=>
                  object(stdClass)#2 (1) {
                      ["child"]=>
                      object(stdClass)#3 (3) {
                          ["name"]=>
                          string(6) "太郎"
                          ["old"]=>
                          string(6) "4歳"
                          ["recursive"]=>
                          *RECURSION*
                      }
                  }
              }
          }
      }
  }


■ 出力例の試料
$a = new stdClass();
$a->ary = array(100, 200, 'key' => 'value');
$a->txt = '<div>html ドキュメント</div>';
$a->obj = new stdClass();
$a->obj->child = new stdClass();
$a->obj->child->name = '太郎';
$a->obj->child->old = '4歳';
$a->obj->child->recursive = $a;

var_html($a); // 出力


■ 自前の環境
PHP Version 5.2.3
System Windows NT
Server API Apache 2.0

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

2009年01月11日

PHP:循環参照に対する動作の違い

・ 循環参照を持つ変数に何らかの処理を加えた時の動作の相違
・ 循環参照を見つける簡易関数(php5)

自前環境で、循環参照に対する幾つかの関数の動作を試行。
ちなみに、php v5.3 では循環参照をガーベッジ・コレクターが検出し、循環参照に使用されているメモリーを解放することができるとのこと。

■ 循環参照の例
A)配列で値渡し(※)
$a = array();
$a[0] = $a;

B)配列で参照渡し
$a = array();
$a[0] = &$a;

C)クラスインスタンスで値渡し
$a = new stdClass;
$a->p = $a;

D)クラスインスタンスで参照渡し
$a = new stdClass;
$a->p = &$a;


※ うーむ。これは循環参照というのかなぁ???

■ 自前の環境
PHP Version 5.2.3
System Windows NT
Server API Apache 2.0

続きを読む
posted by HiFa at 18:25 | 🌁 | Comment(0) | TrackBack(0) | ときどきPHP | このブログの読者になる | 更新情報をチェックする

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雑感 | このブログの読者になる | 更新情報をチェックする

2007年02月25日

Javascript:for のちょっと変わった使い方

for(var i = 0; i < 10; i++){処理・・・}
for(var i in object){処理・・・}

なんてのは、よく目にしますが・・・。

for(var i = ['あ', 'い', 'う']; i[0]; i.shift()){ alert(i[0]); }
これでも。i に配列を代入して、i[0] が false を返すようなものではない間、shift で i に代入された配列を削っていきます。ということで、この場合は、あ、い、う、と表示される。

当然。もっと自由に考えれば。
var o = {
  v : 2,
  fn : function (){this.v = this.v * 2},
  en : function (){
    if(this.v < 10) return true;
    alert(this.v);
  }
};
for(; o.en(); o.fn()){}
なんてのも。
わざわざこんな処理に冗長な例ですが・・・。for 内の処理や条件を外部で、作成・変更できたりと、結構自由に使えます。ただ。やり過ぎると、深刻な混乱を招いたりするので、誰が見ても分かりやすい物にした方が無難かも。

私は遊びで使ったりします。ひょっとしたら嫌う人もいるかもしれない。
posted by HiFa at 03:01 | 🌁 | Comment(2) | TrackBack(0) | JavaScript雑感 | このブログの読者になる | 更新情報をチェックする

2007年02月21日

Javascript:Array オブジェクトの継承では length が予期しない値を返す

02/22 後尾に追記

アルファブロガー達※1が、一時取り上げていた3行の継承に関してですが、これで Array オブジェクトを複製しても組み込み済みのメソッドは、継承元でしか動作しないですね。

■ 試した関数
404 Blog Not Found さんより
javascript - プロトタイプ的継承

function object(o){
  function F(){}
 F.prototype = o;
 return new F();
}

※1 私だけの認識じゃないと思う。

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

2007年02月17日

Javascript:setTimeout による呼び出しは関数終了時ではない?

予定された時間になり、その時実行中の関数が終了すれば setTimeout/setInterval での呼び出しが実行されるという訳じゃないんですよね。

ネットでたまに見かけるのは、「function fn(){setTimeout(cb, 20); ・・・;} の場合、・・・の処理が終わって fn(); が終了していないと、20msec 経過しても cb は呼び出されない」などの内容で完結していることがありますが、実際は fn(); が終了していても呼び出されないことがあります。

ま。とある記事読んでいて、あれれ?と思ったので・・・。というか、自分自身も意識しないとそう言ってる。

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

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