首页 > 其他分享 >从6个方面净化你的Js代码

从6个方面净化你的Js代码

时间:2022-11-09 10:01:52浏览次数:38  
标签:... const target 代码 two Js 净化 event

从6个方面净化你的Js代码_数组

记录一下怎样写出整洁规范的代码,用于共勉进步。对于什么是整洁的代码,书中给出了大师们的总结:

Bjarne Stroustrup:优雅且高效;直截了当;减少依赖;只做好一件事
Grady booch:简单直接
Dave thomas:可读,可维护,单元测试
Ron Jeffries:不要重复、单一职责,表达力(Expressiveness)

其中,我最喜欢的是表达力(Expressiveness)这个描述,这个词似乎道出了好代码的真谛:用简单直接的方式描绘出代码的功能,不多也不少。

可读性代码就是可维护性代码!

1、注重命名

为一个事件命名是很困难的。虽然困难但是非常有必要。

想象以下,将两个数组合并成一个数组,并生成一个唯一值的数组。那么你会怎么命名它呢?我们也许会这样命名?​

function mergeNumberListIntoUniqueList(listOne, listTwo) {
return [...new Set([...listOne, ...listTwo])]
}

上面的命名并不糟糕,但是还不是很友好。你可以将一个功能函数拆分为两个功能函数,这样命名更友好和函数复用性更好。​

function mergeLists(listOne, listTwo) {
return [...listOne, ...listTwo]
}


function createUniqueList(list) {
return [...new Set(list)]
}

2、IF语句简化

假设我们有下面的代码:​

if(value === 'duck' || value === 'dog' || value === 'cat') {
// ...
}

我们可以这样解决:​

const options = ['duck', 'dog', 'cat'];
if (options.includes(value)) {
// ...
}

将乱七八糟的条件判断放到一个变量中存储,比看臃肿的表达式要好很多。

3、及早返回

有下面的代码:​

function handleEvent(event) {
if (event) {
const target = event.target;
if (target) {
// Your awesome piece of code that uses target
}
}
}

及早返回使得我们的代码更加易读:​

function handleEvent(event) {
if (!event || !event.target) {
return;
}
// Your awesome piece of code that uses target
}

4、解构赋值

在JavaScript中,我们可以对objects和arrays进行解构赋值。

例如:​

// object 解构赋值
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2


// array 解构赋值
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2

5、童子军规则

童子军有一条规则:永远保持离开时的露营比你发现它时更整洁。如果你在地面上发现了脏东西,那么无论是否是你留下的,你都要将它清理干净。你要有意地为下一组露营者改善环境。

我们编写代码也是这样子,如果你在代码中发现了脏代码,那么你可以尝试去修改它,即使是一个没有被引用到的变量名。

6、代码风格

在你的团队中使用一种代码风格,比如限定代码缩进的规范是两空格呢还是四空格;使用单引号呢还是双引号呢;使用同类的一种框架呢,还是流行两种解决方案的框架呢...这样团队中人员接手项目的成本就会降低,开发人员的心里减少排斥感~

所以,在开发的工作中为了不给别人造成排斥感,尽量去写出整洁的代码,既方便自己也方便别人!!!

从6个方面净化你的Js代码_代码风格_02

从6个方面净化你的Js代码_赋值_03


标签:...,const,target,代码,two,Js,净化,event
From: https://blog.51cto.com/u_15809510/5835337

相关文章

  • Discuz 7.x/6.x 全局变量防御绕过导致代码执行
    由于php5.3.x版本里php.ini的设置里request_order默认值为GP,导致$_REQUEST中不再包含$_COOKIE,我们通过在Cookie中传入$GLOBALS来覆盖全局变量,造成代码执行漏洞。具体原理......
  • 图机器学习(GML)&图神经网络(GNN)原理和代码实现(前置学习系列二)
    项目链接:https://aistudio.baidu.com/aistudio/projectdetail/4990947?contributionType=1欢迎fork欢迎三连!文章篇幅有限,部分程序出图不一一展示,详情进入项目链接即可图......
  • js提交数据
    一、from表单提交<formaction=""method="post"enctype="multipart/form-data"><inputtype="submit"class="btnbtn-info">属性:action:是form表单提交数据的......
  • 使用jwt鉴权(jsonwebtoken)
    1.下载jsonwebtokennpmi-Sjsonwebtoken2.引用constjwt=require('jsonwebtoken');3.需要设置秘钥constsecretKey='3.14159263528542852651268541';4.设......
  • 前端零配置打包工具 parceljs 体验
    参考https://www.parceljs.cn/getting_started.htmlparceljs中文官网https://www.parceljs.cn/getting_started.htmlParcel1版本的中文文档https://v2.parceljs.cn......
  • AIRIOT物联网低代码平台如何配置db-driver驱动?
    设备接入能力包括接入驱动类型及接入数据量,性能方面需要考量数据采集的稳定性和驱动的丰富性等多个因素。用户在选择物联网平台时,往往存在一些误区,比如很关注平台支持的驱......
  • 代码随想录day45 | 70. 爬楼梯 322. 零钱兑换 279. 完全平方数
    70.爬楼梯题目|文章思路这道题目要求有序,因此是全背包的排列做法。1.数组下标以及含义dp[i]:爬到n台阶一共有dp[i]种方法。2.递推关系dp[i]+=dp[i-j];3.初始......
  • 代码随想录Day20
    LeetCode104.找出二叉树最大深度给定一个二叉树,找出其最大深度。二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。说明:叶子节点是指没有子节点的节点。示......
  • js小知识点
    01.thisthis的指向完全由函数在哪里调用决定。在ES5中,this永远指向调用它的那个对象;在ES6的箭头函数中没有this绑定,this指向箭头函数定义时作用域中的this;判断this的......
  • 【Python】Python环境安装与简单代码运行
    Python环境安装与简单代码运行一、配置Python环境1.下载Python安装包建议使用Python3.8版本,Win7、Win8、Win10、Win11都能用。(1)Python官网下载:网站:www.python.orgPyt......