跟着月影血JavaScript | 青训营笔记

记得带伞_
31 阅读4分钟

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

R-C.jfif

课程笔记

JavaScript编码原则

JavaScript的编码原则主要有三个：

  • 各司其责

    编写代码时尽可能的让HTML、CSS和JavaScript职能分离。

  • 组件封装

    将一些常用的模块封装成组件，其这些组件应具备正确性、拓展性、复用性，这样的组件才是好的UI组件。

  • 过程抽象

    编写代码时应使用函数式的编程方式，这对开发有很大的好处。

JavaScript编码原则之各司其职

在编写前端页面的过程中应遵循以下原则

  • HTML/CSS/JS各司其职
  • 应当避免不必要的由JS直接操作样式
  • 可以用class类来表示状态
  • 纯展示类交互寻求零JS方案

举例说明---“深夜食堂”案例

要为一个页面实现切换黑夜模式的的功能，如下图所示

image.png

为实现这个功能，有如下三个版本的代码

image.png 通过js来获取元素后，直接修改元素的样式属性来实现，这样做可以正常实现所需要的功能，但是代码太过冗余不易于今后的维护。

image.png

这个版本相比于上个版本代码简洁了许多，通过切换元素的类名来实现样式的切换，这样的代码容易读懂也容易今后的维护。

除此之外还有别的方案么？答案是有的。

image.png

这个版本只使用了HTML和CSS实现，代码更加简洁且不需要维护JS代码，为后续的开发带来了许多的便利。

通过上边三个版本的代码我们可以看到在编写代码时让HTML/CSS/JS各司其职可以助于提高代码的可读性，更加有助于今后的维护。

JavaScript编码原则之组件封装

组件是 Web 页面上所抽取的模版（HTML）、功能（JS）与样式（CSS）的单元，自从 React，Vue 等前端框架在市面上大量使用之后，组件化开发逐渐成为了前端主流开发方式。

举例说明---“轮播图”案例

image.png

  • 结构（HTML）

    轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现

image.png

  • 表现（CSS）

    • 使用CSS绝对定位将图片重叠在同一个位置
    • 轮播图切换的状态使用修饰符（modifier）
    • 轮播图的切换动画使用CSS transition

image.png

  • 行为（JS）：

    • SLider功能（API）
      • +getSelectedItem() 用于获取选中图片元素
      • +getSelectedItemIndex() 用于获取选中图片元素索引
      • +slideTO() 用于轮播至某图片
      • +slideNext() 用于轮播至下一张图片
      • +slidePrevious 用于轮播至上一张图片、
    • 控制流（Event）
      • 使用自定义事件来解耦

image.png

案例优化

  • 重构：插件化（解耦）

    将控制元素抽取成插件 插件与组件之间通过依赖注入方式建立联系

  • 重构：模式化（解耦）

    将HTML模块化，更易于拓展

  • 重构：组件框架（抽象）

    将组件通用模型抽象出来

image.png

组件设计的原则：封装性、正确性、拓展性、复用性

组件设计的基本方法：结构设计、展示效果、行为设计（包括API和Event）

三次重构：插件化、模板化、抽象化

JavaScript编码原则之过程抽象

过程抽象

过程抽象是指用来处理局部细节控制的一些方法，其是函数式编程思想的基础应用。

image.png

在过程抽象的过程中常用的方法就是使用高阶函数来实现过程抽象，经典的例子就是Once函数、HOF0函数

image.png

image.png

高阶函数也常被用来实现节流和防抖。在开发过程中使用高阶函数可以减少我们使用非纯函数的可能性。

编程范式

编程中包含命令式与声明式两种方法。

image.png

image.png

总结

本次课程的学习主要是一些JS相关的内容，个人感觉是一些比较深奥的东西，也可能是我对JS的研究没有深入，导致听课过程中时常跟不上老师所说的内容，感觉这节课程没怎么学好学懂，所以笔记做的也不怎么好，所以课后害的多回放几遍才行。老师讲的很好，见识到了很多JS的妙用。

书籍推荐

《你不知道的JavaScript》(有上中下三卷)

《JavaScript权威指南》(第七版)

第三次写文章，如有不足之处或者错误的地方请指正🙈

avatar
文章
阅读
粉丝