编写魅力十足的代码:优化可读性、维护性和性能的关键

这篇具有很好参考价值的文章主要介绍了编写魅力十足的代码:优化可读性、维护性和性能的关键。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本篇汇总了平时在工作开发中常遇到的业务逻辑的优雅写法,也汇总了自己还是新人时,拿到一个业务不知道怎么下手的痛点,依稀记得那时候总感觉自己写的代码不规范。

写完之后,感觉还是美好的,又学到东西了。

正文开始

为什么要写一手优雅的代码?

采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,同时表达了代码的意图和逻辑。

主要有以下几个优点:

  1. 可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。

  2. 可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。

  3. 可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。此外,简洁的代码往往更少依赖于特定的实现细节,提供了更多的灵活性和可替换性。

  4. 错误减少和调试时间更容易写出正确的逻辑,减少了出错的概率。同时,当代码出现问题时,优雅简洁的代码也更容易进行调试和定位错误。

  5. 性能优化:简洁的代码通常更高效,减少了不必要的计算和资源消耗。精简的代码结构和算法可以提高代码的执行效率和性能

基本功

1. 使用箭头函数简化函数定义

// 传统函数定义
function add(a, b) {
 return a + b;
 }
  
 // 箭头函数简化
 const add = (a, b) => a + b;

2. 使用解构赋值简化变量声明

// 传统变量声明
const firstName = person.firstName;
const lastName = person.lastName;
// 解构赋值简化
const { firstName, lastName } = person;

3. 使用模板字面量进行字符串拼接

// 传统字符串拼接
const greeting = 'Hello, ' + name + '!';
// 模板字面量简化
const greeting = `Hello, ${name}!`;

4. 使用展开运算符进行数组和对象操作

// 合并数组
const combined = [...array1, ...array2];
// 复制对象
const clone = { ...original };

5. 使用数组的高阶方法简化循环和数据操作

// 遍历数组并返回新数组
const doubled = numbers.map(num => num * 2);
// 过滤数组
const evens = numbers.filter(num => num % 2 === 0);

6. 使用条件运算符简化条件判断

// 传统条件判断
let message;
if (isSuccess) {
 message = 'Operation successful';
} else {
 message = 'Operation failed';
}
// 条件运算符简化
const message = isSuccess ? 'Operation successful' : 'Operation failed';

7. 使用对象解构和默认参数简化函数参数

// 传统参数设置默认值
function greet(name) {
 const finalName = name || 'Guest';
 console.log(`Hello, ${finalName}!`);
 }
  
 // 对象解构和默认参数简化
 function greet({ name = 'Guest' }) {
 console.log(`Hello, ${name}!`);
 }

8. 使用函数式编程概念如纯函数和函数组合

// 纯函数
function add(a, b) {
 return a + b;
 }
  
 // 函数组合
 const multiplyByTwo = value => value * 2;
 const addFive = value => value + 5;
 const result = addFive(multiplyByTwo(3));

9. 使用对象字面量简化对象的创建和定义

// 传统对象创建
const person = {
 firstName: 'John',
 lastName: 'Doe',
 age: 30,
 };
  
 // 对象字面量简化
 const firstName = 'John';
 const lastName = 'Doe';
 const age = 30;
 const person = { firstName, lastName, age };

10. 使用适当的命名和注释来提高代码可读性

