Batsing的網頁編程規範（HTML/CSS/JS/PHP）

特別注意！！！我這裏的前端編程規範不苟同於Bootstrap的前端規範。

由於我和它的目的不一樣，Bootstrap規範是極簡主義，甚至有些沒有考慮到兼容性的問題。

個人規範是本身從編程實踐中總結出來的，每條都附有詳細緣由，不喜者請評論闡明緣由。

 

一、HTML基本元素、標籤規範

閉合(<p></p>)、自閉合(<br />)、小寫（<INPUT />）

1)不閉合的標籤每每會致使很是多異常的頁面顯示，<div>標籤不匹配、漏配這種狀況尤爲常見，建議div必定要對齊不要左一格右一格的，使用智能方便的IDE，能夠方便地看到各個標籤的匹配狀況。

2）這裏的規範自閉合標籤要寫 /，而Bootstrap中的說法是不寫，個人理由以下：

　　1.XHTML和XML規範；

　　2.我記得在某本書說過不寫/，某些標籤在某些低版本的IE中會出現兼容問題，這個我不太記得清楚了，並且規範的寫法是 「空格+斜線」；

　　3.IDE會自動補全，不必又去手工改一下；（在此推薦一下下HBuilder IDE 和 emmet插件）

　　4.ReactJS中的規範是要加上 / ，否則標籤會識別不了；

　　5.若是你指望 XML 軟件使用你的頁面，使用這種風格是很是好的。

3）標籤和屬性小寫，那是由於網上幾乎全部的資料和代碼都是用小寫的，忽然弄個大寫除了特立獨行以外並無任何用處，但會讓別人看得不爽。

 

二、HTML屬性

小寫(ID="...")，雙引號（id='...' 特殊狀況可用單引號），

特殊狀況示範：

<div onclick='payOrder("x2015090901353456");' ></div>

屬性順序（這裏的順序與Bootstrap規範有很大出入，我附上解釋）

input標籤方面：

type(input標籤) > name(input標籤) > id > value(input標籤) > ... > class > style > onclick,onfoucus,on...

最首要的是肯定輸入類型，是文本、單選、多選、按鈕、文件、提交……；

次之是肯定name和id，由於直接提交表單時傳值的key就是name，而用ajax提交時能夠用name（節儉）也能夠用id（JS執行快）來讀取值；

再次則是value，通常是有設置默認值才添加這個屬性，有默認值要醒目顯示出來，調試時發現沒有默認值或者默認值異常則能夠快速找出來；

data-*,role等等其它屬性直接放在中間，由於通常一次寫好了就基本上不須要動的了，class屬性也是同理；

style屬性放在幾乎最後，是由於可能一些比較獨立的DOM有本身的樣式，並且也可能常常變更，放在最後（若是沒有綁定事件則是最後）比較顯眼；

onclick等on...方法，由於IOS一些網頁動態加載的DOM使用jquery的live也可能會有沒法綁定事件的問題，因此常常要綁定某些事件的會直接使用on……屬性，這個放在最後也是由於顯眼的緣由，由於它有綁定事件，因此要一眼就能看得出來，而一眼看得出來的除了最開頭及第二就剩最後了。

img標籤：

src（img標籤）>width/height（img標籤）>alt（img標籤）> id>... > class > style > onclick,onfoucus,on...

最首要的固然是圖片的源地址，這個不用解釋了吧；

次之是圖片的寬度或高度，注意是「或」，這兩個屬性建議通常只設置一個，由於設置一個另外一個則會自動比例適應，而設定兩個則會使不合尺寸的圖片拉伸；

alt是圖片提示，我的感受若是是手機端則須要寫，PC端通常不用寫不，由於不少時候手機會調成無圖模式以節省流量，電腦則無需；

後面的屬性順序原理同上；

！以上順序如與IDE自動補全不太一致，則以IDE自動補全的爲優先考慮。（通常是Emmet插件）

！若有不一樣意見，請以瀏覽器審查元素看到的排序爲準

 

