7

在最近的一个项目中，我使用了Alexander Farkas 的 HTML5 Shiv，我注意到缩小脚本后的大小为 2.274 KB。对于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);
4

1 回答 1

4

您的代码和 html5_shiv 之间的主要区别在于，您的版本仅满足 IE在页面初始加载期间缺乏对 HTML5 元素的支持。

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

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

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

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

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

于 2012-08-23T13:09:41.207 回答