第五届字节跳动青训营 前端进阶学习笔记(六)什么才是好的JavaScript代码

news2024/12/23 6:35:36

文章目录

    • 前言
    • 问题引入
    • 实现一个交通信号灯的状态切换
      • 1.基本实现
      • 2.状态封装实现
      • 3.职责分离实现
    • 求一个数是否是4的幂
      • 1.基本实现
      • 3.数学优化
    • 洗牌算法
      • 1.基本实现
      • 2.均匀算法实现
    • 总结

前言

课程重点

  • 代码规范相关事项
  • 如何优化代码

问题引入

试看下面一段代码,请问它是一段好的代码吗?

image.png

如果是单纯从功能上来看的话,它不能说好,只能说是仅仅实现了基本功能而已。但是这段代码却是一段真实工程中的代码,因为在实际运行过程中,这段代码比起其他优化的写法要执行的更快。因此,从效率上考虑,最终采用了上述代码。

实现一个交通信号灯的状态切换

1.基本实现

最基本的实现其实就是使用定时器进行嵌套,当然这也是一段经常被人诟病的名为“回调地狱”的代码,不仅代码本身非常的“丑”,并且还不易被其他人理解。当状态增加或减少时,需要直接改动核心代码。

code.png

2.状态封装实现

在上节的实现中,我们剖析出上节代码的问题在于:代码的可读性和可维护性不强。对此我们将状态和核心代码进行分离,当需要增加或者删除代码时,只对状态列表进行改动,而不需要对核心代码做任何修改。

code.png

3.职责分离实现

在上节中,我们增强了基本实现代码的可读性和可维护性,但是它还不能说是一段“好”代码。一段好的代码要满足的原则有很多,而我们接下来要说的就是“单一职责原则”,单一职责原则要求一个对象或方法只做一件事。回看第二种实现方法的代码,我们发现,在第二种实现方式的代码的核心方法中,它做了两件事情————改变状态和切换状态。因此我们进一步优化代码,就需要对这两个功能做拆分。

code.png

我们也可以使用异步函数实现上述代码,结构看起来会更加清晰。

code.png

求一个数是否是4的幂

1.基本实现

最基本的实现当然是一个最常用的“算法”,暴力递推。因为如果一个数是4的幂次,那么他累除4的结果绝对是1,%4的结果绝对是0。

code.png

### 2.位运算优化 在上节代码之上做优化最基础的方法就是把数学计算都改成位运算。

code.png

3.数学优化

通过数学归纳法,我们可以发现,4的幂 & 4的幂-1的结果绝对是0,并且4的幂 & 0xAAAAAAAA的结果也需要为0(因为2的幂次同样可以满足第一条规则)。

code.png

或者可以使用正则来实现。因为四的幂的二进制一定是一个1和n个00。

code.png

洗牌算法

1.基本实现

这是一段很常见的洗牌算法的实现,但它实际上并不均匀,因为sort方法的实现并不会让每个数都进行交换,因此这种实现是一种概率不均匀的洗牌选法。

code.png

2.均匀算法实现

这种实现方式取决于随机函数是否能保证对等概率,只要随机函数能保证对等概率,那么该算法也能保证平均。

code.png

总结

本节课主要介绍了有关JavaScript代码规范和优化相关的问题。
跟着月影大佬学习代码优化的过程非常的丝滑。

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

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

相关文章

认识UDP、TCP协议

一、Socket 首先,我们需要了解一下socket。 在上一篇文章当中,我们了解了TCP-IP五层协议模型初识网络:IP、端口、网络协议、TCP-IP五层模型_革凡成圣211的博客-CSDN博客TCP/IP五层协议详解https://blog.csdn.net/weixin_56738054/article/det…

Crack:RadiAnt DICOM Viewer 2023.1 BETA #1300

RadiAnt DICOM Viewer 2023.1 BETA #1300 built on January 13, 2023 New features: Length ratio calculation. Ellipsoid / bullet volume calculation. Added option to color and/or pin specific items to top in the DICOM tags window. 多式DICOM的技术支持 该软件能够打…

是时候分享一波jenkins centos的安装了

1、下载注意:至少安装2.319的版本,否则插件安装失败,2.357 之后版本需要java11,请注意java版本a、开始下载,利用华为云地址 https://mirrors.huaweicloud.com/home,速度杠杠快搜索jenkins,点击j…

api接口对接如何实现,php如何对接api

这篇文章来分享下api接口对接如何实现,还有源码,希望对新手有所帮助。 什么是API? 我的回答:API( 应用程序编程接口):一般来说,这是一套明确定义的各种软件组件之间的通信方法。 什么是API&…

Android数据库之SharedPreferences、SQLite、Room

文章目录一、SharedPreferences二、SQLite三、Room使用Room进行增删改查Room数据库升级一、SharedPreferences 要想使用SharePreferences来存储数据,首先需要获取到SharedPreferences对象。Android中提供了三种方法用于得到SharedPreferences对象 1.Context类中的g…

20230119英语学习

Back to the Future 在故宫修钟表是种什么样的体验? After a year of complex restoration, specialists from the Palace Museum in Beijing have given a pair of antique pagoda clock automata a new lease on life. In the form of a nine-tiered pagoda, th…

