前端与Javascript|青训营笔记

48 阅读1分钟

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

前端与Javascript

写好JS的一些原则:各司其责。组件封装、过程抽象

  • HTML、CSS、JavaScript 各司其责
  • 应当避免不必要的由JS 直接操作样式
  • 可以用 class 来表示状态,类名具有不错的业务语义
  • 纯展示类交互寻求零JavaScript方案

组件是指web页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。好的组件具备封装性,正确性,扩展性,复用性。

YTE40A0PA.png

~BKJ2Z37O`8}6SI@MX8A.png

Z96FXBQZKUS9D@44`FUSXKF.png

HY3QC%L877S84X6A2S$HSX5.png

高阶函数(HOF):以函数作为参数,以函数作为返回值,常用于作为函数装饰器。

常用的高阶函数有Once、Throttle、Debounce、Consumer/2、Iterative等。

为什么要使用高阶函数?

纯函数:行为可以预期的函数,好处是在任何时候测试不需要构建环境。

非纯函数:每次调用的结果不一样,可能和调用次数有关系。在测试非纯函数时需要构造特定的外部环境,成本比较大。在一个库里应该尽量使用纯函数,这也是为什么鼓励使用高阶函数的原因(比如iterative就是一个纯函数。)

)Y[{PN~8Q]GG){I65H)((0O.png 编程范式包括命令式和声明式,命令式代码强调怎么做,把具体做法写出来,声明式代码更简洁,强调做什么。Javascript数组提供map,forEach等方法能很方便的实现声明式代码。

Javascript可以用两种方式来写命令式和声明式代码。通常情况下使用声明式代码会比使用命令式代码具有更强的可扩展性。(例如toggle实现三态切换)

C}IZW)(GH0H%IG(Z0