紧跟月影大佬的步伐,一起来学习如何写好JS(下)

如何写好js - 写代码应该关注什么

  • 😜序言
  • 🤗part1:先来看一段代码
  • 🤫part2:写代码最应该关注什么?
  • 🤔part3:当年的 Left-pad 事件
  • 🥳结束语
  • 🧐往期推荐

😜序言

接上一篇文章,我们继续来看如何写好 JS 。在下面的文章中,将讲解写代码应该关注什么,以及通过引例阐述一些相关性问题。

下面开始本文的讲解~

🤗part1:先来看一段代码

首先我们先来看一段代码。具体代码如下:

//判断一个mat2d矩阵是否是单位矩阵
function isUnitMatrix2d(m) {return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
}

我们先来思考一个问题:上面的代码写的好不好?为什么?

有的小伙伴可能会觉得写起来看着不太美观、又或者没有注释扩展性不高等等各种原因。


其实,上面这段代码是一段真实的代码,其来源于一个开源库。具体地址:spritejs

get layerTransformInvert() {if(this[_layerTransformInvert]) return this[_layerTransformInvert];const m = this.transformMatrix;if(m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0) {return nul l;}this[_layerTransformInvert] = mat2d.invert(m);return this[_layerTransformInvert];
}

现在,我们来分析一下上面这段代码写的好不好。具体分析结果如下:

单从代码优雅性的角度来看的话,这段代码确实不够优雅。

但是呢,上面这个库是一个图形库,且这段代码负责的是在渲染之前,计算我们图层的 transform 矩阵的逻辑代码。

也就是说,我们在计算每一帧的时候,都需要进行一个计算。因此呢,在这样的一个场景下,我们首先要去关注的是如何达到性能最优化

而与其他任何类型的写法来比,以上这种写法能够达到性能最大化,所以,以上这段代码在这样的一个场景下是没有任何问题滴。

同时呢,如果是对于其他场景来说,如果堆性能优化没有这么敏感的话,是可以不用这么写滴。

所以,一般来说,代码的好坏要结合它的使用场景来分析

🤫part2:写代码最应该关注什么?

  • 写代码我们应该要注重风格效率约定使用场景(算法)设计等方面;
  • 风格:选择什么风格都没有错,关键是风格要统一(分号、行尾花括号等等);
  • 效率:在写代码时要考虑什么样的代码写起来效率是最高的,能写高效率的代码就不要写低效率的代码;当然,也要追求一个平衡就是,要结合它的场景来使用;
  • 约定:在开发前,团队要约定好代码规范和风格,比如 eslintairbnb 等等;

🤔part3:当年的 Left-pad 事件

我们来了解下当年 githubLeft-pad 事件。先来这个事件中的一段代码,具体如下:

function leftpad (str, len, ch) {str = String(str);var i = -1;if (!ch && ch !== 0) ch = '';len = len - str.length;while(++i < len) {str = ch - str;}return str;
}

那么这个作者想要实现的功能就是,比如说我现在有一段字符串,然后呢,我想要把这段字符串拼接成同样长度的字符串。

这个使用场景通常会放在一些展示类的地方,比如排序。当时这个模块一开始被用于很多的 npm 包中,但是后面被作者下线了,所以引起了很大的风波,因为很多人在用的库突然被下线了,试想,开发者岂不是要哭辽。

那这个事件本身的槽点呢,主要有以下三点:

  • NPM 模块粒度
  • 代码风格
  • 代码质量和代码效率

如果要考虑效率的话,那么我们可以对代码进行改进。比如:

function leftpad(str, len, ch = '') {str = "" + str;// 判断要补充的代码长度const padLen = len - str.length;if(padLen <= 0) {return str;}else {return ("" + ch).repeat(padLen) + str;}
}

通过这样的改进,使得代码更简洁,同时也极大的提升了运行效率

🥳结束语

在上面的这篇文章中,我们了解到了当年的 left-pad 事件,同时呢,我们也学习到了写代码应该关注的5个问题:风格效率约定使用场景(算法)设计

到这里,关于本文讲解就结束啦~

如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😛

🧐往期推荐

👉值得关注的HTML基础知识

👉css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!

👉【青训营】- 前端只是切图仔?来学学给开发人看的UI设计

👉【青训营】- 紧跟月影大佬的步伐,一起来学习如何写好JS(上)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode111. 二叉树的最小深度(层序遍历10)

一:题目 二&#xff1a;上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(n…

拥抱.NET 5,可以从这个极速开发的Web应用框架开始

今年年初&#xff0c;微软 .NET 程序管理总监 Scott 在博客中表示&#xff0c;发布 .NET 5 的首个预览版&#xff0c;并提供SDK 和运行库下载。Scott 表示&#xff0c;.NET 5 是 .NET Framework 和 .NET Core 的未来&#xff0c;最终将成为一个统一平台&#xff0c;.NET5 将包含…

组件库实战 | 教你如何设计Web世界中的表单验证

教你如何设计Web世界中的表单验证&#x1f4ac;序言&#x1f5ef;️一、验证输入框ValidateInput1. 设计稿抢先知2. 简单的实现3. 抽象验证规则4. v-model5. 使用$attrs支持默认属性&#x1f4ad;二、验证表单ValidateForm1. 组件需求分析2. 使用插槽 slot3. 父子组件通讯&…

leetcode101. 对称二叉树(两种做法)

一&#xff1a;题目 二&#xff1a;上码 方法一&#xff1a;队列 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int …

微服务架构下的测试策略

