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

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

1.HTML、CSS、JS各司其职

HTML决定页面结构，CSS决定页面样式，JS决定页面行为。 利用DOM编程对页面事件进行监听，做到对页面深色与浅色的切换。

代码如下：

<!-- html -->
<div id="app">hello world</div>

/* css */
#id {
  font-size: 32px;
}

.night {
  background-color: black;
  color: white;
}

// JS
const app = document.getElementById('app')
app.addEventListener('click',(e) => {
  const body = document.body
  if(body.className != 'night') {
    body.className = 'night'
  }else {
    body.className = ''
  }
})

实现效果

2.组件封装基本方法

重构：插件化

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

重构：模板化

• 解耦
  • 将HTML模板化，更易于扩展

组件框架

• 抽象
  • 将组件通用模型抽象出来

总结

• 组件设计的原则
  • 封装性
  • 正确性
  • 扩展性
  • 复用性
• 实现组件的步骤
  • 结构设计
  • 展现效果
  • 行为设计
• 三次重构
  • 插件化
  • 模板化
  • 抽象化(组件框架)

3.过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

也就是说将封装好的函数视为一个无副作用实现功能的小黑盒子。只在意输入输出的内容。

4.高阶函数使用模式

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

• 常用的高阶函数
  • Once
  • Throttle
  • Debounce
  • Consumer/2
  • Iterative

在写Throttle时发现如果让timer = setTimeout()是将setTime的执行次数赋给timer

• 编程范式
  • 命令式与声明式