学习笔记

第一个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 = 'https://www.jianshu.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事件