命名规范

从目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强代码的可读性，降低团队阅读成本。

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用

正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。

反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3

杜绝完全不规范的缩写，避免望文不知义：

反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。

一)目录/文件命名规范

1.1 项目命名

全部采用小写方式，以中划线分隔。

正例：mall-management-system

反例：mall_management-system / mallManagementSystem

1.2 目录命名

全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数

正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

反例： script / style / demo_scripts / demoStyles / imgs / docs

【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名

正例： head-search / page-loading / authorized / notice-icon

反例： HeadSearch / PageLoading

【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名

正例： page-one / shopping-car / user-management

反例： ShoppingCar / UserManagement

常用目录名推荐：

项目文件夹：project-name
公用文件夹：public
源代码文件夹：data-src
打包编译文件夹：dist
文档文件夹：docs
打包编译脚本文件夹：scripts
示例文件夹：examples、demos
组件文件夹：components
工具代码：utils、tools、helpers
插件文件夹：plugins
库文件夹：lib
页面文件夹：views、pages
路由文件夹：router
配置文件夹：config
资源抽取文件夹：vendors
资源文件夹：assets
静态资源文件夹：static
样式文件夹：css、styles
脚本文件夹：js
图片文件夹：img、images
字体文件夹：fonts
命令脚本：bin
测试文件夹：__tests__、tests
压力测试文件夹：benchmarks

1.3 文件名命名

大多数 Web 服务器（Apache、Unix）在处理文件时都区分大小写。例如，flower.jpg 不是 Flower.jpg。

但是，如果从不区分大小写的服务器切换到区分大小写的服务器，可能会出现问题。所以，建议在所有服务器中使用小写文件名，尽管它们支持区分大小写。

代码文件命名：包括但不限于html、js、css文件，使用小驼峰命名，如：fileName

正例： renderDom.js / signup.css / index.html

反例： RenderDom.js / UserManagement.html

组件文件命名：如react,vue组件，使用大驼峰命名，如：ComponentName

正例： RenderDom.jsx / RenderDom.vue

反例： renderDom.jsx /renderdom.vue

资源文件命名：包括但不限于图片、字体、音频、视频文件，使用下划线连接命名，如asset_name

正例： flower.png ,pa18_activty_background.png

反例： Flower.png, pa18-activty-background.png

二)代码命名规范

2.1.变量命名

JavaScript的变量名是区分大小写的。小写和大写字母是不同的。例如，你可以定义三个独特的变量来存储一只狗的名字，示例如下：

let DogName = 'Scooby-Doo';
let dogName = 'Droopy';
let DOGNAME = 'Odie';
console.log(DogName); // "Scooby-Doo"
console.log(dogName); // "Droopy"
console.log(DOGNAME); // "Odie"

然而，最值得推荐的声明JavaScript变量的方式是驼峰命名。可以对JavaScript中所有类型的变量使用驼峰命名，以确保不会出现多个同名的变量。

// bad
let dogname = 'Droopy'; 
// bad
let dog_name = 'Droopy'; 
// bad
let DOGNAME = ‘Droopy’; 
// bad
let DOG_NAME = 'Droopy'; 
// good
let dogName = 'Droopy';

变量语义化，变量的名字应该描述存储的值。例如，如果需要一个变量来存储狗的名字，应该使用 dogName 而不是只使用 Name。

// bad
let d = 'Scooby-Doo';
// bad
let name = 'Scooby-Doo';
// good
let dogName = 'Scooby-Doo';

2.2布尔值命名

当涉及到布尔变量时，应该使用 is 或 has 作为前缀。例如，一个布尔变量来检查狗是否有主人，应该使用 hasOwner 作为变量名。

// bad
let bark = false;
// good
let isBark = false;
// bad
let ideal = true;
// good
let areIdeal = true;
// bad
let owner = true;
// good
let hasOwner = true;

2.3 函数命名

JavaScript 函数名称也区分大小写。因此，与变量类似，推荐使用驼峰命名。

除此之外，还应该使用描述性名词和动词作为前缀。例如，声明一个函数来查询名字，函数名应该是 getName。

// bad
function name(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

// good
function getName(dogName, ownerName) { 
  return '${dogName} ${ownerName}';
}

2.4 方法命名

JavaScript 函数和方法的结构非常相似，命名约定规则也是相同的。推荐使用驼峰命名，并使用动词作为前缀。

class DogCartoon {
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
  }

  getName() { 
    return '${this.dogName} ${this.ownerName}'; 
  }
}

let cartoon= new DogCartoon('Scooby-Doo', 'Shaggy');

console.log(cartoon.getName());// "Scooby-Doo Shaggy"

2.5 常量命名

