前端工程化代碼規則

編輯器：

tab鍵，統一設置成4個空格

css規則篇：

1、全小寫，符合語義化

2、長名稱或詞組採用中橫線“-”鏈接

3、小於1的去掉小數點前的0

4、萬不得已不能出現id選擇器

5、僞類選擇器用一個冒號“：”，提高兼容性

6、可繼承的屬性都應該被繼承

7、組合樣式，提高css代碼複用率

8、文件頂部添加文件描述信息

9、禁止使用通配符*

10、儘量不要使用 !important 

11、禁止改動第三方樣式源文件，如需要請自定義補丁（meta.css）樣式文件

12、字體粗細，normal寫成400，bold寫成700

13、background、padding、margin、border、font等應採用和寫

14、border: 0 應寫爲 border: none

15、選擇器層級不得超過3層

16、css3如需兼容處理，順序爲-webkit- 、-moz- 、 -ms- 、 -o- 、標準

17、分離結構與外觀、容器與內容

 

js規則篇

1、如果只是引用 或 常量，請用const

2、如果需要可變動的引用，請使用let

3、對象、數組等創建時請使用字面值創建

4、對象中的方法請使用簡寫模式

var object= {
    
    name: "",
    
    say(){
        alert("我是say方法")
    }

}

5、對象結構或許使你的代碼更簡潔

6、淺拷貝請使用...操作符，而不是Object.assign()

7、類數組請使用Array.from

8、構造函數首字母大寫、class類名首字母大寫、常量全大寫

9、儘量使用箭頭函數

10、import不要使用通配符*，不要從import中直接export

11、比較運算符優先使用全等或不全等

12、方法函數請使用多行註釋，寫明包含描述、參數、返回值的說明

13、花括號前放一個空格

14、文件末尾插入一個空行

15、方法函數名應以動詞+名次+形容詞

16、請使用駝峯命名法

17、禁止使用保留字

18、業內常用短詞語：

info：information 信息
imp: important重要的
init： initialization初始化、最初的
del：delete 刪除
rm：remove移除
add：增加
insert：插入
create：創建
fn：function函數
update：修改
select：選擇
query：查詢
get：獲取
set：設置
con：content內容 
open：打開
close：關閉
show：顯示
hide：隱藏

19、私有變量或常量請用“_”開頭

20、全局創建自己的命名空間，以防變量衝突

21、每個函數方法不得超過20行，嵌套至多3層，形參超過3個，請使用對象方式接收，爲了使用時對形參能顧名思義也應該如此

22、鏈式操作的可讀性更強