前端系統(tǒng)開發(fā)說明書1.一般規(guī)則應(yīng)用在HTML,JavaScript和CSS上的通用規(guī)則。1.1.文件、資源命名?以可讀性而言，中劃線用來分隔文件名?確保文件命名總是以字母開頭而不是數(shù)字?特殊含義的文件，需要對(duì)文件增加前后綴或特定的擴(kuò)展名（比如.min.js,.min.css），抑或一串前綴（比如all.main.min.css）。使用點(diǎn)分隔符來區(qū)分這些在文件名中帶有清晰意義的元數(shù)據(jù)。1.2.文本縮進(jìn)一次縮進(jìn)4個(gè)空格1.3.代碼檢查對(duì)于前端JavaScript這種比較寬松自由的編程語言來說，嚴(yán)格遵循編碼規(guī)范和格式化風(fēng)格指南極為重要。前端開發(fā)人員需嚴(yán)格遵循開發(fā)規(guī)范，并且使用自動(dòng)代碼檢查工具（如JSHint）降低語法錯(cuò)誤，確保代碼正確執(zhí)行。JSHint是一款檢查JS代碼規(guī)范與否的工具，用來檢查 JS代碼的規(guī)范性。它提供了配置的方法，來檢查不符合開發(fā)規(guī)范的錯(cuò)誤。1.4.黃金定律永遠(yuǎn)遵循同一套編碼規(guī)范--可以是這里列出的，也可以是你自己總結(jié)的。 不管有多少人共同參與同一項(xiàng)目，一定要確保每一行代碼都像是同一個(gè)人編寫的。2.HTML規(guī)范文檔類型 HTML5docType使用HTML5的文檔類型申明： <!DOCTYPEhtml>html5不基于SGML,因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照他們應(yīng)該的方式來運(yùn)行）而 HTML4.01基于SGML，所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。media標(biāo)簽<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><metaname="format-detection"content="telephone=no"/>// 禁止數(shù)字識(shí)自動(dòng)另U為電話號(hào)碼大部分4.7~5寸的安卓設(shè)備的viewport寬設(shè)為360px,iPhone6上卻是375px，大部分5.5寸安卓機(jī)器（比如說三星 Note）的viewport寬為400，iPhone6plus上是414px。語言屬性（Languageattribute）強(qiáng)烈建議為html根元素指定lang屬性，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。更多關(guān)于 lang屬性的知識(shí)可以從此規(guī)范中了解。HTML語言代碼參考手冊(cè)上的文章可以獲得更多有用的信息。字符編碼通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是，可以避免在HTML中使用字符實(shí)體標(biāo)記（characterentity），從而全部與文檔編碼一致（一般采用UTF-8編碼）。IE兼容模式IE支持通過特定的標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為edgemode，從而通知IE采用其所支持的最新的模式。vmetahttp-equiv=X-UA-Compatible"content=IE=edge">"IE=edge""IE=11""IE=EmulateIE11""IE=10""IE=EmulateIE10""IE=9""IE=EmulateIE9"IE=8""IE=EmulateIE8"26注釋<!--header -->2.7.弓1入CSS和JAVASCRIPT根據(jù)HTML5規(guī)范，在引入CSS和JavaScript文件時(shí)一般不需要指定 type屬性，因?yàn)閠ext/css和text/javascript 分別是它們的默認(rèn)值。2.8.語法2.9.屬性順序【參考】HTML屬性應(yīng)當(dāng)按照以下給岀的順序依次排列，確保代碼的易讀性。classid,namedata-*src,for,type,hreftitle,altaria-*,roleclass用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該排在首位。id用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁面內(nèi)的書簽），因此排在第二位。語義化標(biāo)簽根據(jù)元素（有時(shí)稱作“標(biāo)簽”）其被創(chuàng)造出來時(shí)的初始意義來使用它,有根據(jù)有目的地使用HTML元素，對(duì)于可訪問性、代碼重用、代碼效率來說意義重大。多媒體回溯:對(duì)頁面上的媒體而言，像圖片、視頻、canvas動(dòng)畫等，要確保其有可替代的接入接口關(guān)注點(diǎn)分離:web中的關(guān)注點(diǎn)包括信息（HTML結(jié)構(gòu)）、外觀（CSS）和行為（JavaScript）。為了使它們成為可維護(hù)的干凈整潔的代碼，必須將它們分離開。嚴(yán)格地保證結(jié)構(gòu)、表現(xiàn)、行為三者分離，并使三者之間沒有太多的交互和聯(lián)系。就是說，盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼，移入樣式表中；將所有動(dòng)作行為，移入腳本中 ;在此之外，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。?合并樣式，不引用過多樣式表?合并腳本，不使用過多腳本?不使用行內(nèi)樣式?不在元素上使用style屬性?不使用行內(nèi)腳本?不使用表象元素?不使用表象class名（red,left,center）type屬性省略樣式表與腳本上的type屬性。鑒于HTML5中以上兩者默認(rèn)的type值就是text/css和text/javascript，所以type屬性一般是可以忽略掉的。在老舊版本的瀏覽器中這么做也是安全可靠的。ID和錨點(diǎn)在利用錨點(diǎn)提高用戶體驗(yàn)方面，一個(gè)比較好的做法是將頁面內(nèi)所有的頭部標(biāo)題元素都加上 ID。頁面URL的hash中帶上對(duì)應(yīng)的ID名稱，即形成描點(diǎn)，方便跳轉(zhuǎn)至對(duì)應(yīng)元素所處位置。例如，在瀏覽器中輸入U(xiǎn)RL(帶有錨點(diǎn))時(shí)，瀏覽器將定位至錨點(diǎn)對(duì)應(yīng)元素位置。HTML引號(hào)使用雙引號(hào)(“)”而不是單引號(hào)(‘)。'實(shí)用為王盡量遵循HTML標(biāo)準(zhǔn)和語義，但是不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。CSS規(guī)范說明文件規(guī)范所有文件均歸檔至約定的目錄中：框架引入方式?外鏈引入方式?整包導(dǎo)入項(xiàng)目方式文件引入可通過外聯(lián)或內(nèi)聯(lián)方式引入CSS注釋規(guī)范【推薦】文件頂部注釋/*@description:中文說明@author:name@update2019-01-0114:00*/模塊注釋：模塊注釋必須單獨(dú)寫在一行/*module:module2by張三*/Codes/*module:module2by張三*/單行注釋與多行注釋，單行注釋可以寫在單獨(dú)一行，也可以寫在行尾，注釋中的每一行長(zhǎng)度不超過40個(gè)漢字，或者80個(gè)英文字符。特殊注釋：用于標(biāo)注修改、待辦等信息/*TODO:xxxxbyname2013-04-1318:32*/Codes/*BUGFIX:xxxxbyname2012-04-1318:32*/區(qū)塊注釋/*Header*//*Footer*//*leftside*/CSS命名規(guī)范ID和class（類）名使用可以反應(yīng)元素目的和用途的名稱，或其他通用名稱。使用具體且反映元素目的的名稱，這些是最容易理解的，而且發(fā)生變化的可能性最小。使用連字符（中劃線）分隔命名中的單詞。為了增強(qiáng)理解性，在選擇器中不要使用除了連字符（中劃線）以為的任何字符（包括沒有）來連接單詞和縮寫。另外，作為該標(biāo)準(zhǔn)，預(yù)設(shè)屬性選擇器能識(shí)別連字符 （中劃線）作為單詞[attribute|=value]的分隔符盡可能提高代碼模塊的復(fù)用，樣式盡量用組合的方式命名避免使用中文拼音，應(yīng)該采用更簡(jiǎn)明有語義的英文單詞進(jìn)行組合，應(yīng)該用意義命名，而不是樣式顯示結(jié)果命名；不要用抽象的晦澀的命名.規(guī)則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或 _、不允許通過1、2、3等序號(hào)進(jìn)行命名命名注意縮寫，但是不能盲目縮寫ID命名要注意明確性及唯一性，不要隨意新建idclass命名要注意通用性及復(fù)用性，命名必須言簡(jiǎn)意賅避免class與id重名34聲明順序Positioning定位：可以使一個(gè)元素脫離正常文本流，并且覆蓋盒模型相關(guān)的樣式Boxmodel盒模型：決定了一個(gè)組件的大小和位置Typographic排版：Visual外觀：CSS代碼格式排版規(guī)范使用4個(gè)空格，而不使用tab或者混用空格+tab作為縮進(jìn)規(guī)則可以寫成單行，或者多行，但是整個(gè)文件內(nèi)的規(guī)則排版必須統(tǒng)一多個(gè)selector共用一個(gè)樣式集，則多個(gè)selector必須寫成多行形式 ；每一條規(guī)則結(jié)束的大括號(hào) ｝必須與規(guī)則選擇器的第一個(gè)字符對(duì)齊；寫成單行時(shí)每一條規(guī)則的大括號(hào) ｛前后加空格，每一條規(guī)則結(jié)束的大括號(hào) ｝前加空格;屬性名冒號(hào)之前不加空格，冒號(hào)之后加空格；每一個(gè)屬性值后必須添加分號(hào)；并且分號(hào)后空格；規(guī)則書寫規(guī)范? 使用單引號(hào)，不允許使用雙引號(hào) ；?除16進(jìn)制顏色和字體設(shè)置外， CSS文件中的所有的代碼都應(yīng)該小寫 ；? 除了重置瀏覽器默認(rèn)樣式外，禁止直接為 htmltag添加css樣式設(shè)置;? 每一條規(guī)則應(yīng)該確保選擇器唯一，禁止直接為全局 .nav、.header、.body等類設(shè)置屬性代碼性能優(yōu)化的設(shè)置，盡量使用短名稱。合并margin、padding、border的-left/-top/-right/-bottom選擇器應(yīng)該在滿足功能的基礎(chǔ)上盡量簡(jiǎn)短，減少選擇器嵌套，查詢消耗。但是一定要避免的設(shè)置，盡量使用短名稱。覆蓋全局樣式設(shè)置。注意選擇器的性能，不要使用低性能的選擇器。禁止在css中使用*選擇符。除非必須，否則，一般有class或id的，不需要再寫上元素對(duì)應(yīng)的 tag。0后面不需要單位，比如Opx可以省略成0，0.8px可以省略成.8px。如果是16進(jìn)制表示顏色，則顏色取值應(yīng)該大寫，如果可以，顏色盡量用三位字符表示，例女口#AABBCC寫成#ABC。如果沒有邊框時(shí)，不要寫成 border:。，應(yīng)該寫成border:none。盡量避免使用AlphalmageLoader在保持代碼解耦的前提下，盡量合并重復(fù)的樣式。background、font等可以縮寫的屬性，盡量使用縮寫形式 。CSSHack的使用請(qǐng)不用動(dòng)不動(dòng)就使用瀏覽器檢測(cè)和 CSSHacks，先試試別的解決方法吧！考慮到代碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應(yīng)被視為最后的手段。在長(zhǎng)期的項(xiàng)目中，允許使用hack只會(huì)帶來更多的hack，你越是使用它，你越是會(huì)依賴它！區(qū)別屬性：IE6--_property:valueIE6/7--*property:valueIE6/7/8/9--property:value\9非IE6--區(qū)別規(guī)則：非IE6--html>bodyselector{...}firefoxonly--@-moz-documenturl-prefix(){...}字體規(guī)則為了防止文件合并及編碼轉(zhuǎn)換時(shí)造成問題， 建議將樣式中文字體名字改成對(duì)應(yīng)的英文名字，如：黑體(SimHei)宋體(SimSun)微軟雅黑(MicrosoftYahei ，幾個(gè)單詞中間有空格組成的必須加引號(hào))為了對(duì)font-family 取值進(jìn)行統(tǒng)一，更好的支持各個(gè)操作系統(tǒng)上各個(gè)瀏覽器的兼容性，font-family 不允許在業(yè)務(wù)代碼中隨意設(shè)置36 CSS編碼技巧盡量減少代碼重復(fù)合理使用簡(jiǎn)寫是否應(yīng)該使用預(yù)處理器？層級(jí)（z-index）必須清晰明確，頁面彈窗、氣泡為最高級(jí)（最高級(jí)為999），不同彈窗氣泡之間可在三位數(shù)之間調(diào)整；普通區(qū)塊為10-90內(nèi)10的倍數(shù)；區(qū)塊展開、彈出為當(dāng)前父層級(jí)上個(gè)位增加，禁止層級(jí)間盲目攀比。JS規(guī)范JS文件規(guī)范?文件編碼統(tǒng)一UTF-8；?消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為 ；?消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；?提高編譯器效率，增加運(yùn)行速度?為未來新版本的Javascript做好鋪墊JS注釋規(guī)約類，類屬性，類方法使用/**內(nèi)容*/格式，不得使用//xxx方式方法內(nèi)部單行注釋，在被注釋語句上方另起一行， 使用//注釋。方法內(nèi)部多行注釋使用/**/注釋,注意與代碼對(duì)齊。代碼修改同時(shí)，注釋也要進(jìn)行相應(yīng)修改，尤其是參數(shù)、返回值、核心邏輯等的修改。說明：代碼與注釋更新不同步，就像路網(wǎng)與導(dǎo)航軟件更新不同步一樣，如果導(dǎo)航軟件嚴(yán)重滯后，就失去了導(dǎo)航的意義。謹(jǐn)慎注釋掉代碼。在上方詳細(xì)說明，而不是簡(jiǎn)單地注釋掉。如果無用，則刪除 ；說明：代碼被注釋掉有兩種可能性：1）后續(xù)會(huì)恢復(fù)此段代碼邏輯。 2）永久不用。前者如果沒有備注信息，難以知曉注釋動(dòng)機(jī)。后者建議直接刪掉（代碼倉(cāng)庫保存了歷史代碼） 。對(duì)于注釋的要求：?第一、能夠準(zhǔn)確反應(yīng)設(shè)計(jì)思想和代碼邏輯? 第二、能夠描述業(yè)務(wù)含義，使別的程序員能夠迅速了解到代碼背后的信息。完全沒有注釋的大段代碼對(duì)于閱讀者形同天書，注釋是給自己看的，即使隔很長(zhǎng)時(shí)間，也能清晰理解當(dāng)時(shí)的思路；注釋也是給繼任者看的，使其能夠快速接替自己的工作。好的命名、代碼結(jié)構(gòu)是自解釋的，注釋力求精簡(jiǎn)準(zhǔn)確、表達(dá)到位。避免岀現(xiàn)注釋的一個(gè)極端：過多過濫的注釋，代碼的邏輯一旦修改，修改注釋是相當(dāng)大的負(fù)擔(dān)特殊注釋標(biāo)記，請(qǐng)注明標(biāo)記人與標(biāo)記時(shí)間。注意及時(shí)處理這些標(biāo)記，通過標(biāo)記掃描，經(jīng)常清理此類標(biāo)記。線上故障有時(shí)候就是來源于這些標(biāo)記處的代碼。? 待辦事宜（TODO）:（標(biāo)記人，標(biāo)記時(shí)間，［預(yù)計(jì)處理時(shí)間］）表示需要實(shí)現(xiàn)，但目前還未實(shí)現(xiàn)的功能。? 錯(cuò)誤，不能工作（FIXME）:（標(biāo)記人，標(biāo)記時(shí)間，［預(yù)計(jì)處理時(shí)間］）在注釋中用FIXME標(biāo)記某代碼是錯(cuò)誤的，而且不能工作，需要及時(shí)糾正的情況。43JS命名規(guī)范文件夾統(tǒng)一使用全小寫代碼中命名不能以下劃線或美元符開始，也不能以下劃線或美元符結(jié)束代碼中嚴(yán)禁使用拼音與英文混合的方式，更不允許直接使用中文方式。純拼音命名方式也要避免采用（國(guó)際通用的名稱可視為英文，如： taobao，alibaba等）類名使用UpperCamelCase風(fēng)格方法名、參數(shù)名、成員變量、局部變量都統(tǒng)一使用lowerCamelCase風(fēng)格，必須遵從駝峰形式女口:localValue，getMessage（）常量命名全部大寫，單詞間用下劃線隔開，力求語義表達(dá)完整清楚，不要嫌名字長(zhǎng)杜絕完全不規(guī)范的縮寫，避免望文不知義為了達(dá)到代碼自解釋的目標(biāo)，任何定義編程元素在命名時(shí)使用盡量完整單詞組合來表達(dá)其意JS代碼風(fēng)格規(guī)范大括號(hào)使用約定：如果大括號(hào)內(nèi)容為空則簡(jiǎn)潔的寫成{}即可，不需要換行；如果非空代碼塊則:?左大括號(hào)前不換行? 左大括號(hào)后換行? 右大括號(hào)前換行? 右大括號(hào)后還有else等代碼則不換行左小括號(hào)和字符之間不出現(xiàn)空格；同樣，右小括號(hào)和字符之間也不出現(xiàn)空格(見下例)if/for/while/switch/do 等保留字與括號(hào)之間都必須加空格任何二目、三目運(yùn)算符的左右兩邊都需要加一個(gè)空格； 女口：settings=settings?settings:{};if(a&&flag==1){}注釋的雙斜線與注釋內(nèi)容之間有