第一个markdown笔记
git相关
常用git操作命令
撤销commit ： git checkout [commit] [file1] (恢复某个commit指定文件到暂存区和工作区)
删除分支： git branch -d [branchName]
删除远程分支： git push origin --delete [branchName]
参考链接 阮一峰网络日志博客
代码规范
webpack工具链
fetch
请求网络接口
fetch('url',option).then(res => {
// 成功回调
})
.then(err => {
// 失败的回调函数
})
在options中可以指定相关东西，比如method，header(content-type,accept), credentials:include(强制带cookie),body等相关信息
补充
URLSearchParams相关
// 根据URL对象获取某个参数属性
var url = new URL(location)
var foo = searchParams.get('foo')
//根据DOM对象获取参数属性
var a = document.querySelector('a')
a.href = '//www.greatytc.com/writer#/notebooks/17614044/notes/28095501/preview?foo=test'
a.searchParams.get('foo')
//基本使用方法
var paramsString = "q=URLUtils.searchParams&topic=api" // location.search.slice(1)
var searchParams = new URLSearchParams(paramsString);
searchParams.has('topic') // true
searchParams.get('topic') // "api"
searchParams.getAll('topic') // ["api"]
searchParams.get('foo') // null，注意Firefox返回空字符串
searchParams.set('foo', 2);
searchParams.get('foo') // 2
searchParams.append('topic', 'webdev');
searchParams.toString() // "q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"
searchParams.append('foo', 3);
searchParams.getAll('foo') // [2, 3]
searchParams.delete('topic');
searchParams.toString() // "q=URLUtils.searchParams&foo=2&foo=3"
fetch的简单封装
/**
* 将对象转成 a=1&b=2的形式
* @param obj 对象
*/
function obj2String(obj, arr = [], idx = 0) {
for (let item in obj) {
arr[idx++] = [item, obj[item]]
}
return new URLSearchParams(arr).toString()
}
/**
* 真正的请求
* @param url 请求地址
* @param options 请求参数
* @param method 请求方式
*/
function commonFetcdh(url, options, method = 'GET') {
const searchStr = obj2String(options)
let initObj = {}
if (method === 'GET') { // 如果是GET请求，拼接url
url += '?' + searchStr
initObj = {
method: method,
credentials: 'include'
}
} else {
initObj = {
method: method,
credentials: 'include',
headers: new Headers({
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
}),
body: searchStr
}
}
fetch(url, initObj).then((res) => {
return res.json()
}).then((res) => {
return res
})
}
/**
* GET请求
* @param url 请求地址
* @param options 请求参数
*/
function GET(url, options) {
return commonFetcdh(url, options, 'GET')
}
/**
* POST请求
* @param url 请求地址
* @param options 请求参数
*/
function POST(url, options) {
return commonFetcdh(url, options, 'POST')
}
GET('https://www.baidu.com/search/error.html', {a:1,b:2})
POST('https://www.baidu.com/search/error.html', {a:1,b:2})
函数节流和函数去抖
函数节流与 函数防抖都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象
函数节流
指定一个周期，当调用函数的时间间隔大于该周期才执行函数，否则不执行该方法
函数去抖
当调用函数n毫秒之后才能再次调用该函数
常用场景
window对象的resize、scroll事件
拖拽时的mousemove事件
文字输入、自动完成的keyup事件
