逼死強迫癥之代碼規(guī)范（性能優(yōu)化）

var關(guān)鍵字變量命名（利用$符號帶頭區(qū)分jQuery對象與HTML DOM對象）

var a = 0,
    $loading = $('#loading'),
    $body = $('body');

多次操作DOM對象緩存為變量

//不好的寫法
$('#loading').html("loading...");
$('#loading').fadeIn();

//提升性能的寫法
var $loading = $('#loading');
$loading.html("loading...");
$loading.fadeIn();

//再或者是
$loading.html("loading...").fadeIn();   //鏈式

邏輯判斷表達式

if(!$a) {
    $a = $('#a');
}
//高性能 + 精簡
$a = $a || $('#a');

jQuery選擇器

//老生常談
//不要使用class選擇器
//不要使用class選擇器
//不要使用class選擇器(重要的事情說三遍)

var a = $("span#a");
var b = $("#a #b"); //性能非常非常的差，而且沒有必要(會遍歷前一個節(jié)點)

慎重操作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渲染(不要這樣寫！)
$('#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ù)使用attr存取數(shù)據(jù)
<li data-id="877" value="101172" retype="pub"></li>
//采用jQuery的內(nèi)部函數(shù)data()來存儲狀態(tài)
$('#a').data('key', 'value'); //存儲
$('#a').data('key'); //調(diào)用

各種兼容坑坑坑（項目經(jīng)驗）

神奇的safari兼容

safari的new Data()只能識別"xxxx/xx/xx"，不能識別"xxxx-xx-xx"

神奇的獲取窗口位置兼容寫法

var leftX = typeof window.screenLeft == 'number' ? window.screenLeft : window.screenX;
ver topY = typeof window.screenTop == 'number' ? window.screenTop : window.screenY;

神奇的Firefox兼容

window.event不能用！而且沒有removeNode方法，只能使用node.parentNode.removeChild(node)

操作目錄樹的時候被坑過。

迷之手機端video對象（iOS兼容）

之前iOS操作video對象（設(shè)置display:none時不會隱藏彈出的播放窗口，只會隱藏頁面上的video節(jié)點），但是目前用戶反饋彈出的播放窗口也會隱藏了！（還未找到有人出現(xiàn)相同問題）

題外話

? 之前寫代碼碰到瓶頸期，不知道怎么才能提升；有時候還會被項目進度逼著走，不得以的時間為了快速解決問題忽略了一些細節(jié)性問題，然而對于這些細節(jié)性問題的鉆研，往往是提升能力的一大關(guān)鍵點。

? “多拆一些好的輪子，而不是刻意去重新發(fā)明輪子”在我看來很有道理，為優(yōu)秀的源碼寫擴展十分有利于能力的提升。（最近新寫的幾個umeditor組件與通用方法都寫成文檔放在git-flow上了，有興趣的可以看看源碼一起分享看法喲）

? 共勉。

? 什么才算是真正的編程能力（知乎）

作者 @鄭小明
2017 年 1 月 5 日