[JavaScript编程原则(2) | 青训营笔记]

42 阅读3分钟

这是我参与「第五届青训营 」笔记创作活动的第6天

今天的[JavaScript编程原则]视频课是上接昨天的剩余JavaScript编程原则的课的,主要从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”,并从 JS 出发,总结其他语言编码可遵循的共性原则,由浅入深。今天我把剩余的JavaScript过程抽象和代码质量优化之路一起整理成这一篇文章。
我把今天视频的知识进行了整理和概括,具体内容如下:

1. JavaScript编程原则之过程抽象

在学习编程的过程中,一个核心的任务是编写可以完成任务的函数,而这节课就是通过由浅入深的过程案例讲解,详细解读编码三大原则的“过程抽象”原则。

过程抽象就是用来处理局部细节控制的一些方法,是函数式编程思想的基础应用。下面我们从这几个部分对过程抽象进行讲解。为了能够让‘只执行一次’的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们就称为过程抽象

  1. 高阶函数

HOF高阶函数之throttle,具体形式如下: QQ截图20230118213747.png HOF高阶函数之debouncee,具体形式如下: QQ截图20230118213904.png HOF高阶函数之consumer,具体形式如下: QQ截图20230118213955.png HOF高阶函数之iterative,具体形式如下: QQ截图20230118214028.png 2.编程范式 编程中除了我们大多数人都了解的面向对象和面向过程以外,其实还有命令式和声明式两种。

命令式编程:命令“机器”如何去做事情(how),这样不管你想要的是什么(what),它都会按照你的命令实现。(注重过程)。用详细的命令机器怎么去处理一件事情以达到你想要的结果。 例如你想通过点击改变页面中某一个元素,首先要获取按钮,再给按钮添加点击事件,获取要改变的元素,执行点击函数,改变元素达到自己的目的,这是一步一步的步骤操作,就如同给计算机发布命令,一步一步执行,这就是命令式编程。

声明式编程:告诉“机器”你想要的是什么(what),让机器想出如何去做(how)。(注重结果) 简单的说,你只需要告诉计算机,你要得到什么样的结果,计算机则会完成你想要的结果,以Vue为例,在页面中通过 {{ }} 显示一个data里面的变量,你只需要改变这个变量,页面就会跟着刷新,这就是你只需要结果,vue 内部去处理过程,这就是声明式编程。

2.JavaScript代码质量优化之路

老师讲的这节课是串联此前讲解的好代码经验,结合具体案例讲解,就写好 JavaScript 代码进行总结与升华。一共有3个案例分析。
  • 交通灯案例,经过几次改良,逐渐完善代码,提升代码质量。最终结果如下: QQ截图20230118214823.png
  • 洗牌案例,老师先通过错误案例讲解然后推出正确代码,我在此直接上代码: QQ截图20230118215011.png
  • 分红包案例,代码如下: QQ截图20230118215132.png 通过这几个案例有助于我们在书写代码时解决遇到的问题或优化代码质量。
好了今天的分享到此结束,总而言之在开发中我们要注意编码的操作规范。好了我们明天见,希望大家指出不足之处以待改正~~