十个编写更简洁的 JavaScript 代码的技巧

更新日期: 2022-08-29阅读: 1.3k标签: 技巧

近年来,随着许多框架的推出,涵盖了从后端、Web前端到跨平台移动应用程序,甚至游戏的方方面面,Javascript 的流行度达到了很高的水平。

编写干净可读的代码是构建业务逻辑之后最重要的事情之一。根据我与多个组织、初创公司和项目合作的经验,我可以保证处理糟糕的代码是一场噩梦。它减慢了开发过程,延迟了发布,并使用它的开发人员感到沮丧。

因此,我们需要编写一些干净可读的代码,在今天的内容中,我将与你分享一些我编程干净代码的基本技巧,希望对你有所帮助。现在我们开始吧。

1. 变量名——保持它们的意义

你的变量名称应该能够清楚地解释其用途。此外,避免混淆首字母缩写词和难以发音的单词。我不知道我该如何强调这一点, 让我们看看下面的例子:

// Bad 
const yyyymmdstr = moment().format("YYYY/MM/DD");
// Good
const currentDate = moment().format("YYYY/MM/DD");

2. 变量名——保持可搜索

尽管有些文章会告诉你在可以使用单态形式时不要创建变量,但不应将其扩展为使用常量,这会使代码更难阅读和搜索。 此外,正确的做法是将它们存储在 const 变量中并使用 CONSTANT_CASE 来命名变量。

例如,查看以下代码段:

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);


// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);

3. 避免对变量进行心理映射

最好在 array.forEach() 中显式命名变量,而不是使用以后可能没有意义的简写。

// BAD
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Wait, what is `l` for again?
  dispatch(l);
});


// GOOD
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

4. 避免不必要的上下文

如果类或对象名称已经告诉你它代表什么,请不要再次将该信息添加到你的变量名称中。 在下面的示例中,由于我们已经知道,我们谈论的是 Car 或 paintCar,因此你无需在变量中再次提及上下文的Car。

// BAD
const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};


function paintCar(car, color) {
  car.carColor = color;
}


// GOOD
const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};


function paintCar(car, color) {
  car.color = color;
}

5. 在你的函数中使用默认参数

避免在你的函数中使用短路或条件来保持更清洁。 更重要的是,请记住,你的函数只会为未定义的参数提供值, 默认值不会替换任何其他虚假值。

// BAD
function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}


// GOOD
function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

6. 明智地使用函数参数

根据经验,尽量将函数参数的数量限制在 2 个或最多 3 个。如果它需要这么多参数,则可能是你的函数做的太多了。 但是,如果仍然需要它,请使用 JavaScript 对象作为参数。 为了使函数期望的属性变得明显,可以使用 ES6 解构语法

// BAD
function createMenu(title, body, buttonText, cancellable) {
  // ...
}


createMenu("Foo", "Bar", "Baz", true);


// GOOD 
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}


createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});

7. 函数应该做一件事

不要忘记函数的作用——为你的代码添加模块化。 每个只执行一项任务的较小函数将确保你的代码易于编写、测试和理解。 永远不要为单个功能设置多个目标。

// BAD
function emailClients(clients) {
  clients.forEach(client => {
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) {
      email(client);
    }
  });
}


// GOOD 
function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}


function isActiveClient(client) {
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}

8. 函数名——让它们有意义

确保编写函数的名称清楚地说明函数的作用。 模棱两可的函数名称意味着读者必须查看函数定义和逻辑才能理解他们的工作。

// BAD
function addToDate(date, month) {
  // ...
}


const date = new Date();


// It's hard to tell from the function name what is added
addToDate(date, 1);


// GOOD
function addMonthToDate(month, date) {
  // ...
}


const date = new Date();
addMonthToDate(1, date);

9. 避免重复代码——让代码更短更简洁

最痛苦的是多个代码部分中的一堆相同或相似的行。 我们都遇到过这样的场景。 这通常是因为某些逻辑在 2 个或更多地方的实现略有不同。 但是,想想如果有人在逻辑中发现错误会做的噩梦的,现在他们必须到处修改它。

10. 不要使用标志作为函数参数

为什么需要标志作为函数参数? 仅出于一个明显的原因,你的功能正在做多种事情。 从第 7 点开始,你就知道这是一种不好的做法。 所以,继续把你的功能一分为二。

// BAD
function createFile(name, temp) {
  if (temp) {
    fs.create(`./temp/${name}`);
  } else {
    fs.create(name);
  }
}


// GOOD
function createFile(name) {
  fs.create(name);
}


function createTempFile(name) {
  createFile(`./temp/${name}`);
}

总结

以上就是我跟你分享的关于我编写干净代码的基本技巧,希望这10个基本技巧可以帮助到你,如果你觉得有用的话,请记得点赞我,关注我,并将其分享给你的朋友,也许能够帮助到他。

来源: web前端开发

链接: https://fly63.com/article/detial/12054

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

不常被提及的JavaScript小技巧

这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

点击更多...

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