编程命名的学问

编程中的命名是一个大学问，好的命名能使代码具有良好的可读性，不亚于是一份文档，直接通过名字就能大概知道变量或组件对应的功能

大的命名原则

命名明确简洁易懂

// bad 含义太模糊
const info = {};
// good
const userInfo = {};

避免混用多种规范

// bad
const myFirst_name = 'Tom';
// good
const myFirstName = 'Tom';

避免命名与实际含义不符

// bad
const name = true;

避免单词拼写错误

// 真实案例，ucp项目中一个单词拼写错误引入错误的npm包，导致只在生产环境网站白屏
import moment from 'momnet'; 

避免使用中文拼音

推荐使用翻译类工具或者 codeif 查询

一些命名小细节

js中一般命名原则

一般变量或函数使用小驼峰方式命名

避免在同一个作用域内使用不易区分的变量名

// bad
let fileList1 = [];
let fileList2 = [];
// good
let scriptFileList = [];
let attachmentFileList = [];

避免目录名中有后缀名或者特殊字符

boolean类型使用is、has等开头

// bad
const flag = true;
// good
const isDelete = true;

常量使用大写，单词用_分隔

// good
const MAX_SIZE = 100;

React中的命名规范

组件名必须大驼峰

首字母大写的组件，才能被识别为react组件，否则可能会被认为是 web-component组件

useEffect只能在组件和hooks中使用，上面的示例使用小驼峰命名该函数，又没有使用use开头，编辑器就会认为它既不是组件也不是hooks，就会提示有错误

hooks使用use开头

hooks只能在方法组件和hooks函数顶层使用，命名使用use开头才能被识别为是hooks，编辑器才能正确校验其使用规范

default导出的组件名与文件名保持一致

copy代码不注意就出现不一致的情况

参考

• Google 开源项目风格指南——中文版 Javascript风格规范 
• Reactjs官方文档
• codeif，变量名查询网站，有VS code插件
• Github Copilot，github出品的人工智能VS code代码提示插件，很强大，需要申请才能使用