1. 程式人生 > 實用技巧 >程式碼規範之前端編寫碼規範

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

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