JavaScript | 青训营笔记

39 阅读2分钟

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

如何写好JavaScript

一、什么样的JS代码才是好的代码?

要写好JavaScript,需要遵循以下三个原则:

1. 各司其职

各司其职是指三件套各有自己相应的功能,互不混淆,且各有各的优点及其适用场合,在这里举一个小例子。

在日常生活中经常使用到手机的夜间模式和白天模式的切换。及深色和浅色两种模式:此时我们的需求是:切换黑白字和黑白背景。

-------------------------------只使用JS----------------------------------

缺陷:很难理解需求原始含义 下图是改变深色和浅色只使用JS的代码,可见下图代码可读性较差,难以立刻分辨出原始需求,并且修改变量的可操作性也比较差。

image.png

---------------------------------各司其职----------------------------------

下图是改变深色和浅色调用了css样式的代码。操纵class类,此时可以很直观的知道需求,修改属性值时也可以直接在css代码中进行修改。

image.png

-------------------------------只有CSS和HTML------------------------------- 下图是改变深色和浅色只使用JS的代码 遵循了只有交互展示功能时尽量零JS的原则

image.png

2. 组件封装

组件:在WEB页面上抽象出来的包含……的单元

好的组件要有封装性、扩展性、正确性、复用性。

例子>>轮播图的实现

  1. 首先搭建列表的 HTML结构

  2. CSS绝对定位 放在同一位置

轮播图切换的状态使用修饰符;切换动画用transition

  1. 设计JS API

image.png

3. 过程抽象

处理局部细节控制的方法。为了能够让“只执行一次”的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

image.png

3.1 高阶函数

以函数作为参数,函数作为返回值。

image.png

常用的高阶函数

  • Once
  • Throttle
  • Debounce
  • Consumer/ 2
  • Iterative

二、今日总结

JS还有很多深层的值得我去深入学习的东西,一定要熟练掌握!