タグ

ブックマーク / blog.livedoor.jp/aki_mana (14)

  • JavaScript : 文書型宣言を解析(文字列処理) : typeOf 'aki_mana'

    Pure JavaScript で マークアップ言語を解析する際、JsonMLにコンバートするのが手っ取り早い。 けど、サーバーから取得したばかりのマークアップ言語のソースって、 Processing Instruction (XML宣言などの処理命令)や DTD用の <!doctype> 要素があって、 上手に無視してルート要素から解析したいのが音。 で、表題の通り。 <!DOCTYPE> って、おまじないのように単純に考えていいのは、HTMLコーダー限定で、 来は、マークアップの整合性を確認するためのルールをXML解析器に知らせる内容が列挙されてる。 <!DOCTYPE> 要素を用いてDTDを有効化するパターンは5種類かな。 1)[] の間に定義を書く(基) <!DOCTYPE rootElem [ <-- 文書型定義 --> ]> 2) <-- 文書型定義 --> 部分をファイ

    JavaScript : 文書型宣言を解析(文字列処理) : typeOf 'aki_mana'
  • HTMLCollection と NodeList の違い : typeOf 'aki_mana'

    このエントリは、チラシの裏的内容です(未確認情報多数)。 動機: document.getElementsByName() や document.getElementsByTagName() が返却する HTMLCollection と document.querySelectorAll() が返却する NodeList の違いってなんだろう。 てことで、軽くwebを漁った。 釣ったもの: 1)ともに、[添え字番号]を用いてアクセスできるので Array に似ているがArrayではない。 2)item() メソッドとlengthプロパティがある。 HTMLCollection については、 1)[添え字番号] の代わりに [id属性値/name属性値]でアクセスできる。 2)namedItem() メソッドで id属性値/name属性値 を持った要素を抽出できる。 3)document が

    HTMLCollection と NodeList の違い : typeOf 'aki_mana'
  • JavaScript : Blob なJavaScriptの実行 : typeOf 'aki_mana'

    JavaScript : eval の代わりに インラインSCRIPTを使う というエントリ。 最新のjQueryに実装されたようで、単純に危険という認識を持つのではなく、 正しく使いこなす(使う場面をしっかりと設計に組み込む)というのが世の流れなんでしょうね。 さて、このエントリに関連して…。 CSPでインラインスクリプトを拒否されている場合、 Blob化してリモートスクリプトとして実行できるかも(未検証)。 こんな感じ。 var URL = window.URL || null, head, script, blob; if(!URL) throw "not supported objectUrl"; var javascript_src = 'console.log("hello blob object !")'; head = document.getElementsByTagNa

    JavaScript : Blob なJavaScriptの実行 : typeOf 'aki_mana'
  • JavaScript : 古典的な JavaScript OOネタ : typeOf 'aki_mana'

    JavaScriptOOで Class を書いて、尚且つ、Closure Compiler Service なんかでminify 効果を高める方法。 ちなみに、今のJavaScriptは AltJS なんかも駆使して パフォーマンスにも注目されてるので、あくまでもネタです。 (function(global){ function MyClass(){ /* omitted */ } // private var $MyClass = MyClass.prototype, // scope privateVaiable = 'hoge', MyClass$method1 = function(myClass, arg1, arg2){ }, MyClass$method2 = function(myClass, arg1, arg2){ }, MyClass$method3 = functi

    JavaScript : 古典的な JavaScript OOネタ : typeOf 'aki_mana'
  • JavaScript : ブラウザ判別(IE11 以降) : typeOf 'aki_mana'

    これでいいみたい。 if(!Function.prototype.__proto__) throw "unsupport browser"; IE以外のブラウザは、モダンな実装で安心なんだけど、IEの新旧を調べる中で IE11 以降で実装されたプロパティに __proto__ がある。 他にもあると思うけど、調査に時間をかけられなかったので、当面はこれを使おう。

    JavaScript : ブラウザ判別(IE11 以降) : typeOf 'aki_mana'
  • JavaScript : IE も実装すべき document.currentScript : typeOf 'aki_mana'

    現在実行中の Script要素を取得できるので、動的生成するリモートスクリプトから、どんな url のスクリプトを実行中かを調査できる。 function loadRemoteScript( url ){ var head, base, script, loadScriptHandler; head = document.getElementsByTagName('head')[0]; (base = document.getElementsByTagName('base')[0])||base.parentNode script = document.createElement('script'); script.src = url; loadScriptHandler = function(evt){ var elm = evt.target; switch(evt.type){ ca

    JavaScript : IE も実装すべき document.currentScript : typeOf 'aki_mana'
  • JavaScript : EventDispatcher : typeOf 'aki_mana'

    アプリケーションにイベントを実装するとき、自前のイベントディスパッチャーを書いたりしてたんだけど、イベント発火中にもかかわらず、登録済みのハンドラを削除してしまうような場合にも対応できないか? ハンドラ(イベントリスナ)の削除処理を遅延処理することで解決を図る。 function EventDispatcher(){ this['-event-listeners-'] = {}; this.fiery = {}; // 発火中フラグ(発火中にハンドラ削除が起こり得る実装に対応する) this.lasyRemove = {}; }; merge(EventDispatcher.prototype, { _initType: function(type, force) { if (!!!this['-event-listeners-'][type] || force) { this['-eve

    JavaScript : EventDispatcher : typeOf 'aki_mana'
  • JavaScript : Web Message って、ヤバイね。 : typeOf 'aki_mana'

    postMessage で、HTML-IFRAME 間のメッセージ通信するネタは、ググればたくさん出てくる状況なんだけど、 1つのJavaScriptライブラリを読ませるだけで通信できる方法を考えた。 結論を先に書くと、postMessage のアスタリスク・メッセージングは、仕様上、非推奨ということだけど、たぶんこれは WebWorker 環境も考慮しての表現。popupやiframeでのアスタリスク・メッセージングはダメ。絶対にダメ。 まず、HTML(test_PostMessage.html)。 先に特徴; ブラウザの window のフレームで top に表示されることが条件。 IFRAMEは動的生成するので、IFRAMEに表示させたいHTMLとそのURLだけ、きっちり押さえます。 ちなみに、CSPで禁止できますので、確実に動作するわけではないこともポイント。 <!doctype

    JavaScript : Web Message って、ヤバイね。 : typeOf 'aki_mana'
  • JavaScript : イベントハンドラの書き方と登録方法 : typeOf 'aki_mana'

    いろいろあるわけだけど、こんなハンドリングで。 function handle(context, events, listener){ var i,l, t, addType; for(addType=!!context.addEventListener, i=0,l=events.length; i<l; i++) { t = events[i]; addType ? context.addEventListener(t, listener) : context['on'+t] = listener; } return context; }; イベントリスナは、引数の event に必ず存在する type プロパティを用いて if 文とか switch 文で切り分けて1つにまとめる方法。 この方法を使うことで、隠蔽したい処理を書くのが簡単になるはず。 使い方はこう(ajaxの例)。 fu

    JavaScript : イベントハンドラの書き方と登録方法 : typeOf 'aki_mana'
  • JavaScript : エスケープされた文字列からバイト配列を取得 : typeOf 'aki_mana'

    JavaScript に実装されたエスケープ/パーセントエンコーディングは escape(), encodeURI(), encodeURIComponent() があるわけだけど、パーセントエンコーディングは、utf8 以外の文字コードを利用した場合も。 バイト配列を取得できれば、クライアント側で文字コードに関係なく String オブジェクトに変換できるよ!(非公開だけど、エンコーディング系のライブラリ書いた) ってことで、アンエスケープ時にバイト配列を取得する関数書いてみた。 上記の escape() は、マルチバイトが含まれると、UTF16 で処理することになり、encodeURI(), encodeURIComponent() は、HTMLの文字コードが如何なる場合であっても UTF8 のバイト配列をパーセントエンコーディングしてくれる。 var unescapeToBytes

    JavaScript : エスケープされた文字列からバイト配列を取得 : typeOf 'aki_mana'
  • Tool : NexusFile(ファイラ)が非常に扱いやすい件 : typeOf 'aki_mana'

    Windows用FreeWareで「NexusFile」というファイラアプリケーションがあります。 これ、韓国のサムスンに所属する方(JungHoon Noh (xiles) 氏)が作成、公開されているのですが、非常に良く出来ている! 「タブ型ファイラ」はベクターなどで公開されている日人もいらっしゃるのですが、ぶっちゃけ、マウスオペレーション必須という時点で、MS-DOS時代のファイラには負けている(コードを書く人なので、キーボードオンリーがベストなのです)。 FILEMTNHなどの優れたファイラをご存じの方は「NexusFile」もお試しあれ。 慣れない内は、メニューバーの各メニューにガイドされるショートカットキーを覚える必要がありますが、これを覚えると、かなり高速に大量のファイルを操作できるようになります。 ファイラに「コマンドラインプログラムの登録は出来ない」ので、ショートカットア

    Tool : NexusFile(ファイラ)が非常に扱いやすい件 : typeOf 'aki_mana'
  • Node.js : 非同期処理 : typeOf 'aki_mana'

    クライアントサイドでは cho45さんのライブラリなんか結構便利なんですが、 ここが詳しい。Async.js というライブラリに言及してます。 Node の標準サンプルには「コールバックを深く掘り下げるコールバックチェーンとか呼ばれる方式」で照会されます。 でも、コードは、シーケンシャルに書きたいよね。ってときに。 非同期処理を考えることになります。 追記) 2013-04-10 上のとは違いますが、意外とポピュラーなのが、caolan/async.js かも。 こちらは「幾つものユーザ関数のそれぞれをタスクとして捉え、全タスクを処理し、最後に結果を返せばいいんだろ?なら、シンプルなコールバックに纏めることができるぜ!?」てのが 基コンセプトのようです。 要点1)「複雑にネストしまくる処理をシンプルなコールバック関数に纏める」のが目的のモジュール。 // var rslt = async

    Node.js : 非同期処理 : typeOf 'aki_mana'
  • Node.js : express フレームワークを Windows上で試してみる。 : typeOf 'aki_mana'

    とりあえず、モジュールのインストールは手作業で …前日エントリに書いたwindows用のnpm関連情報は未調査です。w とりあえず、node.exe を配備したのが、 C:\node として例示すると、最新のexpressでは ディレクトリ操作用のモジュール( ’mkdirp’ )が依存関係として定義されてる( package.json より) /NODE_PATH (== 'C:\node') node.exe /ejs : visionmedia-ejs /mime : bentomas-node-mime /commander : visionmedia-commander /qs : visionmedia-node-querystring /connect : senchalabs-connect /mkdirp : substack-node-mkdirp /express :

    Node.js : express フレームワークを Windows上で試してみる。 : typeOf 'aki_mana'
  • JavaScript : コンストラクタの書き方 : typeOf 'aki_mana'

    追記)2016-05-31 最近の私のJavaScript OO は以下の方式に統一しています。 1)抽象オブジェクトの定義(クラスベースOO言語でいうクラス) 「コンストラクタを Named NOOP Function とし、そのprototypeプロパティに属性や、実装を定義する」 2)具象オブジェクトの生成(クラスベースOO言語でいうインスタンス) 「ファクトリ関数内で new 演算子を用いて生成した新しいオブジェクトにプロパティを追加して返却」 3)継承はプロトタイプベースな単一継承を行って派生オブジェクトを作る。 4)多重継承は、条件付き多重継承とも言い換えられる Mixin を利用。 複数の親オブジェクトの特徴を受け継ぐ Mixin オブジェクトを動的生成して単一継承した派生オブジェクトを作る Q.コンストラクタ内に属性定義しないのか? A.しないです。多重継承を動的に行うため

    JavaScript : コンストラクタの書き方 : typeOf 'aki_mana'
  • 1