- 2010-07-11 (日)
- カテゴリー：モノ
- タグ：
- 田端 ,
- JavaScript
関連写真サムネイル
【追記】ロード順が保証されておらず、依存関係にあるjsを読み込むと不具合の可能性があります。指摘いただきました。
PrototypeやjQueryなどのjsライブラリを複数使用すると、ヘッダ内にjs読み込み文が並んでしまって、見栄えが悪くなる、保守性は低くなるわで、クローラフレンドリーも期待できなくなります。多分。
そういった時に、jsをスッキリ一文にまとめてしまう方法です。
【Before】
<head> <script type="text/javascript" src="/path/to/hoge1.js"></script> <script type="text/javascript" src="/path/to/hoge2.js"></script> <script type="text/javascript" src="/path/to/hoge3.js"></script> <script type="text/javascript" src="/path/to/hoge4.js"></script> <script type="text/javascript" src="/path/to/hoge5.js"></script> <script type="text/javascript" src="/path/to/hoge6.js"></script> </head>
【After】
<head> <script type="text/javascript" src="/path/to/pack.js"></script> </head>
【pack.jsの中身】
(function() { document.open(); var l = arguments.length; for(i = 0; i < l; i++) document.write('<script type="text/javascript" src="' + arguments[i] + '"></script>'); document.close(); })( "/path/to/hoge1.js", "/path/to/hoge2.js", "/path/to/hoge3.js", "/path/to/hoge4.js", "/path/to/hoge5.js", "/path/to/hoge6.js", );
外部JavaScriptを使用する場合は絶対パスで指定してください。ちなみにPrototypeやjQueryはgoogleが公開してますので、先生のリソースにあやかりましょう。
はい、まんま星海社の仕組みを頂きました。ガハァと衝撃を受けたサイトの作り、なんとも小憎らしいスマートな作り。コメントアウトからすると外注してるぽいけどどこなんでしょう。ご存知でしたら教えてください。iPhoneアプリや電子書籍だなんだと世が騒ぎ始めてますが、htmlサイトもまだまだ伸びしろがあるという可能性を感じます。
じゃぁHDRやらずに単写真で可能性探れよと言われそうでビクンビクンでごはざいますが。今年9月にオープンするという"最前線"、講談社に期待大。
カメラ:D700、 レンズ:SIGMA 20mm F1.8 EX DG、ISO:200、絞り優先、ブラケット:-2〜+2、ホワイトバランス:オート
関連記事
撮影環境・雑多
Nikkor AF-S Micro 60mm F2.8G ED
ブツ撮りはコレ一本あればいいと今は思ってるNikkor 60mm単焦点。D40でもオートフォーカスが使える超音波モーター。本当、フルサイズ機になってますます使い勝手が良くなりましたこのレンズ。ナノクリスタルコート。
Comments:4
Toshiro 2010-07-12 (月) 23:25
>No Nameさん
ご指摘ありがとうございます。勉強不足でした。
ということは、依存していないjsなら大丈夫ということですね（そもそもひとつのファイルにまとめてしまえという話でもありますが）。
エントリーに追記しました。重ねてありがとうございます。
shockatz 2010-07-15 (木) 09:57
ごぶさたしています
最近ぜんぜん撮れてなくてこっちの話題ばっかり反応してしまって。。
なるほど。。自分はサーバサイドヘルパで生成するため、クライアント側の動的ロードは考えてなかったんですが、そういう問題があるのですね。すごい勉強になりました。
Toshiroさん、No Nameさんに感謝です。
Toshiro 2010-07-15 (木) 15:32
>shockatzさん
いえいえ、本家のコーダーからすれば児戯なんでしょうけど。ヘッダ内のゴチャゴチャを解消するのは性格的に嬉しいのです。
No Name 2010-07-12 (月) 20:18
本文の方法で、PrototypeやjQueryなどのjsライブラリを読み込むのは、おすすめできません。
scriptタグは、書いた順に生成されますが、スクリプトのロードの完了の順序は、保証されません。
jQuery 等に依存するスクリプトのロードが先に完了してしまった場合、その時点では、jsライブラリが存在しないのでエラーが発生してしまいます。
詳しくは、
「JavaScript 動的 ロード」でググると見つかります。
↓例えば、以下のエントリーが参考になります。
・外部JavaScriptの動的ロード
http://d.hatena.ne.jp/os0x/20080827/1219815828
・動的なscriptタグの読み込みを同期的に行う
http://blog.37to.net/2008/08/script/