Article Detail Page

第五章前端计算机基础

理解WebSocket和TCP/IP

chrome针对每一个域,最多建立6个TCP连接.而http2.0有天然优势,因为他实现了线路复用.

同源策略组合跨域

a.pipk.top ==>> b.pipk.top 请求数据,这个时候跨域了,注意,跨域的核心在于,请求是可以发出去的,但是response被浏览器block了,可以这么理解,同源策略组是限制了读取,但是没有限制写入..这就像是,A用户登录了银行A网站,但是同时他也打开了黑网站B, 假如黑网站B向银行网页发送了转账请求,而银行网页认定了A用户已经登录,黑网站无法获取你的token,因为同源策略组的原因.跨域请求是不会携带cookie的.

CSRF攻击

最广为人知的跨域解决方案就是利用script标签发送get请求,同样的,利用img标签同样可以发送get请求,iframe同样可以发送get请求,如果你打开了这个图片,那么就会向pipk.top发送get请求.

<img src="https://api.pipk.top/graphql?graphql=givememoneny" />

利用路由器

自定义事件

手机上的click事件有300ms的延迟,

类型判断

Object.prototype.toString.call([1,2,3,4,5]) === '[object Array]';
class Person{}
Object.prototype.toString.call(Person) === '[object Function]';
Object.prototype.toString.call( new Person()) === '[object Object]';

惰性函数

经常遇到下面用户端的类型判断是window还是ios,

const root = {
  getType: function(){
    let ua = window.navigator.userAgent;
    if(ua.match(/renren/i)){
      return 0;
    }else if( ua.match(/chrome/)){
      return 1;
    }else if(ua.match(/mozila/)){
      return 2;
    }
  }
}

惰性函数的写法

const root = {
  getType: function(){
    let ua = window.navigator.userAgent;
    if(ua.match(/renren/i)){
      this.getType = ()=>0;
      return 0;
    }else if( ua.match(/chrome/)){
      this.getType = ()=>1;
      return 1;
    }else if(ua.match(/mozila/)){
      this.getType = ()=>2;
      return 2;
    }
  }
}

作为一个有追求的码农,自然是有必要进行这些优化的,当优化叠加到一个量的时候,就会发生质变.

call bind apply

apply,第一个参数就是被调用函数的this的值,而第二个参数必需是数组不能是字符串; call, 调用, 第一个参数是this,第二个参数到第n个参数,分别对应被执行函数里面的第1到n个参数 bind, 绑定的意思, 会返回一个函数,函数参数,这里非常有意思的是,bind传入的参数会覆盖函数原本执行的参数 ()=> 箭头函数自身没有this,无论你调用call与否, 事实上,箭头函数连arguments,构造器都没有.,会直接获取外部的arguments./

const root = {
  a: function(){
    this.t.apply('test',[3,4,5,6])    // test , 3,4,5
    this.t.call('test',3,4,5,6,7);    // test , 3,4,5
    this.t.bind(['test'],'覆盖')(2,4,5);     //   test, 234,234,345
    this.t(1,2,3)    // 返回  ===>  root本身, 1,2,3
// ===============================================================
    this.p.apply('test',[3,4,5,6])    // {} , 3,4,5
    this.p.call('test',3,4,5,6,7);    // {} , 3,4,5
    this.p.bind(['test'],234,234,345)(2,4,5); // {}, 234,234,345
    this.p(1,2,3)    // 返回  ===>  root本身, 1,2,3
  },
  t: function(a,b,c){
    console.log(this,a,b,c);
  },
  p:(a,b,c)=>{
    console.log(this,a,b,c);
  }
}
root.a()

curry 科里化

核心思想就是将arguments这个参数串在一起.

Function.prototype.curry = function(){
  let slice = Array.prototype.slice;
  let defArg = slice.call(arguments);

  let _this = this;
  return function(){
    return _this.apply(this ,[...defArg, ...arguments]);
  }
}

高效web前端 - 阅读笔记

第五章 前端计算机基础