前言
编写高质量的代码是每个开发者的目标,不仅有助于项目的可维护性和可扩展性,还能提高工作效率。
正文
给大家看两段代码,让大家从中选取你认为最好的那个
第一个
let phoneNumber;
function phoneNumber(numbers){return "(" + numbers[0] + numbers[1] + numbers[2]+ ")" + " " + numbers[3] + numbers[4] + numbers[5] + "-" + numbers[6] + numbers[7] + numbers[8] + numbers[9] + ""}
console.log(phoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]));
第二个
/**
* @func 返回固定格式的电话号码 (123) 456-7890
* @params arrays [1,2,3,4,5,6,7,8,9,0]
* @return (123) 456-7890
* @author hk
*/
// 函数定义
phoneNumber = (numbers) => "(" + numbers[0] + numbers[1] + numbers[2]
+ ")" + " " + numbers[3] + numbers[4] + numbers[5]
+ "-" + numbers[6] + numbers[7] + numbers[8] + numbers[9] + ""
// 打印输出
console.log(phoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]));
我相信大家看完这两个代码,应该和我的答案一样,都是选第二个吧!
虽然两份代码的运行结果是一样,但是两种代码风格是不一样的,对于想成为优秀程序员的你,必须要清楚的一项规则就是:
代码的可读性高于一切!
什么是可读性?字面意思:易于理解性,让其他开发者能够轻松理解和解释代码的能力。
一个好的代码需要:清晰的命名 、良好的注释 、一致的代码风格等要求
比如在第二个代码中就就用到了箭头函数
箭头函数是JavaScript中的一种函数表达式的简化形式,它引入了ECMAScript 6(ES6)标号。我们可以 通过使用箭头符号(=>)来定义函数,省略了function关键字和花括号({})。
我们可以通过使用箭头函数让代码更整洁,更美观。
案例
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEUI源码</title>
<style>
.weui-btn {
position: relative; /*使用relative考虑全面,方便后续 */
display: block;
width: 184px;
margin-left: auto;
margin-right: auto;
padding: 12px 24px;
box-sizing: border-box;
font-size: 17px;
font-weight: 500;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 8px;
/* css reset*/
-webkit-tap-highlight-color: rgba(0,0,0,0); /* 禁用高亮的颜色*/
user-select: none; /* 使用户无法选中,不能进行粘贴操作*/
}
.weui-btn_primary{
background-color: green;
}
</style>
</head>
<body>
<!-- css 国际命名规范BEM weui-btn Block 状态 _primary -->
<!-- button按钮太复杂 不跳转 -->
<a href="javascript:;" class="weui-btn weui-btn_primary">主要操作</a>
</body>
</html>
此案例是基于CSS国际命名规范(BEM)下开发的一个WeUI的组件,其中有专门的以weui开头的类名,因为在大企业开发的大项目中通常是以项目代号-组件名来命名的。
我们需要学习、理解、使用BEM,这是决定我们能否进入大厂的第一步。
结论
好的代码是开发成功的关键,它提高了可维护性、可读性和可扩展性,同时减少了错误。遵循这些原则,不断精进你的编码技能,将有助于你编写出高质量的代码,为你的项目和团队的成功做出贡献。