设为首页 - 加入收藏 邢台站长网 (http://www.0319zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 视频 中国 模式 运营商
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

如何写出优雅耐看的JavaScript代码

发布时间:2019-09-22 07:17 所属栏目:[优化] 来源:浅夏晴空
导读:前言 在我们平时的工作开发中,大多数都是大人协同开发的公共项目;在我们平时开发中代码codeing的时候我们考虑代码的可读性、复用性和扩展性。 干净的代码,既在质量上较为可靠,也为后期维护、升级奠定了良好基

前言

在我们平时的工作开发中,大多数都是大人协同开发的公共项目;在我们平时开发中代码codeing的时候我们考虑代码的可读性、复用性和扩展性。

干净的代码,既在质量上较为可靠,也为后期维护、升级奠定了良好基础。

如何写出优雅耐看的JavaScript代码

我们从以下几个方面进行探讨:

变量

1、变量命名

一般我们在定义变量是要使用有意义的词汇命令,要做到见面知义

  1. //bad?code?
  2. const?yyyymmdstr?=?moment().format('YYYY/MM/DD');?
  3. //better?code?
  4. const?currentDate?=?moment().format('YYYY/MM/DD');?

2、可描述

通过一个变量生成了一个新变量,也需要为这个新变量命名,也就是说每个变量当你看到他第一眼你就知道他是干什么的。

  1. //bad?code?
  2. const?ADDRESS?=?'One?Infinite?Loop,?Cupertino?95014';?
  3. const?CITY_ZIP_CODE_REGEX?=?/^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;?
  4. saveCityZipCode(ADDRESS.match(CITY_ZIP_CODE_REGEX)[1],?ADDRESS.match(CITY_ZIP_CODE_REGEX)[2]);?
  5. ?
  6. //better?code?
  7. const?ADDRESS?=?'One?Infinite?Loop,?Cupertino?95014';?
  8. const?CITY_ZIP_CODE_REGEX?=?/^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;?
  9. const?[,?city,?zipCode]?=?ADDRESS.match(CITY_ZIP_CODE_REGEX)?||?[];?
  10. saveCityZipCode(city,?zipCode);?

3、形参命名

在for、forEach、map的循环中我们在命名时要直接

  1. //bad?code?
  2. const?locations?=?['Austin',?'New?York',?'San?Francisco'];?
  3. locations.map((l)?=>?{?
  4. ??doStuff();?
  5. ??doSomeOtherStuff();?
  6. ??//?...?
  7. ??//?...?
  8. ??//?...?
  9. ??//?需要看其他代码才能确定?'l'?是干什么的。?
  10. ??dispatch(l);?
  11. });?
  12. ?
  13. //better?code?
  14. const?locations?=?['Austin',?'New?York',?'San?Francisco'];?
  15. locations.forEach((location)?=>?{?
  16. ??doStuff();?
  17. ??doSomeOtherStuff();?
  18. ??//?...?
  19. ??//?...?
  20. ??//?...?
  21. ??dispatch(location);?
  22. });?

4、避免无意义的前缀

例如我们只创建一个对象是,没有必要再把每个对象的属性上再加上对象名

  1. //bad?code?
  2. const?car?=?{?
  3. ??carMake:?'Honda',?
  4. ??carModel:?'Accord',?
  5. ??carColor:?'Blue'?
  6. };?
  7. ?
  8. function?paintCar(car)?{?
  9. ??car.carColor?=?'Red';?
  10. }?
  11. ?
  12. //better?code?
  13. const?car?=?{?
  14. ??make:?'Honda',?
  15. ??model:?'Accord',?
  16. ??color:?'Blue'?
  17. };?
  18. ?
  19. function?paintCar(car)?{?
  20. ??car.color?=?'Red';?
  21. }?

5、默认值

  1. //bad?code?
  2. function?createMicrobrewery(name)?{?
  3. ??const?breweryName?=?name?||?'Hipster?Brew?Co.';?
  4. ??//?...?
  5. }?
  6. ?
  7. //better?code?
  8. function?createMicrobrewery(name?=?'Hipster?Brew?Co.')?{?
  9. ??//?...?
  10. }?

函数

1、参数

一般参数多的话要使用ES6的解构传参的方式

  1. //bad?code?
  2. function?createMenu(title,?body,?buttonText,?cancellable)?{?
  3. ??//?...?
  4. }?
  5. ?
  6. //better?code?
  7. function?createMenu({?title,?body,?buttonText,?cancellable?})?{?
  8. ??//?...?
  9. }?
  10. ?
  11. //better?code?
  12. createMenu({?
  13. ??title:?'Foo',?
  14. ??body:?'Bar',?
  15. ??buttonText:?'Baz',?
  16. ??cancellable:?true?
  17. });?

2、单一化处理

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章