// 不好的
const x = 10; // 设置x的值为10
function a(b) {
 return b * 2; // 返回b的两倍
}
// 好的
const speed = 10; // 设置速度为10
function double(value) {
 return value * 2; // 返回输入值的两倍

接着奏乐接着舞(实战篇)!!!

实战

1. 优雅的写条件判断代码

简单的条件判断逻辑用if else 或者 三元运算符, 一眼看过去还能知道说的啥,但是大量的if else和叠加在一起的三元运算符就是接盘侠的噩梦~~~

给大家上一个三元运算符叠加的案例,我是真实在项目中遇到过,cpu直接干爆~~~

<view>{{status===1?'成功': status===2 ? '失败' : status===3 ? '进行中' : '未开始' }}</view>

大概是这样的,具体的项目代码不好放在这里,小伙伴们意会就行。

复杂逻辑推荐使用对象Map写法,符合人脑的逻辑,可读性高,看着舒服~~~

1,普通的if else
let txt = '';
if (falg) {
 txt = 成功
} else {
 txt = 失败
}
2,三元运算符

let txt = flag ? 成功 : 失败;

3,多个if else
// param {status} status 活动状态:1:成功 2:失败 3:进行中 4:未开始
let txt = '';
if (status == 1) {
 txt = 成功;
} else if (status == 2) {
 txt = 失败;
} else if (status == 3) {
 txt = 进行中;
} else {
 txt = 未开始;
}
4,switch case
let txt = '';
switch (status) {
 case 1:
 txt = 成功;
 break;
 case 2:
 txt = 成功;
 break;
 case 3:
 txt = 进行中;
 break;
 default:
 txt = 未开始;
}
5,对象写法
const statusMap = {
 1: 成功,
 2: 失败,
 3: 进行中,
 4: 未开始
}
//调用直接 statusMapp[status]
6,Map写法
const actions = new Map([
 [1, 成功],
 [2, 失败],
 [3, 进行中],
 [4, 未开始]
])
// 调用直接 actions.get(status)

2. 封装条件语句

同上,if里的条件越多越不利于接盘侠的维护,不利于人脑的理解,一眼看过去又是一堆逻辑。多个逻辑应该化零为整

大脑:'别来碰我,让我静静'

// 不好的
if (fsm.state === 'fetching' && isEmpty(listNode)) {
 // ...
}
// 好的
shouldShowSpinner(fsm, listNode){
 return fsm.state === 'fetching' && isEmpty(listNode)
}
if(shouldShowSpinner(fsm, listNode)){
 //...doSomething
}

3. 函数应该只做一件事

函数式写法推崇柯里化, 一个函数一个功能,可拆分可组装。

// 不好的
function createFile(name, temp) {
 if (temp) {
   fs.create(`./temp/${name}`);
 } else {
   fs.create(name);
 }
}
// 好的
function createFile(name) {
 fs.create(name);
}
function createTempFile(name) {
 createFile(`./temp/${name}`)
}

再来一个栗子

函数要做的事情如下:

  • 遍历clients数组

  • 遍历过程中,通过lookup函数得到一个新的对象clientRecord

  • 判断clientRecord对象中isActive函数返回的是不是true,

    • isActive函数返回true,执行email函数并把当前成员带过去

// 不好的
function emailClients(clients) {
 clients.forEach((client) => {
   const clientRecord = database.lookup(client);
   if (clientRecord.isActive()) {
     email(client);
   }
 });
}
// 好的
function emailClients(clients) {
 clients
   .filter(isClientRecord)
   .forEach(email)
}
function isClientRecord(client) {
 const clientRecord = database.lookup(client);
 return clientRecord.isActive()
}

上面不好的栗子一眼看过去是不是感觉一堆代码在那,一时半会甚至不想去看了。

好的栗子,是不是逻辑很清晰,易读。

  • 巧用filter函数,把filter的回调单开一个函数进行条件处理,返回符合条件的数据

  • 符合条件的数据再巧用forEach,执行email函数

4. Object.assign给默认对象赋默认值

// 不好的
const menuConfig = {
 title: null,
 body: 'Bar',
 buttonText: null,
 cancellable: true
};
function createMenu(config) {
 config.title = config.title || 'Foo';
 config.body = config.body || 'Bar';
 config.buttonText = config.buttonText || 'Baz';
 config.cancellable = config.cancellable === undefined ?
 config.cancellable : true;
}
createMenu(menuConfig);
// 好的
const menuConfig = {
 title: 'Order',
 buttonText: 'Send',
 cancellable: true
};
function createMenu(config) {
 Object.assign({
   title: 'Foo',
   body: 'Bar',
   buttonText: 'Baz',
   cancellable: true 
 }, config)
}
createMenu(menuConfig);

5. 函数参数两个以下最好

说一千道一万,就是为了优雅,就是为了可读性好。

// 不好的
function createMenu(title, body, buttonText, cancellable) {
 // ...
}
// 好的
const menuConfig = {
 title: 'Foo',
 body: 'Bar',
 buttonText: 'Baz',
 cancellable: true
};
function createMenu(config){
 // ...
}
createMenu(menuConfig)

6. 使用解释性的变量

省流,用了扩展运算符,为了可读性saveCityZipCode(city, zipCode)可读性很好,知道参数是干嘛的)

