自定义HTML Shiv的缺点

在最近的一个项目中，我使用了Alexander Farkas的HTML5 Shiv，并且我注意到在缩小脚本时为2.274 KB。 对于John Resig基本上在两行中展示的概念（我意识到这非常简单化，因为John's不包括支持检查或所有新的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中的函数方面做了一些魔术。 这肉和填料是必需的吗？ 我的解决方案是否足够充分，或者Farkas shiv是否考虑了我没有考虑过的事情？

编辑

脚本现在使用正确的声明创建自己的样式标记（仍然只有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);

---

您的代码与html5_shiv的主要区别在于，您的版本仅针对IE在初始加载页面期间不支持HTML5元素的情况。

实际上，还有很多重要的问题需要处理，如果您在加载后使用Javascript修改页面内容，则会遇到这些问题。

有一次，实际上有一个名为html5 inner shiv的辅助脚本，它解决了这些问题。 然而，主html_shiv脚本的更新版本也包含了这些修补程序，因此不再需要辅助脚本。 但这确实意味着现在的主要剧本要大得多。

这占了你所看到的代码量。

如果你的HTML是静态的，那么答案是否定的，你不需要额外的代码; 你的版本没问题。 （或者你可以进入html5_shiv Github页面并下载以前的版本;早期版本看起来更像你的代码）。

但是，如果您打算编写任何类型的动态内容的网站，那么您最好使用完整的html5_shiv版本。 它修复的不仅仅是一个问题。

链接地址: http://www.djcxy.com/p/62821.html

上一篇: Downsides of a Custom HTML Shiv

下一篇: Any reason why I cannot take a screenshot of my app with ICS built