程式碼規範之前端編寫碼規範

上一期阿牛ger與大家分享了Niushop開源商城系統model層類名程式碼規範命名，這期，我們看看Niushop單商戶b2c V4前端編碼命名規範：

檔案目錄命名

採用小寫+下劃線方式，命名要精簡，最好用一個單詞

例：addon

JS檔案命名
採用小寫+下劃線方式

例：common.js

CSS檔案命名
採用小寫+下劃線方式

例：common.css

HTML檔案命名
採用小寫+下劃線方式

例：index.html

HTML規範
1、縮排使用soft tab（4個空格）；

2、巢狀的節點應該縮排；

3、在屬性上，使用雙引號，不要使用單引號；

4、屬性名全小寫，用中劃線做分隔符，例：data-name；

5、不要忽略可選的關閉標籤，例：和

引用CSS，JS
根據HTML5規範, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的預設值，可以省略。

css要寫在{block name=“resources”}{/block}中

例：

{block name=“resources”}

{/block}

js要寫在{block name=“script”}{/block}中

例：

{block name=“script”}

{/block}

注意：

1. 減少標籤巢狀
   在編寫HTML程式碼時，需要儘量避免多餘的父節點；

儘量遵循HTML標準和語義，任何時候都要用盡量小的複雜度和儘量少的標籤來解決問題。

2. 程式碼分離
   HTML、CSS、JS要最大化分離，一個功能對應一個JS、CSS檔案，複雜功能除外，如果某個功能img、js比較多，那就單獨建立一個資料夾。

每個功能頁面中不能有太多內聯樣式。

阿牛ger說：在開發過程中，程式碼越簡潔越好，講解簡單的程式碼和資料夾命名，方便查詢，出現漏洞能第一時間找出相應程式碼解決！