Web
🏏前端代码规范 —— 命名
00 分钟
2022-8-22
2022-9-15
type
status
date
slug
summary
tags
category
icon
password
Edited
Sep 15, 2022 01:16 PM
Created
Aug 22, 2022 08:06 AM

项目 文件 文件夹 命名规范

项目命名
全部以小写字母命名，以中划线分割。如my-project
目录命名
全部以小驼峰命名法，除第一个单词之外，其他单词首字母大写。如myDir。
文件名
↓↓↓↓↓
组件命名
遵循 Pascal 命名法（大驼峰），例如 AddressPicker.vue。
JS/TS命名
以小写字母命名，多个单词以下划线连接，例如 util.js、util_helper.js。
HTML/CSS命名
确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接 且不带其他标点符号。如 my_page.html、my_page.css。
图片命名
全部以小写字母命名，多个单词以下划线连接
标识符
↓↓↓↓↓
媒体命名
全部以小写字母命名，多个单词以下划线连接。详情见下文
Class/Id命名
全部字母为小写，单词之间统一使用中划线 “-” 连接。详情见下文
js 变量
采用小驼峰的命名方式；采用字母打头，不使用 `_` 和 `$` 与系统和第三库的变量进行区分;
js 常量
全部字母大写，单词间下划线分隔
函数
采用camelCase的命名方式，以动词+宾语(动宾短语)的方式命名
 

目录命名

  • 项目文件夹：projectname
  • 样式文件夹：css
  • 脚本文件夹：js
  • 样式类图片文件夹：img
 

图片命名

图片命名建议以以下顺序命名：
图片业务（可选） +（mod_）图片功能类别（必选）+ 图片模块名称（可选） + 图片精度（可选）
  • 图片业务：
    • pp_：拍拍
    • wx_：微信
    • sq_：手Q
    • jd_：京东商城
    • …
  • 图片功能类别：
    • mod_：是否公共，可选
    • icon：模块类固化的图标
    • logo：LOGO类
    • spr：单页面各种元素合并集合
    • btn：按钮
    • bg：可平铺或者大背景
    • …
  • 图片模块名称：
    • goodslist：商品列表
    • goodsinfo：商品信息
    • userava tar：用户头像
    • …
  • 图片精度：
    • 普清：@1x
    • Retina：@2x | @3x
    • …

交叉业务协作

业务交叉协作的时候，为了避免图片命名冲突，建议图片名加上业务和模块前辍，如拍拍侧和手Q侧的业务交叉合作时，侧栏导航icon雪碧图命名：
 

HTML/CSS文件命名

确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号，如：
 

ClassName命名

ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “-” 连接

命名原则

基于姓氏命名法（继承 + 外来）
祖先模块不能出现下划线，除了是全站公用模块，如 mod_系列的命名：
当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块

模块命名

全站公共模块：以 mod_ 开头
业务公共模块：以 业务名_mod_ 开头
 

JS命名

[强制] 变量 使用 Camel命名法
[强制] 常量 使用 全部字母大写，单词间下划线分隔 的命名方式
[强制] 函数 使用 Camel命名法。
[强制] 函数的 参数 使用 Camel命名法。
[强制] 类 使用 Pascal命名法。
[强制] 类的 方法 / 属性 使用 Camel命名法。
[强制] 枚举变量 使用 Pascal命名法，枚举的属性 使用 全部字母大写，单词间下划线分隔 的命名方式。
[强制] 命名空间 使用 Camel命名法。
[强制] 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。
[强制] 类名 使用 名词。
[建议] 函数名 使用 动宾短语。
[建议] boolean 类型的变量使用 is 或 has 开头。
[建议] Promise对象 用 动宾短语的进行时 表达。
 
受保护的属性通常以下划线 _ 作为前缀。
这不是在语言级别强制实施的，但是程序员之间有一个众所周知的约定，即不应该从外部访问此类型的属性和方法。
所以我们的属性将被命名为 _waterAmount：
 

常用命名推荐

注意：ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，另外，敏感不和谐字眼也不应该出现
 
参考链接：
  1. 概述 | Aotu.io - 前端代码规范
  1. 前端：项目 文件 文件夹 命名规范_海胆Sur的博客-CSDN博客_前端文件夹命名规则
  1. spec/javascript-style-guide.md at master · ecomfe/spec (github.com)
 
上一篇
前端代码规范 —— 注释
下一篇
前端代码规范 —— 图片
评论
Loading...