end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

クロスブラウザ対応(特にレガシーブラウザ)におけるPolyfill

単純にラッパー(スーパー)クラスを追加すると、将来、レガシーブラウザが標準的な関数をサポートしても、ラッパーは残り続ける...
という話。↓分かりやすい。

第1回 外部サイトに貼り付けるJavaScriptの作法―ポリシー,速度,セキュリティ,プライバシー(1):フロントエンドWeb戦略室|gihyo.jp … 技術評論社

「古いブラウザで動かないので……」といってモダンな機能を避けるより,まずは互換レイヤを形成し,そのうえでコードを書いたりライブラリを作ることで,いちいちブラウザの差異を気にせずメインのロジックに集中できます。このようなコードのことをPolyfillと呼びます。今は未サポートの機能でも,将来的にブラウザによるネイティブ実装がサポートされたときには,より高速に動作することが期待できます。

たとえばボタンクリック時などの動作を定義するには,Internet Explorer(以下IE) 6〜8ではattachEvent,その他のブラウザではaddEventListenerというメソッドを使って行います。どちらのブラウザでも動くように「addEvent」という名前でラッパを書く,ということがよく行われていました(注2)。しかしIE9ではaddEventListenerをサポートしたため,IE9以上をサポートするのであればこのようなラッパを書く必要がなくなりました。ブラウザ間の互換性が高まり,古いブラウザのために書かれたラッパが必要なくなっても,独自の方言「addEvent」を使ったコードは残り続けます。残念ながら古いブラウザでは,そもそもブラウザ組み込みの関数の挙動を変更することが困難であることも多いのですが,可能ならば将来的にサポートされる標準化されたメソッドを使えるよう,ラッパよりもPolyfillを使う/作ることを心がけると良いでしょう(注3)。

注2)
Polyfillが「そのブラウザではまだサポートしてない機能を,別の機能を組み合わせて実現する」コードなのに対して,ラッパはブラウザごとに実装が異なる場合,どちらもサポートできるように差異を覆い隠すのに使います。
注3)
たとえばcanvasをサポートしてないブラウザ向けに,FlashVMLで同じような機能を提供して“オレオレ画像ライブラリ”を作るよりも,非サポートブラウザ向けにはcanvasAPIとまったく同じものを再現するよう,将来的に標準化されるように互換レイヤーを作ったほうが望ましいです。