前端系統(tǒng)開發(fā)說明書

WordWord資料前端系統(tǒng)開發(fā)說明書.一般規(guī)則應(yīng)用在 和 上的通用規(guī)則。文.件、資源命名以可讀性而言，中劃線用來分隔文件名確保文件命名總是以字母開頭而不是數(shù)字特殊含義的文件，需要對文件增加前后綴或特定的擴展名（比如 ）,抑或一串前綴（比如 ）。使用點分隔符來區(qū)分這些在文件名中帶有清晰意義的元數(shù)據(jù)。文.本縮進一次縮進4個空格。代.碼檢查對于前端 這種比較寬松自由的編程語言來說，嚴(yán)格遵循編碼規(guī)范和格式化風(fēng)格指南極為重要。前端開發(fā)人員需嚴(yán)格遵循開發(fā)規(guī)范，并且使用自動代碼檢查工具（如）降低語法錯誤，確保代碼正確執(zhí)行。 是一款檢查代碼規(guī)范與否的工具，用來檢查代碼的規(guī)范性。它提供了配置的方法，來檢查不符合開發(fā)規(guī)范的錯誤。黃.金定律永遠(yuǎn)遵循同一套編碼規(guī)范-可-以是這里列出的，也可以是你自己總結(jié)的。 不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的。規(guī)范文檔類型使用 的文檔類型申明：

