via:Github

CSS書寫規(guī)范

-為了欺騙W3C的驗證工具,可將代碼分為兩個文件沾凄，一個是針對所有瀏覽器,一個只針對IE。即將所有符合W3C的代碼寫到一個文件中,而一些IE中必須而又不能通過W3C驗證的代碼（如:cursor:hand;）放到另一個文件中，再用下面的方法導入酱吝。

<!-- 放置所有瀏覽器樣式-->
<link rel="stylesheet" type="text/css" href="">
<!-- 只放置IE必須搂抒，而不能通過w3c的-->
<!--[if IE]
    <link rel="stylesheet" href="">
<![endif]-->

• CSS樣式新建或修改盡量遵循以下原則。

• 根據(jù)新建樣式的適用范圍分為三級：全站級遣耍、產(chǎn)品級、頁面級低千。

• 盡量通過繼承和層疊重用已有樣式配阵。

• 不要輕易改動全站級CSS。改動后示血，要經(jīng)過全面測試棋傍。

• CSS屬性顯示順序。

• 顯示屬性

• 元素位置

• 元素屬性

• 元素內(nèi)容屬性

• CSS書寫順序难审。

 .header {
/* 顯示屬性 */
    display || visibility
    list-style
    position top || right || bottom || left
    z-index
    clear
    float
/* 自身屬性 */
    width max-width || min-width
    height max-height || min-height
    overflow || clip
    margin
    padding
    outline
    border
    background
/* 文本屬性 */
    color
    font
    text-overflow
    text-align
    text-indent
    line-height
    white-space
    vertical-align
    cursor
    content
    };

• 兼容多個瀏覽器時瘫拣，將標準屬性寫在底部。

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 *//標準屬性

• 使用選擇器時告喊，命名比較短的詞匯或者縮寫的不允許直接定義樣式麸拄。

.hd,.bd,.td{};//如這些命名

可用上級節(jié)點進行限定。.recommend-mod .hd

• 多選擇器規(guī)則之間換行黔姜，即當樣式針對多個選擇器時每個選擇器占一行拢切。

button.btn,
input.btn,
input[type="button"] {…};

• 優(yōu)化CSS選擇器。

#header a { color: #444; };/*CSS選擇器是從右邊到左邊進行匹配*/

• 瀏覽器將檢查整個文檔中的所有鏈接和每個鏈接的父元素秆吵，并遍歷文檔樹去查找ID為header的祖先元素淮椰，如果找不到header將追溯到文檔的根節(jié)點，解決方法如下纳寂。

避免使用通配規(guī)則和相鄰兄弟選擇符主穗、子選擇符,、后代選擇符毙芜、屬性選擇符等選擇器
不要限定id選擇符忽媒，如div#header（提權(quán)的除外）
不要限定類選擇器，如ul.recommend（提權(quán)的除外）
不要使用 ul li a 這樣長的選擇符
避免使用標簽子選擇符腋粥，如#header > li > a

• 使用z-index屬性盡量z-index的值不要超過150（通用組的除外）晦雨，頁面中的元素內(nèi)容的z-index不能超過10（提示框等模塊除外但維持在150以下）架曹，不允許直接使用（999~9999）之間大值。

• 盡量避免使用CSS Hack闹瞧。

property:value; /* 所有瀏覽器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
*property:value; /* IE6/7 */
property:value\9; /* IE6/7/8/9音瓷，即所有IE瀏覽器 */

\* html selector { … }; /* IE6 */
\*:first-child+html selector { … }; /* IE7 */
html>body selector { … }; /* 非IE6 */
@-moz-document url-prefix() { … }; /* firefox */
@media all and (-webkit-min-device-pixel-ratio:0) { … }; /* saf3+/chrome1+ */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … }; /* opera */
@media screen and (max-device-width: 480px) { … }; /* iPhone/mobile webkit */

• 避免使用低效的選擇器。

body > * {…};
ul > li > a {…};
#footer > h3 {…};
ul#top_blue_nav {…};
#searbar span.submit a { … }; /* 反面示例 */

• 六個不要三個避免一個使用夹抗。

• 不要在標簽上直接寫樣式

• 不要在CSS中使用expression

• 不要在CSS中使用@import

• 不要在CSS中使用!important

• 不要在CSS中使用“*”選擇符

• 不要將CSS樣式寫為單行

• 避免使用filter