三、表單

使用 label 標籤包裝 單選、多選、下拉等元素，擴大用戶點擊範圍到文字；

不建議使用for-id的方法綁定label，由於id是稀有資源不宜爲太多表單分配過多id，表單使用name就足夠了；

form 在須要從服務器讀取原來的數據的要加 autocomplete="off"，以避免火狐瀏覽器的自動記錄替換代碼設定的默認值。

 

四、CSS顏色#

在PC版網頁中不要使用縮寫形式（如：#aaa），要寫完整（#aaaaaa），不然IE8及如下不能識別而變成黑色；

 

五、JS中全部變量都要用var顯式聲明

JS中，默認狀況下，沒有顯示聲明的變量爲全局變量。對於只須要在函數內使用的變量來講，不用var聲明會使變量變成全局變量，變量在函數使用完後得不到釋放，形成內存的浪費；最主要是這些變量極可能在其它函數中重名，可能會形成各類奇奇怪怪的問題。對於全局變量來講，在外部用var顯示聲明，能夠明確地指出有地方用了全局變量，以便與函數中的參數變量區分，便於往後維護和優化。

 

六、JS勿用 eval() 函數

解析JSON字符串請使用jQuery的$.parseJSON函數，手機網頁也可直接使用原生的 JSON.parse() 函數，或者直接在服務端直接返回json對象，設置mime type（如Thinkphp的ajaxReturn()函數）。由於eval()函數是把字符串做爲腳本運行的意思，很是危險，很是容易產生CSRF攻擊隱患！

 

七、請使用UTF8無BOM編碼格式

由於不少後臺編程語言如PHP只支持utf8編碼的JSON，爲避免頻繁的轉編碼，請全部文檔都使用utf8格式；

無BOM就是爲了不session、cookie、GD庫生成的圖片等出現不正常；

另外注意IE7及如下的JSON不能帶多餘的逗號，好比 {"name":"batsing", "age":"24", } 最後多出那個的,是會報錯的；

 

八、用Tab而不是用空格

詳細緣由查看個人另外一篇博文。

附CodeIgniter（一個PHP框架）的PHP編程規範「在代碼中使用製表符（tab）來代替空格，這雖然看起來是一件小事，可是使用製表符代替空格， 可讓開發者閱讀你代碼的時候，能夠根據他們的喜愛在他們的程序中自定義縮進。 此外還有一個好處是，這樣文件能夠更緊湊一點，也就是原本是四個空格字符， 如今只要一個製表符就能夠了。」。原文連接

 

九、JS中的方法不須要寫 window.

好比 window.location.href、window.document.getElement...、 這些都不須要寫前面的 window. 更多詳情參考 菜鳥教程的BOM章節>>

 

十、該加的meta標記不要省

移動端有哪些meta，PC端有哪些meta，請見個人博文 前端手札－－meta標記篇

 

十一、巧用title屬性

在一些管理後臺，一些比較隱蔽的操做以及操做圖標上使用title屬性會有很大的提示做用。好比ECshop的管理後臺中就有大量這種例子

 

十二、攔截表單提交使用 preventDefault() 而不是 return false

在一些網頁尤爲是後臺管理頁面中，常常須要攔截表單的提交跳轉而是轉換爲Ajax提交。大多數作法是

$("#aForm").submit(function(){
    //這裏作一些處理和AJAX提交什麼的
    return false;    //這樣阻止瀏覽器的默認提交跳轉
});

可是這個代碼裏面只要在submit的回調函數裏面有任何報錯，頁面都會馬上跳轉，而你卻沒法看到報了什麼錯誤，對調試很是不便。我受到 <a> 標籤跳轉可使用 preventDefault() 來攔截的啓發，把它也應用到表單非跳轉提交裏面來，這樣不管裏面是否報錯都不會形成頁面跳轉了。

$("#aForm").submit(function( e ){
    e.prevenDefault();    //先阻止瀏覽器默認跳轉行爲
    //這裏作一些處理和AJAX提交什麼的，有報錯也不用怕它會跳轉走了
});

 

