自定义HTML Shiv的缺点

Downsides of a Custom HTML Shiv

本文关键字：缺点 Shiv HTML 自定义      更新时间：2023-09-26

在最近的一个项目中，我使用了Alexander Farkas的HTML5 Shiv，我注意到缩小后的脚本大小为2.274KB。对于John Resig在两行中演示的概念来说，这对我来说似乎相当大（我意识到这非常简单，因为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中创建元素和检查函数方面发挥了一些魔力。这肉和馅料有必要吗？我的解决方案是否足够，或者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内部shiv的次要脚本，它解决了这些问题。但是，最新版本的主html_shiv脚本也包含了这些修复程序，因此不再需要辅助脚本。但这确实意味着主剧本现在要大得多。

这说明了您看到的代码数量。

如果你的HTML是静态的，那么答案是否定的，你不需要所有额外的代码；你的版本很好。（或者您可以访问html5_shiv Github页面并下载以前的版本；早期版本看起来更像您的代码）。

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

相关文章：