• 避免使用行內(nèi)（inline）樣式

• 避免使用“*”設置{margin: 0; padding: 0;}

• 使用after或overflow的方式清浮動

• 減少使用影響性能的屬性。

position:absolute;
float:left;//如這些定位或浮動屬性

• 減少在CSS中使用濾鏡表達式和圖片repeat,尤其在body當中,渲染性能極差, 如果需要用repeat的話,圖片的寬或高不能少于8px纵竖。

JavaScript書寫規(guī)范

• 命名規(guī)范漠烧。

常量名
    全部大寫并單詞間用下劃線分隔
    如：CSS_BTN_CLOSE、TXT_LOADING
對象的屬性或方法名
    小駝峰式（little camel-case）
    如：init靡砌、bindEvent已脓、updatePosition
    示例：Dialog.prototype = {
                init: function () {},
                bindEvent: function () {},
                updatePosition: function () {}
                …
                };
類名（構(gòu)造器）
    -->小駝峰式但首字母大寫
    -->如：Current、DefaultConfig
函數(shù)名
    -->小駝峰式
    -->如：current()通殃、defaultConfig()
變量名
    -->小駝峰式
    -->如：current度液、defaultConfig
私有變量名
    -->小駝峰式但需要用_開頭
    -->如：_current、_defaultConfig
變量名的前綴
    -->續(xù)

• 代碼格式画舌。

"()"前后需要跟空格
"="前后需要跟空格
","后面需要跟空格
JSON對象需格式化對象參數(shù)
if堕担、while、for曲聂、do語句的執(zhí)行體用"{}"括起來
if (a==1) {
    //代碼
};

• 避免額外的逗號霹购。var arr = [1,2,3,];

• for-in循環(huán)體中必須用hasOwnProperty方法檢查成員是否為自身成員，避免來自原型鏈上的污染朋腋。

• 長語句可考慮斷行齐疙。

TEMPL_SONGLIST.replace('{TABLE}', da['results'])
    .replace('{PREV_NUM}', prev)
    .replace('{NEXT_NUM}', next)
    .replace('{CURRENT_NUM}', current)
    .replace('{TOTAL_NUM}', da.page_total);

-為了避免和JSLint的檢驗機制沖突，“.”或“+”這類操作符放在行尾旭咽。

TEMPL_SONGLIST.replace('{TABLE}', da['results']).
    replace('{PREV_NUM}', prev).
    replace('{NEXT_NUM}', next).
    replace('{CURRENT_NUM}', current).
    replace('{TOTAL_NUM}', da.page_total);

如果模塊代碼中贞奋，使用其它全局變量想跳過JSLint的檢查，可以在該文件中加入/global/聲明穷绵。

/*global alert: true, console: true, top: true, setTimeout: true */

• 使用嚴格的條件判斷符轿塔。用===代替==，用!==代替!=请垛，避免掉入==造成的陷阱,在條件判斷時催训，這樣的一些值表示false。

null
undefined與null相等
字符串''
數(shù)字0
NaN

在==時宗收，則會有一些讓人難以理解的陷阱漫拭，比如：

(function () {
    var undefined;
    undefined == null; // true
    1 == true; //true
    2 == true; // false
    0 == false; // true
    0 == ''; // true
    NaN == NaN;// false
    [] == false; // true
    [] == ![]; // true
})();

對于不同類型的 == 判斷，有這樣一些規(guī)則混稽，順序自上而下：

undefined與null相等
一個是number一個是string時采驻，會嘗試將string轉(zhuǎn)換為number
嘗試將boolean轉(zhuǎn)換為number
0或1
嘗試將Object轉(zhuǎn)換成number或string

而這些取決于另外一個對比量审胚，即值的類型，所以對于0礼旅、空字符串的判斷膳叨，建議使用===。===會先判斷兩邊的值類型痘系，類型不匹配時為false菲嘴。

• 下面類型的對象不建議用new構(gòu)造。引用對象成員用obj.prop代替obj[“prop”]汰翠，除非屬性名是變量龄坪。

new Number
new String
new Boolean
new Object //用{}代替
new Array //用[]代替

• 從number到string的轉(zhuǎn)換。

/** 推薦寫法*/
var a = 1;
typeof(a); //"number"
console.log(a); //1
var aa=a+'';
typeof(aa); //"string"
console.log(aa); //'1'
/** 不推薦寫法*/
new String(a)或a.toString()

