Takazudo hamalog

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + /

cool guy

script loading solution? yepnope.js !?

2011/04/20 permalink

やりたいこと:
JSローダーうまいこといいやつにしたい

0. 全部script書いたりdocument.writeでscript書いたりなど
good: 誰が見たってわかる
bad: レンダリングブロックする乙

現実的にwebサイト制作系でhtml,css,js書いてますみたいな自分のような人はみんなこんな感じでやってるんじゃないかと思われるがウーム。なんかもっとうまいことできないもんか。

ここがスタート

1. スクリプトまとめてminifyビルド
good: それ最高って知ってる
bad: 運用が手間

特に手を離れた時のことを考えると辛い。自社サービス運用とかなら間違いなくこれがベストなんだろうが…

2. 非同期ローダLABjs, RequireJS
good: レンダリングブロックされない
bad: 将来にわたり動作するのか不安。ページごとのJSを書くのがムズイっていうかかなり無理

サイト全体で1アプリ向けという印象。
ページに

$(function(){
    // wannna do something
})

とか書くのが無理。とにかくこれがつらい。
JSかなり知らんといじるの無理化。

3. yepnope.js
good: 非同期で読み込むんだけど順番は守って実行するという実装。
bad: ほかの非同期ローダと比べるとちょっとだけ遅いはず

一度最初にスクリプトをダウンロードしてしまう。そんで2度目はscript要素を作ってscrにそれ指定。
この2度目のリクエストではキャッシュが使われるのではえーんだぜという実装(たぶん)
なので実行順序が守られる。非同期ローダっぽい動作をするが順番は守られるという仕組み。
この、「順番を守って実行する」っていうのがミソ。

試したやつ

これ開いてNetworkのタイムラインに注目。2度目のリクエストはキャッシュ使ってる。

順番守るので、非同期ローダーらのページにJS書けないです問題も、

yepnope({
    test: true,
    complete: function(){
        $(function(){
            // wannna do something
        })
    }
});

とか書けば問題ない。そこまでのロードやJS実行が終わった後にこれがキューにのるので。

Modernizr.loadとしてModernizr ver.2から組み込まれるのでなんかスタンダードな感じもしないでも無い。URLだのhtmlにつけたclassだのModernizrでなんちゃらをサポートしてない時はこれとかIEの時これとかcss読み込むとかみたいなこともできないでもない。

Modernizr.load は function (){yepnope.apply(window,[].slice.call(arguments,0))}。ようするに==yepnope。

やってることも、他の非同期系ローダーのようにややこしいことをしていないのではないだろうか(未検証)。ということで安全めな印象を受けてるけどどうなのかしら。

そんなこんなでyepnope.jsが無難にいいかもしんないと思ってるところ。

追記: webkitでちょっとデバッグがめんどくなる
https://github.com/SlexAxton/yepnope.js/issues/23
https://github.com/SlexAxton/yepnope.js/issues/32

blog comments powered by Disqus

  1. kxdshamalogからリブログしました
  2. kanazawajsmitukiiiからリブログしました
  3. mitukiiihamalogからリブログしました
  4. hamalogの投稿です