单片机寄存器

单片机寄存器简述 1、单片机寄存器就是单片机片内存储器(片内RAM)一部分,每一个都有地址。只不过这几个寄存器有特殊的作用,比如指令:MUL AB,这条指令用到两个寄存器A,B进行乘法,结果存到BA里面,这条指令必…

Linux基本功系列之type命令实战

文章目录一. type命令介绍二. 语法格式及常用选项三. 参考案例3.1 查看别名3.2 查看是否是内建命令3.3 查看是否为关键字3.4 显示所有命令的位置3.5 判断当前命令是否为alias或者keyword等总结前言🚀🚀🚀 想要学好Linux,命令是基本…

4-2指令系统-指令的寻址方式

文章目录一.指令寻址1.顺序寻址2.跳跃寻址二.数据寻址1.隐含寻址2.立即(数)寻址3.直接寻址4.间接寻址5.寄存器寻址6.寄存器间接寻址7.相对寻址(程序浮动、转移指令)8.基址寻址(多道程序)9.变址寻址&#xf…

移动web字体图标

字体图标下载字体图标使用字体图标使用类名引入字体图标使用unicode编码(了解)在线字体图标使用伪元素字体图标小结下载字体图标 具体的步骤&#xff1a; 使用字体图标 引入相关文件 复制相关的文件&#xff0c;到 fonts文件夹里面。 引入 css <link rel"styleshe…

回溯法复习(总结篇)

根据课本上的学习要点梳理&#xff0c;“通用解题法”&#xff0c;可以系统的搜索一个问题的所有解、任一解&#xff0c;他是一个既带有系统性&#xff08;暴力遍历&#xff09;又带有跳跃性&#xff08;剪枝&#xff09;的搜索算法。 理解回溯法和深度优先搜索策略 回溯的本质…

Kafka入门与核心概念

前言在我们开发过程中&#xff0c;有一些业务功能比较耗时&#xff0c;但是又不是很重要的核心功能&#xff0c;最典型的场景就是注册用户以后发送激活邮件分为两步1&#xff1a;向数据库插入一条数据2&#xff1a;向注册用户发送邮件第2步其实并不是核心功能&#xff0c;但是发…

SpringMVC-拦截器

1&#xff0c;pringMVC-拦截器 对于拦截器这节的知识&#xff0c;我们需要学习如下内容: 拦截器概念入门案例拦截器参数拦截器工作流程分析 1.1 拦截器概念 讲解拦截器的概念之前&#xff0c;我们先看一张图: (1)浏览器发送一个请求会先到Tomcat的web服务器 (2)Tomcat服务…

字节青训前端笔记 | 响应式系统与 React

本节课为前端框架 React 的基础课程讲解 React的设计思路 UI编程的特点 状态更新的时候&#xff0c;UI不会自动更新&#xff0c;需要手动调用DOM接口进行更新欠缺基本的代码层面的封装和隔离&#xff0c;代码层面没有组件化UI之间的数据依赖关系&#xff0c;需要手动维护&am…

【程序人生 | 价值扳机】你的寒假自律第一步(建议收藏)

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计专业大二本科在读&#xff0c;阿里云社区专家博主&#xff0c;华为云社区云享专家&#xff0c;CSDN SAP应用技术领域新兴创作者。   在学习工…

小技巧:Excel顽固的名称、引用冲突的解决

共享编辑、跨文档引用的不便 Excel 的共享文档多人编辑、跨文档引用等功能似乎很美好&#xff0c;实际用下来很成问题。 首先共享文档虽然用约定按标注责任人的方式由不同的人编辑不同的行避免的多人同时编辑一行的冲突&#xff0c;但是这通常是个大文件&#xff0c;经常(大概…

函数 C语言】

函数的声明和定义 函数间调用关系是&#xff0c;由于函数调用其他函数&#xff0c;替他函数也可以互相调用&#xff0c;同一个函数可以被一个或多个函数调用任意次。 先声明&#xff0c;后调用。 #include <stdio.h> //去标准库下找文件 #include "stdio.h"…

分件操作和IO

1.文件的路径如图:当我们打开此电脑后(windows系统),上面会显示我们当前的位置&#xff0c;点击之后会出现如图片中的一段字符&#xff0c;这段字符代表着当前你所处位置的路径。最开头的D&#xff1a;/d&#xff1a;是盘符&#xff0c;后面会用斜杠‘/’或者反斜杠‘\’分开,该…

MFC的使用

1.初使用的简单代码该程序包含两个代码 头文件mfc.h和mfc.cpp文件头文件mfc.h#pragma once #include<afxwin.h>class MyApp:public CWinApp//CWinApp应用程序类 { public://程序入口virtual BOOL InitInstance(); }; class MyFrame : public CFrameWnd//继承窗口框架类a …

Java_Git:2. 使用git管理文件版本

目录 1 创建版本库 1.1 使用GitBash 1.2 使用TortoiseGit 2 添加文件 2.1 添加文件过程 2.2 工作区和暂存区 3 修改文件 3.1 提交修改 3.2 查看修改历史 3.3 差异比较 3.4 还原修改 4 删除文件 5 案例&#xff1a;将java工程提交到版本库 5.1 复制文件到工作目录 …