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

62 阅读2分钟

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

本堂课重点内容

  • 写好JavaScript的一些原则
  • 高阶函数使用模式

写好JavaScript的一些原则

  • 各司其责:让HTML、CSS、JavaScript只能分离

例如现在需要实现这样一个功能:点击下图的太阳按钮即可转换成深色模式,太阳变成月亮;反之,点击月亮即可转换成普通模式,月亮变成太阳。

image.png

通常刚入门的小伙伴们可能会用JS来控制样式来实现需求:

61a0b47461d714e7dd20891501ee85b.png

稍微深入学习后也许会用JS控制类名的方式来实现需求,这样更方便后期的代码维护,看起来也更加的简洁。

46a4c8651de5194f7efdba100dec6c4.png

而其实最好的实现方法应该是用CSS来控制,应当避免不必要的由JS直接操作样式,纯展示类交互寻求零JS方案。

64ac59d4d57b92b1de433dc7aec16a1.png

  • 组件封装:好的UI组件具备正确性、扩展性、复用性

1、插件化

①.将控制元素抽取成插件

②.插件与组件之间通过依赖注入方式建立联系

2、模板化

①.将HTML模板化,更易于扩展

3、抽象化

①.将组件通用模型抽象出来

  • 过程抽象:应用函数式编程思想 为了能够让“只执行一次”的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程称为过程抽象

1、用来处理局部细节控制的一些方法

2、函数式编程思想的基础应用

高阶函数

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器
  • 常用高阶函数

Once、Throttle、Debounce、Consumer、Iteraive