导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

公共类

目录命名

以字母开头

推荐：

/asset/image

不推荐：

/asset/_images

保持简约

推荐：

/src/views/drill/plan

不推荐：

/src/views/DraasDrill/DraasDrillPlan

使用驼峰命名法

推荐：

/src/views/drill/planDetail

不推荐：

/src/views/drill/plandetail

统一使用小写

推荐：

/src/views/drill/plan

不推荐：

/src/views/Drill/Plan

图片命名

**规则：**全小写 + 下划线 _ 或 - 分隔，按用途前缀。

推荐：

logo_main.png
icon_user_active.svg
bg_header.jpg

不推荐：

LogoMain.png（大小写混用）
userActiveIcon.svg（命名顺序混乱）
背景图.jpg（中文命名跨平台问题多）

HTML/CSS 命名

**规则：**全小写 + 短横线分隔（kebab - case）

推荐：

# css
.chat-message {}
.btn-primary {}
.header-nav {}

# html
user-profile.html
about-us.html
contact-form.html

不推荐：

# css
.chatMessage {}
.btnPrimary {}
.headernavigation {}

# html
userProfile.html
aboutus.html
联系表单.html

JavaScript 命名

避免用一个字母命名，让你的命名可描述

除了 map, reduce, filter 等高阶函数。

推荐：

function query() {}

不推荐：

function q() {}

用小驼峰式命名你的对象、函数、实例

推荐：

const thisIsMyObject = {};
function thisIsMyFunction() {}

不推荐：

const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

用大驼峰式命名类

推荐：

class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({ name: 'yup' });

不推荐：

function user(options) {
  this.name = options.name;
}

const bad = new user({ name: 'nope' });

不要用前置或后置下划线

推荐：

this.firstName = 'Panda';

不推荐：

this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

export default 导出模块 A，则这个文件名也叫 A.*， import 时候的参数也叫 A。 大小写完全一致。（这也是上面的文件命名的原因）

// 文件 1 内容
class CheckBox {
  // ...
}

export default CheckBox;

// 文件 2 内容
export default function fortyTwo() {
  return 42;
}

// 文件 3 内容
export default function insideDirectory() {}

推荐：

import CheckBox from './CheckBox'; // 导出、导入、文件名都使用 PascalCase
import fortyTwo from './fortyTwo'; // 导出、导入、文件名都使用 camelCase
import insideDirectory from './insideDirectory'; // 导出、导入、目录名都使用 camelCase，并且隐式引用 "index" 文件
// 支持 insideDirectory.js 和 insideDirectory/index.js 两种方式

不推荐：

import CheckBox from './checkBox'; // 小驼峰命名的文件, 大驼峰导入或导出
import FortyTwo from './FortyTwo'; // 小驼峰导出, 大驼峰命名或导入
import InsideDirectory from './InsideDirectory'; // 小驼峰导出, 大驼峰命名或导入

import CheckBox from './check_box'; // PascalCase 导入/导出，文件名使用 snake_case
import forty_two from './forty_two'; // 导入名和文件名使用 snake_case，导出名使用 camelCase
import inside_directory from './inside_directory'; // 导入名使用 snake_case，导出名使用 camelCase
import index from './inside_directory/index'; // 显式引用 index 文件
import insideDirectory from './insideDirectory/index'; // 显式引用 index 文件

当你 export-default 一个函数时，函数名用小驼峰，文件名需要和函数名一致

function makeStyleGuide() {}

export default makeStyleGuide;

当你 export 一个结构体/类/单例/函数库/对象 时用大驼峰

const AirbnbStyleGuide = {
  es6: {}
};

export default AirbnbStyleGuide;

简称和缩写应该全部大写或全部小写。

原因: 名字都是给人读的，不是为了适应电脑的算法的。

推荐：

import SMSContainer from './containers/SMSContainer';

const HTTPRequests = [
  // ...
];

import TextMessageContainer from './containers/TextMessageContainer';

const Requests = [
  // ...
];

不推荐：

import SmsContainer from './containers/SmsContainer';
const HttpRequests = [
  // ...
];

你可以用全大写字母设置静态变量，他需要满足三个条件

  1. 导出变量
  2. 是 const 定义的， 保证不能被改变
  3. 这个变量是可信的，他的子属性都是不能被改变的