h5shiv.js实现原理及代码学习

h5shiv.js实现原理及代码学习

html方面主要是学习了H5的一些标签和属性的运用,因为要兼容IE8,所以采用的比较少,然后兼容是使用h5shiv.js这个库来实现的。稍微了解了一下h5shiv的工作机制####

参考连接 https://www.xxling.com/blog/article/41.aspx
源码链接 https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js

源码注释非常的多(和代码量差不多,源码总共才300行,空行和注释大概有一大半),写的逻辑也很清晰,这种代码风格可以学习一下。

1.首先是如何检测浏览器是否支持HTML5标签的样式,通过创建一个标签,然后检测标签中是否有html5的新属性(源码用的是a标签的hidden属性)("hidden" in a)若为true则说明支持,否则不支持。
2.然后是如何检测浏览器是否支持Html5标签,通过向刚才创建的a标签里添加一个自定义子标签,通过a.childNodes.length来判断 IE8及以下返回为0,其余为1
3.最后通过对document.creatDocumentFragement方法中的三个属性cloneNode createDocumentFragment createElement 来判断是否支持html5标签。

  • 检测完毕后 如果不支持html5标签样式则向标签里添加H5的css样式。如下图所示,可以看到IE8里head里被插入了一个样式表。这个样式表是为了初始化h5的样式,因为h5标签默认为内联标签
这里写图片描述
h5shiv添加的样式
  • 如果不支持html5标签则通过document.creatElement来一一创建一次h5的标签。只要在document里创建过一次对象后,后续的样式就能正常的应用在h5标签上了。为了验证这一过程,做个简单的实验
    代码:

    aabbcc

    样式:

    IE8下显示效果:
    这里写图片描述

添加script :
document.creatElement("");
IE8下显示效果:

这里写图片描述
  • 知识点1 documentFragment,在平时经常会遇到循环里往某个节点一直添加新的节点的情况 e.g:
    for(var i = 0;i < 10;i++){
    var node = document.creatElement("");
    document.body.append(node);
    }
    这样的情况下每次append都会引起整个页面的回流,消耗性能巨大。改写成如下情况。
    var d = document.createDocumentFragment();
    for(var i = 0;i < 10;i++){
    var node = document.creatElement("");
    d.append(node);
    }
    document.body.append(d);
    这样写则只会引起一次回流,就是append(d)的时候。可以把documentFragement理解成在document里的缓存碎片节点。
  • 知识点2 Function()与eval()
    Function是类实例的封装对象,类似于String之于string。
    Function()可以通过 Function(arg1,arg2,...,argn,执行体);的结构构造一个函数,其中执行体为字符串,执行方式同eval,但是性能会比eval高很多,所以推荐使用Function()替代,而且Function中新var出来的变量在局部作用域中,不会造成全局污染。当然两者的可读性都不是很好,能不用最好不用。

  • 知识点3 h5shiv.js的写法 代码风格
    通过闭包(function(window,document){
    })(window,document); 的方式将内容全部封装到一个立即执行函数里,然后通过window.html5 = html5 的方式将内部接口暴露出来。能避免全局污染,同jquery暴露出来的只有$和jQuery两个对象。
    整个函数的结构为
    (function(window,document){
    part 1 : 变量声明;
    part 2 : 检查H5支持情况 , 立即执行函数
    part 3 : 功能函数
    part 4 : 暴露接口
    part 5 : 函数入口
    })(window,document);

你可能感兴趣的:(h5shiv.js实现原理及代码学习)