前端開發(fā)規(guī)范手冊目錄TOC\h\h基本原則\hHTML\h通用約定\h語義化\hHEAD\hCSS\h通用約定\h字體排印\h模塊組織\hLess規(guī)范\h性能優(yōu)化\hJavaScript\h通用約定\hjQuery規(guī)范\h性能優(yōu)化\h移動端優(yōu)化\h工具箱介紹前端開發(fā)規(guī)范手冊此手冊主要實現(xiàn)的目標(biāo)：代碼一致性和最佳實踐。通過代碼風(fēng)格的一致性，降低維護(hù)代碼的成本以及改善多人協(xié)作的效率。同時遵守最佳實踐，確保頁面性能得到最佳優(yōu)化和高效的代碼。此手冊是在開發(fā)中積累下來的經(jīng)驗和參考其它規(guī)范/指南制定的，它只是起指導(dǎo)作用，除個別條目強(qiáng)制之外，大多數(shù)為非強(qiáng)制約束，開發(fā)者可根據(jù)自己的實際情況自行決定是否要遵守該指南只是保證大方向一致性和最佳實踐的階段性總結(jié)，不是最后結(jié)論，它會隨著時間而變化。介紹-5-基本原則基本原則結(jié)構(gòu)、樣式、行為分離盡量確保文檔和模板只包含HTML結(jié)構(gòu)，樣式都放到樣式表里，行為都放到腳本里?？s進(jìn)統(tǒng)一兩個空格縮進(jìn)（總之縮進(jìn)統(tǒng)一即可），不要使用Tab或者Tab、空格混搭。文件編碼使用不帶BOM的UTF-8編碼。在HTML中指定編碼<metacharset="utf-8">；無需使用@charset指定樣式表的編碼，它默認(rèn)為UTF-8（參考\h@charset）；一律使用小寫字母1.<!--Recommended-->2.<imgsrc="google.png"alt="Google">3.4.<!--Notrecommended-->5.<AHREF="/">Home</A>1./*Recommended*/2.color:#e5e5e5;3.4./*Notrecommended*/5.color:#E5E5E5;省略外鏈資源URL協(xié)議部分省略外鏈資源（圖片及其它媒體資源）URL中的http/https協(xié)議，使URL成為相對地址，避免\hMixedContent問題，減小文件字節(jié)數(shù)。其它協(xié)議（ftp等）的URL不省略。1.<!--Recommended-->2.<scriptsrc="http:///js/gweb/analytics/autotrack.js"></script>3.4.<!--Notrecommended-->5.<scriptsrc="/js/gweb/analytics/autotrack.js"></script>-6-基本原則1./*Recommended*/2..example{3.background:url(///images/example);4.}5.6./*Notrecommended*/7..example{8.background:url(/images/example);9.}統(tǒng)一注釋通過配置編輯器，可以提供快捷鍵來輸出一致認(rèn)可的注釋模式。HTML注釋模塊注釋1.<!--文章列表列表模塊-->2.<divclass="article-list">3....4.</div>區(qū)塊注釋<!--@name:DropDownMenu@description:Styleoftopbardropdownmenu.@author:Ashu(Aaaaaashu@)-->CSS注釋組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；-7-基本原則/*==========================================================================組件塊============================================================================*//*子組件塊============================================================================*/.selector{padding:15px;margin-bottom:15px;}/*子組件塊============================================================================*/.selector-secondary{display:block;/*注釋*/}.selector-three{display:span;}JavaScript注釋單行注釋必須獨占一行。//后跟一個空格，縮進(jìn)與下一行被注釋說明的代碼一致。多行注釋避免使用/*...*/這樣的多行注釋。有多行注釋內(nèi)容時，使用多個單行注釋。函數(shù)/方法注釋1.函數(shù)/方法注釋必須包含函數(shù)說明，有參數(shù)和返回值時必須使用注釋標(biāo)識。；2.參數(shù)和返回值注釋必須包含類型信息和說明；3.當(dāng)函數(shù)是內(nèi)部函數(shù)，外部不可訪問時，可以使用@inner標(biāo)識；-8-基本原則/***函數(shù)描述**@param{string}p1參數(shù)1的說明*@param{string}p2參數(shù)2的說明，比較長*那就換行了.*@param{number=}p3參數(shù)3的說明（可選）*@return{Object}返回值描述*/functionfoo(p1,p2,p3){varp3=p3||10;return{p1:p1,p2:p2,p3:p3};}文件注釋文件注釋用于告訴不熟悉這段代碼的讀者這個文件中包含哪些東西。應(yīng)該提供文件的大體內(nèi)容,它的作者,依賴關(guān)系和兼容性信息。如下:/***@fileoverviewDescriptionoffile,itsusesandinformation*aboutitsdependencies.*@authoruser@(FirstnameLastname)*Copyright2015MeizuInc.AllRightsReserved.*/代碼驗證使用\hW3CHTMLValidator來驗證你的HTML代碼有效性；使用\hW3CCSSValidator來驗證你的CSS代碼有效性；代碼驗證不是最終目的，真的目的在于讓開發(fā)者在經(jīng)過多次的這種驗證過程后，能夠深刻理解到怎樣的語法或?qū)懛ㄊ欠菢?biāo)準(zhǔn)和不推薦的，即使在某些場景下被迫要使用非標(biāo)準(zhǔn)寫法，也可以做到心中有數(shù)。-9-HTMLHTML盡量遵循HTML標(biāo)準(zhǔn)和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。-10-通用約定通用約定標(biāo)簽自閉合（self-closing）標(biāo)簽，無需閉合(例如：imginputbrhr等)；可選的閉合標(biāo)簽（closingtag），需閉合(例如：</li>或</body>)；盡量減少標(biāo)簽數(shù)量；1.<imgsrc="images/google.png"alt="Google">2.<inputtype="text"name="title">3.4.<ul>5.<li>Style</li>6.<li>Guide</li>7.</ul>8.9.<!--Notrecommended-->10.<spanclass="avatar">11.<imgsrc="...">12.</span>13.14.<!--Recommended-->15.<imgclass="avatar"src="...">Class與IDclass應(yīng)以功能或內(nèi)容命名，不以表現(xiàn)形式命名；class與id單詞字母小寫，多個單詞組成時，采用中劃線-分隔；使用唯一的id作為Javascripthook,同時避免創(chuàng)建無樣式信息的class；1.<!--Notrecommended-->2.<divclass="j-hookleftcontentWrapper"></div>3.4.<!--Recommended-->5.<divid="j-hook"class="sidebarcontent-wrapper"></div>屬性順序HTML屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。idclassnamedata-xxxsrc,for,type,href-11-通用約定title,altaria-xxx,role1.<aid="..."class="..."data-modal="toggle"href="###"></a>2.3.<inputclass="form-control"type="text">4.5.<imgsrc="..."alt="...">引號屬性的定義，統(tǒng)一使用雙引號。1.<!--Notrecommended-->2.<spanid='j-hook'class=text>Google</span>3.4.<!--Recommended-->5.<spanid="j-hook"class="text">Google</span>嵌套a不允許嵌套div這種約束屬于語義嵌套約束，與之區(qū)別的約束還有嚴(yán)格嵌套約束，比如a不允許嵌套a。嚴(yán)格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。語義嵌套約束<li>用于<ul>或<ol>下；<dd>,<dt>用于<dl>下；<thead>,<tbody>,<tfoot>,<tr>,<td>用于<table>下；嚴(yán)格嵌套約束inline-Level元素，僅可以包含文本或其它inline-Level元素;<a>里不可以嵌套交互式元素<a>、<button>、<select>等;<p>里不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。更多詳情，參考\hWEB標(biāo)準(zhǔn)系列-HTML元素嵌套布爾值屬性HTML5規(guī)范中disabled、checked、selected等屬性不用設(shè)置值。1.<inputtype="text"disabled>2.3.<inputtype="checkbox"value="1"checked>-12-通用約定4.5.<select>6.<optionvalue="1"selected>1</option>7.</select>-13-語義化語義化沒有CSS的HTML是一個語義系統(tǒng)而不是UI系統(tǒng)。通常情況下，每個標(biāo)簽都是有語義的，所謂語義就是你的衣服分為外套，褲子，裙子，內(nèi)褲等，各自有對應(yīng)的功能和含義。所以你總不能把內(nèi)褲套在脖子上吧?！唤z此外語義化的HTML結(jié)構(gòu)，有助于機(jī)器（搜索引擎）理解，另一方面多人協(xié)作時，能迅速了解開發(fā)者意圖。常見標(biāo)簽語義標(biāo)簽語義<p>段落<h1><h2><h3>...標(biāo)題<ul>無序列表<ol>有序列表<blockquote>大段引用<cite>一般引用<b>為樣式加粗而加粗<strong>為強(qiáng)調(diào)內(nèi)容而加粗<i>為樣式傾斜而傾斜<em>為強(qiáng)調(diào)內(nèi)容而傾斜code代碼標(biāo)識abbr縮寫示例將你構(gòu)建的頁面當(dāng)作一本書，將標(biāo)簽的語義對應(yīng)的其功能和含義；書的名稱：<h1>書的每個章節(jié)標(biāo)題:<h2>章節(jié)內(nèi)的文章標(biāo)題:<h3>小標(biāo)題/副標(biāo)題:<h4><h5><h6>章節(jié)的段落:<p>更多語義化的內(nèi)容，參考sofish寫的文章\h這樣去寫你的HTML。-14-HEADHEAD文檔類型為每個HTML頁面的第一行添加標(biāo)準(zhǔn)模式（standardmode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的表現(xiàn)。1.<!DOCTYPEhtml>語言屬性\h為什么使用lang=”zh-cmn-Hans”而不是我們通常寫的lang=”zh-CN”呢?請參考知乎上的討論:網(wǎng)頁頭部的\h聲明應(yīng)該是用lang=”zh”還是lang=”zh-cn”？1.<!--中文-->2.<htmllang="zh-Hans">3.4.<!--簡體中文-->5.<htmllang="zh-cmn-Hans">6.7.<!--繁體中文-->8.<htmllang="zh-cmn-Hant">9.10.<!--English-->11.<htmllang="en">字符編碼以無BOM的utf-8編碼作為文件格式;\h指定字符編碼的meta必須是head的第一個直接子元素；請參考前端觀察的博文：HTML5Charset能\h用嗎？<html><head><metacharset="utf-8"></head><body></body></html>IE兼容模式-15-HEAD優(yōu)先使用最新版本的IE和Chrome內(nèi)核<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">SEO優(yōu)化<head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><!--SEO--><title>StyleGuide</title><metaname="keywords"content="yourkeywords"><metaname="description"content="yourdescription"><metaname="author"content="author,emailaddress"></head>viewportviewport:一般指的是瀏覽器窗口內(nèi)容區(qū)的大小，不包含工具條、選項卡等內(nèi)容；width:瀏覽器寬度，輸出設(shè)備中的頁面可見區(qū)域?qū)挾?；device-width:設(shè)備分辨率寬度，輸出設(shè)備的屏幕可見寬度；initial-scale:初始縮放比例；maximum-scale:最大縮放比例；為移動端設(shè)備優(yōu)化，設(shè)置可見區(qū)域的寬度和初始縮放比例。<metaname="viewport"content="width=device-width,initial-scale=1.0">iOS圖標(biāo)apple-touch-icon圖片自動處理成圓角和高光等效果;apple-touch-icon-precomposed禁止系統(tǒng)自動添加效果，直接顯示設(shè)計原圖;-16-HEAD<!--iPhone和iTouch，默認(rèn)57x57像素，必須有--><linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"><!--iPad，72x72像素，可以沒有，但推薦有--><linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-72x72-precomposed.png"sizes="72x72"><!--RetinaiPhone和RetinaiTouch，114x114像素，可以沒有，但推薦有--><linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-114x114-precomposed.png"sizes="114x114"><!--RetinaiPad，144x144像素，可以沒有，但推薦有--><linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-144x144-precomposed.png"sizes="144x144">favicon在未指定favicon時，大多數(shù)瀏覽器會請求WebServer根目錄下的favicon.ico。為了保證favicon可訪問，避免404，必須遵循以下兩種方法之一：在WebServer根目錄放置favicon.ico文件；使用link指定favicon；<linkrel="shortcuticon"href="path/to/favicon.ico">HEAD模板-17-HEAD<!DOCTYPEhtml><htmllang="zh-cmn-Hans"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title>StyleGuide</title><metaname="description"content="不超過150個字符"><metaname="keywords"content=""><metaname="author"content="name,email@"><!--為移動設(shè)備添加viewport--><metaname="viewport"content="width=device-width,initial-scale=1.0"><!--iOS圖標(biāo)--><linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"><linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/><linkrel="shortcuticon"href="path/to/favicon.ico"></head>-18-CSSCSS-19-通用約定通用約定代碼組織以組件為單位組織代碼段；制定一致的注釋規(guī)范；組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；如果使用了多個CSS文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動；良好的注釋是非常重要的。請留出時間來描述組件（component）的工作方式、局限性和構(gòu)建它們的方法。不要讓你的團(tuán)隊其它成員來猜測一段不通用或不明顯的代碼的目的。提示：通過配置編輯器，可以提供快捷鍵來輸出一致認(rèn)可的注釋模式。1./*==========================================================================2.組件塊3.============================================================================*/4.5./*子組件塊6.============================================================================*/7..selector{8.padding:15px;9.margin-bottom:15px;10.}11.12.13.14./*子組件塊15.============================================================================*/16..selector-secondary{17.display:block;/*注釋*/18.}19.20..selector-three{21.display:span;22.}Class和ID使用語義化、通用的命名方式；使用連字符-作為ID、Class名稱界定符，不要駝峰命名法和下劃線；避免選擇器嵌套層級過多，盡量少于3級；避免選擇器和Class、ID疊加使用；出\h于性能考量，在沒有必要的情況下避免元素選擇器疊加Class、ID使用。-20-通用約定元素選擇器和ID、Class混合使用也違反關(guān)注分離原則。如果HTML標(biāo)簽修改了，就要再去修改CSS代碼，不利于后期維護(hù)。1./*Notrecommended*/2..red{}3..box_green{}4..page.header.login#usernameinput{}5.ul#example{}6.7./*Recommended*/8.#nav{}9..box-video{}10.#usernameinput{}11.#example{}聲明塊格式選擇器分組時，保持獨立的選擇器占用一行；聲明塊的左括號{前添加一個空格；聲明塊的右括號}應(yīng)單獨成行；聲明語句中的:后應(yīng)添加一個空格；聲明語句應(yīng)以分號;結(jié)尾；一般以逗號分隔的屬性值，每個逗號后應(yīng)添加一個空格；rgb()、rgba()、hsl()、hsla()或rect()括號內(nèi)的值，逗號分隔，但逗號后不添加一個空格；對于屬性值或顏色參數(shù)，省略小于1的小數(shù)前面的0（例如，.5代替0.5；-.5px代替-0.5px）；十六進(jìn)制值應(yīng)該全部小寫和盡量簡寫，例如，#fff代替#ffffff；避免為0值指定單位，例如，用margin:0;代替margin:0px;；1./*Notrecommended*/2..selector,.selector-secondary,.selector[type=text]{3.padding:15px;4.margin:0px0px15px;5.background-color:rgba(0,0,0,0.5);6.box-shadow:0px1px2px#CCC,inset01px0#FFFFFF7.}8.9./*Recommended*/10..selector,11..selector-secondary,12..selector[type="text"]{13.padding:15px;14.margin-bottom:15px;15.background-color:rgba(0,0,0,.5);16.box-shadow:01px2px#ccc,inset01px0#fff;17.}-21-通用約定聲明順序相關(guān)屬性應(yīng)為一組，推薦的樣式編寫順序1.Positioning2.Boxmodel3.Typographic4.Visual由于定位（positioning）可以從正常的文檔流中移除元素，并且還能覆蓋盒模型（boxmodel）相關(guān)的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。其他屬性只是影響組件的內(nèi)部（inside）或者是不影響前兩組屬性，因此排在后面。1..declaration-order{2./*Positioning*/3.position:absolute;4.top:0;5.right:0;6.bottom:0;7.left:0;8.z-index:100;9.10./*Boxmodel*/11.display:block;12.box-sizing:border-box;13.width:100px;14.height:100px;15.padding:10px;16.border:1pxsolid#e5e5e5;17.border-radius:3px;18.margin:10px;19.float:right;20.overflow:hidden;21.22./*Typographic*/23.font:normal13px"HelveticaNeue",sans-serif;24.line-height:1.5;25.text-align:center;26.27./*Visual*/28.background-color:#f5f5f5;29.color:#fff;30.opacity:.8;31.32./*Other*/33.cursor:pointer;34.}-22-通用約定引號使用url()、屬性選擇符、屬性值使用雙引號。參考\hIsquotingthevalueofurl()reallynecessary?1./*Notrecommended*/2.@importurl(///css/maia.css);3.4.html{5.font-family:'opensans',arial,sans-serif;6.}7.8./*Recommended*/9.@importurl("http:///css/maia.css");10.11.html{12.font-family:"opensans",arial,sans-serif;13.}14.15..selector[type="text"]{16.17.}媒體查詢（Mediaquery）的位置將媒體查詢放在盡可能相關(guān)規(guī)則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。1..element{...}2..element-avatar{...}3..element-selected{...}4.5.@media(max-width:768px){6..element{...}7..element-avatar{...}8..element-selected{...}9.}不要使用@import與<link>相比，@import要慢很多，不光增加額外的請求數(shù)，還會導(dǎo)致不可預(yù)料的問題。替代辦法：使用多個通過Sass或Less類似的CSS預(yù)處理器將多個CSS文件編譯為一個文件；其他CSS文件合并工具；-23-通用約定參考\hdon’tuse@import；鏈接的樣式順序：a:link->a:visited->a:hover->a:active（LoVeHAte）無需添加瀏覽器廠商前綴使用\hAutoprefixer自動添加瀏覽器廠商前綴，編寫CSS時不需要添加瀏覽器前綴，直接使用標(biāo)準(zhǔn)的CSS編寫。Autoprefixer通過\hCanIuse，按兼容的要求，對相應(yīng)的CSS代碼添加瀏覽器廠商前綴。-24-字體排印字體排印暫時參\h考網(wǎng)頁字體排印指南TODO-25-模塊組織模塊組織任何超過1000行的CSS代碼，你都曾經(jīng)歷過這樣的體驗：1.這個class到底是什么意思呢？2.這個class在哪里被使用呢？3.如果我創(chuàng)建一個xxooclass，會造成沖突嗎？ReasonableSystemforCSSStylesheetStructure的目標(biāo)就是解決以上問題，它不是一個框架，而是通過規(guī)范，讓你構(gòu)建更健壯和可維護(hù)的CSS代碼。Components（組件）從Components的角度思考，將網(wǎng)站的模塊都作為一個獨立的Components。Namingcomponents（組件命名）Components最少以兩個單詞命名，通過-分離，例如：點贊按鈕(.like-button)搜索框(.search-form)文章卡片(.article-card)Elements（元素）Elements是Components中的元素Namingelements（元素命名）Elements的類名應(yīng)盡可能僅有一個單詞。-26-模塊組織1..search-form{2.>.field{/*...*/}3.>.action{/*...*/}4.}Onmultiplewords（多個單詞）對于倘若需要兩個或以上單詞表達(dá)的Elements類名，不應(yīng)使用中劃線和下劃線連接，應(yīng)直接連接。1..profile-box{2.>.firstname{/*...*/}3.>.lastname{/*...*/}4.>.avatar{/*...*/}5.}Avoidtagselectors（避免標(biāo)簽選擇器）任何時候盡可能使用classnames。標(biāo)簽選擇器在使用上沒有問題，但是其性能上稍弱，并且表意不明確。1..article-card{2.>h3{/*?avoid*/}3.>.name{/*?better*/}4.}Variants（變體）Components和Elements可能都會擁有Variants。Namingvariants（變體命名）Variants的classname應(yīng)帶有前綴中劃線-1..like-button{-27-模塊組織2.&.-wide{/*...*/}3.&.-short{/*...*/}4.&.-disabled{/*...*/}5.}Elementvariants（元素變體）1..shopping-card{2.>.title{/*...*/}3.>.title.-small{/*...*/}4.}Dashprefixes（中劃線前綴）為什么使用中劃線作為變體的前綴？它可以避免歧義與ElementsCSSclass僅能以單詞和_或-開頭中劃線比下劃線更容易輸出Layout（布局）Avoidpositioningproperties（避免定位屬性）Components應(yīng)該在不同的上下文中都可以復(fù)用，所以應(yīng)避免設(shè)置以下屬性：Positioning(position,top,left,right,bottom)Floats(float,clear)Margins(margin)Dimensions(width,height)*Fixeddimensions（固定尺寸）-28-模塊組織頭像和logos這些元素應(yīng)該設(shè)置固定尺寸（寬度，高度…）。Definepositioninginparents（在父元素中設(shè)置定位）倘若你需要為組件設(shè)置定位，應(yīng)將在組件的上下文（父元素）中進(jìn)行處理，比如以下例子中，將widths和floats應(yīng)用在listcomponent(.article-list)當(dāng)中，而不是component(.article-card)自身。1..article-list{2.&{3.@includeclearfix;4.}5.6.>.article-card{7.width:33.3%;8.float:left;9.}10.}11.12..article-card{13.&{/*...*/}14.>.image{/*...*/}15.>.title{/*...*/}16.>.category{/*...*/}17.}Avoidover-nesting（避免過分嵌套）當(dāng)出現(xiàn)多個嵌套的時候容易失去控制，應(yīng)保持不超過一個嵌套。1./*?Avoid:3levelsofnesting*/2..image-frame{3.>.description{4./*...*/5.6.>.icon{7./*...*/8.}9.}10.}11.12./*?Better:2levels*/13..image-frame{14.>.description{/*...*/}15.>.description>.icon{/*...*/}16.}Apprehensions（顧慮）-29-模塊組織中劃線-是一坨糟糕的玩意：其實你可以選擇性的使用，只要將Components,Elements,Variants記在心上即可。我有時候想不出兩個單詞唉：有些組件的確使用一個單詞就能表意，比如aleter。但其實你可以使用后綴，使其意識更加明確。比如塊級元素：.alert-box.alert-card.alert-block或行內(nèi)級元素.link-button.link-spanTerminologies（術(shù)語）RSCSS與其他CSS模塊組織系統(tǒng)相似的概念RSCSSBEMSMACSSComponentBlockModuleElementElement?Layout?LayoutVariantModifierTheme&StateSummary（總結(jié)）以Components的角度思考，以兩個單詞命名（.screenshot-image）Components中的Elements，以一個單詞命名（.blog-post.title）Variants，以中劃線-作為前綴（.shop-banner.-with-icon）Components可以互相嵌套記住，你可以通過繼承讓事情變得更簡單\h譯自:ReasonableSystemforCSSStylesheetStructure-30-Less規(guī)范LESS代碼組織代碼按一下順序組織：1.@import2.變量聲明3.樣式聲明1.@import"mixins/size.less";2.3.@default-text-color:#333;4.5..page{6.width:960px;7.margin:0auto;8.}@import語句@import語句引用的文需要寫在一對引號內(nèi)，.less后綴不得省略。引號使用'和"均可，但在同一項目內(nèi)需統(tǒng)一。1./*Notrecommended*/2.@import"mixins/size";3.@import'mixins/grid.less';4.5./*Recommended*/6.@import"mixins/size.less";7.@import"mixins/grid.less";混入（Mixin）1.在定義mixin時，如果mixin名稱不是一個需要使用的className，必須加上括號，否則即使不被調(diào)用也會輸出到CSS中。2.如果混入的是本身不輸出內(nèi)容的mixin，需要在mixin后添加括號（即使不傳參數(shù)），以區(qū)分這是否是一個className。1./*Notrecommended*/2..big-text{3.font-size:2em;4.}5.-31-Less規(guī)范6.h3{7..big-text;8..clearfix;9.}10.11./*Recommended*/12..big-text(){13.font-size:2em;14.}15.16.h3{17..big-text();/*1*/18..clearfix();/*2*/19.}避免嵌套層級過多將嵌套深度限制在2級。對于超過3級的嵌套，給予重新評估。這可以避免出現(xiàn)過于詳實的CSS選擇器。避免大量的嵌套規(guī)則。當(dāng)可讀性受到影響時，將之打斷。推薦避免出現(xiàn)多于20行的嵌套規(guī)則出現(xiàn)。字符串插值變量可以用類似ruby和php的方式嵌入到字符串中，像@{name}這樣的結(jié)構(gòu):@base-url:"";background-image:url("@{base-url}/images/bg.png");-32-性能優(yōu)化性能優(yōu)化慎重選擇高消耗的樣式高消耗屬性在繪制前需要瀏覽器進(jìn)行大量計算：box-shadowsborder-radiustransparencytransformsCSSfilters（性能殺手）避免過分重排當(dāng)發(fā)生重排的時候，瀏覽器需要重新計算布局位置與大小，\h更多詳情。常見的重排元素:widthheightpaddingmargindisplayborder-widthpositiontopleftrightbottomfont-sizefloattext-alignoverflow-yfont-weightoverflowfont-familyline-heightvertical-alignclearwhite-spacemin-height正確使用Display的屬性Display屬性會影響頁面的渲染，請合理使用。-33-性能優(yōu)化display:inline后不應(yīng)該再使用width、height、margin、padding以及float；display:inline-block后不應(yīng)該再使用float；display:block后不應(yīng)該再使用vertical-align；display:table-*后不應(yīng)該再使用margin或者float；不濫用FloatFloat在渲染時計算量比較大，盡量減少使用。動畫性能優(yōu)化動畫的實現(xiàn)原理，是利用了人眼的“視覺暫留”現(xiàn)象，在短時間內(nèi)連續(xù)播放數(shù)幅靜止的畫面，使肉眼因視覺殘象產(chǎn)生錯覺，而誤以為畫面在“動”。動畫的基本概念：幀：在動畫過程中，每一幅靜止畫面即為一“幀”;幀率：即每秒鐘播放的靜止畫面的數(shù)量，單位是fps(Framepersecond);幀時長：即每一幅靜止畫面的停留時間，單位一般是ms(毫秒);跳幀(掉幀/丟幀)：在幀率固定的動畫中，某一幀的時長遠(yuǎn)高于平均幀時長，導(dǎo)致其后續(xù)數(shù)幀被擠壓而丟失的現(xiàn)象。一般瀏覽器的渲染刷新頻率是60fps，所以在網(wǎng)頁當(dāng)中，幀率如果達(dá)到50-60fps的動畫將會相當(dāng)流暢，讓人感到舒適。如果使用基于javaScript的動畫，盡量使用requestAnimationFrame.避免使用setTimeout,setInterval.避免通過類似jQueryanimate()-style改變每幀的樣式，使用CSS聲明動畫會得到更好的瀏覽器優(yōu)化。使用translate取代absolute定位就會得到更好的fps，動畫會更順滑。-34-性能優(yōu)化多利用硬件能力，如通過3D變形開啟GPU加速一般在Chrome中，3D或透視變換（perspectivetransform）CSS屬性和對opacity進(jìn)行CSS動畫會創(chuàng)建新的圖層，在硬件加速渲染通道的優(yōu)化下，GPU完成3D變形等操作后，將圖層進(jìn)行復(fù)合操作（CompesiteLayers），從而避免觸發(fā)瀏覽器大面積重繪和重排。注：3D變形會消耗更多的內(nèi)存和功耗。使用translate3d右移500px的動畫流暢度要明顯優(yōu)于直接使用left：1..ball-1{2.transition:-webkit-transform.5sease;3.-webkit-transform:translate3d(0,0,0);4.}5..ball-1.slidein{6.-webkit-transform:translate3d(500px,0,0);7.}8..ball-2{9.transition:left.5sease;left：0;10.}11..ball-2.slidein{12.left：500px;13.}提升CSS選擇器性能-35-性能優(yōu)化CSS選擇器對性能的影響源于瀏覽器匹配選擇器和文檔元素時所消耗的時間，所以優(yōu)化選擇器的原則是應(yīng)盡量避免使用消耗更多匹配時間的選擇器。而在這之前我們需要了解CSS選擇器匹配的機(jī)制，如子選擇器規(guī)則：1.#header>a{font-weight:blod;}我們中的大多數(shù)人都是從左到右的閱讀習(xí)慣，會習(xí)慣性的設(shè)定瀏覽器也是從左到右的方式進(jìn)行匹配規(guī)則，推測這條規(guī)則的開銷并不高。我們會假設(shè)瀏覽器以這樣的方式工作：尋找id為header的元素，然后將樣式規(guī)則應(yīng)用到直系子元素中的a元素上。我們知道文檔中只有一個id為header的元素，并且它只有幾個a元素的子節(jié)點，所以這個CSS選擇器應(yīng)該相當(dāng)高效。事實上，卻恰恰相反，CSS選擇器是從右到左進(jìn)行規(guī)則匹配。了解這個機(jī)制后，例子中看似高效的選擇器在實際中的匹配開銷是很高的，瀏覽器必須遍歷頁面中所有的a元素并且確定其父元素的id是否為header。如果把例子的子選擇器改為后代選擇器則會開銷更多，在遍歷頁面中所有a元素后還需向其上級遍歷直到根節(jié)點。1.#headera{font-weight:blod;}理解了CSS選擇器從右到左匹配的機(jī)制后，明白只要當(dāng)前選擇符的左邊還有其他選擇符，樣式系統(tǒng)就會繼續(xù)向左移動，直到找到和規(guī)則匹配的選擇符，或者因為不匹配而退出。我們把最右邊選擇符稱之為關(guān)鍵選擇器?！猏h—更多詳情1、避免使用通用選擇器1./*Notrecommended*/2..content*{color:red;}瀏覽器匹配文檔中所有的元素后分別向上逐級匹配class為content的元素，直到文檔的根節(jié)點。因此其匹配開銷是非常大的，所以應(yīng)避免使用關(guān)鍵選擇器是通配選擇器的情況。2、避免使用標(biāo)簽或class選擇器限制id選擇器1./*Notrecommended*/2.button#backButton{…}3./*Recommended*/4.#newMenuIcon{…}3、避免使用標(biāo)簽限制class選擇器1./*Notrecommended*/2.treecell.indented{…}3./*Recommended*/4..treecell-indented{…}5./*Muchtorecommended*/6..hierarchy-deep{…}-36-性能優(yōu)化4、避免使用多層標(biāo)簽選擇器。使用class選擇器替換，減少css查找1./*Notrecommended*/2.treeitem[mailfolder="true"]>treerow>treecell{…}3./*Recommended*/4..treecell-mailfolder{…}5、避免使用子選擇器1./*Notrecommended*/2.treeheadtreerowtreecell{…}3./*Recommended*/4.treehead>treerow>treecell{…}5./*Muchtorecommended*/6..treecell-header{…}6、使用繼承1./*Notrecommended*/2.#bookmarkMenuItem>.menu-left{list-style-image:url(blah)}3./*Recommended*/4.#bookmarkMenuItem{list-style-image:url(blah)}-37-JavaScriptJavaScript-38-通用約定通用約定注釋原則Asshortaspossible（如無必要，勿增注釋）：盡量提高代碼本身的清晰性、可讀性。Aslongasnecessary（如有必要，盡量詳盡）：合理的注釋、空行排版等，可以讓代碼更易閱讀、更具美感。單行注釋必須獨占一行。//后跟一個空格，縮進(jìn)與下一行被注釋說明的代碼一致。多行注釋避免使用/*...*/這樣的多行注釋。有多行注釋內(nèi)容時，使用多個單行注釋。函數(shù)/方法注釋1.函數(shù)/方法注釋必須包含函數(shù)說明，有參數(shù)和返回值時必須使用注釋標(biāo)識。；2.參數(shù)和返回值注釋必須包含類型信息和說明；3.當(dāng)函數(shù)是內(nèi)部函數(shù)，外部不可訪問時，可以使用@inner標(biāo)識；1./**2.*函數(shù)描述3.*4.*@param{string}p1參數(shù)1的說明5.*@param{string}p2參數(shù)2的說明，比較長6.*那就換行了.7.*@param{number=}p3參數(shù)3的說明（可選）8.*@return{Object}返回值描述9.*/10.functionfoo(p1,p2,p3){11.varp3=p3||10;12.return{13.p1:p1,14.p2:p2,15.p3:p316.};17.}文件注釋文件注釋用于告訴不熟悉這段代碼的讀者這個文件中包含哪些東西。應(yīng)該提供文件的大體內(nèi)容,它的作者,依賴關(guān)系和兼容性信息。如下:-39-通用約定1./**2.*@fileoverviewDescriptionoffile,itsusesandinformation3.*aboutitsdependencies.4.*@authoruser@(FirstnameLastname)5.*Copyright2009MeizuInc.AllRightsReserved.6.*/命名變量,使用Camel命名法。1.varloadingModules={};私有屬性、變量和方法以下劃線_開頭。1.var_privateMethod={};常量,使用全部字母大寫，單詞間下劃線分隔的命名方式。1.varHTML_ENTITY={};1.函數(shù),使用Camel命名法。2.函數(shù)的參數(shù),使用Camel命名法。1.functionstringFormat(source){}2.3.functionhear(theBells){}1.類,使用Pascal命名法2.類的方法/屬性,使用Camel命名法1.functionTextNode(value,engine){2.this.value=value;3.this.engine=engine;4.}5.6.TextNtotype.clone=function(){7.returnthis;8.};1.枚舉變量使用Pascal命名法。2.枚舉的屬性，使用全部字母大寫，單詞間下劃線分隔的命名方式。1.varTargetState={-40-通用約定2.READING:1,3.READED:2,4.APPLIED:3,5.READY:46.};由多個單詞組成的縮寫詞，在命名中，根據(jù)當(dāng)前命名法和出現(xiàn)的位置，所有字母的大小寫與首字母的大小寫保持一致。1.functionXMLParser(){}2.3.functioninsertHTML(element,html){}4.5.varhttpRequest=newHTTPRequest();命名語法類名，使用名詞。1.functionEngine(options){}函數(shù)名，使用動賓短語。1.functiongetStyle(element){}boolean類型的變量使用is或has開頭。1.varisReady=false;2.varhasMoreCommands=false;Promise對象用動賓短語的進(jìn)行時表達(dá)。1.varloadingData=ajax.get('url');2.loadingData.then(callback);接口命名規(guī)范1.可讀性強(qiáng)，見名曉義；2.盡量不與jQuery社區(qū)已有的習(xí)慣沖突；3.盡量寫全。不用縮寫，除非是下面列表中約定的；（變量以表達(dá)清楚為目標(biāo)，uglify會完成壓縮體積工作）常用詞說明options表示選項，與jQuery社區(qū)保持一致，不要用config,opts等active表示當(dāng)前，不要用current等-41-通用約定index表示索引，不要用idx等trigger觸點元素triggerType觸發(fā)類型、方式context表示傳入的this對象object推薦寫全，不推薦簡寫為o,obj等element推薦寫全，不推薦簡寫為el,elem等length不要寫成len,lprevprevious的縮寫nextnext下一個constructor不能寫成ctoreasing示動畫平滑函數(shù)minminimize的縮寫maxmaximize的縮寫DOM不要寫成dom,Dom.hbs使用hbs后綴表示模版btnbutton的縮寫link超鏈接title主要文本img圖片路徑（img標(biāo)簽src屬性）datasethtml5data-xxx數(shù)據(jù)接口theme主題className類名classNameSpaceclass命名空間True和False布爾表達(dá)式類型檢測優(yōu)先使用typeof。對象類型檢測使用instanceof。null或undefined的檢測使用==null。下面的布爾表達(dá)式都返回false:nullundefined‘’空字符串0數(shù)字0但小心下面的,可都返回true:‘0’字符串0[]空數(shù)組{}空對象不要在Array上使用for-in循環(huán)-42-通用約定for-in循環(huán)只用于object/map/hash的遍歷,對Array用for-in循環(huán)有時會出錯.因為它并不是從0到length-1進(jìn)行遍歷,而是所有出現(xiàn)在對象及其原型鏈的鍵值。1.//Notrecommended2.functionprintArray(arr){3.for(varkeyinarr){4.print(arr[key]);5.}6.}7.8.printArray([0,1,2,3]);//Thisworks.9.10.vara=newArray(10);11.printArray(a);//Thisiswrong.12.13.a=document.getElementsByTagName('*');14.printArray(a);//Thisiswrong.15.16.a=[0,1,2,3];17.a.buhu='wine';18.printArray(a);//Thisiswrongagain.19.20.a=newArray;21.a[3]=3;22.printArray(a);//Thisiswrongagain.23.24.//Recommended25.functionprintArray(arr){26.varl=arr.length;27.for(vari=0;i<l;i++){28.print(arr[i]);29.}30.}二元和三元操作符操作符始終寫在前一行,以免分號的隱式插入產(chǎn)生預(yù)想不到的問題。1.varx=a?b:c;2.3.vary=a?4.longButSimpleOperandB:longButSimpleOperandC;5.6.varz=a?7.moreComplicatedB:8.moreComplicatedC;-43-通用約定.操作符也是如此：1.varx=foo.bar().2.doSomething().3.doSomethingElse();條件(三元)操作符(?:)三元操作符用于替代if條件判斷語句。1.//Notrecommended2.if(val!=0){3.returnfoo();4.}else{5.returnbar();6.}7.8.//Recommended9.returnval?foo():bar();&&和||二元布爾操作符是可短路的,只有在必要時才會計算到最后一項。1.//Notrecommended2.functionfoo(opt_win){3.varwin;4.if(opt_win){5.win=opt_win;6.}else{7.win=window;8.}9.//...10.}11.12.if(node){13.if(node.kids){14.if(node.kids[index]){15.foo(node.kids[index]);16.}17.}18.}19.20.//Recommended21.functionfoo(opt_win){22.varwin=opt_win||window;23.//...-44-通用約定24.}25.26.varkid=node&&node.kids&&node.kids[index];27.if(kid){28.foo(kid);29.}-45-jQuery規(guī)范jQuery規(guī)范使用最新版本的jQuery最新版本的jQuery會改進(jìn)性能和增加新功能，若不是為了兼容舊瀏覽器，建議使用最新版本的jQuery。以下是三條常見的jQuery語句，版本越新，性能越好：1.$('.elem')2.$('.elem',context)3.context.find('.elem')分別使用1.4.2、1.4.4、1.6.2三個版本測試瀏覽器在一秒內(nèi)能夠執(zhí)行多少次，結(jié)果1.6.2版執(zhí)行次數(shù)遠(yuǎn)超兩個老版本。jQuery變量1.存放jQuery對象的變量以$開頭；2.將jQuery選擇器返回的對象緩存到本地變量中復(fù)用；3.使用駝峰命名變量；1.var$myDiv=$("#myDiv");2.$myDiv.click(function(){...});選擇器1.盡可能的使用ID選擇器，因為它會調(diào)用瀏覽器原生方法document.getElementById查找元素。當(dāng)然直接使用原生document.getElementById方法性能會更好；2.在父元素中選擇子元素使用.find()方法性能會更好,因為ID選擇器沒有使用到Sizzle選擇器引擎來查找元素；1.//Notrecommended2.var$productIds=$("#products.class");3.4.//Recommended5.var$productIds=$("#products").find(".class");DOM操作1.當(dāng)要操作DOM元素的時候，盡量將其分離節(jié)點，操作結(jié)束后，再插入節(jié)點；2.使用字符串連接或array.join要比.append()性能更好；1.var$myList=$("#list-container>ul").detach();2.//...alotofcomplicatedthingson$myList3.$myList.appendTo("#list-container");-46-jQuery規(guī)范1.//Notrecommended2.var$myList=$("#list");3.for(vari=0;i<10000;i++){4.$myList.append("<li>"+i+"</li>");5.}6.7.//Recommended8.var$myList=$("#list");9.varlist="";10.for(vari=0;i<10000;i++){11.list+="<li>"+i+"</li>";12.}13.$myList.html(list);14.15.//Muchtorecommended16.vararray=[];17.for(vari=0;i<10000;i++){18.array[i]="<li>"+i+"</li>";19.}20.$myList.html(array.join(''));事件1.如果需要，對事件使用自定義的namespace，這樣容易解綁特定的事件，而不會影響到此DOM元素的其他事件監(jiān)聽；2.對Ajax加載的DOM元素綁定事件時盡量使用事件委托。事件委托允許在父元素綁定事件，子代元素可以響應(yīng)事件，也包括Ajax加載后添加的子代元素；1.$("#myLink").on("click.mySpecialClick",myEventHandler);2.$("#myLink").unbind("click.mySpecialClick");1.//Notrecommended2.$("#lista").on("click",myClickHandler);3.4.//Recommended5.$("#list").on("click","a",myClickHandler);鏈?zhǔn)綄懛?.盡量使用鏈?zhǔn)綄懛ǘ皇怯米兞烤彺婊蛘叨啻握{(diào)用選擇器方法；2.當(dāng)鏈?zhǔn)綄懛ǔ^三次或者因為事件綁定變得復(fù)雜后，使用換行和縮進(jìn)保持代碼可讀性；1.$("#myDiv").addClass("error").show();-47-jQuery規(guī)范1.$("#myLink")2..addClass("bold")3..on("click",myClickHandler)4..on("mouseover",myMouseOverHandler)5..show();其他1.多個參數(shù)使用對象字面量存儲；2.不要將CSS寫在jQuery里面；3.正則表達(dá)式僅準(zhǔn)用.test()和.exec()。不準(zhǔn)用“string”.match()；jQuery插件模板1.//jQueryPluginBoilerplate2.//AboilerplateforjumpstartingjQuerypluginsdevelopment3.//version1.1,May14th,20114.//byStefanGabos5.6.//remembertochangeeveryinstanceof"pluginName"tothenameofyourplugin!7.(function($){8.9.//herewego!10.$.pluginName=function(element,options){11.12.//plugin'sdefaultoptions13.//thisisprivatepropertyandisaccessibleonlyfrominsidetheplugin14.vardefaults={15.16.foo:'bar',17.18.//ifyourpluginisevent-driven,youmayprovidecallbackcapabilities19.//foritsevents.executethesefunctionsbeforeoraftereventsofyour20.//plugin,sothatusersmaycustomizethoseparticulareventswithout21.//changingtheplugin'scode22.onFoo:function(){}23.24.}25.26.//toavoidconfusions,use"plugin"toreferencethe27.//currentinstanceoftheobject28.varplugin=this;29.30.//thiswillholdthemergeddefault,anduser-providedoptions31.//plugin'spropertieswillbeavailablethroughthisobjectlike:32.//pertyNamefrominsidethepluginor33.//element.data('pluginName').pertyNamefromoutsidetheplugin,-48-jQuery規(guī)范34.//where"element"istheelementthepluginisattachedto;35.plugin.settings={}36.37.var$element=$(element),//referencetothejQueryversionofDOMelement38.element=element;//referencetotheactualDOMelement39.40.//the"constructor"methodthatgetscalledwhentheobjectiscreated41.plugin.init=function(){42.43.//theplugin'sfinalpropertiesarethemergeddefaultand44.//user-providedoptions(ifany)45.plugin.settings=$.extend({},defaults,options);46.47.//codegoeshere48.49.}50.51.//public