十一、PHP各版本注意事項

5.3及之前版本有個magic_quotes_gpc，會對全部輸入（GET、POST等）進行過濾，時而會形成混亂，如POST一個JSON字符串而雙引號被轉換了。此功能5.4後移除了，建議5.3及之前版本也將其關閉，避免沒必要要的麻煩。輸入過濾這種事情仍是讓框架來作比較合理，由於這樣能夠代碼控制不一樣的過濾規則。

5.4及以後才支持 [] 這種形式的數組，5.3及以前只能使用 array() 。因此若是是使用5.3及以上版本，建議升級到更新版本。

5.3相比5.2更改了不少內容，二者的兼容性能夠看作斷層了，有舊項目在運行的5.2，不建議升級PHP。而大多數現代PHP框架都會起碼要求5.3以上版本，因此在租用雲主機和虛擬空間特別留意。

 

十二、PHP中的函數與方法概念區分

函數：函數定義在類外，函數是公共的，均可以使用，通常爲小寫字母加下劃線寫法；

方法：方法定義在類內，類的方法能夠設定訪問權限，須要經過對象或者類來調用，通常爲駝峯寫法；

 

1三、{ 不要另起一行

有些人喜歡把 { 另起一行，不知道是爲了逼格仍是什麼，可是這樣作有什麼壞處嗎？還真有！

這樣會快速增長代碼的行數，並且是虛無的行數，這樣的後果就是你要更頻繁地滾動屏幕，影響代碼閱讀、人工尋找的效率

而按照K&B風格規範來講，類和方法/函數的左括號另起一行，if/else、switch/case等的左括號放在同一行。

目前所看到的是（從OAuth示例中看到），微信團隊用的是K&B風格，而阿里支付寶和新浪微博用的是不另起行，最後這裏的總結主要是PHP，而並不是前端。

 

1四、類和方法的註釋說明文檔規範

/**
 * 實例化多層控制器 格式：[資源://][模塊/]控制器
 * @param string $name 資源地址
 * @param string $layer 控制層名稱
 * @param integer $level 控制器層次
 * @return Controller|false
 */
function A($name,$layer='',$level='') {
    ... ...
}

由於這種寫法是IDE自動生成幫助文檔的標準格式，見下圖（圖截自HBuilder，示範代碼A()函數爲Thinkphp）。

 

1五、使用Thinkphp框架的項目，參考這篇博文中的該框架專用的規範>>

1六、PHP中if、switch等的大號括的寫法

在純PHP文件中，if/else，switch/case，for，while，foreach等使用大括號的形式；

在模板文件中，因爲代碼大部分是HTML標籤，因此中間嵌入的PHP代碼 if、switch、for、while、foreach 等不使用大括號，而是使用冒號和endif、endswitch、endfor、endwhile、endforeach 這種形式，這樣能夠避免大括號嵌套過於複雜形成閱讀困難，和嵌套錯誤等。

<?php if(...): ?>
<div>...</div>
<?php else: ?>
<div>...</div>
<?php endif; ?>

1七、用protected而不是private修飾

private修飾爲私有的意思，但不能被子類繼承。在業務擴展，需求更改頻繁的現代社會，絕大多數的類，被繼承是早晚的事情。一些由於安全等方面緣由不宜被訪問的方法，應該定義爲protected而不是private，以避免之後繼承時發現一些方法並無繼承過來。在PHP中，方法的public修飾應該被省略，方法默認狀況下已是public，不須要囉嗦地聲明。

1八、區別使用 return 和 exit

exit會結束整個的PHP腳本。在框架中，都是執行完業務邏輯再分析調試信息的。若是使用exit，業務執行完了可是調試信息不會生成，會讓調試帶來不便。

但在初始化函數（__construct 和 ThinkPHP的_initialize）中，用exit的地方並不能使用return，由於return只是返回了初始化函數，後面的業務代碼仍是會繼續執行。