编程命名的学问

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

大的命名原则

命名明确简洁易懂

// 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代码不注意就出现不一致的情况

参考

本文来自投稿,不代表TakinTalks稳定性技术交流平台立场,如若转载,请联系原作者。

(0)
上一篇 2022年6月14日 下午2:21
下一篇 2022年6月16日 下午8:05

相关推荐

发表评论

登录后才能评论