WEB開發(fā)面面談之（5）——寫JS時(shí)必須注意的的一些問題

nihao 發(fā)布于2019-08-22 18:22 / 455人閱讀

摘要：更多詳情請(qǐng)看下面例舉了日常前段開發(fā)中遇到的場景，解決方案有很多，但從開發(fā)階段就進(jìn)行規(guī)范，可以很大程度避免很多后續(xù)的潛在和兼容問題。

更多詳情請(qǐng)看http://blog.zhangbing.club/%E...

下面例舉了日常前段開發(fā)中遇到的場景，解決方案有很多，但從開發(fā)階段就進(jìn)行規(guī)范，可以很大程度避免很多后續(xù)的潛在和兼容問題。

獲取body元素

非標(biāo)準(zhǔn)做法

document.body

W3C規(guī)范方法

document.getElementsByTagName("body").item(0)

使用jQuery/Zepto

$("body");

獲取窗口標(biāo)題

非標(biāo)準(zhǔn)做法

document.title

W3C規(guī)范方法

document.getElementsByTagName("title").item(0).innerHTML

使用jQuery/Zepto

$("title").text()

監(jiān)聽iframe的加載完成事件

寫法1:

iframe.onload = function() {...}

問題:存在兼容性問題，IE6、7無效

寫法2:

iframe.onload = iframe.onreadystatechange = function(){...}

問題:邏輯復(fù)雜，事件綁定邏輯混亂，在某些瀏覽器上onload和onreadystatechange都會(huì)觸發(fā)，需要另外加標(biāo)記位判斷，邏輯復(fù)雜。

簡潔而完全兼容的寫法:

var bindIframeOnloadEvent = function(el, onload) {
 if (el.attachEvent){
    el.attachEvent("onload", onload);
 } else {
   el.onload = onload;
 }
};
bindIframeOnloadEvent(iframe, function(){...});

如何操作iframe內(nèi)部的window

寫法1:

iframe.contentWindow

問題: 部分瀏覽器不兼容（IE67），獲取失敗

寫法2:

document.frames[frameId]

問題: 非標(biāo)準(zhǔn)調(diào)用，兼容性是問題，強(qiáng)制必須為iframe添加ID。

簡潔而完全兼容的寫法:

var getIframeWindow = function(el) {
return el.contentWindow || el.contentDocument.parentWindow;
};
var win = getIframeWindow(iframe);

設(shè)置iframe的邊框

寫法1:

iframe.boder = 0;

問題: 非W3C標(biāo)準(zhǔn)，后面很可能廢棄，部分瀏覽器不一定支持

寫法2:

iframe.style.boder = "none";

問題: 完全依賴CSS控制，但存在兼容性問題，IE繼續(xù)頭疼

最終解決方案:

iframe.boder = 0;
iframe.style.boder = "none";

如何在a標(biāo)簽上綁定鼠標(biāo)點(diǎn)擊事件

寫法1:

test

問題:

不符合CSP規(guī)范

等價(jià)于全局eval。只能調(diào)用公開的全局方法，污染全局變量

鼠標(biāo)懸停時(shí)，狀態(tài)欄會(huì)顯示要運(yùn)行的代碼？！這對(duì)最終用戶不友好

運(yùn)行代碼的上下文是window對(duì)象，和事件處理模型相違背

寫法2:

test

問題:

不符合CSP規(guī)范

onclick和href在部分瀏覽器(IE繼續(xù)躺槍)行文詭異，執(zhí)行沖突異常

等價(jià)于全局eval。只能調(diào)用公開的全局方法，污染全局變量（原因同寫法1）

寫法3:

test

問題:只解決了問題2，其余問題仍存在

標(biāo)準(zhǔn)寫法:

test

使用jQuery/Zepto亦可，存在唯一的小問題是鼠標(biāo)指針不是手形，是默認(rèn)。可采用CSS樣式來解決cursor:pointer 。

script標(biāo)簽的書寫方法深挖

要點(diǎn)

script標(biāo)簽的type屬性不是必須的，默認(rèn)缺省就是text/javascript

script標(biāo)簽的language屬性完全無用（asp時(shí)代微軟似乎使用該屬性來標(biāo)記服務(wù)端語言是vb還是c#），不要畫蛇添足

動(dòng)態(tài)創(chuàng)建的script標(biāo)簽必須要指定type="text/javascript"，否則JS不會(huì)執(zhí)行

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "###";
document.getElementsByTagName("body").item(0).appendChild(script);

動(dòng)態(tài)創(chuàng)建的script追加動(dòng)作是異步的，并不會(huì)立刻取得script運(yùn)行結(jié)果，如果要等待加載完成需要監(jiān)聽完成事件

使用非標(biāo)準(zhǔn)或者比較新的屬性需要格外注意，不要使代碼邏輯依賴于這些特性。如defer/async屬性

使用script.onerror來監(jiān)聽腳本執(zhí)行失敗的情況（語法錯(cuò)誤，初始化運(yùn)行時(shí)錯(cuò)誤等都會(huì)觸發(fā)）

監(jiān)聽script的完成事件比較復(fù)雜。

varbindScriptOnloadEvent = function(script, onload) {
    var done = false;
    script.onload = script.onreadystatechange = function() {
    if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
        done = true;
        script.onload = script.onreadystatechange = null;
        onload();
        }
    };
};
bindScriptOnloadEvent(script, function(){...});

