geta1972TweetPocketCheckJSにおける、外部モジュールの読み込みはprototypejsを参考にいくつかのバージョンを構築してきたが、各方法におけるメリットとデメリットをまとめておきたかったので、メモしておくことにする。サーバーサイドモジュールではなく、あくまで通常のWEBページに書かれたSCRIPTタグで呼び出されるjavascriptで外部モジュールの読み込みを行う事を前提とする。記述は非常に簡単で下記の用に記述するだけ。src="http://hoge.com/hoge.js"></script>src部分をプログラムで生成して複数の読み込みを行うことも可能だ。現在表示しているURLと同じ場所に外部モジュールが存在する場合は、相対パスで記述もできる。デメリット非常に簡単に実装する方法はこの「document.write」であるワケだが、この関数には致命的な欠点が存在する。僕が以前かいた会社のブログで詳細を見てもらいたいのだが、document.writeがイベントタイミングによって挙動が違うようするに、読み込まれたJSでそのまま記述する分には問題ないのだが、settimeoutや、別イベントを待って処理するような事をした場合に、画面真っ白問題が発生するのである。あと、さらに向かい風なのが、GoogleやYahooなどで最近利用が増えているタグマネージャー機能との相性が悪いという点である。明確に「document.write禁止」とうたっているタグマネもあるぐらい、煙たがられている存在だ。タグマネ内でイベント後にJSを実行したいんだろう。appendChilddocument.writeと考え方は変わらないのだが、画面が白くならない方法としてappendChild方式がとられることが多い。function(){alert("読み込み確認")};document.body.appendChild(s);メリット上記の記述でモジュールが読み込み完了したタイミングもイベントとして受け取れるようになる。document.writeを使うよりは有効であると考えていいだろう。ちなみに、document.bodyをdocument.getElementsByClassName(“head”)[0]とするとheadタグ内で実行されるので、より高速にプログラムを起動できるようになる。デメリットbodyタグやheadタグが読み込まれていることが条件になり、読み込み前にこの処理を実行してしまうと、undefinedエレメントにappendする致命的なエラーになるので、この処理は必ず、bodyやheadのonload処理(またはDOMContentLoaded)を利用して行わなければいけない。eval非同期を使って読み込みを行いたい場合はajax処理でやるのが一番。:"text/plain","onSuccess":function(res){eval(res);}});メリット上記の2タイプの方法は、HTMLソースにJS、タグを書き込んだのと同じ効果になるので、JSのプログラムソースが非常に分かりやすい状態になります。ajaxを利用すると、ソースコードがメモリ内で展開されるので、ソースコードを隠す効果に使うことは可能です。モジュール読み込みのURIを叩くと文字列が表示されるというお寒いサーバー構造にせずに、JSからの読み込みセッションのみ対応する工夫が必要にはなります。デメリットサーバー側で「x-frame-options」に対応しなければいけません。これは外部ドメインからの応答に対応するかどうかを受け側のサーバー設定で行わないといけないので、禁止しているサーバー環境では使えない事があります。x-frame-optionsは最近のOSはデフォルト設定ではOFFになっているので、クロスドメインでajaxを使う事はもしかすると危険が多いかもしれません。呼び出されるモジュールについて呼び出されるモジュールは、大きく分けて下記の「静的」と「動的」になりますが、動的JSを利用する事で、ファイル単位で保存されているJSデータやJSONデータを、JSファイル基準で自由に呼び出すことが可能になるため、安定したWEBサービスを構築することも可能です。静的ファイル・通常のJSファイル動的JS・サーバーサイドのCGIでJSプログラムを出力する。・サーバーに置かれたJSファイルのライブラリ郡から必要なモジュールのみをピックアップする。不要なモジュールを読み込まないことにより、サーバートラフィックを落とすことも可能だと考えましょう。トラフィックデータは、サービス提供会社も、利用ユーザーも、ふくらんだ結果、損をするだけなので、少ないに越したことはありません。この辺のエコシステム構築も最近のWEBアプリ構築のトレンドかもしれませんね。ちなみに、PHPを使うとデータ圧縮機能が使えてオトクです。※もちろん、他のCGIでもOSレベルでも可能な場合がありますよ。どれを使うのが良いのか?結論で言えば、appendChildが安定感があり、ソースコード表示を許すのであれば、これが一番いいでしょう。個人的にはajaxが好きなので同一サーバーで行う場合に限りOKじゃないでしょうか?え?何?jQueryを使えば、こんなに面倒くさい事をしなくてもいい?そういう人はこの記事は不要でしたね。23:301年半前に書いたこの記事と似てるリンクを教えていただいてありがとうございます。複製コピーでは無さそうなので、特に問題は無いですね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。