前端项目小知识点总结

1.常见Content-Type

1.application/x-www-form-urlencoded
application/x-www-form-urlencoded：是一种编码格式，窗体数据被编码为名称/值对，是标准的编码格式，一般用于表单提交。

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。

当action为post时候，浏览器把form数据以键值对形式，放到http的 body中，然后发送到server。

注意：如果是中文或特殊字符如"/“、”,“、“:” 等会自动进行URL转码。不支持文件。

2.multipart/form-data
如果要发送大量的二进制数据（non-ASCII），application/x-www-form-urlencoded 显然是低效的，这种情况下，应该使用 “multipart/form-data” 格式。
multipart/form-data支持文件上传的格式，一般需要上传文件的表单则用该类型，post方法实现

3.application/json
JSON 是一种轻量级的数据格式，以“键-值”对的方式组织的数据。这个使用这个类型，需要参数本身就是json格式的数据，参数会被直接放到请求实体里，不进行任何处理。服务端/客户端会按json格式解析数据（约定好的情况下）。

4.application/xml 和 text/xml
二者功能一模一样，唯一的区别就是编码格式，text/xml忽略xml头所指定编码格式而默认采用us-ascii编码，而application/xml会根据xml头指定的编码格式来编码

2.git常用命令

git clone 仓库地址（SSH或者https）
git branch 查看当前分支
git checkout xxxx 切换新分支
git add .
git commit -m ‘xxxx’ --no-verify
git pull
git push
git log 查看历史提交记录版本号
git reset --hard 版本号 强制回退到某一个版本

提交分支代码前merge一下master和迭代分支代码
git fetch
git merge origin/master

3.js中的this指向

普通函数调用，此时 this 指向 window,严格模式下指向undefined，非严格模式下执行window

构造函数调用， 此时 this 指向 实例对象

对象方法调用， 此时 this 指向 该方法所属的对象

通过事件绑定的方法， 此时 this 指向 绑定事件的对象

定时器函数， 此时 this 指向 window

改变this指向：call() 方法 apply() 方法 bind()方法
this.handelClick.bind(this)

4.异步问题和 Event Loop（事件轮询）机制

1.同步任务
代码的执行顺序与书写顺序一致；在主线程上排队执行的任务，一个一个向下执行，如果在某一个为位置执行报错被终端，那么后续都不会执行（最常见的情况就是报错）

2.异步任务
异步任务：不进入主线程、而进入“任务队列”，只有等任务队列通知主线程某个任务可以执行，这个任务才会被加载到主线程，开始执行。
异步任务又分宏任务与微任务
宏任务 setTimout setInterval Ajax DOM事件
微任务 promise.then() .catch() [new promise是同步任务执行的] async/await process.nextTick

3.执行顺序
微任务执行时机比宏任务早
1）当主线程任务执行完后，看任务队列是否有待执行的微任务
2）如果有会把所有待执行的微任务放到任务队列
3）如果没有微任务或微任务执行完后，
4）再看任务队列是否有待执行的宏任务
5）如果有就放到主线程开始执行
6）微任务执行后再看有没有宏任务，有就先执行所有宏任务
7）如果没有就下个微任务

4.Event Loop（事件轮询）
js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着，但是，假如我们需要浏览新闻，但新闻包含的超清图片加载很慢，总不能网页一直卡着直到图片完全出来，所以将任务设计成了两类：同步任务和移步任务

当我们打开网站时，网页的渲染过程就是一大堆同步任务，像页面骨架和页面元素的渲染，而加载图片、音乐之类的任务就是异步任务

1）所有的同步任务都在主线程上执行，行成一个执行栈。
2）除了主线程之外，还存在一个任务列队，只要异步任务有了运行结果，就在任务列队中植入一个时间标记。
3）主线程完成所有任务(执行栈清空），就会读取任务列队，先执行微任务队列在执行宏任务队列。
4）重复上面三步。

只要主线程空了，就会读取任务列队，这就是js的运行机制，也被称为 event loop（事件循环）。

5.案例
1）主线程上宏任务、微任务执行顺序
执行顺序：主线程 >> 主线程上创建的微任务 >> 主线程上创建的宏任务

2）宏任务中包含微任务
执行顺序：主线程 >> 主线程上的宏任务队列1 >> 宏任务队列1中创建的微任务

总结：
js是一门单线程脚本语言，同步会阻塞程序的执行，异步不会阻塞程序的执行，

5.函数节流防抖

1）函数防抖：当事件被触发一段时间后再执行回调，如果在这段时间内事件又被触发，则重新计时。
在事件触发时，开始计时，在规定的时间（delay）内，若再次触发事件，将上一次计时（timer）清空，然后重新开始计时。保证只有在规定时间内没有再次触发事件之后，再去执行这个事件。

简单的防抖代码：
在持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒后才会被调用一次，就是说在持续触发事件的过程中，事件处理函数handle一直都没有执行。

2）函数节流（throttle）：指定时间间隔内，若事件被多次触发，只会执行一次
在事件触发之后，开始计时，在规定的时间（delay）内，若再次触发事件，不对此事件做任何处理。保证在规定时间内只执行一次事件.

-----时间戳实现：当高频事件触发时，第一次会立即执行，给事件绑定函数与真正触发事件的间隔一般大于delay,而后在频繁的触发事件，都是delay事件才执行一次。而当最后一次时间触发结束以后，事件也不会再执行。

-----定时器实现：在触发事件时，设置一个定时器，再次触发事件时，若定时器存在，就不执行，知道delay时间后，定时器执行函数，并且清空定时器，继续设置下一个定时器。