不基于因此不需要對進行引用，但是需要 來規(guī)范瀏覽器的行為（讓瀏覽器按照他們應(yīng)該的方式來運行）而 基于M所以需要對進行引用，才能告知瀏覽器文檔所使用的文檔類型。禁止數(shù)字識自動別為電話號碼上卻是5大部分寸禁止數(shù)字識自動別為電話號碼上卻是5大部分寸上是sa）ttribute大部分寸的安卓設(shè)備的 寬設(shè)為安卓機器（比如說三星 ）的 寬為，語言屬性（強烈建議為根元素指定屬性，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時所應(yīng)遵守的規(guī)則等等。更多關(guān)于屬性的知識可以從此規(guī)范中了解。語言代碼參考手冊上的文章可以獲得更多有用的信息。4字.符編碼通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 中使用字符實體標(biāo)記（ ）,從而全部與文檔編碼一致（一般采用編碼）。兼容模式支持通過特定的標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 版本。除非有強烈的特殊需求，否則最好是設(shè)置為，從而通知采用其所支持的最新的模式。最好是設(shè)置為，從而通知采用其所支持的最新的模式。注.釋引入和根據(jù)規(guī)范，在引入 和 文件時一般不需要指定 屬性，因為和 分別是它們的默認(rèn)值。語.法屬.性順序【參考】 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。用于標(biāo)識高度可復(fù)用組件，因此應(yīng)該排在首位。 用于標(biāo)識具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁面內(nèi)的書簽），因此排在第二位。語0義.化標(biāo)簽根據(jù)元素（有時稱作標(biāo)簽”其被創(chuàng)造出來時的初始意義來使用它有根據(jù)有目的地使用 元素，對于可訪問性、代碼重用、代碼效率來說意義重大。2.1多1媒.體回溯:對頁面上的媒體而言，像圖片、視頻、 動畫等，要確保其有可替代的接入接口關(guān)2注.點分離:中的關(guān)注點包括信息（結(jié)構(gòu)）、外觀（）和行為（ c為了使它們成為可維護的干凈整潔的代碼，必須將它們分離開。嚴(yán)格地保證結(jié)構(gòu)、表現(xiàn)、行為三者分離，并使三者之間沒有太多的交互和聯(lián)系。就是說，盡量在文檔和模板中只包含結(jié)構(gòu)性的T而將所有表現(xiàn)代碼，移入樣式表中；將所有動作行為，移入腳本中;在此之外，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。合并樣式，不引用過多樣式表合并腳本，不使用過多腳本不使用行內(nèi)樣式不在元素上使用 屬性不使用行內(nèi)腳本不使用表象元素不使用表象 名（ ）屬性省略樣式表與腳本上的屬性。鑒于 中以上兩者默認(rèn)的 值就是 和v所以 屬性一般是可以忽略掉的。在老舊版本的瀏覽器中這么做也是安全可靠的。和錨點在利用錨點提高用戶體驗方面，一個比較好的做法是將頁面內(nèi)所有的頭部標(biāo)題元素都加上°頁面Word資料WordWord資料中帶上對應(yīng)的 名稱，即形成描點，方便跳轉(zhuǎn)至對應(yīng)元素所處位置。例如，在瀏覽器中輸入 (帶有錨點)時，瀏覽器將定位至錨點對應(yīng)元素位置。引號使用雙引號(“)”而不是單引號實6用.為王盡量遵循 標(biāo)準(zhǔn)和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。規(guī)范說明文.件規(guī)范.所有文件均歸檔至約定的目錄中：框架引入方式外鏈引入方式整包導(dǎo)入項目方式文件引入可通過外聯(lián)或內(nèi)聯(lián)方式引入注釋規(guī)范【推薦】文件頂部注釋中文說明模塊注釋：模塊注釋必須單獨寫在一行張三張三單行注釋與多行注釋,單行注釋可以寫在單獨一行，也可以寫在行尾，注釋中的每一行長度不超過0個漢字，或者80個英文字符。4.特殊注釋：用于標(biāo)注修改、待辦等信息區(qū)塊注釋命名規(guī)范和類名使用可以反應(yīng)元素目的和用途的名稱，或其他通用名稱。使用具體且反映元素目的的名稱，這些是最容易理解的，而且發(fā)生變化的可能性最小。使用連字符（中劃線）分隔命名中的單詞。為了增強理解性，在選擇器中不要使用除了連字符（中劃線）以為的任何字符（包括沒有）來連接單詞和縮寫。另外，作為該標(biāo)準(zhǔn)，預(yù)設(shè)屬性選擇器能識別連字符（中劃線）作為單詞 的分隔符。盡可能提高代碼模塊的復(fù)用，樣式盡量用組合的方式命名避免使用中文拼音，應(yīng)該采用更簡明有語義的英文單詞進行組合，應(yīng)該用意義命名，而不是樣式顯示結(jié)果命名不要用抽象的晦澀的命名規(guī)則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或、不允許通過、、等序號進行命名命名注意縮寫，但是不能盲目縮寫命名要注意明確性及唯一性不要隨意新建命名要注意通用性及復(fù)用性命名必須言簡意賅避免與重名3.4聲.明順序定位：可以使一個元素脫離正常文本流，并且覆蓋盒模型相關(guān)的樣式盒模型：決定了一個組件的大小和位置排版：外觀：代碼格式排版規(guī)范使用個空格，而不使用 或者混用空格 作為縮進規(guī)則可以寫成單行，或者多行，但是整個文件內(nèi)的規(guī)則排版必須統(tǒng)一多個 共用一個樣式集，則多個 必須寫成多行形式；每一條規(guī)則結(jié)束的大括號必須與規(guī)則選擇器的第一個字符對齊；寫成單行時每一條規(guī)則的大括號前后加空格，每一條規(guī)則結(jié)束的大括號前加空格；屬性名冒號之前不加空格，冒號之后加空格；每一個屬性值后必須添加分號并且分號后空格；規(guī)則書寫規(guī)范使用單引號，不允許使用雙引號除進制顏色和字體設(shè)置外， 文件中的所有的代碼都應(yīng)該小寫除了重置瀏覽器默認(rèn)樣式外，禁止直接為 添加 樣式設(shè)置每一條規(guī)則應(yīng)該確保選擇器唯一，禁止直接為全局、 、 等類設(shè)置屬性代碼性能優(yōu)化合并、 、的 的設(shè)置，盡量使用短名稱。選擇器應(yīng)該在滿足功能的基礎(chǔ)上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設(shè)置。注意選擇器的性能，不要使用低性能的選擇器。禁止在 中使用選擇符。除非必須，否則，一般有 或的，不需要再寫上元素對應(yīng)的。后面不需要單位，比如 可以省略成0可以省略成。如果是進制表示顏色，則顏色取值應(yīng)該大寫，如果可以，顏色盡量用三位字符表示，例如寫成。如果沒有邊框時，不要寫成 ，應(yīng)該寫成 ：盡量避免使用在保持代碼解耦的前提下，盡量合并重復(fù)的樣式。、 等可以縮寫的屬性，盡量使用縮寫形式。的使用請不用動不動就使用瀏覽器檢測和 ，先試試別的解決方法吧！考慮到代碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應(yīng)被視為最后的手段。在長期的項目中，允許使用只會帶來更多的，你越是使用它，你越是會依賴它！區(qū)別屬性：區(qū)別規(guī)則：非字體規(guī)則為了防止文件合并及編碼轉(zhuǎn)換時造成問題，建議將樣式中文字體名字改成對應(yīng)的英文名字，如：黑體 宋體 微軟雅黑 ，幾個單詞中間有空格組成的必須加引號為了對 取值進行統(tǒng)一，更好的支持各個操作系統(tǒng)上各個瀏覽器的兼容性，不允許在業(yè)務(wù)代碼中隨意設(shè)置編碼技巧盡量減少代碼重復(fù)合理使用簡寫是否應(yīng)該使用預(yù)處理器？層級必須清晰明確，頁面彈窗、氣泡為最高級（最高級為 ）,不同彈窗氣泡之間可層級在三位數(shù)之間調(diào)整；普通區(qū)塊為內(nèi)的倍數(shù)；區(qū)塊展開、彈出為當(dāng)前父層級上個位增加，在三位數(shù)之間調(diào)整；普通區(qū)塊為禁止層級間盲目攀比。規(guī)范文件規(guī)范文件編碼統(tǒng)一 F消除 語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為消除代碼運行的一些不安全之處，保證代碼運行的安全；提高編譯器效率，增加運行速度為未來新版本的 做好鋪墊注釋規(guī)約類，類屬性，類方法使用內(nèi)容格式，不得使用 方式方法內(nèi)部單行注釋，在被注釋語句上方另起一行，使用注釋。方法內(nèi)部多行注釋使用 注釋，注意與代碼對齊。代碼修改同時，注釋也要進行相應(yīng)修改，尤其是參數(shù)、返回值、核心邏輯等的修改。說明：代碼與注釋更新不同步，就像路網(wǎng)與導(dǎo)航軟件更新不同步一樣，如果導(dǎo)航軟件嚴(yán)重滯后，就失去了導(dǎo)航的意義。謹(jǐn)慎注釋掉代碼。在上方詳細(xì)說明，而不是簡單地注釋掉。如果無用，則刪除說明：代碼被注釋掉有兩種可能性：）后續(xù)會恢復(fù)此段代碼邏輯。）永久不用。前者如果沒有備注信息，難以知曉注釋動機。后者建議直接刪掉（代碼倉庫保存了歷史代碼）。對于注釋的要求：第一、能夠準(zhǔn)確反應(yīng)設(shè)計思想和代碼邏輯第二、能夠描述業(yè)務(wù)含義，使別的程序員能夠迅速了解到代碼背后的信息。完全沒有注釋的大段代碼對于閱讀者形同天書，注釋是給自己看的，即使隔很長時間，也能清晰理解當(dāng)時的思路；注釋也是給繼任者看的，使其能夠快速接替自己的工作。好的命名、代碼結(jié)構(gòu)是自解釋的，注釋力求精簡準(zhǔn)確、表達到位。避免出現(xiàn)注釋的一個極端：過多過濫的注釋，代碼的邏輯一旦修改，修改注釋是相當(dāng)大的負(fù)擔(dān)特殊注釋標(biāo)記，請注明標(biāo)記人與標(biāo)記時間。注意及時處理這些標(biāo)記，通過標(biāo)記掃描，經(jīng)常清理此類標(biāo)記。線上故障有時候就是來源于這些標(biāo)記處的代碼。待辦事宜（ D（標(biāo)記人，標(biāo)記時間，預(yù)計處理時間）表示需要實現(xiàn)，但目前還未實現(xiàn)的功能。錯誤，不能工作（ ）（標(biāo)記人，標(biāo)記時間，預(yù)計處理時間）在注釋中用標(biāo)記某代碼是錯誤的，而且不能工作，需要及時糾正的情況。命名規(guī)范文件夾統(tǒng)一使用全小寫代碼中命名不能以下劃線或美元符開始，也不能以下劃線或美元符結(jié)束代碼中嚴(yán)禁使用拼音與英文混合的方式，更不允許直接使用中文方式。純拼音命名方式也要避免采用（國際通用的名稱可視為英文，如： b 等）類名使用 風(fēng)格方法名、參數(shù)名、成員變量、局部變量都統(tǒng)一使用 風(fēng)格，必須遵從駝峰形式如：V常量命名全部大寫，單詞間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長杜絕完全不規(guī)范的縮寫，避免望文不知義為了達到代碼自解釋的目標(biāo)，任何定義編程元素在命名時使用盡量完整單詞組合來表達其意代碼風(fēng)格規(guī)范大括號使用約定如果大括號內(nèi)容為空則簡潔的寫成即可，不需要換行；如果非空代碼塊則：左大括號前不換行左大括號后換行右大括號前換行右大括號后還有 等代碼則不換行左小括號和字符之間不出現(xiàn)空格；同樣，右小括號和字符之間也不出現(xiàn)空格（見下例）等保留字與括號之間都必須加空格任何二目、三目運算符的左右兩邊都需要加一個空格；如:注釋的雙斜線與注釋內(nèi)容之間有且僅有一個空格如：注釋內(nèi)容，注意在和注釋內(nèi)容之間有一個空格單行字符數(shù)限不超過 個，超出需要換行，超出需要換行時遵循如下原則：第二行相對第一行縮進空格，從第三行開始，不再繼續(xù)縮進運算符與下文一起換行方法調(diào)用是，多個參數(shù)需要換行時，在逗號后進行在括號前不要換行方法參數(shù)在定義和傳入是，多個參數(shù)逗號后面加空格如：常量定義規(guī)范不允許任何魔法值（即未經(jīng)定義的常量）直接出現(xiàn)在代碼中不要使用一個常量類維護所有常量，按常量功能進行歸類，分開維護常量復(fù)用層次，公共常量、模塊常量、功能頁面常量控制語句規(guī)范在一個塊內(nèi)，每個要么通過、 等來終止，要么注釋說明程序?qū)⒗^續(xù)執(zhí)行到哪一個為止；在一個塊