JavaScript 常量也区分大小写。但是，常量应该大写，因为它们是不变的变量。

const LEG = 4;
const TAIL = 1;
const MOVABLE = LEG + TAIL;

如果变量声明名称包含多个单词，使用下划线分隔。

const DAYS_UNTIL_TOMORROW = 1;

2.6 类命名

JavaScript类的命名规则与函数一样。必须使用描述性的标题来解释这个类的功能。

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
  }
}

var cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

2.7 组件命名

JavaScript组件在React、Vue等前端框架中被广泛使用。建议使用Pascal命名法（大驼峰式命名法）。

// bad
function dogCartoon(roles) { 
  return ( 
    <div> 
      <span> Dog Name: { roles.dogName } </span> 
      <span> Owner Name: { roles.ownerName } </span> 
    </div> 
  );
} 

// good
function DogCartoon(roles) { 
  return ( 
    <div> 
      <span> Dog Name: { roles.dogName } </span> 
      <span> Owner Name: { roles.ownerName } </span> 
    </div> 
  );
}

由于首字母总是大写，因此组件在使用时会很容易被看到。

<div> 
  <DogCartoon 
    roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} 
  />
</div>

2.8 私有函数命名

下划线 _在 MySQL 和 PHP 等语言中广泛用于定义变量、函数和方法。但在 JavaScript 中，下划线用于表示私有变量或函数。

例如，如果您有一个私有函数名称，如 toonName，则可以通过添加下划线作为前缀 (_toonName) 将其表示为私有函数。

注：在最新发布的ES2022标准规范中，官方指定了使用井号（#）作为私有插槽（即私有属性、变量和方法等）的前缀。我们保留现存私有变量的命名习惯，但建议在未来项目中遵循官方标准，使用#作为前缀

class DogCartoon { 
  constructor(dogName, ownerName) { 
    this.dogName = dogName; 
    this.ownerName = ownerName; 
    this.name = _toonName(dogName, ownerName); 
  } 
  _toonName(dogName, ownerName) { 
    return `${dogName} ${ownerName}`; 
  } 
}

var cartoon = new DodCartoon('Scooby-Doo', 'Shaggy'); 

// good
let name = cartoon.name;
console.log(name);
// "Scooby-Doo Shaggy" 

// bad
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name);
// "Scooby-Doo Shaggy"

2.9 全局变量命名

对于全局 JavaScript 变量，没有特定的命名标准。建议对可变全局变量使用驼峰式大小写，对不可变全局变量使用大写，推荐规范是全部大写，并且加上前缀"GLOBAL_",方便识别

三）JS常用名字推荐

3.1动词推荐

获取数据，比如快捷的获取内部数据。

function getFruitsCount() {
  return this.fruits.length;
}

设置数据，比如将某个变量的值由 A 变为 B。

let fruit = 'apple';

function setFruit(nextFruit) {
  fruit = nextFruit;
}

setFruit('banana');
console.log(fruit); // banana

reset

还原数据，比如将某个变量设置为其初始的值或状态。

let initialFruit = 'apple';
let fruit = initialFruit;
setFruit('banana');
console.log(fruit) // banana

function resetFruit() {
  fruit = initialFruit;
}

resetFruit();
console.log(fruit); // apple

fetch

请求数据，通常是一个比较耗时的操作(比如: 异步请求)。

function fetchPost(postCount) {
  return fetch('https://api.dev/post', {...});
}

remove

移除数据，逻辑上的删除, 某个数据可能只是被移动到了别的地方。

假设在搜索页面有一个筛选器, 可以通过 removeFilter 来移除筛选器中的某个值, 而不是 deleteFilter, 因为英语的表达方式更倾向于前者。

function removeFilter(filterName, filters) {
  return filters.filter(name => name !== filterName);
}

const selectedFilters = ['price', 'availability', 'size'];
removeFilter('price', selectedFilters);

delete

删除数据，将某个数据彻底删除, 是物理上的删除。

可以想象如果你是一个文章审核员, 看到一篇很辣鸡的文章, 当你想彻底删除这篇文章并点击删除文章按钮的时候, CMS 会执行一个deletePost的删除动作, 而不是 removePost。

function deletePost(id) {
  return database.find({ id }).delete();
}

compose

组合数据，基于现有的数据来创建一个新的数据, 适用于字符串、对象和函数。

function composePageUrl(pageName, pageId) {
  return `${pageName.toLowerCase()}-${pageId}`;
}

handle

处理数据，处理某个动作, 通常用来声明一个回调函数。

function handleLinkClick() {
  console.log('Clicked a link!');
}

link.addEventListener('click', handleLinkClick);

命名规范-前端项目开发