逼死強(qiáng)迫癥之代碼規(guī)范(性能優(yōu)化)
var關(guān)鍵字變量命名(利用$符號(hào)帶頭區(qū)分jQuery對(duì)象與HTML DOM對(duì)象)
var a = 0,
$loading = $('#loading'),
$body = $('body');
多次操作DOM對(duì)象緩存為變量
//不好的寫(xiě)法
$('#loading').html("loading...");
$('#loading').fadeIn();
//提升性能的寫(xiě)法
var $loading = $('#loading');
$loading.html("loading...");
$loading.fadeIn();
//再或者是
$loading.html("loading...").fadeIn(); //鏈?zhǔn)?
邏輯判斷表達(dá)式
if(!$a) {
$a = $('#a');
}
//高性能 + 精簡(jiǎn)
$a = $a || $('#a');
jQuery選擇器
//老生常談
//不要使用class選擇器
//不要使用class選擇器
//不要使用class選擇器(重要的事情說(shuō)三遍)
var a = $("span#a");
var b = $("#a #b"); //性能非常非常的差祈争,而且沒(méi)有必要(會(huì)遍歷前一個(gè)節(jié)點(diǎn))
慎重操作DOM
//一次性的DOM渲染
var list = '<ul id="list">';
for (var i = 1; i < 100; i++) {
list += '<li>' + i + '</li>';
}
list += '</ul>';
$('body').append(list);
// 多次重復(fù)的DOM渲染(不要這樣寫(xiě)凡傅!)
$('#header').append('<ul id="list"></ul>');
for (var i = 1; i < 100; i++) {
$('#list').append('<li>' + i + '</li>');
}
慎重使用全局變量粪糙,少用attribute存數(shù)據(jù),data()方法附加數(shù)據(jù)(某前端live講到數(shù)據(jù)存取性能時(shí)候提到鸯两,但是并沒(méi)有找到具體性能指標(biāo))
//項(xiàng)目中多數(shù)使用attr存取數(shù)據(jù)
<li data-id="877" value="101172" retype="pub"></li>
//采用jQuery的內(nèi)部函數(shù)data()來(lái)存儲(chǔ)狀態(tài)
$('#a').data('key', 'value'); //存儲(chǔ)
$('#a').data('key'); //調(diào)用
各種兼容坑坑坑(項(xiàng)目經(jīng)驗(yàn))
神奇的safari兼容
safari的new Data()只能識(shí)別"xxxx/xx/xx"闷旧,不能識(shí)別"xxxx-xx-xx"
神奇的獲取窗口位置兼容寫(xiě)法
var leftX = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;
ver topY = typeof window.screenTop == 'number' ? window.screenTop : window.screenY;
神奇的Firefox兼容
window.event不能用!而且沒(méi)有removeNode方法钧唐,只能使用node.parentNode.removeChild(node)
操作目錄樹(shù)的時(shí)候被坑過(guò)忙灼。
迷之手機(jī)端video對(duì)象(iOS兼容)
之前iOS操作video對(duì)象(設(shè)置display:none時(shí)不會(huì)隱藏彈出的播放窗口,只會(huì)隱藏頁(yè)面上的video節(jié)點(diǎn))钝侠,但是目前用戶反饋彈出的播放窗口也會(huì)隱藏了8迷啊(還未找到有人出現(xiàn)相同問(wèn)題)
題外話
? 之前寫(xiě)代碼碰到瓶頸期,不知道怎么才能提升帅韧;有時(shí)候還會(huì)被項(xiàng)目進(jìn)度逼著走里初,不得以的時(shí)間為了快速解決問(wèn)題忽略了一些細(xì)節(jié)性問(wèn)題,然而對(duì)于這些細(xì)節(jié)性問(wèn)題的鉆研忽舟,往往是提升能力的一大關(guān)鍵點(diǎn)双妨。
? “多拆一些好的輪子淮阐,而不是刻意去重新發(fā)明輪子”在我看來(lái)很有道理,為優(yōu)秀的源碼寫(xiě)擴(kuò)展十分有利于能力的提升斥难。(最近新寫(xiě)的幾個(gè)umeditor組件與通用方法都寫(xiě)成文檔放在git-flow上了,有興趣的可以看看源碼一起分享看法喲)
? 共勉帘饶。
作者 @鄭小明
2017 年 1 月 5 日