前端编程风格

2022-07-08 15:01:03 阅读：159 来源： 互联网

标签：... arr const 前端编程 value 风格 eslint 使用

参考：https://es6.ruanyifeng.com/#docs/style

1. let 取代 var
2. let 和 const 之间，优先使用 const
3. const 声明多个变量 const [a, b, c] = [1, 2, 3];
4. 静态字符串一律使用单引号或反引号，动态字符串使用反引号
5. 使用数组成员对变量赋值时，优先使用解构赋值，const [first, second] = arr;
6. 单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾。
7. 对象尽量静态化，不随意添加新属性。如要添加，使用 Object.assign 方法 Object.assign(a, { x: 3 });
8. 定义对象属性和方法，使用简洁表达法
var ref = 'some value';
const atom = {
ref: ref,
value: 1,
addValue: function (value) {
return atom.value + value;
},
};
等效于
const atom = {
ref,
value: 1,
addValue(value) {
return atom.value + value;
},
};
9. 使用扩展运算符（...）拷贝数组（深层次拷贝）
const itemsCopy = [...items];
10. 立即执行函数可以写成箭头函数
(() => {
console.log('123');
})();
11. 匿名函数作参数，使用箭头函数
let arr = [1, 2, 3];
arr = arr.map(x => x * x);
12. 不在使用 self/_this/that 绑定 this
const self = this;
const boundMethod = method.bind(this);
const boundMethod = (...params) => method.apply(this, params);
13. 使用rest 运算符（...）代替 arguments 变量
function concatenateAll(...args) {
return args.join('');
}
14. ES6 模块取代 Node.js 的 CommonJS 语法
使用 import 取代 require()
const moduleA = require('moduleA')
import { func1 } from 'moduleA'
使用 export 取代 module.exports
module.exports = Breadcrumbs;
export default Breadcrumbs;
尽量不用 export default，除非模块只有一个输出值
输出函数首字母小写，输出对象首字母大写
15. 使用 ESLint （太麻烦，酌情考虑）
根目录安装 cnpm install --save-dev eslint
安装 Airbnb 语法规则，以及 import , a11y , react 插件
cnpm install --save-dev eslint-config-airbnb
cnpm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
根目录新建 .eslintrc
{
"extends": "eslint-config-airbnb"
}

标签：...,arr,const,前端,编程,value,风格,eslint,使用
来源： https://www.cnblogs.com/jqynr/p/16458336.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端编程风格