在最近的一个项目中我使用了
Alexander Farkas’ HTML5 Shiv,我发现当缩小时脚本是2.274 KB.对于
John Resig demonstrated in essentially two lines这个概念来说,这对我来说似乎很大(我意识到这是非常过于简单化的,因为John不包括对支持或所有新HTML5元素的检查).我挖到了
html5shiv source.这是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,video',elementArr = elements.split(','),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.它修复的不仅仅是一个问题.