7

最近のプロジェクトでは、Alexander Farkas の HTML5 Shivを使用しました。縮小すると、スクリプトが 2.274 KB になることに気付きました。これは、 John Resig が基本的に 2 行で示した概念としてはかなり大きいように思えました( John には、新しい HTML5 要素のサポートまたはすべてのチェックが含まれていないため、これは非常に単純化されすぎていることがわかります)。html5shiv のソースを掘り下げてみました。これは 248 sloc で、このような単純なタスクには不要なコードがたくさんあるように見えました。わずか 14 行で、はるかに単純な shiv を実現しました。

(function(document) {
    var div      = document.createElement('div'),
        elements = 'article|aside|audio|canvas|details|figure|figcaption|footer|header|hgroup|nav|output|progress|section|summary|video'.split('|'),
        i        = 0,
        length   = elements.length;

    div.innerHTML = '<header></header>';

    if(div.childNodes.length != 1) {
        for(; i < length; i++) {
            document.createElement(elements[i]);
        }
    }
})(document);

縮小すると、わずか 270 バイトです (Farkas Shiv のサイズから 88% 節約できます)。適切な CSS と組み合わせると、IE 6、7、および 8 で正しく機能しました。

article,aside,audio,canvas,figure,figcaption,footer,header,hgroup,nav,output,progress,section,video{display:block;}

Farkas shiv の本質は、try/catch 内で要素を作成し、関数をチェックするという魔法のようです。この肉とフィラーは必要ですか？私の解決策は十分ですか、それともファルカスのシブは私が考慮していないことを説明していますか?

編集

スクリプトは、適切な宣言を使用して独自のスタイル タグを作成するようになりました (まだ 21 行しかありません!)。

(function(document) {
    var div      = document.createElement('div'),
        elements = 'article,aside,audio,canvas,figure,figcaption,footer,header,hgroup,nav,output,progress,section,video',
        elementArr = elements.split(','),
        i        = 0,
        length   = elementArr.length,
        script, style;

    div.innerHTML = '<header></header>';

    if(div.childNodes.length != 1) {
        for(; i < length; i++) {
            document.createElement(elementArr[i]);
        }

        script = document.getElementsByTagName('script')[0];
        style = document.createElement('style');
        style.innerHTML = elements+'{display: none}';
        script.parentNode.insertBefore(style, script)
    }
})(document);
4

1 に答える 1

4

あなたのコードと html5_shiv の主な違いは、あなたのバージョンは、ページの初期ロード中のHTML5 要素に対する IE のサポートの欠如のみに対応していることです。

実際には、読み込み後に JavaScript を使用してページ コンテンツを変更する場合に発生する、対処すべき重大な問題が他にもあります。

ある時点で、これらの問題を解決するhtml5 inner shivと呼ばれるセカンダリ スクリプトが実際にありました。ただし、メインの html_shiv スクリプトの最近のバージョンにはこれらの修正も組み込まれているため、セカンダリ スクリプトは不要になりました。しかし、これはメイン スクリプトが大幅に大きくなったことを意味します。

これは、あなたが見たコードの量を占めています。

HTML を静的にする場合、答えはノーです。余分なコードは必要ありません。あなたのバージョンは問題ありません。(または、html5_shiv Github ページに移動して、以前のリリースをダウンロードすることもできます。以前のバージョンは、コードによく似ていました)。

ただし、何らかの動的コンテンツを含むサイトを作成する場合は、最新バージョンの html5_shiv を使用することをお勧めします。1 つ以上の問題を修正します。

于 2012-08-23T13:09:41.207 に答える