Essential JavaScript Design Patterns For Beginners. Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve. Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language.
Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language. Acknowledgments Credits Reading We already use patterns everyday. JSONPでクロスドメイン突破 - web探検隊. Throw Life - 超シンプルなJSONP入門. 今更ながらJSONP（JavaScript Object Notation with Padding）を触ってみました。
せっかくなので、超シンプル、かつ実用的なJSONPをご紹介します。 まずJSONPとは何か？ JavaScriptの外部ファイル読込みを利用しクロスドメインプログラミングを可能にする技術です。 つまり、srcに外部ドメインのファイルを指定する事でクロスドメインが実現できるという仕組みです。 では、まずsrcで読込む外部ファイル（jsonp.js）の例を示します。 RSS FeedがJSONPになるとこんな感じになります。 少し分かりにくいですが、これは関数コールです。 もっと簡単にすると、 というJSONデータを引数にした、 という、関数コールです。 あとは、あらかじめjsonFeedという関数の実体を用意しておけば、外部ファイルがscriptのsrcにより読込まれた時にjsonFeed関数が実行されるという流れです。 では、そのクライアント側の実装をご紹介しましょう。 より実用性を向上させるためHTML付きでご紹介します。 <html><head><title>JSONP sample</title><script language="JavaScript"><!
JavaScriptの部分の関数名の「jsonFeed」がJSONPデータの文字列に一致している事がお分かりでしょうか。 これでjsonp.jsを読込見終わると、自動的にjsonFeed関数が実行されるのです。 読込んだデータは連想配列になっていますので、それぞれ取り出してHTMLを組んでいます。 実行結果はこうなります。 今回は同じドメインのJSONPデータを読込んでいますので、JSONPのメリットが殆どありません。 最後に. Window.postMessage. Window.postMessage は、安全にクロスドメイン通信を可能にするためのメソッドです。
通常、異なった複数のページでのスクリプトはそれらが実行されたページが同じプロトコル（たいてい http）、ポート番号（http のデフォルトは 80）、ホスト（両方のページによって同じ値に設定される document.domain を基準とする）である場合に限りお互いにアクセスすることだけが可能です。 Window.postMessage は正しく使われたときに安全な方法でこの制限を回避するための制御された仕組みを提供します。 概要 window.postMessage が呼び出されたとき、MessageEvent を対象ウィンドウに伝達し、そのとき、実行されなければならない任意の保留中のスクリプトが完了します（例えば、window.postMessage がイベントハンドラから呼ばれた場合イベントハンドラの存続、以前に設定された保留中のタイムアウト、など）。 クロスドキュメントメッセージング. Java Script ̊w K. Code Playground. Dottoro Web Reference. Suzuki Lab wiki - HTML5&API入門. 10.1 コミュニケーションAPIとは コミュニケーションAPIはさまざまなプログラムが非同期に「メッセージ」をやり取りすることにより、疎結合なデータ共有を行えるようになる。
ここでいう「メッセージ」とは、任意のJavaScriptオブジェクトもしくは単純な文字列である。 また、通信を行う主体となりうるのは別々のウィンドウ（クロスドキュメントメッセージング）やバックグランドタスク（Web Workers）、サーバー上のプログラム（Server-Sent Events）など。 これらがほぼ共通のAPIを用いてメッセージを非同期にやり取りできるというのがコミュニケーションAPIの醍醐味 10.2 MassegeEventインターフェイス 「コミュニケーションAPI」をベースとしたテクノロジでは、二地点間でやり取りされるメッセージをMessageEventという型で表している。 Data 送信されたメッセージの本体となる origin メッセージ送信元のオリジン（クロスドキュメントメッセージングとServer-Sent Eventsのみで使用） lastEventId 最終イベントID（Server-Sent Eventsのみで使用） source メッセージ送信元のウィンドウオブジェクト（クロスドキュメントメッセージングのみで使用） ports メッセージ送信時に指定されたポートのコピー（複数）（クロスドキュメントメッセージングとチャネルメッセージングでのみ使用） メッセージを受信する側は、onmessageというイベントハンドラを指定して、MessageEvent型のオブジェクトを受けとることができる "message"イベントを補足するようなイベントリスナを追加しても、同様の効果が得られる ////メッセージ受信。
クロスドキュメントメッセージング、Web Workers、Server-Sent Eventsなど、コミュニケーションAPIをベースとしたAPIはすべて、"message"イベントを補足することでメッセージを受信できる。 10.3 クロスドキュメントメッセージング クロスドキュメントメッセージングを使用すると、メッセージの送受信を介して2つ以上のWebページがデータのやり取りを行える。 クロスドキュメントメッセージングを行うのは非常に簡単。 クロスドキュメントメッセージングの例@ Create a new Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS) Javascript.