【前端】 命名规范规则梳理

nameStandard 命名规范

---

JS中命名规范

• 1.class类标识符 大驼峰写法(upper camel case) 示例： DefaultClass

• 2.变量以及函数标识符 小驼峰写法(lower camel case) 示例：defaultClass

• 3.常量标识符 全部大写来命 示例：DEFAULT

• 4.方法函数名称尽量用动词去描述 比如getList、 toLoginRoute

• 示例：
  

• 5.判断状态的变量用可以用 isTrue、 isLoading isDialogLoading

• 6.用拼音前缀描述的变量一定要加上注释,其他变量名也应注明注释

CSS命名规范

• 1.class类样式 命名规范应该采用-的方式拼接 ch-button-xs
• 2.id命名规范应该采用_的方式拼接 ch_button_xs

文件夹、文件命名规范

• 1、文件夹命名 小写字母加下划线连接 — default_folder
• 2、代码文件命名 小驼峰写法 — defaultFile.vue
• 3、静态资源文件命名 小写字母加下划线连接 可以加上模块前缀如: 登录模块背景—login_background.png

VUE引用自定义组件

（1）组件标签使用-拼接方式引入 <ch-button></ch-button>
反例不推荐: <chButton></chButton>

（2）组件传参变量名规范 使用-拼接方式 <ch-button :param-data="{}"></ch-button>
反例不推荐：
<ch-button :paramData="{}"></ch-button>
注意：组件内部接受param-data参数时vue会自动将-去掉变成驼峰式，所以接受时使用驼峰式 props:['paramData']