js中箭头函数的编码规范,如何更好的使用箭头函数

时间: 2017-12-19阅读: 1143标签: 规范

当您必须使用匿名函数(如在传递一个内联回调时),请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。


如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。

// bad
[1, 2, 3].map(function (x) {
    const y = x + 1;
    return x * y;
});
// good
[1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
});


如果函数体由一个返回无副作用(side effect)的expression(表达式)的单行语句组成,那么可以省略大括号并使用隐式返回。否则,保留大括号并使用 return 语句。

什么是副作用(side effect)?一段代码,即在不需要的情况下,创建一个变量并在整个作用域内可用。 

为什么? 语法糖。 当多个函数链式调用时,可读性更高。 
// bad
[1, 2, 3].map(number => {
    const nextNumber = number + 1;
    `A string containing the ${nextNumber}.`;
});
 
// good
[1, 2, 3].map(number => `A string containing the ${number}.`);
 
// good
[1, 2, 3].map((number) => {
    const nextNumber = number + 1;
    return `A string containing the ${nextNumber}.`;
});
 
// good
[1, 2, 3].map((number, index) => ({
    [index]: number,
}));
 
// No implicit return with side effects
function foo(callback) {
    const val = callback();
    if (val === true) {
    // Do something if callback returns true
    }
}
 
let bool = false;
 
// bad
foo(() => bool = true);
 
// good
foo(() => {
    bool = true;
});


如果表达式跨多行,将其包裹在括号中,可以提高可读性。 

为什么? 它清楚地显示了函数开始和结束的位置。 
// bad
['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
    )
);
 
// good
['get', 'post', 'put'].map(httpMethod => (
    Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
    )
));


如果你的函数只有一个参数并且不使用大括号,则可以省略参数括号。否则,为了清晰和一致性,总是给参数加上括号。
注意:总是使用圆括号也是可以被lint工具接受的,在这种情况下 使用 eslint 的 “always” 选项,或者 jscs 中不要包含 disallowParenthesesAroundArrowParam 选项。 eslint: arrow-parens jscs: disallowParenthesesAroundArrowParam  

为什么? 不造成视觉上的混乱。  
// bad
[1, 2, 3].map((x) => x * x);
 
// good
[1, 2, 3].map(x => x * x);
 
// good
[1, 2, 3].map(number => (
    `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));
 
// bad
[1, 2, 3].map(x => {
    const y = x + 1;
    return x * y;
});
 
// good
[1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
});


避免使用比较运算符(< =, >=)时,混淆箭头函数语法

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
 
// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
 
// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
 
// good
const itemHeight = (item) => {
    const { height, largeSize, smallSize } = item;
    return height > 256 ? largeSize : smallSize;
};


来源:javascript编码规范

链接: http://www.fly63.com/article/detial/259

Css中bem书写规范

bem是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里用以下连接符扩展他们的关系:

前端模块化规范

JavaScript 发展初期,代码简单地堆积在一起,只要能顺利地从上往下一次执行即可。但随着网站越来越复杂,实现网站功能的 JavaScript 代码也越来越庞大,网页越来越像桌面程序,很多问题开始暴露出来,比如全局变量冲突

常用网页元素命名规范参

网页元素名称的规范性有助于团队内部成员的沟通,同时还能够提高后期的维护性,网页元素的命名主要是针对id和class进行的,针对网页元素的命名没有业界标准,但有一些大家公认的规则

前端开发Js变量命名规范

JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码

完整的MySQL规范

所有数据库对象名称必须使用小写字母并用下划线分割·所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来)

CSS规范

CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。

前端变量命名规范

程序开发过程中变量命名不仅是一个头疼问题,也是一个对开发者综合素质的检验,它会直接影响到代码的最终交付质量、代码Review人员心智承受力。如何写出具有创造性、优雅性、易读性的高质量代码,需要开发者在实际工作中不断总结、提炼

W3C标准及规范

W3C的意思是万维网联盟(World Wide Web Consortium),创建于1994年10月,是一个会员组织,它的工作是对web进行标准化--->W3C 致力于实现所有的用户都能够对 web 加以利用

对接口规范的一些思考

团队中如果不同的项目,不同的人员可能在接口设计上有许多不统一的地方。导致了开发效率低下的问题。由于我在工作中遇到了,所以整理下来,说一说自己的一些看法。

数据库使用规范

关于MySQL数据库规范,相信大家多少看过一些文档。本篇文章给大家详细分类总结了数据库相关规范,从库表命名设计规范讲起,到索引设计规范,后面又给出SQL编写方面的建议

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全