前端开发规范

前端开发规范

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. 语义: 命名同时还需要关注语义