欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

前端开发的规则和最佳实践汇总

最编程 2024-08-03 17:01:29
...

1、5解构规范(?例如平时接口返回的参数中,我们应该采用对象结构的方式const{value}=res.data去获取接口返回对象的属性值。避免使用res.data.value的方式(?还可以采用数组结构的方式

2、文件命名规范(?xx-xx-xx的格式,进行文件以及文件夹命名(所有文件,包括图片资源文件)(?组件名称命名,app-xx-xx的格式进行命名(?命名单词应具有实际意义

3、6字符串规范(?使用单引号定义字符串(?字符串中要拼接参数使用ES6的模板字符串,不要采用+号方式拼接(?在angular中若html中需要字符串拼接参数,应写函数返回对应的模板字符串(?不要在转义字符串中使用不必要的字符

4、1类型使用规范(?基础数据类型StringNumberBooleannullundefinedsymbol(?引用数据类型ObjectArrayFunction在TS中定义好变量或者常量的类型例如:constisHave:boolean=falseOrconstvalue:string|number=‘’

5、4数组规范(?使用字面语法创建数组constitems=[](?使用push方式添加数组,不要使用arr[0]=1的方式(?使用数组展开方法…来拷贝数组,获得新数组(?将一个类数组对象转换成一个数组,使用展开方法…代替Array.from(?对迭代器的映射,使用Array.from替代展开方法…,因为它避免了创建中间数组https://github.com/BingKui/javascript-zh#%E6%95%B0%E7%BB%84

6、2引用规范劲量使用ES6语法let和const,不要使用var命名对于不需要重新赋值的变量使用const命名

7、7函数规范(?函数中需要带入参数,而参数可以为空时,设置默认值,而不是调用函数时传入.例如:functiontest(name=‘’){returnname}(?带入参数时,需要把设置默认值的参数放在最后

8、3对象规范(?使用字面语法来创建对象constitem={}(?使用属性值缩写(?在对象声明的时候将简写的属性进行分组(?只使用引号标注无效标识符的属性(?不能直接调用Object.prototype的方法(?使用对象拓展操作符,不要使用Object.assign浅拷贝一个对象,使用对象的rest(?操作符来获得一个具有某些属性的新对象(?访问属性时使用点符号res.data(?使用变量访问属性时使用【】res[data]https://github.com/BingKui/javascript-zh#%E5%AF%B9%E8%B1%A1

9、JS代码规范项目中的规范:(?写完代码后记得右键格式化一遍代码,便于代码美观,层次分明(?变量采用驼峰命名法(?TS中使用正确的数据类型(*如果是对象就定义interface)(?一个组件代码劲量不要超过400行代码,在JS代码中写上对应的注释(?去除没必要的代码,没用到的模块删除掉,不应注释在代码行中(?开发中写的console.log应该在调试完之后删除,便于团队合作中其他同事调试代码,debugger也必须要删除(?JS代码中结束统一使用;号结束(?修改项目公共样式会对整体项目UI样式会有影响,公共样式应由专人负责。(设置代码的对应提交权限)(?针对某个模块开发的组件应存放到对应模块文件夹中,不要存放在组件根目录(?静态资源文件不应导入没用到的图片的资源,规范管理到指定文件夹中,区分不同模块的文件,且导入项目的图片需要确保图片清晰度,过大的图片资源应当存储在服务器中(?表单或者筛选的数据配置,抽离出到单独的config配置文件中,避免主业务代码过多,影响代码可读性(?将重复的JS代码抽离封装掉用(?请求接口地址相同,method不同的应使用同一个函数传入不同的method参数(添加对应接口的注释)(?三目表达式不应该嵌套,通常是单行表达式(?避免一个逻辑使用过多的ifelse(?单行注释使用//多行注释使用/**…/

10、Css样式规范(?样式名称采用驼峰命名(鉴于旧项目之前都采用-命名分割方式,所以旧项目命名方式不变,后续新项目采用驼峰命名)(?组件内修改其他组件样式,外部必须包一层自己组件的class,避免引起样式冲突污染问题(非必要情况下请不要强制更改其他组件样式)(?避免使用在html中直接使用style设置样式(?*伪类使用使用例如&:hover方式(?需要marginpaddingbordercolor一些常用变量,后续添加公共常用样式,需要添加找相关人员进行添加使用,不要自行添加(?项目采用less,sass避免写出css既视感https://less.bootcss.com/#%E6%A6%82%E8%A7%??VScode下载CSS插件右键格式化代码,使代码整洁缩进(Beautifycss/sass/scss/less)

推荐阅读