📖前端js学习之路

🚀今日主要学习

• 两道手撕js代码：

  • 防抖(debounce) 👋
  • 节流(throttle)； 👍

• 计算机网络两个问题：

  • cookie和session； 🥣
  • 跨域分别有哪几种;

• js基础相关：

  • 箭头函数与普通函数区别？
  • let obj = {} 与 let obj = Object.create()区别？

​

📖1.防抖函数

防抖函数的定义与用途：

定义：在短时间内多次触发一个事件，只会触发最后一次或最开始的一次，中间的不会执行

用途：例如一些input输入框校验；能有效防止重复的请求；🌲

demo

// 实现思路 
// 接受的参数有函数，延时事件， 返回一个函数；
// 当每次执行返回的函数时，先判断定时器还在没有：
//   1.如果还在就直接清除定时器，重新开启定时器执行函数；
//   2.没有在直接开启定时器执行函数。

/*
* fn <Function>
* wait <Number>
*/
function debounce(fn, wait) {
  let timer = null;
  return function() {
    const _args = arguments;
    const _that = this;
    if(timer) clearTimeout(timer); // 清除定时器 
    setTimeout(function() {
      fn.apply(_that, _args); // 改变this执行函数并传递参数
    }, wait)
  }
}

📖2.节流函数

节流函数定义与用途：

定义：在一段时间内触发同一个事件只会触发一次，执行完成后才可以执行下一次。

用途：按钮疯狂点击请求数据。👍

demo

// 时间戳版本
// 实现思路：
// 1.创建一个变量用于存入执行后的的时间；
// 2.如果 （当前时间 - 执行后的时间 > 延时时间） 执行函数， 并把当前时间赋值给执行后的时间变量 

function throttle(fn, wait) {
  let now = 0; 
  return function() {
    const args = arguments;
    const that = this;
    const _nowDate = Date.now(); // 获取当前时间戳
    
    if(_nowDate - now > wait) {
      fn.apply(that, args);
      now = _nowDate; // 并把当前时间赋值
    }
  }
}

定时器版本

// 实现思路：
//  1.每次判断定时器变量是否有值；
//  2. 定时器还在就直接返回不做什么操作；
//  3. 定时器没有，开启定时器；并执行完成后清空定时器；
function throttle(fn, wait) {
  let timer = null;
  return function() {
    const args = arguments;
    const that = this;
    if(timer) return; // 直接返回
    
    setTimeout(function(){
      fn.apply(that, args);
      clearTimeout(timer);
    }, wait)
  }
}

📖3.cookie和session的区别

• 共同点

  解决http无状态，都是用来保持状态。

• 不同点

  • cookie是在客户端进行保存。
    • 如没有设置过期时间，当前cookie就是会话cookie，保存在内存中，浏览器关闭就是会消失；
    • 设置过期时间，cookie就是保存硬盘上，知道过期时间后才消失。
  • session在服务器保存，依赖与cookie。
    • session在服务器生成sessionId后在头部发送给客户端，客户端收到后会把sessionId保存在cookie中。
    • 如果浏览器禁止cookie，可以使用url重写session Id 添加在url地址中。
  • cookie大小4kb， session暂时无限制

📖4.跨域有哪几种方式，优缺点

跨域：解决浏览器的同源策略限制，可以跨域请求。

同源—协议、端口、域名保持一致。

• JSONP

  • 实现原理：js脚本加载不会有被同源限制，通过传递回调函数来进行，加载完毕后触发回调，可以将data作为参数传递。

  demo

  // <script src="http://www.xxx.com?callback=callback"></script>
    const _js = document.createElement('script');
    _js.type = 'text/javascript';
    _js.src = "http://www.xxx.com?callback=callback";
    body.appendChild(_js);
  
    <script type="text/javascript"> 
      function callback(data) {
        // 接受数据进行操作
      }
    </script>
  

  优点：

  1.兼容性比较好（兼容低版本IE）

  缺点：

  1.只支持get方式请求，只能获取数据。

  2.XMLHTTPReques比JSONP有着更好的处理错误机制。

• CORS（cross-origin-resource -share） 跨站资源共享

  • 普通跨域请求：服务器配置头部-Access-Control-Allow-origin，前端无需操作，如有cookie，都需要配置；（cookie是所在域的并不是当前页的），也可以使用nginx来进行代理。

  优点： onError事件，能排查错误信息。

  缺点： 浏览器兼容性问题，IE10下不支持。

• postMessage（暂时没看😭）

📖5.箭头函数与普通函数的区别

• this指向：
• 箭头函数没有自己this，函数里面的this指向创建当前函数外面最近的对象。不能通过bind、call、apply改变this指向。
• 普通函数默认指向调用者，严格模式this指向unedfinde, 可以通过bind、call、apply改变this指向.
• 箭头函数没有自己的arguments，来自父作用域相关文章
• 箭头函数写法更简便，有隐式返回参数： 只有一个参数可省略括号，只有一段代码返回 可以省略大括号。
• 箭头函数不能被new生成实例。（没有对象原型属性）这里就可以说一些new一个对象的过程

📖6.let obj = {} 与 let obj = Object.create(null)区别

在一些源码中可以经常看到 创建对象的方式是使用的 Object.create();

自己亲自动手使用两种方式来进行创建对象后发现了区别：

1.let obj = {} 创建对象，对象上面有很多Object的属性与方法，例如toString(), hasOwnPropoty()等等。

2.let obj = Object.create(null)创建对象，只会创建一个空对象，不会有任何的属性与方法。这样可以大胆的重写一些toString()方法，不会污染全局。

今天的收获就是这么多。 明天就学习一些new一个实例的过程。 晚安～😴