前端開發規范

1. 項目目錄命名原則

   • src 用來存放源代碼
     • common 公共資源
     • public/static 靜態資源
     • component 組件
     • view/tpl 模板文件

   - img 用來存放圖片資源 - js 用來存放JavaScript腳本 - dep 存放第三方依賴包 - 以上命名均不適用復數形式 - 以上目錄可以使用gulp等進行手動打造或利用框架提供的腳手架工具進行修改 

2. CSS命名規范

   • BEM規范：Block Element Modifier 是一種前端命名方法，旨在幫助開發者實現模塊化，可復用，高可維護性和結構化的CSS代碼。
   • OOCSS規范：Object Oriented CSS，面向對象的CSS，旨在編寫高可復用，低耦合和高擴展的CSS代碼。OOCSS是以前面向對象的思想去定義樣式，將抽象和現實分離，抽離公共代碼。

   - 總結：將重用的東西當作一個對象來看，然后將不同的屬性放到另一個類名去。 

3. CSS屬性規范

   • 屬性順序
   1. 位置屬性(position top right z-index display float..)
   2. 大小(width height padding margin..)
   3. 文字(font line-height litter-spacing color..)
   4. 背景(background border..)
   5. 其他(animation transition..)
   • 盡量不適用CSS3的選擇器
   • 屬性使用縮寫

4. JS規范

   • 語言規范
   1. 聲明變量必須加上 let 關鍵字.不要再使用 var
   2. 優先使用箭頭函數
   3. 使用模板字符串取代連接字符串
   • 每個語句都寫分號，適當使用空格縮進以及換行來調整代碼的格式，以確保代碼的可讀性
   • 命名規范
   1. camel 表示駝峰命名法 pascal表示 首字母大寫
   2. 變量名: 必須使用 camel 命名法
   3. 參數名: 必須使用 camel 命名法
   4. 函數名: 必須使用 camel 命名法
   5. 方法/屬性: 必須使用 camel 命名法
   6. 私有 ( 保護 ) 成員: 必須以下划線開頭
   7. 常量名: 必須使用全部大寫的下划線命名法,e.g. XTEP_HOST_API
   8. 類名: 必須使用 pascal 命名法
   9. 枚舉名: 必須使用 pascal 命名法
   10. 枚舉的屬性: 必須使用全部大寫的下划線命名法,e.g. XTEP_HOST_API
   11. 命名空間: 必須使用 camel 命名法
   12. 語義: 命名同時還需要關注語義