【青训营】写好JS——写代码最应该关注什么?

简介: 【青训营】写好JS——写代码最应该关注什么?

前言


如何写好JS,什么才叫好的代码?这是个很难回答的问题,一千个人中有一千个哈姆雷特,本文只是浅显地讨论一下写代码最应该关注什么?

先来看一段代码:


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


单从代码优雅性来说,这个代码看着就挺low的,但它是4.8k⭐的开源项目spritejs里的真实代码,这段代码是负责图形渲染的,也就是说每一帧的计算都要用到这段代码,在这样的场景下,我们最应该关注的是效率性能,而不是代码风格。


所以,一般来说,写代码要结合使用场景,关注以下几个方面:


image.png


当年的Left-pad事件


很多流行的npm模块因为引入了一个叫做left-pad的模块,导致无法正常运行,这个模块中只有11行代码,就是一个简单的字符串处理函数:


module.exports = leftpad;
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模块粒度的问题,为什么一个函数11行代码就构成了一个模块,粒度是不是太细了?然后是代码风格问题,这个代码的可读性很高,但是代码效率很低,时间复杂度为O(N),总体而言,代码本身没什么大问题。


但是考虑到效率,还是可以对代码进行改进的,最影响效率的地方就是循环部分,我们并不需要一个一个的拼接,可以采用repeat()方法简化同时提升效率:


function leftpad(str, len, ch=""){
  str = "" + str;
  const padLen = len - str.length;
  if (padLen <= 0){
    return str;
  } else {
    return ("" + ch).repeat(padLen) + str;
  }
}
复制代码

以前的MDN文档中关于repeat()的核心代码是:


var rpt = "";
for(;;) {
  if ((count & 1) == 1) {
    rpt += str;
  }
  count >>>= 1;
  if (count == 0){
    break;
  }
  str += str;
}
复制代码


就是通过位运算减少循环次数,比如传进来的数是20,它的二进制是0001 0100,每次比较最后一位,如果为1就拼接上,然后右移一位,重复这个过程即可,时间复杂度为O(log2N)。


但是现在MDN的repeat()中核心代码是:


var maxCount = str.length * count;
count = Math.floor(Math.log(count) / Math.log(2));
// while循环
while (count) {
  str += str;
  count--;
}
str += str.substring(0, maxCount - str.length);
return str;
复制代码


这跟最开始没有改进时一样,所以说大部分场景不需要注重效率,代码风格才是我们最应该注意的。

目录
相关文章
|
8天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
108 58
|
18天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
163 2
|
2月前
|
JavaScript 前端开发 Python
用python执行js代码:PyExecJS库
文章讲述了如何使用PyExecJS库在Python环境中执行JavaScript代码,并提供了安装指南和示例代码。
92 1
用python执行js代码:PyExecJS库
|
21天前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
31 0
|
2月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
2月前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
118 0
|
2天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
24 6
|
16天前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
12 2
|
17天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
20 2