JS初阶 | 青训营笔记

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

今日课程重点

• js的初级
• 深夜食堂案例剖析
• 组件封装：轮播图案例

本课重点内容概要

1. 认识js

js用以管理页面的行为

js创作时间相比其他语言很短，因此，他存在着一些比较严重的缺陷。

写好js的三点原则：

2. 深夜食堂案例剖析

版本一：

缺陷：JS直接控制css，不好！

版本二：

优点：JS和CSS各司其职！优秀！

结论：应该避免直接的由JS来操作样式，可以通过Class改变

3. 轮播图实现

• 初步实现

HTML：使用无序列表<ul>实现

CSS：为当前选中的图片设置calss为“select”，且opacity=1 其他设置opacity=0来进行隐藏；动画用transition

JS：提供多个API供调用

• 进阶重构

  1. 插件化：每一个细小的按钮等都可以形成一个插件
  2. 模板化：HTML抽离为模板
  3. 抽象化

其他

高阶函数

高阶函数（Higher-order function） 是将函数作为参数或返回函数的函数。

举例：

once：使得事件只被调用一次

throttle：节流（防止用户反复多次点击）

debounce：使得事件临时性暂停时才触发（如保存草稿的例子）

命令式&声明式

声明式：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

命令式：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。