菜鸟入门第二天——如何写出好代码

前言

编写高质量的代码是每个开发者的目标,不仅有助于项目的可维护性和可扩展性,还能提高工作效率。

正文

给大家看两段代码,让大家从中选取你认为最好的那个

第一个 复制代码
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,这是决定我们能否进入大厂的第一步。

结论

好的代码是开发成功的关键,它提高了可维护性、可读性和可扩展性,同时减少了错误。遵循这些原则,不断精进你的编码技能,将有助于你编写出高质量的代码,为你的项目和团队的成功做出贡献。

相关推荐
有梦想的刺儿15 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具36 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web