// 不好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);
// 好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
cosnt [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode)

想对类中的属性进行更多自定义取/增/改的操作时,使用set/get

第一次见这个写法,不知道是啥意思的小伙伴,把他当成vue2中的defineProperty

Object.defineProperty(data1,'age',{
 set:function(newAge){
   console.log(this.name+'现在'+newAge+'岁')
 },
 get:function(){
   return 18;
 }
})

是一个意思,赋值的时候set会被触发,取值的时候get会被触发。

巧用自带属性,提升性能。

class BankAccount {
 constructor(balance = 1000) {
   this._balance = balance;
 }
 // It doesn't have to be prefixed with `get` or `set` to be a
 //getter/setter
 set balance(amount) {
   console.log('set')
   if (verifyIfAmountCanBeSetted(amount)) {
     this._balance = amount;
   }
 }
 get balance() {
   console.log('get')
   return this._balance;
 }
 verifyIfAmountCanBeSetted(val) {
   // ...
 }
}
const bankAccount = new BankAccount();
// Buy shoes...
bankAccount.balance -= 100;
// Get balance
let balance = bankAccount.balance;

7. 让对象拥有私有成员-通过闭包来实现

闭包天生就是做私有化的

// 不好的
const Employee = function(name) {
 this.name = name;
};
Employee.prototype.getName = function getName() {
 return this.name;
};
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined
// 好的
const Employee = function(name){
 this.getName = function(){
   return name
 }
}
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined

第一个示例

优点:

  • 通过原型链共享方法,节省了内存空间。所有实例对象共享同一个 getName 方法,而不是每个实例对象都创建一个独立的方法。

缺点:

  • 在构造函数中无法直接定义私有属性或方法,所有属性和方法都会被暴露在原型链上

第二个示例

优点:

  • 可以在构造函数内部定义私有属性和方法,不会暴露在对象的原型链上,提供了更好的封装性。

缺点:

  • 每次创建实例对象时,都会创建一个独立的方法,每个实例对象都有自己的 getName 方法,占用更多的内存空间。

8. 使用方法链

链式写法也是代码优雅之道的重头戏。

ps:发明这个的程序员肯定是后端出身的,这种写法在PHP的CI框架中见过。

// 不好的
class Car {
 constructor() {
   this.make = 'Honda';
   this.model = 'Accord';
   this.color = 'white';
 }
 setMake(make) {
   this.make = make;
 }
 save() {
   console.log(this.make, this.model, this.color);
 }
}
const car = new Car();
car.setMake('Ford');
car.save();
// 好的
class Car {
 constructor() {
   this.make = 'Honda';
   this.model = 'Accord';
   this.color = 'white';
 }
 setMake(make) {
   this.make = make;
   // NOTE: return this是为了用链式写法
   return this;
 }
 save() {
   console.log(this.make, this.model, this.color);
   // NOTE:return this是为了用链式写法
   return this;
 }
}
const car = new Car()
 .setMake('Ford')
 .save();

看完上面的这么多栗子,小伙伴的思路是不是清晰了很多,在你们的项目里练练手吧。

你将收获的是同事们、 接盘侠们的感恩和自己内心的舒适!!!

完结

这篇文章我尽力把我的笔记和想法放到这了,希望对小伙伴有帮助。

欢迎转载,但请注明来源。

最后,希望小伙伴们给我个免费的点赞,祝大家心想事成,平安喜乐。文章来源地址https://www.toymoban.com/news/detail-498660.html

