2016.11.24前端技術(shù)分享講稿

逼死強(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 日

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末哑诊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子及刻,更是在濱河造成了極大的恐慌镀裤,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缴饭,死亡現(xiàn)場(chǎng)離奇詭異暑劝,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)颗搂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門(mén)担猛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人丢氢,你說(shuō)我怎么就攤上這事傅联。” “怎么了疚察?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵蒸走,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我貌嫡,道長(zhǎng)比驻,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任岛抄,我火速辦了婚禮别惦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘夫椭。我一直安慰自己步咪,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布益楼。 她就那樣靜靜地躺著猾漫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪感凤。 梳的紋絲不亂的頭發(fā)上悯周,一...
    開(kāi)封第一講書(shū)人閱讀 49,166評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音陪竿,去河邊找鬼禽翼。 笑死屠橄,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的闰挡。 我是一名探鬼主播锐墙,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼长酗!你這毒婦竟也來(lái)了溪北?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤夺脾,失蹤者是張志新(化名)和其女友劉穎之拨,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體咧叭,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蚀乔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了菲茬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吉挣。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖婉弹,靈堂內(nèi)的尸體忽然破棺而出听想,到底是詐尸還是另有隱情,我是刑警寧澤马胧,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布汉买,位于F島的核電站,受9級(jí)特大地震影響佩脊,放射性物質(zhì)發(fā)生泄漏蛙粘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一威彰、第九天 我趴在偏房一處隱蔽的房頂上張望出牧。 院中可真熱鬧,春花似錦歇盼、人聲如沸舔痕。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)伯复。三九已至,卻和暖如春邢笙,著一層夾襖步出監(jiān)牢的瞬間啸如,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工氮惯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留叮雳,地道東北人想暗。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像帘不,于是被迫代替她去往敵國(guó)和親说莫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容

  • 不要拿HTML中的內(nèi)容來(lái)寫(xiě)判斷D骸4⑾痢! 不要用類名寫(xiě)選擇器9妆住>堋擒悬! 代碼規(guī)范檢查 勤寫(xiě)注釋 前端性能優(yōu)化(https:...
    鄭小明閱讀 410評(píng)論 0 3
  • 常見(jiàn)試題 行內(nèi)元素:會(huì)在水平方向排列模她,不能包含塊級(jí)元素,設(shè)置width無(wú)效懂牧,height無(wú)效(可以設(shè)置line-h...
    他大舅啊閱讀 2,427評(píng)論 1 5
  • 請(qǐng)參看我github中的wiki侈净,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,108評(píng)論 2 19
  • iMindMap思維導(dǎo)圖提供了恢復(fù)未保存導(dǎo)圖功能僧凤。當(dāng)電腦出于一些不可抗拒的因素(電源斷開(kāi)畜侦,系統(tǒng)崩潰等)而自動(dòng)關(guān)閉后...
    一只流浪喵閱讀 415評(píng)論 0 0
  • 作者:依然 一大早醒來(lái),林郁便覺(jué)得渾身酸痛躯保,摸了摸額頭竟有燙手旋膳。難道是昨晚喝太多街邊擼串又穿的太少著涼了?想起昨晚...
    依Ran閱讀 453評(píng)論 0 0