需要考慮兼容性，所以代碼較多

substr函數(shù)不要使用

原因：非標(biāo)準(zhǔn)，在部分瀏覽器報(bào)錯(cuò)，甚至連我的Android4.0上的瀏覽器都不認(rèn)該函數(shù)

替代方案：使用substring函數(shù)。

jQuery/Zepto選擇器的.text()和.html()方法

現(xiàn)狀：大多數(shù)開發(fā)同學(xué)會(huì)混淆兩者并亂用，不清楚何時(shí)用哪個(gè)

詳解：.text()方法用于獲取和設(shè)置文本內(nèi)容，.html()方法用戶獲取和設(shè)置HTML內(nèi)容，當(dāng)要設(shè)置或獲取的內(nèi)容僅僅為文本時(shí)，兩者行為完全相同，但要操作的文本內(nèi)容是HTML時(shí)，行為有著本質(zhì)區(qū)別。

總結(jié)：

根據(jù)實(shí)際需要選擇使用哪個(gè)方法，如能斷定內(nèi)容為純文本請(qǐng)使用text()方法。僅當(dāng)確實(shí)需要渲染HTML時(shí)才用html()方法

從安全角度，text()方法比html()方法更安全，無注入風(fēng)險(xiǎn)。

嚴(yán)格意義上，html()方法不符合CSP規(guī)范，直接將字符串解析為DOM節(jié)點(diǎn)

業(yè)務(wù)需要確實(shí)要使用.html()方法渲染動(dòng)態(tài)內(nèi)容時(shí)，必須做安全檢查，避免惡意代碼注入

.text()和.html()獲取值可能存在代碼縮進(jìn)（空格和TAB），如有需要可以使用$.trim()來剔除

數(shù)組與對(duì)象深挖

要點(diǎn)：

數(shù)組對(duì)象僅有concat/reverse/slice/splice為標(biāo)準(zhǔn)API，而且絕對(duì)完全兼容

數(shù)組對(duì)象請(qǐng)勿使用indexOf、lastIndexOf、map、every、forEach等非標(biāo)準(zhǔn)API，不僅兼容性存在問題，而且效率不一定高，反而不如自己實(shí)現(xiàn)

遍歷數(shù)組請(qǐng)將.length緩存到變量

for(vari=0,l=arr.length;i
遍歷數(shù)組請(qǐng)勿使用此寫法
for(vari in arr){...}
遍歷key-value型對(duì)象必須使用hasOwnProperty()來過濾遍歷結(jié)果。
for(var key in obj) {
if(!obj.hasOwnProperty(key) continue;
    //...
}
不論是數(shù)組或?qū)ο螅诒闅v操作時(shí)不要改變被遍歷的變量結(jié)構(gòu)，如增刪元素，增刪key值等（雖然你可以這么做）,對(duì)于元素自身及子成員的修改是絕對(duì)安全的。
關(guān)于Prototype的使用
要點(diǎn)：

不要亂用Prototype。不要輕易在Object/Array/Function等對(duì)象上追加prototype（雖然我們已有某些庫這么做了）容易產(chǎn)生歧義沖突，在使用for～in遍歷時(shí)很容易引發(fā)問題。
自定義的prototype成員會(huì)在for～in循環(huán)中出現(xiàn)，請(qǐng)根據(jù)實(shí)際情況使用hasOwnProperty()來過濾遍歷結(jié)果。

不嚴(yán)謹(jǐn)?shù)膶懛ǎ?/p>
function Test() {}
Test.prototype.a = 1;
Test.prototype.b = 2;
var o = new Test();
for(vari in o) {
console.log({key: i, value: o});
}
//{key:a, value:1}
//{key:b, value:2}
嚴(yán)謹(jǐn)?shù)膶懛ǎ?var o = new Test();
for(vari in o) {
if(!o.hasOwnProperty(i)) continue;
console.log({key: i, value: o});
}
//無輸出 

對(duì)象的__proto成員，用途是獲取當(dāng)前實(shí)例的原型對(duì)象。非標(biāo)準(zhǔn)實(shí)現(xiàn)，存在兼容性問題，請(qǐng)不要使用
原則上不要輕易重寫已存在的prototype方法。但可以在單個(gè)實(shí)例中覆寫該方法
prototype上定義靜態(tài)對(duì)象變量，會(huì)造成所有對(duì)象共用，而不是分別創(chuàng)建實(shí)例，請(qǐng)?jiān)跇?gòu)造方法中分配實(shí)例

錯(cuò)誤寫法：
function Test() {}
Test.prototype.arr = [];
var a = new Test();
var b = new Test();
a.arr.push(1);
b.arr.push(2);
console.log(a.arr, b.arr);
//[1,2], [1,2]
正確寫法
function Test() {
this.arr = [];
}

var a = new Test();
var b = new Test();
a.arr.push(1);
b.arr.push(2);
console.log(a.arr, b.arr);
//[1], [2]
總結(jié)
JS是門靈活的語言，靈活到想怎么寫都可以。但里面坑還是不少的。在有多種選擇時(shí)，多考慮下哪種方法更好，而不是盲目選擇一種。