程式碼規範之前端編寫碼規範
上一期阿牛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說:在開發過程中,程式碼越簡潔越好,講解簡單的程式碼和資料夾命名,方便查詢,出現漏洞能第一時間找出相應程式碼解決!