成為一個合格的web 前端開發(fā)工程師要知道的小事情
CSS規(guī)范：
1，命名：
class應優(yōu)先慮以這元素具體目的來進行命名绰上，應盡量簡短且富有含義渠驼。
統(tǒng)一采用小寫英文字母、數(shù)字百揭、“-” 的組合。其中不得包含漢字课锌、空格和特殊字符盹舞。
不推薦
.demoimage {} /* "demo" 和 "image" 中間沒加 "-" */
不推薦
.error_status {}
推薦
.n-sample {}
原則上踢步，不建議縮寫，除非一看就懂的縮寫述雾，如nav兼丰。
盡量避免使用id來控制樣式。
2黍翎，選擇器：
避免出現(xiàn)過多的祖先選擇器艳丛，各瀏覽器會有性能差異，消耗在選擇器的時間也不盡相同碰酝。
1戴差，盡量最多控制在3級以內(nèi)暖释。
不推薦
ul.example {}
.example1 .example2 .example3 .example4 {}
推薦
.example {}
.example1,
.example2 {}
2，非必要的情況下不要使用元素標簽名和ID或class進行組合
不推薦
ul#example {}
div.error {}
推薦
#example {}
.error {}
3嵌器，書寫順序：
同一聲明下的屬性在書寫時谐丢，應按功能進行分組蚓让，并以 Formatting Model（布局方式历极、位置） > Box Model（尺寸） > Typographic（文本相關） > Visual（視覺效果） 的順序書寫衷佃，以提高代碼的可讀性。
解釋：
Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相關屬性包括：border / margin / padding / width / height 等
Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等
Visual 相關屬性包括：background / color / transition / list-style 等
另外锄列，如果包含 content 屬性邻邮，應放在最前面克婶。
4，屬性簡寫：
在可以使用縮寫的情況下鸭蛙，盡量使用屬性縮寫筋岛。
推薦
.post {
font: 12px/1.5 arial, sans-serif;
}
不推薦
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
使用 border / margin / padding 等縮寫時睁宰，應注意隱含值對實際數(shù)值的影響，確實需要設置多個方向的值時才使用縮寫勋陪。
border / margin / padding 等縮寫會同時設置多個屬性的值诅愚，容易覆蓋不需要覆蓋的設定劫映。如某些方向需要繼承其他聲明的值，則應該分開設置雌桑。
5祖今，0和單位：
省略“0”值后面的單位拣技。不要在0值后面使用單位膏斤，除非有值邪驮。
不推薦
padding-bottom: 0px;
margin: 0em;
推薦
padding-bottom: 0;
margin: 0;
6毅访，十六進制表示法：
在可能的情況下，使用3個字符的十六進制表示法蟆融。
顏色值允許這樣表示磷斧，3個字符的十六進制表示法更簡短。始終使用小寫的十六進制數(shù)字冕末。
不推薦
color: #FF33AA;
推薦
color: #f3a;
7侣颂，帶前綴的屬性：
當使用特定廠商的帶有前綴的屬性時憔晒，通過縮進的方式，讓每個屬性的值在垂直方向對齊嘹屯，這樣便于多行編輯从撼。
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
8低零，！important：
盡量不使用 !important 聲明啃奴。當需要強制指定樣式且不允許任何場景覆蓋時雄妥，通過標簽內(nèi)聯(lián)和 !important 定義樣式依溯。
CSS樣式與文件命名參考表：
CSS樣式命名說明
wrapper頁面外圍控制整體布局寬度container容器,用于最外層layout布局header頁頭部分
footer頁腳部分誓沸、nav主導航壹粟、subnav二級導航趁仙、menu菜單、submenu子菜單干奢、sidebar側欄main頁面盏袄、主體tag、標簽msg 逛尚、message提示信息刁愿、tips小技巧、vote投票铣口、friendlink友情連接脑题、title標題、summary摘要他炊、loginbar登錄條掏熬、searchInput搜索輸入框秒梅、hot熱門熱點捆蜀、search搜索疮丛、search-output搜索輸出和搜索結果相似幔嫂、search-bar搜索條、search-results搜索結果copyright版權信息誊薄、branding商標logo網(wǎng)站LOGO標志履恩、joinus加入我們、partner合作伙伴service服務呢蔫、regsiter注冊切心、arr/arrow箭頭、guild指南片吊、sitemap網(wǎng)站地圖绽昏、list列表俏脊、homepage首頁全谤、subpage二級頁面子頁面、tool, toolbar工具條爷贫、drop下拉认然、dorpmenu下拉菜單、status狀態(tài)漫萄、scroll滾動卷员、.tab標簽頁、.left .right .center居左卷胯、中子刮、右、news新聞窑睁、download下載挺峡、banner廣告條(頂部廣告條)、products產(chǎn)品担钮、products-prices產(chǎn)品價格products-description產(chǎn)品描述橱赠、products-review產(chǎn)品評論、editor-review編輯評論箫津、news-release最新產(chǎn)品狭姨、publisher生產(chǎn)商、screenshot縮略圖苏遥、faqs常見問題饼拍、keyword關鍵詞、blog博客田炭、forum論壇
CSS文件命名說明base.css基本共用layout.css布局师抄，版面master.css或style.css主要的module.css模塊themes.css主題columns.css專欄font.css文字、字體form.css表單
JavaScript規(guī)范：
1教硫，文件命名可讀性強：
文件夾叨吮、文件的命名與命名空間應能代表代碼功能辆布，可讀性強。
2茶鉴，嵌入規(guī)則：
Javascript代碼應該盡量放在.js格式的文件中锋玲，需要調(diào)用的時候在頁面中以的形式包含進來。Javascript代碼若不是該頁面專用的涵叮，則應盡量避免在頁面中直接編寫Javascript代碼惭蹂。
3，全局命名空間無法與IIFE：
總是將代碼包裹成一個IIFE(Immediately-Invoked Function Expression)割粮，用以創(chuàng)建獨立隔絕的定義域剿干。這一舉措可防止全局命名空間被污染。
IIFE 還可確保代碼不會輕易被其它全局命名空間里的代碼所修改（第三方庫穆刻，window 引用置尔，被覆蓋的未定義的關鍵字等等）。
// 不推薦
var x = 10,
y = 100;
console.log(window.x + ' ' + window.y);
// 推薦
(function(log, w, undefined){
var x = 10,
y = 100;
console.log((w.x === undefined) + ' ' + (w.y === undefined));
}(window.console.log, window));
無論何時氢伟，想要創(chuàng)建一個新的封閉的定義域榜轿，那就用 IIFE。它不僅避免了干擾朵锣，也使得內(nèi)存在執(zhí)行完后立即釋放谬盐。
所有腳本文件建議都從 IIFE 開始。
立即執(zhí)行的函數(shù)表達式的執(zhí)行括號應該寫在外包括號內(nèi)诚些。雖然寫在內(nèi)還是寫在外都是有效的飞傀，但寫在內(nèi)使得整個表達式看起來更像一個整體，因此推薦這么做诬烹。
不推薦
(function(){})();
推薦
(function(){}());
如果想引用全局變量或者是外層 IIFE 的變量砸烦，可以通過下列方式傳參：
(function($, w, d){
$(function() {
w.alert(d.querySelectorAll('div').length);
});
}(jQuery, window, document));
4，引號：
統(tǒng)一使用單引號(‘’)绞吁，不使用雙引號(“”)幢痘。這在創(chuàng)建 HTML 字符串非常有好處：
var msg = 'This is some HTML';
5，變量生命：
總是使用 var 來聲明變量家破。如不指定 var颜说，變量將被隱式地聲明為全局變量，這將對變量難以控制汰聋。如果沒有聲明门粪，變量處于什么定義域就變得不清（可以是在 Document 或 Window 中，也可以很容易地進入本地定義域）烹困。所以玄妈，請總是使用 var 來聲明變量。駝峰命名法。
不推薦
x = 10;
y = 100;
推薦
var x = 10,
y = 100;
6措近，數(shù)組和對象字面量：
用數(shù)組和對象字面量來代替數(shù)組和對象構造器。數(shù)組構造器很容易讓人在它的參數(shù)上犯錯女淑。
不推薦
var a1 = new Array(x1, x2, x3);
var a2 = new Array(x1, x2);
var a3 = new Array(x1);
var a4 = new Array();
正因如此瞭郑，如果將代碼傳參從兩個變?yōu)橐粋€，那數(shù)組很有可能發(fā)生意料不到的長度變化鸭你。為避免此類怪異狀況屈张，請總是采用更多可讀的數(shù)組字面量。
推薦
var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];
對象構造器不會有類似的問題袱巨，但是為了可讀性和統(tǒng)一性阁谆，我們應該使用對象字面量。
不推薦
var o = new Object();
var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;
推薦
var o = {};
var o2 = {
a: 0,
b: 1,
c: 2,
'strange key': 3
};
7愉老，函數(shù)聲明：
函數(shù)應在調(diào)用前進行聲明场绿，內(nèi)部函數(shù)應在 var 聲明內(nèi)部變量的語句之后聲明，可以清晰地表明內(nèi)部變量和內(nèi)部函數(shù)的作用域嫉入。
此外焰盗，函數(shù)名緊接左括號'('之間，而右括號')'和后面的'{'之間要有個空格咒林，以清楚地顯示函數(shù)名以其參數(shù)部分熬拒，和函數(shù)體的開始。若函數(shù)為匿名 / 無名函數(shù)垫竞，則 function 關鍵字和左括號'('之間要留空格澎粟，否則可能誤認為該函數(shù)的函數(shù)名為 function。
var innerA = 1;
function outF () {
var innerA = 2;
function _inf () {
alert(‘valueA=’+innerA);
}
_inF();
}
outF ();
_inF();
8欢瞪，語句塊內(nèi)的函數(shù)聲明：
切勿在語句塊內(nèi)聲明函數(shù)活烙，在 ECMAScript 5 的嚴格模式下，這是不合法的遣鼓。函數(shù)聲明應該在定義域的頂層瓣颅。但在語句塊內(nèi)可將函數(shù)申明轉化為函數(shù)表達式賦值給變量。
不推薦
if (x) {
function foo() {}
}
推薦
if (x) {
var foo = function() {};
}
9譬正，流程控制：
if宫补、while、for曾我、do語句的執(zhí)行體總是用"{"和"}"括起來粉怕，即使在其結構體內(nèi)只有一條語句
if (s==100) {
alert('shit!');
}
不要使用 switch。switch 在所有的編程語言中都是個非常錯誤的難以控制的語句抒巢，建議用 if else 來替換它贫贝。
10，操作符：
（1）三元條件判斷（if 的快捷方法）
用三元操作符分配或返回語句。在比較簡單的情況下使用稚晚，避免在復雜的情況下使用崇堵。沒人愿意用 10 行三元操作符把自己的腦子繞暈。
不推薦
if(x === 10) {
return 'valid';
} else {
return 'invalid';
}
推薦
return x === 10 ? 'valid' : 'invalid';
11客燕，注釋：
（1）文件注釋
文件注釋要標明作者鸳劳、文件版本、創(chuàng)建/修改時間也搓、重大版本修改記錄
函數(shù)描述
文件版本赏廓、創(chuàng)建或者修改時間、功能傍妒、作者
/**
* @file Image.js
* @description 功能詳細描述
*/
?函數(shù)或者類等都要添加頭描述
/**
* 簡述
*
* 功能詳細描述
*
* @param arg1 參數(shù)1
* @param arg2 參數(shù)2幔摸，默認為0
* @return 看xxx是否成功
*/
function fooFunction (arg1, arg2) {
}
（2）操作注釋
單行注釋，寫在代碼上面
多行注釋
/*
* 注釋操作說明
*/
for( var i = 0; i < obj.lenght; i++) {
}????
