一、JavaScript

JavaScript是一个基于对象的、事件驱动的、跨平台的、解释型的编程语言
完整的JavaScript实现由以下三个部分构成：ECMAScript语言基础、DOM:对文档中元素的操作、BOM:对浏览器进行操作红宝石和犀牛书是目前很流行的JS学习书籍，红宝石链接

二、JavaScript的编码原则

三件套各司其职
如果只是结构类或者样式的改变，尽量避免不必要的JS操作，纯展示类的交互要寻求零JS方案
组件封装
好的组件要具备：封装性、正确性、扩展性、复用性
过程抽象
- 处理局部细节控制的方法
- 函数式编程的基本应用

以下扩展记录视频提到的知识点：

三、伪元素和伪类选择器

学习链接

定义:
伪类：用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的
伪元素：创造了一些不包含在文档树中的元素

区别：在于他们是否创建了新的元素，伪类没有创建，伪元素创建了
常见的伪类：
:active，将样式添加到被激活的元素
:focus，将样式添加到被选中的元素
:hover，当鼠标悬浮在元素上方时，向元素添加样式
:link，将特殊的样式添加到未被访问过的链接
:visited，将特殊的样式添加到被访问的链接
:first-child，将特殊的样式添加到元素的第一个子元素
:lang，允许创作者来定义指定的元素中使用的语言
:nth-child(n) 匹配属于其父元素的第n个子元素，不论元素的类型
:nth-of-type() 规定属于其父元素的第n个指定元素
:checked匹配被选中的input元素，这个input元素包括radio和checkbox。

eg:选择器匹配p元素的第一个子元素:

p:first-child {
  color: red;
}
<p>你好</p>
<p>好啊</p>

常见的伪元素：
PS:CSS3规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (::)，伪类使用一个冒号 (:)

eg:在每个h1元素的内容之后插入一幅图像:

h1::after {
  content: url();
}

四、JS-防抖和节流

学习链接-防抖和节流
 学习链接-debounce&throttling
防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案，可以阻止操作高频触发，优化性能。

定义：
防抖：n秒内函数只会执行一次，再次触发会重新计时，避免事件的重复触发
节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。
实现案例：

function debounce(fn, delay){
	let timer = null;
	return function(){
		clearTimeout(timer);
		timer = setTimeout(()=> {
			fn.apply(this, arguments);
		}, delay)
	}
}

function throttle(fn, delay){
	let valid = true;
	return function(){
		if(valid) { //如果阀门已经打开，就继续往下
			setTimeout(()=> {
				fn.apply(this, arguments);//定时器结束后执行
				valid = true;//执行完成后打开阀门
			}, delay)
			valid = false;//关闭阀门
		}
	}
}
// 刚开始valid为true，然后将valid重置为false,进入了定时器，在定时器的时间期限之后，才会将valid重置为true,valid为true之后，之后的点击才会生效
// 在定时器的时间期限内，valid还没有重置为true，会一直进入return，就实现了在N秒内多次点击只会执行一次的效果

//用法：
function fn(value){
  console.log(value);
}
var throttleFunc = throttle(fn,2000);//节流函数
 //事件处理函数，按钮点击事件
btn.addEventListener("click",function(){    
    throttleFunc(Math.random());// 给节流函数传参
})

应用场景：

防抖：
- search搜索联想，用户在不断输入值时，用防抖来节约请求资源
- window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流：
- 鼠标不断点击触发，mousedown(单位时间内只触发一次)
- 监听滚动事件，比如是否滑到底部自动加载更多

JavaScript编码学习笔记1 ｜ 青训营

一、JavaScript

二、JavaScript的编码原则

三、伪元素和伪类选择器

四、JS-防抖和节流

JavaScript编码学习笔记1 ｜青训营