從string到number的轉(zhuǎn)換复唤，使用parseInt健田，必須顯式指定第二個參數(shù)的進制。

/** 推薦寫法*/
var a = '1';
var aa = parseInt(a,10);
typeof(a); //"string"
console.log(a); //'1'
typeof(aa); //"number"
console.log(aa); //1

從float到integer的轉(zhuǎn)換佛纫。

/** 推薦寫法*/
Math.floor/Math.round/Math.ceil
/** 不推薦寫法*/
parseInt

• 字符串拼接應使用數(shù)組保存字符串片段妓局，使用時調(diào)用join方法。避免使用+或+=的方式拼接較長的字符串呈宇，每個字符串都會使用一個小的內(nèi)存片段好爬，過多的內(nèi)存片段會影響性能。

/**推薦的拼接方式array的push甥啄、join*/
var str=[],
    list=['測試A','測試B'];
for (var i=0 , len=list.length; i < len; i++) {
    str.push( '<div>'+ list[i] + '</div>');
};
console.log(str.join('')); //<div>測試A</div><div>測試B</div>
/** 不推薦的拼接方式+=*/
var str = '',
    list=['測試A','測試B'];
for (var i = 0, len = list.length; i< len; i++) {
    str+='<div>' + list[i] + '</div>';
};
console.log(str); //<div>測試A</div><div>測試B</div>

• 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩缘志小２灰褂脀ith，void型豁，evil僵蛛，eval_r，innerText迎变。
• 注重HTML分離, 減小reflow, 注重性能充尉。

圖片規(guī)范

• 命名應用小寫英文、數(shù)字衣形、_組合驼侠，便于團隊其他成員理解。

header_btn.gif
 header_btn2.gif

• 頁面元素類圖片均放入img文件夾谆吴，測試用圖片放于img/testimg文件夾倒源，psd源圖放入img/psdimg文件夾。
• 圖片格式僅限于gif句狼、png笋熬、jpg等。
• 用png圖片做圖片時,要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果,請為ie-6單獨定義背景腻菇，并盡量避免使用半透明的png圖片胳螟。
• 背景圖片請盡可能使用sprite（將一個頁面涉及到的所有零星圖片都包含到一張大圖中去）技術(shù), 減小http請求昔馋。

注釋規(guī)范

• JAVASCRIPT、CSS文件注釋需要標明作者糖耸、文件版本秘遏、創(chuàng)建/修改時間、重大版本修改記錄嘉竟、函數(shù)描述邦危、文件版本、創(chuàng)建或者修改時間舍扰、功能铡俐、作者等信息。中間可添加如下信息：

@file 文件名
@addon 把一個函數(shù)標記為另一個函數(shù)的擴張妥粟，另一個函數(shù)的定義不在源文件中
@argument 用大括號中的自變量類型描述一個自變量
@author 函數(shù)/類作者的姓名
@base 如果類是繼承得來，定義提供的類名稱
@class 用來給一個類提供描述吏够，不能用于構(gòu)造器的文檔中
@constructor 描述一個類的構(gòu)造器
@deprecated 表示函數(shù)/類已被忽略
@exception 描述函數(shù)/類產(chǎn)生的一個錯誤
@exec @extends 表示派生出當前類的另一個類
@fileoverview 表示文檔塊將用于描述當前文件勾给，這個標簽應該放在其它任何標簽之前
@final 指出函數(shù)/類
@ignore 讓jsdoc忽視隨后的代碼
@link 類似于@link標簽，用于連接許多其它頁面
@member 定義隨后的函數(shù)為提供的類名稱的一個成員
@param 用大括號中的參數(shù)類型描述一個參數(shù)
@private 表示函數(shù)/類為私有锅知，不應包含在生成的文檔中
@requires 表示需要另一個函數(shù)/類
@return 描述一個函數(shù)的返回值
@see 連接到另一個函數(shù)/類
@throws 描述函數(shù)/類可能產(chǎn)生的錯誤
@type 指定函數(shù)/成員的返回類型
@version 函數(shù)/類的版本號

開發(fā)和測試工具約定

• 編碼格式化播急，三碼統(tǒng)一。
• 測試工具: 前期開發(fā)僅測試FireFox & IE6 & IE7 & IE8 & IE9 & Opera & Chrome & Safari