到了这里,关于编写魅力十足的代码:优化可读性、维护性和性能的关键的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 炫技亮点 使用Optional类优化代码,提升可读性和简化空值处理

    在日常的软件开发中,我们经常需要处理可能为空的值,例如 从数据库查询数据 、 调用外部接口获取数据 、 从配置文件读取配置项 等。传统的处理方式往往需要使用 繁琐的空值判断和异常处理 代码,使得代码变得冗长和难以理解。为了解决这个问题,Java 8 引入了 Optio

    2024年02月13日
    浏览(53)
  • 【深入浅出系列】之代码可读性

    这是“深入浅出系列”文章的第一篇,主要记录和分享程序设计的一些思想和方法论,如果读者觉得所有受用,还请“一键三连”,这是对我最大的鼓励。 一句话:见名知其义。有人说好的代码必然有清晰完整的注释,我不否认;也有人说代码即注释,是代码简洁之道的最高

    2024年02月11日
    浏览(46)
  • 算法——让你的代码更具有可读性

    今天其实算一个小专栏(内容参考《代码大全2》)明天开始更新具体的算法,这些算法我都会从力扣上找,语言的话暂时是c和c++还有c#的写法(不要过于专注于编程语言,语言只是工具,关键在于学习思维) 我们创建子程序的目的,就是让主函数尽量简洁,复杂的部分放到

    2024年01月20日
    浏览(65)
  • 代码可读性艺术在Andorid中的体现

    前言 最近接手的一些项目,不同的人编码风格迥异,类里的变量、方法的定义穿插,注释极为稀少,更有一些变量和方法的命名非常近似,例如表示播放队列的\\\"playQueue\\\"和表示歌单的\\\"playList\\\",wtf? 这不是一个意思吗?一些回调的时机也不能直观的看出来,通常需要debug调试多次;multi proj

    2024年02月03日
    浏览(38)
  • 50个简洁的提示提高代码可读性和效率(0-10)

    这篇文章整理了50个简洁的提示,可以提高您的代码可读性和效率。这些提示来自个人项目、彻底的代码审查和与资深开发人员的启发性讨论。 无论您是新手还是经验丰富的开发人员,这篇文章都应该能够帮助您学到一些东西。 这个列表包括常见的Python模式、核心概念和最佳

    2024年02月10日
    浏览(46)
  • chatgpt赋能python:Python如何分行——提高代码可读性和效率的必备技能

    分行,即将一行长代码分为多行,使得代码更加易读、易维护、易修改。 Python作为一门高级编程语言,具有简洁、易读、高效的特点。但在实际编程过程中,难免会遇到较长的代码行,导致代码可读性下降,不利于程序员的开发和维护。因此,Python中分行技术就显得尤为重要

    2024年02月08日
    浏览(45)
  • 如何修改min.js或者压缩后的js,以便提高代码的可读性。

    前端的js上线的时候一般会使用打包工具处理(webpack,gulp,ugly.js 等)。这样做有几点作用。 可以压缩空间,提高页面响应速度 一定程度上可以保护自己的代码安全,防止别人清晰看懂逻辑或者拷贝代码。 提高别人阅读自己代码的门槛 可前端开发工作中多多少少,会需要看

    2024年02月11日
    浏览(45)
  • 【Spring MVC】获取 @RequsetBody 标识的对象,使用适配器模式增加代码可读性

    一个技术需求引发的思考和实践: 思考 用 AOP 把校验代码 实践 用 Spring MVC 的 RequestBodyAdvice 做AOP逻辑 继承 RequestBodyAdviceAdapter 实现自己的 适配器 用自己的适配器让代码可读性增加 熟悉 Spring MVC 、Java 反射的一些实践 本文内容 澄清一个AOP校验JSON内容的思路 复习适配器模式

    2024年02月10日
    浏览(44)
  • 元数据规范与性能优化:如何优化元数据规范的性能和可维护性?

    作者:禅与计算机程序设计艺术 在企业级应用中, 元数据 对业务的运行和数据分析至关重要,比如 基于元数据的报表、搜索、推荐 等功能都依赖于元数据信息。随着互联网应用数量的不断增加,越来越多的企业在存储元数据上花费更多的资源,如何提高元数据性能并保证

    2024年02月07日
    浏览(57)
  • 使用单元测试提高代码质量与可维护性

    目录 一、单元测试的必要性 二、流行的测试框架 三、测试框架的用法 四、学习编写单元测试的建议 总结 随着软件开发的快速发展,单元测试作为一种自动化测试的方式,越来越受到重视。它可以有效地帮助开发人员在开发过程中发现和修复代码中的错误,从而提高代码的

    2024年02月04日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包