背景
周末啦，闲得无事不如来研究IE8吧，哇哈哈。😄
在阅读JQuery技术内幕时读到了一些兼容性问题，因此做些测试并且记录，并且在此发布以确保以后查找方便与分享。
问题
1.undefined的修改(内容多数引用JQuery内幕技术)
在JQuery的源码中可以看到以下代码段
(function(window,undefined){
var JQuery=...
...
window.JQuery = window.$=JQuery;
})(window);
那么内部为什么有一个undefined的参数呢？
这是由于undefined在低版本浏览器中是可以修改的，因此加上参数undefined保证JQuery内部的undefined没有被重赋值。
我并且做了一下IE8浏览器内部测试，截图如下：
IE8下undefined被重定义
更多的浏览器测试我并没有做，因此此处引用JQuery内幕技术的图片：
undefined测试结果
2.String取值使用CharAt还是使用[]？
在JQuery源码中看到如下代码：
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
...
}
}
上述内容中对String内容取值时使用的是charAt方法，但是我们知道可以使用String[i]的方法进行获取第i个数据，那么此处为什么要使用charAt呢？他有什么优势呢？
在网络上寻找后有人给出了如下的答案：
1.使用String[index]取值在超出范围的时候会返回undefined，而使用charAt方法取值超出返回后则会返回空字符串。
2.使用String[index]在IE6～8之下会返回undefined，而使用CharAt则会正确的返回所需要索引的值。(注意有坑，请看下面的测试2)
答案是有了，但是没经过自己测试谁也说不上其正确性，那么我们来测试吧。
测试1：
//Code：
var a = "test";
console.log(a[10]);
console.log(a.charAt(10));
chrome下测试图片
可见先输出undefined，然后输出了一个空字符串，可见答案一在chrome下是正确的。那么在IE下呢？
IE下测试结果
可见在chrome下与IE下结果的正确性，firefox以及opera等浏览器未做测试，有兴趣的话可以自己测试下。
测试2:
由于chrome下写代码多次就直接做IE测试了：
IE下使用[]获取String
竟然取到了值！。。。在IE8下取到了！难道是回答者所给的答案不正确？还是其他的可能，为了验证我不使用字面量赋值了而是直接构造一个String对象进行测试：
IE8下构造String对象的测试结果
竟然又取不到值了。。。真是奇怪了，以我现在的知识还无法解答上述现象的原理，因此就暂时记录吧。那么看来网上所给的答案也只是片面的，因此该答案应该改为：
在IE6～8之下的String对象调用String[index]会返回undefined，而使用CharAt则会正确的返回所需要索引的值。
由上述可见如果不考虑IE8的兼用型使用[]和charAt都是可以的，其效率相差无几，但是如果要考虑IE8兼容性，最好还是使用charAt，JQuery源码就是使用的CharAt对String对象进行取值。
问题2扩展
对于UTF-8的字符串可以使用charAt以及String[]进行获取值，但是对于UTF-16的字符串上述两种方法都无能为力了，ES6提供了pointCodeAt以及fromCodePoint方法来处理UTF-16字符串的问题，但是还没有像CharAt一样的用于获取UTF-16第几个位置的字符的方法，虽然有个提案提出使用at方法来完成该任务，但是现在只处于提案阶段，浏览器还未提供支持不过git上已有方法进行扩展git地址。
3.不支持HTML5标签的浏览器如何支持HTML5标签？
在学习JQuery技术内幕时，发现有一个方法叫做createSafeFragment(),该方法的存在是为了教会不支持HTML5标签的浏览器识别HTML5标签。
function createSafeFragment( document ) {
var list = nodeNames.split( "|" ),
safeFrag = document.createDocumentFragment();
//注意document.createDocumentFragment返回的是DocumentFragment对象其中不存在createElement方法
//而createElement方法在Document对象下才有
//上述解释来自MDN
//然而IE下 document.createDocumentFragment()返回的DocumentFragment对象也有createElement方法
if ( safeFrag.createElement ) {//判断浏览器是否支持HTML5，原理暂时不明
while ( list.length ) {
safeFrag.createElement(
list.pop()
);
}
}
return safeFrag;
}
上述JQuery代码内部存在list数组对象，其存储着几乎所有HTML5标签，然后通过document.createElement()方法调用之后，老旧版本的浏览器就可以识别HTML5标签了。
总结
方法与方案在网络上能搜索到很多，但是最终还是得靠自己的测试与记录，此篇文章主要记录了一些兼容性问题，在此分享与记录。
行文仓促，如有错误，还望指出。🙏
网友评论