背景

周末啦，閑得無(wú)事不如來(lái)研究IE8吧，哇哈哈。??
在閱讀JQuery技術(shù)內(nèi)幕時(shí)讀到了一些兼容性問(wèn)題，因此做些測(cè)試并且記錄，并且在此發(fā)布以確保以后查找方便與分享。

問(wèn)題

1.undefined的修改(內(nèi)容多數(shù)引用JQuery內(nèi)幕技術(shù))

在JQuery的源碼中可以看到以下代碼段

(function(window,undefined){
    var JQuery=...
    ...
    window.JQuery = window.$=JQuery;
})(window);

那么內(nèi)部為什么有一個(gè)undefined的參數(shù)呢？
這是由于undefined在低版本瀏覽器中是可以修改的，因此加上參數(shù)undefined保證JQuery內(nèi)部的undefined沒(méi)有被重賦值。
我并且做了一下IE8瀏覽器內(nèi)部測(cè)試，截圖如下：

IE8下undefined被重定義

更多的瀏覽器測(cè)試我并沒(méi)有做，因此此處引用JQuery內(nèi)幕技術(shù)的圖片：

undefined測(cè)試結(jié)果

2.String取值使用CharAt還是使用[]？

在JQuery源碼中看到如下代碼：

if ( typeof selector === "string" ) {
  if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
      ...
  }
}

上述內(nèi)容中對(duì)String內(nèi)容取值時(shí)使用的是charAt方法，但是我們知道可以使用String[i]的方法進(jìn)行獲取第i個(gè)數(shù)據(jù)，那么此處為什么要使用charAt呢？他有什么優(yōu)勢(shì)呢？

在網(wǎng)絡(luò)上尋找后有人給出了如下的答案：
1.使用String[index]取值在超出范圍的時(shí)候會(huì)返回undefined，而使用charAt方法取值超出返回后則會(huì)返回空字符串。
2.使用String[index]在IE6～8之下會(huì)返回undefined，而使用CharAt則會(huì)正確的返回所需要索引的值。(注意有坑，請(qǐng)看下面的測(cè)試2)

答案是有了，但是沒(méi)經(jīng)過(guò)自己測(cè)試誰(shuí)也說(shuō)不上其正確性，那么我們來(lái)測(cè)試吧。

測(cè)試1：

//Code：
var a = "test";
console.log(a[10]);
console.log(a.charAt(10));

chrome下測(cè)試圖片

可見先輸出undefined，然后輸出了一個(gè)空字符串，可見答案一在chrome下是正確的。那么在IE下呢？

IE下測(cè)試結(jié)果

可見在chrome下與IE下結(jié)果的正確性，firefox以及opera等瀏覽器未做測(cè)試，有興趣的話可以自己測(cè)試下。

測(cè)試2:
由于chrome下寫代碼多次就直接做IE測(cè)試了：

IE下使用[]獲取String

竟然取到了值！。。。在IE8下取到了！難道是回答者所給的答案不正確？還是其他的可能，為了驗(yàn)證我不使用字面量賦值了而是直接構(gòu)造一個(gè)String對(duì)象進(jìn)行測(cè)試：

IE8下構(gòu)造String對(duì)象的測(cè)試結(jié)果

竟然又取不到值了。。。真是奇怪了，以我現(xiàn)在的知識(shí)還無(wú)法解答上述現(xiàn)象的原理，因此就暫時(shí)記錄吧。那么看來(lái)網(wǎng)上所給的答案也只是片面的，因此該答案應(yīng)該改為：

在IE6～8之下的String對(duì)象調(diào)用String[index]會(huì)返回undefined，而使用CharAt則會(huì)正確的返回所需要索引的值。

由上述可見如果不考慮IE8的兼用型使用[]和charAt都是可以的，其效率相差無(wú)幾，但是如果要考慮IE8兼容性，最好還是使用charAt，JQuery源碼就是使用的CharAt對(duì)String對(duì)象進(jìn)行取值。

問(wèn)題2擴(kuò)展

對(duì)于UTF-8的字符串可以使用charAt以及String[]進(jìn)行獲取值，但是對(duì)于UTF-16的字符串上述兩種方法都無(wú)能為力了，ES6提供了pointCodeAt以及fromCodePoint方法來(lái)處理UTF-16字符串的問(wèn)題，但是還沒(méi)有像CharAt一樣的用于獲取UTF-16第幾個(gè)位置的字符的方法，雖然有個(gè)提案提出使用at方法來(lái)完成該任務(wù)，但是現(xiàn)在只處于提案階段，瀏覽器還未提供支持不過(guò)git上已有方法進(jìn)行擴(kuò)展git地址。

3.不支持HTML5標(biāo)簽的瀏覽器如何支持HTML5標(biāo)簽？

在學(xué)習(xí)JQuery技術(shù)內(nèi)幕時(shí)，發(fā)現(xiàn)有一個(gè)方法叫做createSafeFragment(),該方法的存在是為了教會(huì)不支持HTML5標(biāo)簽的瀏覽器識(shí)別HTML5標(biāo)簽。

function createSafeFragment( document ) {
    var list = nodeNames.split( "|" ),
    safeFrag = document.createDocumentFragment();
    //注意document.createDocumentFragment返回的是DocumentFragment對(duì)象其中不存在createElement方法
    //而createElement方法在Document對(duì)象下才有
        //上述解釋來(lái)自MDN

    //然而IE下 document.createDocumentFragment()返回的DocumentFragment對(duì)象也有createElement方法
    if ( safeFrag.createElement ) {//判斷瀏覽器是否支持HTML5，原理暫時(shí)不明
        while ( list.length ) {
            safeFrag.createElement(
                    list.pop()
            );
        }
    }
    return safeFrag;
}

上述JQuery代碼內(nèi)部存在list數(shù)組對(duì)象，其存儲(chǔ)著幾乎所有HTML5標(biāo)簽，然后通過(guò)document.createElement()方法調(diào)用之后，老舊版本的瀏覽器就可以識(shí)別HTML5標(biāo)簽了。

總結(jié)

方法與方案在網(wǎng)絡(luò)上能搜索到很多，但是最終還是得靠自己的測(cè)試與記錄，此篇文章主要記錄了一些兼容性問(wèn)題，在此分享與記錄。

行文倉(cāng)促，如有錯(cuò)誤，還望指出。??