源宝导读&#xff1a;最近几年&#xff0c;微服务架构越来越火爆&#xff0c;逐渐被企业所采用。随着软件架构的变化&#xff0c;对应的软件测试策略需要作何调整呢&#xff1f;本文将介绍云客在微服务架构下的测试策略。一、云客测试策略模型策略分析行业内的测试策略是一个先…

leetcode222. 完全二叉树的节点个数(两种做法)

一&#xff1a;题目 二&#xff1a;今天不上菜 上码了 方法一&#xff1a;前序遍历 求解 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr)…

听红宝书译者谈Web视角下的前端开发

Web视角下的前端开发⏳序言⏰一、关于前端开发1. 起源、架构、变迁&#xff08;1&#xff09;起源&#xff08;2&#xff09;架构&#xff08;3&#xff09;变迁2. 前端应用的领域&#xff08;1&#xff09;所面向群体&#xff08;2&#xff09;所面向领域3. 语言、框架、工具4…

在家办公这半年,让我开始热爱生活

距离上次更新公众号已经过去一年多了&#xff0c;感觉自己成了“年更姚”。不过好在这个公众号的读者大多是同事朋友&#xff08;加起来也没有多少好么喂&#xff09;&#xff0c;本身对我也没用太高的期待吧。今天想聊聊远程工作这件事。不过我并不想聊团队成员之间如何远程协…

每天都在红绿灯前面梭行,不如自己来实现个红绿灯?

用js实现一个交通灯&#x1f507;前言&#x1f508;一、需求分析 - 交通灯&#x1f509;二、实现版本1. 版本一&#xff1a;简单粗暴版2. 版本二&#xff1a;数据抽象版3. 版本三&#xff1a;过程抽象版4. 版本四&#xff1a;命令式和声明式&#x1f50a;三、在线online&#x…

Git 常用操作 | 重写 commit 历史

当我们修改完代码&#xff0c;提交了一个 commit&#xff0c;然后发现改错了&#xff0c;怎么修正&#xff1f;这种情况分为两种&#xff1a;修正最近一次提交&#xff0c;和修正历史多个提交。修正最近一次提交如果发现刚刚提交的内容有错误&#xff0c;当场再修改一下再提交一…

leetcode257. 二叉树的所有路径(两种做法)

一:题目 二:上码 1&#xff1a;DFS /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), …

【LeetCode之C#解法】 移动零、爬楼梯

题目官网链接https://leetcode-cn.com/problems/move-zeroes/283. 移动零给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。示例:输入: [0,1,0,3,12]输出: [1,3,12,0,0]说明:必须在原数组上操作&#xff0c;不能拷…

幂等问题 vs 如何判断是否是4的幂

判断是否是4的幂&#x1f939;序言&#x1f6b4;一、需求分析 - 判断是否是4的幂等&#x1f93e;二、实现版本1. 版本一&#xff1a;中规中矩法2. 版本二&#xff1a;按位与3. 版本三&#xff1a;按位与优化4. 版本四&#xff1a;正则匹配法⛹️三、结束语&#x1f93c;往期推荐…

leetcode404. 左叶子之和

一&#xff1a;题目 二:上码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(n…

切西瓜法实现微信抢红包功能

运用切西瓜法和栅栏法实现微信抢红包功能✅前言☑️一、需求分析 - 分红包问题&#x1f199;二、实现版本1. 版本一&#xff1a;切西瓜法2. 版本二&#xff1a;栅栏法✳️三、在线Online&#x1f197;四、结束语&#x1f19a;往期推荐✅前言 在现实生活中&#xff0c;非常常见…

如何给扑克洗牌才能更公平?

如何给扑克牌洗牌才能更显公平性&#x1f4fb;前言一、&#x1f399;️需求分析 - 洗牌问题二、&#x1f4bf;实现版本1. 版本一&#xff1a;常规思维2. 版本二&#xff1a;验证公平性3. 版本三&#xff1a;交换法则三、&#x1f4fa;在线Online四、&#x1f4f9;结束语&#x…

这些年我是怎么自学成架构师的(转自知乎)

近日在知乎上一则关于程序员能否“自学成才”的问题&#xff0c;引发了激烈的讨论&#xff01;各种各样的说法都有&#xff0c;最终变成程序员晒学习经历的帖子。作为十多年.NET技术老兵&#xff0c;纯自学成架构师&#xff0c;也来分享下观点&#xff1a;自学当然有效&#xf…

创新视角下的复盘 | 2021/08/01-2021/09/30

&#x1f5c2;️序言 七月份的时候第一次做月度复盘&#xff0c;发现如果只有每日计划&#xff0c;还是比较零散的。月度复盘可以更直观地看到自己的时间规划和及时纠正当下存在的一些问题。 在8-9月份中&#xff0c;有一半在暑假&#xff0c;一半开始于新学期。 &#x1f4…

TIOBE 9 月榜单:C#上涨1.18,Java 同比下滑3.18

喜欢就关注我们吧&#xff01;TIOBE 已公布 2020 年 9 月的编程语言排行榜。C 近期发展状态不错&#xff0c;依旧在榜单中排第四&#xff0c;但排名比率保持增长&#xff0c;本月为 7.11%。2003 年是 C 的巅峰时期&#xff0c;当年 8 月&#xff0c;它的 TIOBE 排名峰值为 17.5…

储存引擎InnoDB 索引选择 为何是B+树 而不是 B树 哈希表

一:概述 首先需要澄清的一点是&#xff0c;MySQL 跟 B 树没有直接的关系&#xff0c;真正与 B 树有关系的是 MySQL 的默认存储引擎 InnoDB&#xff0c;MySQL 中存储引擎的主要作用是负责数据的存储和提取&#xff0c;除了 InnoDB 之外&#xff0c;MySQL 中也支持 MyISAM 作为表…