web开发文档
前端開發(fā)規(guī)范
-資料整理 宜信web- 楊亞坤
1，html 規(guī)范
4，在HTML5規(guī)范里并沒有嚴格要求屬性值兩邊加引號。但考慮到一些屬性可以接受空白值，為了保持一致性，我們要求所有屬性值必須加上引號。對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
5，盡最大能力標簽語意化
- 要給?h1-h6?標題 -- 包括作為鏈接的標題 -- 定義缺省樣式。在你的CSS文檔頂部定義它們，在必要時修改它們以保持整個站點的一致性。
- 標題必須有層次，能表明從大到小不同級別的重要性，h1具有最大的字體大小。
- SEO：要大致地了解頁面的層次組織和閱讀效果，在開發(fā)者工具里關(guān)閉CSS效果，你會看到一個基于文字的視圖，包括所有的?h1-h6?，?strong，?em?等標簽。
6，適當使用實體
以實體代替與HTML語法相同的字符，避免瀏覽解析錯誤。
常用HTML字符實體（建議使用實體）：
| 字符 | 名稱 | 實體名 | 實體數(shù) |
| " | 雙引號 | " | " |
| & | &符 | & | & |
| < | 左尖括號（小于號） | < | < |
| > | 右尖括號（大于號） | > | > |
| ? | 空格 | |   |
| ? | 中文全角空格 | ? | 　 |
常用特殊字符實體（不建議使用實體）：
| 字符 | 名稱 | 實體名 | 實體數(shù) |
| ￥ | 元 | ¥ | ¥ |
| | | 斷豎線 | ¦ | ¦ |
| ? | 版權(quán) | © | © |
| ? | 注冊商標R | ® | ® |
| ? | 商標TM | ™ | ™ |
| · | 間隔符 | · | · |
| ? | 左雙尖括號 | « | « |
| ? | 右雙尖括號 | » | » |
| ° | 度 | ° | ° |
| × | 乘 | × | × |
| ÷ | 除 | ÷ | ÷ |
| ‰ | 千分比 | ‰ | ‰ |
?
7.標記的總體原則
下面是編寫HTML標記的總體原則。提醒大家一點，在創(chuàng)建的HTML文檔里總是要使用能夠代表內(nèi)容語義的標記。
- 段落分隔符要使用實際對應的<p>元素，而不是用多個<br>標簽。
- 在合適的條件下，充分利用<dl>?（定義列表）和<blockquote>?標簽。
- 列表中的條目必須總是放置于<ul>、<ol>或<dl>?中，永遠不要用一組?<div>或<p>?來表示。
- 給每個表單里的字段加上?<label>?標簽，其中的?for?屬性必須和對應的輸入字段對應，這樣用戶就可以點擊標簽。同理，給標簽加上?cursor:pointer;?樣式也是明智的做法。
- 不用使用輸入字段中的?size?屬性。該屬性是和輸入字段里文本的?font-size?相關(guān)的。應該使用CSS寬度。
- 在某些閉合的?</div>?標簽旁邊加上一段html注釋，說明這里閉合的是什么元素。這在有大量嵌套和縮進的情況下會很有用。
- 不要把表格用于頁面布局。
- 在合適的條件下，利用?<thead>、<tbody>和<th>標簽 (以及Scope屬性）。
?
6，元素嵌套合法化
禁止 出現(xiàn)?
<ul>
<div></div>
<li></li>
<li></li>
</ul>
Ul子元素只能是 li 不可是其他
9.屬性順序
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
- class
- id,?name
- data-*
- src,?for,?type,?href,?value
- title,?alt
- role,?aria-*
class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內(nèi)的書簽），因此排在第二位
10，
?
?
?
?
?
2css 書寫規(guī)范
1.盡量使用英文命名原則，嚴格禁止拼音、數(shù)字
2.盡量不加縮寫，除非已約定的縮寫方式，如：nav
3.id和class全部小寫，采用該版塊的英文單詞或組合命名，以中杠“-”分割，如：nav-tabs(導航標簽/nav+tabs)
必須使用Tab進行代碼縮進，建議設置Tab為4個空格的寬度，而不是4個空格；
屬性與“{}”之間，屬性名和值之間必須有空格，屬性必須換行，“{}”必須換行顯示(即使只有一個屬性)，如：
.nav-tabs {
? ? border-bottom: 1px solid #ddd;
}
屬性值后面必須加分號“;”，即使只有一個；
RGB顏色值有字母的必須采用小寫，可縮寫的盡量使用縮寫，如：#ffcccc縮寫為#fcc；
針對特殊瀏覽器的屬性，應寫在標準屬性之前，左側(cè)對齊，如：
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
?
?按照元素模型由外及內(nèi)，由整體到細節(jié)的書寫順序，屬性值大致分為五組：
- 位置：position,top,right,bottom,left,float
- 盒模型屬性：display,margin,padding,width,height
- 邊框與背景：border,background
- 段落與文本：line-height,text-indent,font,color,text-decoration,text-align…
- 其他屬性：overflow,cursor,visibility,…
媒體查詢（Media query）的位置
將媒體查詢放在盡可能相關(guān)規(guī)則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。下面給出一個典型的實例
?
5.多選擇器規(guī)則之間（必須）換行
?/* 推薦的寫法 */
?a.btn,
?input.btn,
?input[type="button"] {
?? ? ......
?}
6.?（禁止）將樣式寫為單行, 如
.hotel-content {margin: 10px; background-color: #efefef;}
7.?（禁止）向?0?后添加單位, 如：
.obj {
? ? left: 0px;
}
8.?（禁止）使用css原生import
使用css原生import有很多弊端，比如會增加請求數(shù)等…
10. 小圖片（必須）sprite?合并
11.?（推薦）當編寫針對特定html結(jié)構(gòu)的樣式時，使用元素名?+?類名
/* 所有的nav都是針對ul編寫的 */
?ul.nav {
?? ? ......
?}
12.?（禁止）使用行內(nèi)（inline）樣式
13. 鏈接的樣式，（務必）按照這個順序來書寫
a:link -> a:visited -> a:hover -> a:active
14.CSS 必須放在文檔的?<head>?部分, Javascript 必須正好放在?</body>?標簽的前面。
14，對于通用元素使用 class ，這樣利于渲染性能的優(yōu)化。
- 對于經(jīng)常出現(xiàn)的組件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的性能會受到這些因素的影響。
- 選擇器要盡可能短，并且盡量限制組成選擇器的元素個數(shù)，建議不要超過 3 。
- 只有在必要的時候才將 class 限制在最近的父元素內(nèi)（也就是后代選擇器）（例如，不使用帶前綴的 class 時 -- 前綴類似于命名空間）。
15.代碼組織
- 以組件為單位組織代碼段。
- 制定一致的注釋規(guī)范。
- 使用一致的空白符將代碼分隔成塊，這樣利于掃描較大的文檔。
- 如果使用了多個 CSS 文件，將其按照組件而非頁面的形式分拆，因為頁面會被重組，而組件只會被移動。
參考：
https://codeguide.bootcss.com/#css-single-declarations
參考 ：
https://www.25xt.com/html5css3/15586.html
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
注釋規(guī)范
文件頭部注釋主要用來闡述此文件的名稱，版本，作者。按照以下形式書寫：
其中版本號的格式為：yyyyMMDDHH
行內(nèi)注釋
行內(nèi)注釋主要說明本段代碼所在的模塊；
簡寫形式的屬性聲明
在需要顯示地設置所有值的情況下，應當盡量限制使用簡寫形式的屬性聲明。常見的濫用簡寫屬性聲明的情況如下：
- padding
- margin
- font
- background
- border
- border-radius
大部分情況下，我們不需要為簡寫形式的屬性聲明指定所有值。例如，HTML 的 heading 元素只需要設置上、下邊距（margin）的值，因此，在必要的時候，只需覆蓋這兩個值就可以。過度使用簡寫形式的屬性聲明會導致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。
?
?
Js 規(guī)范
1.?句尾分號；和留空；
總的來說，使用留空應該遵循源遠流長的英語閱讀慣例。 例如，每個逗號和冒號（以及適用的分號）后面要空一格，但在括號內(nèi)部的左側(cè)和右側(cè)都不要加空格。另外，大括號應該總是和他們前面的參數(shù)出現(xiàn)在同一行。
來看看下面的 JavaScript for循環(huán)的例子...
正確
for?(var?i = 0, j = arr.length; i < j; i++) {
// Do something.
}
不正確
for?(?var?i = 0, j = arr.length; i < j; i++ )
{
// Do something.
}
也不正確
for(var?i=0,j=arr.length;i<j;i++){
?
// Do something.
}
2.?變量命名合規(guī)格（參考見javascript高級程序設計指南）;
一般情況下
1）?變量：必須采用駱駝峰的命名且首字母小寫
?// 正確的命名
? var isHotel,
? ? ? isHotelBeijing,
? ? ? isHotelBeijingHandian;
2）?常量：必須采用全大寫的命名，且單詞以_分割，常量通常用于ajax請求url，和一些不會改變的數(shù)據(jù)
// 正確的命名
? var HOTEL_GET_URL = 'http://map.baidu.com/detail',
? ? ? PLACE_TYPE = ‘hotel’;
?（3）類：必須采用駱駝峰的命名且首字母大寫，如：
? var FooAndToo = function(name) {
? ? ? this.name = name;
? }
?
?
?
?
?
3，禁止?if?縮寫，禁止使用?eval；
5.?變量未定義；盡量減少全局變量和空的 變量中轉(zhuǎn)
6，禁止超長函數(shù)，做到業(yè)務分化，函數(shù)精短
7，使用函數(shù)式編程，對象式編程；倡導聲明式編程，避免命令式編程；
// 命令式
var makes = [];
for (var i = 0; i < cars.length; i++) {
? makes.push(cars[i].make);
}
?
// 聲明式
var makes = cars.map(function(car){ return car.make; });
?
8，善于使用高階函數(shù)，閉包，函數(shù)柯里化，遞歸，等進行編程；提高代碼的可讀性，可維護性，減少內(nèi)存開銷；
9.?塊內(nèi)函數(shù)必須用局部變量聲明
// 錯誤的寫法
?var call = function(name) {
?? ? if (name == "hotel") {
?? ? ? ? function foo() {
?? ? ? ? ? ? console.log("hotel foo");
?? ? ? ? }
?? ? }
?
?? ? foo && foo();
?}
?
?// 推薦的寫法
?var call = function(name) {
?? ? var foo;
?
?? ? if (name == "hotel") {
?? ? ? ? foo = function() {
?? ? ? ? ? ? console.log("hotel foo");
?? ? ? ? }
?? ? }
?
?? ? foo && foo();
?}
引起的bug：第一種寫法foo的聲明被提前了; 調(diào)用call時：第一種寫法會調(diào)用foo函數(shù)，第二種寫法不會調(diào)用foo函數(shù)
10，?（禁止）使用eval，采取$.parseJSON
?三個原因：
- 有注入風險，尤其是ajax返回數(shù)據(jù)
- 不方便debug
- 效率低，eval是一個執(zhí)行效率很低的函數(shù)
建議：
使用new Function來代替eval的使用，最好就別用。
11，iframe；
Iframe 是能添加到指定頁面的各種元素中上開銷最大的一個。它們會阻塞頁面讓它無法觸發(fā)onload事件，直到它們加載完成。有時候它們被其他機構(gòu)用來處理追蹤腳本。例如 Doubleclick floodlight 標簽就是一個 iframe，管理員可以從他們的管理面板向里面增加追蹤像素。在加入iFrame的任何情況下，它應該在window的onload事件被觸發(fā)之后再動態(tài)加入到DOM中
13，不要在HTML中寫內(nèi)聯(lián)腳本?<script>?塊。 它們會阻塞頁面渲染操作，對頁面加載時間帶來破壞性的影響。
14，條件表達式例如?if?語句通過抽象方法?ToBoolean?強制計算它們的表達式并且總是遵守下面的規(guī)則：
- 對象?被計算為?true
- Undefined?被計算為?false
- Null?被計算為?false
- 布爾值?被計算為?布爾的值
- 數(shù)字?如果是?+0、-0、或 NaN?被計算為?false, 否則為?true
- 字符串?如果是空字符串?''?被計算為?false，否則為?true
if ([0]) {
? // true
? // An array is an object, objects evaluate to true
}
條件表達式例如?if?語句通過抽象方法?ToBoolean?強制計算它們的表達式并且總是遵守下面的規(guī)則：
- 對象?被計算為?true
- Undefined?被計算為?false
- Null?被計算為?false
- 布爾值?被計算為?布爾的值
- 數(shù)字?如果是?+0、-0、或 NaN?被計算為?false, 否則為?true
- 字符串?如果是空字符串?''?被計算為?false，否則為?true
if ([0]) {
? // true
? // An array is an object, objects evaluate to true
}
15.使用?$?作為存儲 jQuery 對象的變量名前綴。
// bad
const sidebar = $('.sidebar');
?
// good
const $sidebar = $('.sidebar');
?
?
?
?
?
*********其他一些 優(yōu)化
優(yōu)化 JavaScript 的特征?
- 編寫可維護的代碼
- 單變量模式
- Hoisting：把所有變量聲明統(tǒng)一放到函數(shù)的起始位置 （在后部聲明的變量也會被JS視為在頭部定義，由此會產(chǎn)生問題）
- 不要擴充內(nèi)置原型（雖然給Object(), Function()之類的內(nèi)置原型增加屬性和方法很巧妙，但是會破壞可維護性）
- 不要用隱含的類型轉(zhuǎn)換
- 不要用 eval()
- 用 parseInt() 進行數(shù)字轉(zhuǎn)換
- （規(guī)范）左大括號的位置
- 構(gòu)造器首字母大寫
- 寫注釋
- 不要用 void
- 不要用 with 語句
- 不要用 continue 語句
- 盡量不要用位運算
?
?
?
?
?
?
?
?
?
?
?
?
附件： 常用css命令名
常用的css命名規(guī)則：
- 頭：header
- 內(nèi)容：content/container
- 尾：footer
- 導航：nav
- 側(cè)欄：sidebar
- 欄目：column
- 頁面外圍控制整體布局寬度：wrapper
- 左右中：left right center
- 登錄條：loginbar
- 標志：logo
- 廣告：banner
- 頁面主體：main
- 熱點：hot
- 新聞：news
- 下載：download
- 子導航：subnav
- 菜單：menu
- 子菜單：submenu
- 搜索：search
- 友情鏈接：friendlink
- 頁腳：footer
- 版權(quán)：copyright
- 滾動：scroll
- 內(nèi)容：content
- 標簽頁：tab
- 文章列表：list
- 提示信息：msg
- 小技巧：tips
- 欄目標題：title
- 加入：joinus
- 指南：guide
- 服務：service
- 注冊：register
- 狀態(tài)：status
- 投票：vote
- 合作伙伴：partner
?
注釋的寫法：
/* Footer */
內(nèi)容區(qū)
/* End Footer */
id的命名：
(1)頁面結(jié)構(gòu)
- 容器: container
- 頁頭：header
- 內(nèi)容：content/container
- 頁面主體：main
- 頁尾：footer
- 導航：nav
- 側(cè)欄：sidebar
- 欄目：column
- 頁面外圍控制整體布局寬度：wrapper
- 左右中：left right center
(2)導航
- 導航：nav
- 主導航：mainnav
- 子導航：subnav
- 頂導航：topnav
- 邊導航：sidebar
- 左導航：leftsidebar
- 右導航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 標題: title
- 摘要: summary
(3)功能
- 標志：logo
- 廣告：banner
- 登陸：login
- 登錄條：loginbar
- 注冊：regsiter
- 搜索：search
- 功能區(qū)：shop
- 標題：title
- 加入：joinus
- 狀態(tài)：status
- 按鈕：btn
- 滾動：scroll
- 標簽頁：tab
- 文章列表：list
- 提示信息：msg
- 當前的: current
- 小技巧：tips
- 圖標: icon
- 注釋：note
- 指南：guide
- 服務：service
- 熱點：hot
- 新聞：news
- 下載：download
- 投票：vote
- 合作伙伴：partner
- 友情鏈接：link
- 版權(quán)：copyright
class的命名：
(1)顏色:使用顏色的名稱或者16進制代碼,如
- .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
（2）字體大小,直接使用”font+字體大小”作為名稱,如
- .font12px { font-size: 12px; }
- .font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
- .left { float:left; }
- .bottom { float:bottom; }
(4)標題欄樣式,使用”類別+功能”的方式命名,如
- .barnews { }
- .barproduct { }
注意事項::
- 主要的 master.css
- 模塊 module.css
- 基本共用 base.css
- 布局，版面 layout.css
- 主題 themes.css
- 專欄 columns.css
- 文字 font.css
- 表單 forms.css
- 補丁 mend.css
- 打印 print.css
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
總結(jié)
- 上一篇： RTX 4090来了！显卡换新，驱动别拉
- 下一篇： foorbar关于flac和WAV文件的