前言

vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到 vue 中的事件总线 EventBus的概念

正文

EventBus的简介

EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件，如图：

EventBus的使用

废话不多说，直接开始使用EventBus

一、初始化

要用EventBus，首先要初始化一个EventBus，这里称它为全局事件总线。

• 第一种初始化方法

import Vue from 'vue'
//因为是全局的一个'仓库'，所以初始化要在全局初始化
const EventBus = new Vue()

//在已经创建好的Vue实例原型中创建一个EventBus
Vue.prototype.$EventBus = new Vue()

发送事件的语法：this.$EventBus.$emit(发送的事件名,传递的参数)

已经创建好EventBus后我们就需要向它发送需要传递的事件，以便其他组件可以向EventBus获取。
例子：有两个组件A和B需要通信，他们不是父子组件关系，B事件需要获得A事件里的一组数据data

<!-- A.vue 这里是以模块化的方式讲解的，即A组件和B组件分别各自
一个.vue文件,所以代码中会有导入的语法-->

<template>
    <button @click="sendMsg">发送MsgA</button>
</template>

<script> 
export default {
  data(){
  	return{
  		MsgA: 'A组件中的Msg'
  	}
  },
  methods: {
    sendMsg() {
      /*调用全局Vue实例中的$EventBus事件总线中的$emit属性，发送事
      件"aMsg",并携带A组件中的Msg*/
      this.$EventBus.$emit("aMsg", this.MsgA);
    }
  }
}; 
</script>

三、接收事件

接收事件的语法：this.$EventBus.$on(监听的事件名, 回调函数)

A组件已经向全局事件总线EventBus发送了一个aMsg事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。

<!-- B.vue -->

<template>

  <!-- 展示msgB -->
  <p>{{msgB}}</p>
  
</template>

<script> 
export default {
  data(){
    return {
      //初始化一个msgB
      msgB: ''
    }
  },
  mounted() {
    /*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送
    到事件总线中的aMsg事件*/
    this.$EventBus.$on("aMsg", (data) => {
      //将A组件传递过来的参数data赋值给msgB
      this.msgB = data;
    });
  }
};
</script>

B组件展示结果：A组件中的Msg

这样，B组件就轻松接收到了A组件传递过来的参数，并成功展示了该参数，这样是不是就很简单的解决了各组件之间的通讯呢？虽然EventBus是一个很轻便的方法，任何数据都可以往里传，然后被别的组件获取，但是如果用不好，容易出现很严重的BUG，所以接下来我们就来讲解一下移除监听事件。

四、移除监听事件

在上一个例子中，我们A组件向事件总线发送了一个事件aMsg并传递了参数MsgA，然后B组件对该事件进行了监听，并获取了传递过来的参数。但是，这时如果我们离开B组件，然后再次进入B组件时，又会触发一次对事件aMsg的监听，这时时间总线里就有两个监听了，如果反复进入B组件多次，那么就会对aMsg进行多次的监听。

总而言之，A组件只向EventBus发送了一次事件，但B组件却进行了多次监听，EventBus容器中有很多个一模一样的事件监听器这时就会出现，事件只触发一次，但监听事件中的回调函数执行了很多次

• 解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听
• 语法：this.$EventBus.$off(要移除监听的事件名)

<!-- B.vue -->

<template>

  <!-- 展示msgB -->
  <p>{{msgB}}</p>
  
</template>

<script> 
export default {
  data(){
    return {
      //初始化一个msgB
      msgB: ''
    }
  },
  mounted() {
    /*调用全局Vue实例中的$EventBus事件总线中的$on属性,监听A组件发送
    到事件总线中的aMsg事件*/
    this.$EventBus.$on("aMsg", (data) => {
      //将A组件传递过来的参数data赋值给msgB
      this.msgB = data;
    });
  },
  beforeDestroy(){
    //移除监听事件"aMsg"
  	this.$EventBus.$off("aMsg")
  }
};
</script>

本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发

安装

输入以下命令进行安装：

// npm
npm install react-router-dom

// yarn
yarn add react-router-dom

react-router相关标签

react-router常用的组件有以下八个：

import { 
  BrowserRouter,
  HashRouter,
  Route,
  Redirect,
  Switch,
  Link,
  NavLink,
  withRouter,
} from 'react-router-dom'

简单路由跳转

实现一个简单的一级路由跳转

import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/home" className="link">跳转Home页面</Link>
        <Link to="/about" className="link">跳转About页面</Link>
        <Route path="/home" component={Home}/>
        <Route path="/about" component={About}/>
      </Router>
    </div>
  );
}

export default App;

要点总结：

1. Route组件必须在Router组件内部
2. Link组件的to属性的值为点击后跳转的路径
3. Route组建的path属性是与Link标签的to属性匹配的; component属性表示Route组件匹配成功后渲染的组件对象

import { 
  BrowserRouter as Router, 
  Route, 
  Link,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {

  return (
    <div className="App">
      <Router>
        <Link to="/home">跳转Home页面</Link>
        <Link to="/about">跳转About页面</Link>

        <Route path="/home" component={Home}/>
        <Route path="/about" component={About}/>                           

      </Router>
    </div>
  );
}

export default App;

import React from 'react'
import {
    Route,
    Link,
} from 'react-router-dom'
import One from './one'
import Two from './two'

function Home () {
    
    return (
        <>
            我是Home页面
            <Link to="/home/one">跳转到Home/one页面</Link>
            <Link to="/home/two">跳转到Home/two页面</Link>

            <Route path="/home/one" component={One}/>
            <Route path="/home/two" component={Two}/>
        </>
    )
}

export default Home

动态链接

NavLink可以将当前处于active状态的链接附加一个active类名，例如：

import { 
    BrowserRouter as Router, 
    Route, 
    NavLink 
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>
        <NavLink to="/about" className="link">跳转About页面</NavLink>
        <Route path="/home" component={Home}/>
        <Route path="/about" component={About}/>
      </Router>
    </div>
  );
}

export default App;
/* 设置active类的样式 */
.active {
    font-weight: blod;
    color: red;
}

路由匹配优化

当点击跳转链接时，会自动去尝试匹配所有的Route对应的路径：

正常情况下，只需匹配到一个规则，渲染即可，即匹配成功一个后，无需进行后续的匹配尝试，此时可以用Switch组件，如下所示：

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>      
          <Route path="/home" component={Home}/>       
          <Route path="/home" component={Home}/>        
          {/* 此处省略一万个Route组件 */}                  
          <Route path="/home" component={Home}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

要点总结：

1. 将多个Route组件同时放在一个Switch组件中，即可避免多次无意义的路由匹配，以此提升性能

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
  Redirect,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>
        <NavLink to="/shop" className="link">跳转Shop页面</NavLink>   {/* 点击，跳转到/shop，但该路径没有设置 */}

        <Switch>
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>      
          <Redirect to="/home" />    {/* 当以上Route组件都匹配失败时，重定向到/home */}                    
        </Switch>

      </Router>
    </div>
  );
}

export default App;

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 在 /home 的路径上携带了 张三、18 共两个参数 */}
        <NavLink to="/home/张三/18" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 在 /home 匹配路径上相同的位置接收了 name、age 两个参数 */}
          <Route path="/home/:name/:age" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 在跳转路径后面以?开头传递两个参数，分别为name=张三、age=18 */}
        <NavLink to="/home?name=张三&age=18" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 此处无需做接收操作 */}
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        {/* 以对象的形式描述to属性，路径属性名为pathname，参数属性名为state */}
        <NavLink to={{pathname: "/home", state: {name: '张三', age: 18}}} className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          {/* 此处无需特地接收属性 */}
          <Route path="/home" component={Home}/>       
          <Route path="/about" component={About}/>                           
        </Switch>

      </Router>
    </div>
  );
}

export default App;

import React from 'react'

function Home (props) {

    let pushLink = () => {
        props.history.push('/about')
    }
    
    return (
        <div className="a">
            我是Home页面
            <button onClick={pushLink}>跳转到about页面</button>
        </div>
    )
}

export default Home

import React from 'react'

function Home (props) {

    let replaceLink = () => {
        props.history.replace('/about')
    }
    
    return (
        <div className="a">
            我是Home页面
            <button onClick={replaceLink}>跳转到about页面</button>
        </div>
    )
}

export default Home

goBack

调用 goBack 方法，就相当于点击了浏览器的返回上一个页面的按钮，如下图所示：

go

go 方法顾名思义，是用于跳转到指定路径的。

该方法接受一个参数（参数类型为 Number），情况如下：

1. 当参数为正数 n 时，表示跳转到下 n 个页面。例如 go(1) 相当于调用了一次 goForward 方法
2. 当参数为负数 n 时，表示跳转到上 n 个页面。例如 go(-3) 相当于调用了三次 goBack 方法
3. 当参数为 0 时，表示刷新当前页面

一、数据图表

一张图表胜过千万句话

1.1HighChart

• 概念

兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

一、通过CDN
https://code.highcharts.com.cn/index.html
二、通过NPM下载（用的比较多）
npm install highcharts
三、通过官网下载
https://www.highcharts.com.cn/download
通过引入库的方式引入到本地

一、通过CDN 
jsdelivr.com/package/npm/echarts
二、通过NPM(通过NPM)
npm install echarts
三、通过官网
https://echarts.apache.org/zh/download.html
四、通过github
https://github.com/apache/echarts/releases

//全局引入echart
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

svn (小乌龟)
https://tortoisesvn.net/
git (命令)
github(所有开源项目的归属地)
https://github.com/
码云
https://gitee.com/
git软件
https://git-scm.com/

无论是gihub还是码云，他们都是用git命令去操作的。所以命令都一样

git软件的安装，下一步，下一步，傻瓜式安装即可

装成功的状态： 鼠标右键看到 git Bash Here 就OK

2.2创建一个远程仓库 （新项目）

先去GitHub/码云创建一个新的远程仓库，然后把本地暂缓区的内容提交到远程仓库

一、登录github/码云输入用户名密码
二、新建一个远程仓库，在官网右上角（点击+ ）
三、创建一个仓库名称，添加仓库描述，创建一个公有的仓库，不需要为仓库创建其他内容

在公司的创建一个新项目的骚操作

一般这一部分，轮不到大家去做。

一、在本地创建一个文件夹，创建相关的基本骨架
二、初始化当前文件夹变成本地仓库(会出现一个.git的隐藏文件)
git init
三、本地的所有内容上传到暂缓区
git add . 
四、提交的时候要做记录
git commit -m '尽量写英文，非要写写中文也可以'
五、链接远程仓库
git remote add origin https://gitee.com/zhangzhangzhangdada/shop-admin.git
六、把暂缓区的内容推送到远程仓库  (master 默认的分支名字)
git push -u origin master

原文：https://blog.csdn.net/weixin_49030317/article/details/116666179

数组的循环
    一、forEach（）
    二、map（）
    三、filter（）
    四、reduce（）与reduceRight()
    五、every（）
    六、some（）
    七、find（）与findIndex（）
    八、 for in
    九、 for of
    十、 for    
总结
数组的循环
一、forEach（）
对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。
参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var arr = [1, 2, 3, 4, 5];
  arr.forEach(function (item, index, arr) {
      console.log(item, index, arr);
      // item:遍历的数组内容,index:第对应的数组索引，arr:数组本身。
  });

二、map（）

• 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
• 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身

var arr = [1, 2, 3, 4, 5];
 var arr2 = arr.map(function (item) {
   return item * item;
  });
 console.log(arr2); //[1, 4, 9, 16, 25]

三、filter（）

• “过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
• 参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身

var arr = [1, 2, 3, 4, 5];
  var arr2 = arr.filter(function (x, index) {
    return x % 2 == 0 || index >= 2;
  });
  console.log(arr2); // [2,3,4,5]

//  reduce（）
   let array = [1, 2, 3, 4, 5];
   let arrayNew = array.reduce((x, y) => {
        console.log("x===>" + x);
        console.log("y===>" + y);
        console.log("x+y===>", Number(x) + Number(y));
        return x + y;
   });
   console.log("arrayNew", arrayNew); // 15
   console.log(array); // [1, 2, 3, 4, 5]
   // reduceRight()  只是执行数组顺序为倒序

var arr = [1, 2, 3, 4, 5];
  var arr2 = arr.every(function (x) {
        return x < 8;
  });
  console.log(arr2); //true
  var arr3 = arr.every(function (x) {
        return x < 3;
  });
  console.log(arr3); // false

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x > 6;
});
console.log(arr3); // false

// find()
  let arr = [1, 2, 3, 4, 5];
  let res = arr.find(function (val, index, arr) {
    return val > 3;
  });
  console.log(res); //4
  // findIndex
  let arr = [1, 2, 3, 4, 5];
  let res = arr.findIndex(function (val, index, arr) {
    return val > 3;
  });
  console.log(res); //3

var arr = [
        { id: 1, name: "程序员" },
        { id: 2, name: "掉头发" },
        { id: 3, name: "你不信" },
        { id: 4, name: "薅一下" },
      ];
      var arrNew = [];
      for (var key in arr) {
        console.log(key);
        console.log(arr[key]);
        arrNew.push(arr[key].id);
      }
      console.log(arrNew);

var arr = [
        { name: "程序员" },
        { name: "掉头发" },
        { name: "你不信" },
        { name: "薅一下" },
      ];
      // key()是对键名的遍历；
      // value()是对键值的遍历；
      // entries()是对键值对的遍历；
      for (let item of arr) {
        console.log(item);
      }
      // 输出数组索引
      for (let item of arr.keys()) {
        console.log(item);
      }
      // 输出内容和索引
      for (let [item, val] of arr.entries()) {
        console.table(item + ":" + val);
      }

var arr = [
        { name: "程序员" },
        { name: "掉头发" },
        { name: "你不信" },
        { name: "薅一下" },
      ];
 for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        console.log(element )
    }

说实话，阅读文档并不是我们大多数人喜欢的事情，但当使用像Vue这样不断发展的现代前端框架时，很多东西会随着每一个新版本的发布而改变，你可能会错过一些后来推出的新的闪亮功能。让我们看一下那些有趣但不那么流行的功能和优化的写法。请记住，所有这些都是Vue文档的一部分。

7种Vue.js模式
1.处理加载状态
在大型应用程序中，我们可能需要将应用程序划分为更小的块，只有在需要时才从服务器加载组件。为了使这一点更容易，Vue允许你将你的组件定义为一个工厂函数，它异步解析你的组件定义。Vue只有在需要渲染组件时才会触发工厂函数，并将缓存结果，以便将来重新渲染。2.3版本的新功能是，异步组件工厂也可以返回一个如下格式的对象。

const AsyncComponent = () => ({
  // 要加载的组件（应为Promise）
  component: import('./MyComponent.vue'),
  // 异步组件正在加载时要使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 显示加载组件之前的延迟。默认值：200ms。
  delay: 200,
  // 如果提供并超过了超时，则会显示error组件。默认值:无穷。
  timeout: 3000
})

通过这种方法，你有额外的加载和错误状态、组件获取的延迟和超时等选项。

2.廉价的“v-once”静态组件
在Vue中渲染纯HTML元素的速度非常快，但有时你可能有一个包含大量静态内容的组件。在这种情况下，你可以通过在根元素中添加 v-once 指令来确保它只被评估一次，然后进行缓存，就像这样。

Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

3.递归组件

组件可以在自己的模板中递归调用自己，但是，它们只能通过 name 选项来调用。

如果你不小心，递归组件也可能导致无限循环：

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

像上面这样的组件会导致“超过最大堆栈大小”的错误，所以要确保递归调用是有条件的即(使用 v-if 最终将为 false）

4.内联模板
当特殊属性 inline-template 存在于一个子组件上时，该组件将使用它的内部内容作为它的模板，而不是将其视为分布式内容，这允许更灵活的模板编写。

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

5.动态指令参数
指令参数可以是动态的。例如，在 v-mydirective:[argument]=“value" 中， argument 可以根据组件实例中的数据属性更新！这使得我们的自定义指令可以灵活地在整个应用程序中使用。

这是一条指令，其中可以根据组件实例更新动态参数：

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})

6.事件和键修饰符

对于 .passive、.capture 和 .once 事件修饰符，Vue提供了可与 on 一起使用的前缀：

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

7.依赖注入(Provide/Inject)
有几种方法可以让两个组件在 Vue 中进行通信，它们各有优缺点。在2.2版本中引入的一种新方法是使用Provide/Inject的依赖注入。

这对选项一起使用，允许一个祖先组件作为其所有子孙的依赖注入器，无论组件层次结构有多深，只要它们在同一个父链上。如果你熟悉React，这与React的上下文功（context）能非常相似。

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

一.父传子传递

（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型}
代码示例：

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son :data='name'></son> 
  </div>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>

//子组件
<template>
  <div>{{data}}</div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  props:["data"],
};
</script>

二.子传父传递

（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法
（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的
代码示例：

//父组件
<template>
  <div>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </div>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(){
      alert('子传父')
    }
  },
};
</script>

//子组件
<template>
  <div>
    <button @click="lcalter">点我</button>
  </div>
</template>

<script>
export default {
components: { },
  name: '子组件',
  methods: {
    lcalter(){
      this.$emit('lcclick')//通过emit来触发事件
    }
  },
};
</script>

三.兄弟组件通信（bus总线）
（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
（2）在传输数据的一方引入Bus.js 然后通过Bus.e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 ， 数 据 是 以 emit(“事件名”,"参数")来来派发事件，数据是以emit(“事件名”,"参数")来来派发事件，数据是以emit()的参 数形式来传递
（3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
图片示例：

四.ref/refs（父子组件通信）

（1）ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，
（2）可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种
代码示例：

//父组件
<template>
  <div>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </div>
</template>
<script>
import child from './child.vue'
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>

//子组件
<template>
  <div>child 的内容</div>
</template>
<script>
export default {
  data () {
    return {
      name: '我是 child',
    }
  },
  methods: {
    sayHello () {
      console.log('hello');
      alert('hello');
    }
  }
}
</script>

五.Vuex通信

组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态
代码示例：

//父组件
template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>
<script>
  import ChildA from './ChildA' // 导入A组件
  import ChildB from './ChildB' // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>

//子组件A
<template>
 <div id="childA">
   <h1>我是A组件</h1>
   <button @click="transform">点我让B组件接收到数据</button>
   <p>因为点了B，所以信息发生了变化：{{BMessage}}</p>
 </div>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: 'Hello，B组件，我是A组件'
     }
   },
   computed: {
     BMessage() {
       // 这里存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg，将A组件的数据存放到store里去
       this.$store.commit('receiveAMsg', {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>

//子组件B
<template>
 <div id="childB">
   <h1>我是B组件</h1>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A，我的信息发生了变化：{{AMessage}}</p>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: 'Hello，A组件，我是B组件'
     }
   },
   computed: {
     AMessage() {
       // 这里存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg，将B组件的数据存放到store里去
       this.$store.commit('receiveBMsg', {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>

//vuex
import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   AMsg: '',
   BMsg: ''
 }
 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })

六.$parent
通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属 性和方法 ，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟root，可以获取根组件实例。
代码示例：

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

//在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。

七.sessionStorage传值

sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。
代码示例：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。
推荐一个库 good-storage ，它封装了sessionStorage ，可以直接用它的API存对象

//localStorage
 storage.set(key,val) 
 storage.get(key, def)
//sessionStorage
 storage.session.set(key, val)
 storage.session.get(key, val)

八.路由传值
使用问号传值
A页面跳转B页面时使用 this.r o u t e r . p u s h ( ’ / B ? n a m e = d a n s e e k ’ ) B 页 面 可 以 使 用 t h i s . router.push(’/B?name=danseek’) B页面可以使用 this.router.push(’/B?name=danseek’)B页面可以使用this.route.query.name 来获取A页面传过来的值
上面要注意router和route的区别
使用冒号传值
配置如下路由：

{
    path: '/b/:name',
    name: 'b',
    component: () => import( '../views/B.vue')
 },

在B页面可以通过 this.$route.params.name 来获取路由传入的name的值

使用父子组件传值
由于router-view本身也是一个组件，所以我们也可以使用父子组件传值方式传值，然后在对应的子页面里加上props，因为type更新后没有刷新路由，所以不能直接在子页面的mounted钩子里直接获取最新type的值，而要使用watch

<router-view :type="type"></router-view>

// 子页面
props: ['type']
watch: {
       type(){
           // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
       },
},

九.祖传孙 $attrs

正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改
祖组件：

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from './Parent'
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from './Children'

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:['name'],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:['sex','age','hobby','name'],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit('sayKnow','我知道啦')
      }
    },
    mounted() {
    }
  }
</script>

十.孙传祖使用$listeners

文字内容同第九个

祖组件

<template>
  <div id="app">
    <children-one @eventOne="eventOne"></children-one>
    {{ msg }}
  </div>
</template>
<script>
import ChildrenOne from '../src/components/children.vue'
export default {
  name: 'App',
  components: {
    ChildrenOne,
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    eventOne(value) {
      this.msg = value
    }
  }
}
</script>

//父组件
<template>
  <div>
    <children-two v-on="$listeners"></children-two>
  </div>
</template>

<script>
import ChildrenTwo from './childrenTwo.vue'

export default {
  name: 'childrenOne',
  components: {
    ChildrenTwo
  }
}
</script>

//子组建
<template>
  <div>
    <button @click="setMsg">点击传给祖父</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  methods: {
    setMsg() {
      this.$emit('eventOne', '123')
    }
  }
}
</script>

十一.promise传参

promise 中 resolve 如何传递多个参数

//类似与这样使用，但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。
如果想多个用数组，或者对象方式。。
数组

promise = new Promise((resolve,reject)=>{
    resolve([1,2,3]) 
})
promise.then((arr)=>{
    console.log(arr[0],arr[1],arr[2])
})

对象

promise = new Promise((resolve,reject)=>{
    resolve({a:1,b:2,c:3}) 
})
promise.then(obj=>{
    console.log(obj.a,obj.b,obj.c)
})

十二.全局变量

定义一个全局变量，在有值的组件直接赋值，在需要的组件内直接使用就可以了

本文链接：https://blog.csdn.net/Frazier1995/article/details/116069811

六种基本数据类型

undefined
null
string
boolean
number
symbol(ES6)

• 一种引用类型
  

• Object

string

1. length属性
2. prototype 添加的方法或属性在所有的实例上共享
3. charAt(index) 返回值
4.  charCodeAt(index) 返回字符的Unicode编码
5.  indexOf(searchVal，index) 值所在的位置 param2是从位置开始算
6. search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符

var str = 'abcDEF'; 
console.log(str.search('c')); //返回2 
console.log(str.search('d')); //返回-1
console.log(str.search(/d/i)); //返回3

Object

1. 对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。

前端错误的分类

即时运行错误：代码错误

资源加载错误

错误的捕获方式

代码错误

try...catch

window.onerror

资源错误

object.onerror(不会冒泡到window)：节点上绑定error事件

performance.getEntries:获取资源的加载时长

error的事件捕获：用捕获不用冒泡可以监控

上报错误的基本原理

1.ajax通讯方式上报

2.image对象上报

跨域的代码错误怎么捕获

//第一种：字面量
 var o1 = {name: 'o1'};
 var o2 = new Object({name: 'o2'});
//第二种  通过构造函数
 var M = function (name) { this.name = name; };
 var o3 = new M('o3');
//第三种  Object.create
 var p = {name: 'p'};
 var o4 = Object.create(p);

1，构造函数
fn Animal(){
this.name = 'name'
}
2，ES6class的声明
class Animal2 {
//↓↓构造函数
constructor(){
this.name=name
}
}
实例化类
console.log(new Animal(),new Animal2())

fn parent1（）{
this.name= 'parent1'
}
parent1.prototype.say(){
console.log('hello')
}
fn child1() {
parent1.call(this)
this.type='child1'
}

fn parent2(){
this.name= 'parent2'
this.play=[1,2,3]
}
fn child2() {
this.type='child2'
}
child2.prototype = new parent2()
  var s1 = new Child2();
  var s2 = new Child2();
   s1.play.push(4);

fn parent3(){
this.name= 'parent3'
this.play=[1,2,3]
}
fn child3() {
parent3.call(this)
this.type='child2'
}
child3.prototype = new parent3()
 var s3 = new Child3();
 var s4 = new Child3();
 s3.play.push(4);
console.log(s3.play,s4.play)

fn parent4(){
this.name= 'parent4'
this.play=[1,2,3]
}
fn child4() {
parent4.call(this)
this.type='child4'


}
child4.prototype = parent4.prototype
 var s5 = new Child4();
 var s6 = new Child4();
console.log(s5 instance child4,s5 instance parent4)//true true
console.log(s5.constructor)//parent4
缺点：区分不了s5是child4还是parent4的实例
//优化方式
fn parent5(){
this.name= 'parent5'
this.play=[1,2,3]
}
fn child5() {
parent5.call(this)
this.type='child5'
}
child5.prototype = Object.creat(parent5.prototype)
//此时还是找不到  创建一下constructor可解决
child5.prototype.constructor = child5
 var s7 = new Child5();
console.log(s7 instance child4,s7 instance parent4)//true true
console.log(s7.constructor)//child5

DOM事件的级别

DOM0

element.onclick=function(){}

DOM1

未制定事件相关的标准

DOM2

element.add('click',fn,false)/ie . atench

DOM3

el.add('keyup',fn,false)增加了其他事件除了click

DOM事件的模型：捕获和冒泡

DOM事件流

三个j阶段

捕获 。 目标阶段 。 冒泡阶段

事件捕获的具体流程

window=>document=>html=>body=>.....目标

冒泡则相反

event对象的常见应用

event.preventDefalut . 阻止默认行为

event.stopPropagation . 阻止冒泡

event.stoplmmediatePropagation . 事件响应优先级

事件代理

event.currentTarget 当前绑定的事件的对象

event.target 返回触发事件的元素

currentTarget在事件流的捕获，冒泡阶段。只有当事件流处在冒泡阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，

target指向被单击的对象

currentTarget指向当前事件活动的对象（一般为父级）。

自定义事件

let eve = new Event('eveName')/new CustomEvent可以加参数Obj

//注册

ev.addEventListener('eveName',fn)

//触发

ev.dispatchEvent(eve)

HTTP

http协议包括 ：通用头域、请求消息、响应消息和主体信息。

特点

简单快速

每个资源得url是固定得

灵活

无连接

连接一次就会断掉

无状态

服务端不记录客户端连接得身份

报文得组成部分

请求报文

请求行

http方法

页面地址

http协议以及http版本

请求头

key value值告诉服务端我要哪些内容

空行

隔断

请求体

数据

响应报文

状态行

协议 状态吗

响应头

key value

空行

隔断

相应体

数据

http方法

get 获取资源

post 传输资源

put 更新资源

delete 删除资源

HEAD 获取报文首部

POST和GET区别（记住以下三个以上1，3，4，6，9）

HTTP状态码

持久链接

http1.1版本支持

管线化

1. 管线化得特点和原理
2. 请求和响应打包返回
3. 持续连接完成后进行的且需要1.1版本的支持
4. 管线化只有get和head可以进行 post有限制
5. 管线化默认chrome和firefox默认不开启，初次连接的时候可能不支持，需要服务端的支持

基础方法

1:浮动（延伸BFC）

清除浮动后 浮动元素周边的元素处理的好的话 。 兼容性比较好

2:绝对定位

配合js的话 快捷

缺点：脱离文档流

3:flex

比较完美的方案 。 解决以上的缺点

4:表格布局

兼容性特别好 ie

缺点：。。

5:网格布局 gride

新的标准

代码最简化哈

拔高延续

1:如过去掉高度已知 。 哪个不在好用？

第三和第四能用

2:竖起来

3:两栏布局

你在下单时，要给后台发请求，后台通过拿到的参数请求微信后台去生成订单并同时返给你一个路径mweb_url，这个路径就是用来调起微信应用发起支付操作的。（这里要说明的就是由于h5支付不能主动回调，所以需要个主动查询的操作，这时会需要你又一个确认界面来进行主动查询订单状态。这里是个坑一会儿再说），调起支付界面之后进行支付操作，期间你什么都不用管，因为这都是微信的事。你需要的就是在你付完钱之后查看你的钱买你要的东西到底有没有成功（你要是不加的话，谁知道成功没，估计顾客会打死你，付完钱就茫然了，不知道到底钱到哪去了→_→）

普通函数中的this:

1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this

默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window（即继承父级的this）;

下面通过一些例子来研究一下 this的一些使用场景

call

call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89

1 dom有元素 页面不渲染

首页 scoped 不加 导致引入的tab分类无法加载图片

原因未知 此处感觉不太球对 瞎吉儿改的

2:懒加载问题

3.vue router

repalce push go

4css使图片置灰

-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;

获取字符串长度 str.length

分割字符串 str.split()

拼接字符串 str1+str2 或 str1.concat(str2)

替换字符串 str.replace(“玩游戏”,”好好学习”)

提取子字符串 str.slice(start, end)或str.substring(start,end)或myStr.substr(start,length)

切换字符串大小写 str.toLowerCase()和str.toUpperCase()

比较字符串 str1.localeCompare(str2)

匹配字符串 str.match(pattern)或pattern.exec(str)或str.search(pattern)

根据位置查字符 str.charAt(index)

根据位置字符Unicode编码 str.charCodeAt(index)

根据字符查位置 str.indexOf(“you”)从左，myStr.lastIndexOf(“you”)从尾 或str.search(‘you’)

原始数据类型转字符串 String(数据) 或利用加号

字符串转原始数据类型 数字Number(”) // 0 布尔Boolean(”) // 0

自己构建属性和方法 String.prototype.属性或方法= function(参数){代码}

----------

箭头函数需要注意的地方

*当要求动态上下文的时候，就不能够使用箭头函数，也就是this的固定化。

1、在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象；

2、不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误；

3、不能够使用arguments对象；

4、不能使用yield命令；

-------------------------

let和const

 *let是更完美的var，不是全局变量，具有块级函数作用域,大多数情况不会发生变量提升。const定义常量值，不能够重新赋值，如果值是一个对象，可以改变对象里边的属性值。

1、let声明的变量具有块级作用域

2、let声明的变量不能通过window.变量名进行访问

3、形如for(let x..)的循环是每次迭代都为x创建新的绑定

依次输出的问题

1:立即执行函数

2:闭包

3:let

--------------------------------

Set数据结构

*es6方法,Set本身是一个构造函数，它类似于数组，但是成员值都是唯一的。

--------------------------------

-------------------------------------

promise 案例较多 。 建议看代码

http://www.cnblogs.com/fengxiongZz/p/8191503.html

常用api

moveTo(x0,y0)：把当前画笔（ictx）移动到（x0,y0）这个位置。

lineTo(x1,y1):从当前位置(x0,y0)处到（x1，y1）画一条直线。

beginPath()：开启一条路径或者重置当前路径。

closePath():从当前点回到路径起始点，也就是上一个beginPath的位置,回避和路径。

stroke():绘制。必须加了这个函数才会画图，所以这个一定要放在最后。

绘制一个圆形

/获取Canvas对象(画布)

var canvas = document.getElementById("myCanvas");

//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误

if(canvas.getContext){

//获取对应的CanvasRenderingContext2D对象(画笔)

var ctx = canvas.getContext("2d");

//开始一个新的绘制路径

ctx.beginPath();

//设置弧线的颜色为蓝色

ctx.strokeStyle = "blue";

var circle = {

x : 100, //圆心的x轴坐标值

y : 100, //圆心的y轴坐标值

r : 50 //圆的半径

};

//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线

ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);

//按照指定的路径绘制弧线

ctx.stroke();

}

------

深拷贝

深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个

1:不仅可拷贝数组还能拷贝对象（但不能拷贝函数）

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}] var new_arr = JSON.parse(JSON.stringify(arr)) console.log(new_arr);

2:下面是深拷贝一个通用方法，实现思路：拷贝的时候判断属性值的类型，如果是对象，继续递归调用深拷贝函数

var deepCopy = function(obj) {

// 只拷贝对象

if (typeof obj !== 'object') return;

// 根据obj的类型判断是新建一个数组还是一个对象

var newObj = obj instanceof Array ? [] : {};

for (var key in obj) {

// 遍历obj,并且判断是obj的属性才拷贝

if (obj.hasOwnProperty(key)) {

// 判断属性值的类型，如果是对象递归调用深拷贝

newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];

}

}

return newObj;

}

浅拷贝

数组的浅拷贝，可用concat、slice返回一个新数组的特性来实现拷贝for in

var arr = ['old', 1, true, null, undefined];

var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一样的效果;

new_arr[0] = 'new';

console.log(arr); // ["old", 1, true, null, undefined]

console.log(new_arr); // ["new", 1, true, null, undefined]

-------------------------------------------

数组常用的方法

map此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

let arr = [1, 2, 3, 4, 5]

    let newArr = arr.map(x => x*2)

    //arr= [1, 2, 3, 4, 5]   原数组保持不变

    //newArr = [2, 4, 6, 8, 10] 返回新数组

forEach此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分

let arr = [1, 2, 3, 4, 5]

   num.forEach(x => x*2)

    // arr = [2, 4, 6, 8, 10]  数组改变,注意和map区分

filter()此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

let arr = [1, 2, 3, 4, 5]

     const isBigEnough => value => value >= 3

     let newArr = arr.filter(isBigEnough )

     //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

reduce()此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：

let arr = [1, 2, 3, 4, 5]

    const add = (a, b) => a + b

    let sum = arr.reduce(add)

    //sum = 15  相当于累加的效果

    与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的

push/pop

push:数组后面添加新元素，改变数组的长度

pop：数组删除最后一个元素 。 也改变长度

shift/unshift

shift：删除第一个元素 。 改变数组的长度

unshift：将一个或多个添加到数组开头 。 返回数组长度

isArray：返回bool

cancat：合并数组

toString：数组转字符串

join（"--"）:数组转字符串 。 间隔可以设置

splice（开始位置，删除个数，元素）万能方法 增删改

------------------------------------------------

判断是不是数组的方法

var arr = [1,2,3,1];

var arr2 = [{ abac : 1, abc : 2 }];

function isArrayFn(value){

if (typeof Array.isArray === "function") {

//判断是否支持isArray ie8之前不支持

return Array.isArray(value);

}else{

return Object.prototype.toString.call(value) === "[object Array]";

}

}

alert(isArrayFn(arr));// true

alert(isArrayFn(arr2));// true

1.IE6或更低版本最多20个cookie

2.IE7和之后的版本最后可以有50个cookie。

3.Firefox最多50个cookie

4.chrome和Safari没有做硬性限制

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

优点：极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

如何理解CSS的盒子模型？

每个HTML元素都是长方形盒子。 （1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。 （2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。

link属于XHTML标签，而@import是CSS提供的。 （2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。 （3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。 （4）link方式的样式权重高于@import的权重。 （5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

id选择器（# myid） 类选择器（.myclassname） 标签选择器（div、h1、p） 相邻选择器（h1 + p） 子选择器（ul < li） 后代选择器（li a） 通配符选择器（ * ） 属性选择器（a[rel = "external"]） 伪类选择器（a: hover, li: nth - child） 可继承： font-size font-family color, UL LI DL DD DT;

不可继承 ：border padding margin width height ;

优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。 优先级为： !important > id > class > tag important 比 内联优先级高 CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。 p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。 p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。 p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。

（1）png24为的图片在IE6浏览器上出现背景，解决方案是做成PNG8。

（2）浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。

（3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在IE 6显示margin比设置的大。

（4）浮动ie产生的双边距问题：块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table。 .bb{

background-color:#f1ee18; /*所有识别*/

.background-color:#00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff; /*IE6、7识别*/

_background-color:#1e0bd1; /*IE6识别*/ }

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，

就当他从来不存在。

visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

将元素定义为网格容器，并为其内容建立新的 网格格式上下文。

值：

• grid ：生成一个块级网格
• inline-grid ：生成一个内联网格

在Bootstrap中，栅格系统将容器均分为12份，再调整内外边距，结合媒体查询，造就了这一强大的栅格系统。

flex布局

水平居中：

1. 行内元素，父元素 text-align : center

2. 块级元素有定宽，margin:0 auto;

3. 块级元素绝对定位，transform : translate（-50%，0）；

4. 块级元素绝对定位，并且知道宽度， margin-left: - 宽度的一半            

5. 块级元素绝对定位，left:0;  right:0; margin:0 auto

垂直居中

1. 若元素是单行文本, 则可设置 line-height 等于父元素高度，原理见上面；

2. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央..parent::after, .son{ display:inline-block; vertical-align:middle; }

3. 使用flex, 在父元素上面添加.parent { display: flex; align-items: center;

4. 绝对定位的块用 transform: translate(0, -50%)

5. 绝对定位，并且有定高， margin-top : -高度的一半          注意不要用 margin-bottom,  不会生效的

6. 设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; } 

重绘重排

重绘是一个元素的外观变化所引发的浏览器行为；

重排是引起DOM树重新计算的行为；

1、回流/重排

渲染树的一部分必须要更新且节点的尺寸发生了变化，会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。

2、重绘

部分节点需要更新，但没有改变其形状，会触发重绘操作。

会触发重绘或回流/重排的操作

1、添加、删除元素(回流+重绘)

2、隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

3、移动元素，如改变top、left或移动元素到另外1个父元素中(重绘+回流)

4、改变浏览器大小(回流+重绘)

5、改变浏览器的字体大小(回流+重绘)

6、改变元素的padding、border、margin(回流+重绘)

7、改变浏览器的字体颜色（只重绘，不回流）

8、改变元素的背景颜色（只重绘，不回流）

深入浏览器理解CSS animations 和 transitions的性能问题

GPU的快在于：

1. 绘制位图到屏幕上
2. 一遍又一遍地绘制相同的位图
3. 将同一位图绘制到不同位置，执行旋转以及缩放处理

GPU 的慢在于：

1. 将位图加载到它的内存中

在使用height，width，margin，padding作为transition的值时，会造成浏览器主线程的工作量较重，例如从margin-left：-20px渲染到margin-left:0，主线程需要计算样式margin-left:-19px,margin-left:-18px，一直到margin-left:0，而且每一次主线程计算样式后，合成进程都需要绘制到GPU然后再渲染到屏幕上，前后总共进行20次主线程渲染，20次合成线程渲染，20+20次，总计40次计算。

在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。

transform为我们提供了丰富的api，例如scale，translate，rotate等等，但是在使用时需要考虑兼容性。但其实对于大多数css3来说，mobile端支持性较好，desktop端支持性需要格外注意。

物理像素（physical pixel） 

即：设备像素（device pixel）。 

本质是屏幕上的点，这个是跟设备有关系

CSS像素（css pixel） 

指的是CSS样式代码中使用的逻辑像素（或者叫虚拟像素）。 

软件要在设备上显示，css规定了长度单位（绝对单位和相对单位），比如：px 是一个 相对单位 ，相对的是 物理像素（physical pixel）

设备像素比（device pixel ratio） dpr 

公式：物理像素数（硬件） / 逻辑像素数（软件），即（物理像素/CSS像素）。 

在css中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同dpr的设备，做一些样式适配。 

如： dpr = 2 时，1个CSS像素 = 4个物理像素。因为像素点都是正方形，所以当1个CSS像素需要的物理像素增多2倍时，其实就是长和宽都增加了2倍 

px em rem的区别

PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。

另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，输入数据就可以px和em相互计算。

Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。

• JS中浮点数精度误差解决
  • 如果有精度要求，可以用toFixed方法处理
  • 通用处理方案：把需要计算的数字乘以 10 的 n 次幂，换算成计算机能够精确识别的整数，然后再除以 10 的 n 次幂
• promises，observables，generator 或 async-wait 编所需的函数。
•  JavaScript Proxy实现简单的数据绑定
  • https://blog.csdn.net/sinat_17775997/article/details/60158330
  • https://www.jianshu.com/p/3a6e3e0ab941?from=timeline&isappinstalled=0
• “new” 关键字在 JavaScript 中有什么作用？

 new 运算符是用来实例化一个类，从而在内存中分配一个实例对象。

 通过new可以产生原对象的一个实例对象，而这个实例对象继承了原对象的属性和方法。因此， new存在的意义在于它实现了javascript中的继承，而不仅仅是实例化了一个对象！

• JavaScript 中有哪些不同的函数调用模式？ 详细解释。 提示：有四种模式，函数调用，方法调用，.call() 和 .apply()。

1. 函数模式 fn()
2. 方法模式 a.fn()
3. 构造器模式 new
4. 上下文模式 call apply

/*apply()方法*/两个参数 function.apply(thisObj[, argArray]) /*call()方法*/多个参数 function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

• 新 ECMAScript 提案

https://www.cnblogs.com/fundebug/p/what-is-new-in-javascript-for-2019.html

bigint

class 增加静态方法和属性 私有属性和方法

symbol值在序列化的过程中会被忽略或被转换成null

Fetch API 相对于传统的 Ajax 有哪些改进？

改进：promise 风格的api，async/await方式调用更友好，更简洁，错误处理更直观

缺点/难点：

• fetch 是一种底层的 api，json传值必须转换成字符串，并且设置content-Type为application/json
• fetch 默认情况下不会发送 cookie
• 无法获取progress，也就是说无法用fetch做出有进度条的请求
• 不能中断，我们知道传统的xhr是可以通过调用abort方法来终止我们的请求的

其实javasript的社区一直很活跃，相信上述问题很快会在未来的更新中解决

1. 一个程序至少有一个进程,一个进程至少有一个线程

2. 线程的划分尺度小于进程，使得多线程程序的并发性高

3. 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率

4. 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制 

5. 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别

------------

1.IE6或更低版本最多20个cookie

2.IE7和之后的版本最后可以有50个cookie。

3.Firefox最多50个cookie

4.chrome和Safari没有做硬性限制

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

优点：极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

本文链接：https://blog.csdn.net/kincaid_z/article/details/116530326

待完善

 IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;

new操作符具体干了什么呢?

1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

2. 属性和方法被加入到 this 引用的对象中

3. 新创建的对象由 this 所引用，并且最后隐式的返回 this

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

2. 闭包

3. 控制台日志

4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：

1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。

2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制

Ajax 同步和异步的区别:

1. 同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事

2. 异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕

js数组去重

[1,1,2,2,3,3,3,3].filter(function(elem, index, self) {

///结果是true的时候返回后面的值

    return index == self.indexOf(elem);

})

1. XSS

2. sql注入

3. CSRF：是跨站请求伪造，很明显根据刚刚的解释，他的核心也就是请求伪造，通过伪造身份提交POST和GET请求来进行跨域的攻击

完成CSRF需要两个步骤：

1. 登陆受信任的网站A，在本地生成 COOKIE

2. 在不登出A的情况下，或者本地 COOKIE 没有过期的情况下，访问危险网站B。

2.HTTP 报文的组成部分

请求报文

1.请求行:http方法、页面地址、协议、版本

2.请求头:key、value告诉服务端需要内容，注意什么类型

3.空行:告诉服务端请求头已经结束

4.请求体

响应报文

1.状态行:协议、版本、状态码

2.响应头

3.空行

4.响应体:文档部分

• TCP/IP 四层协议: 应用层、传输层、网络互连层和主机到网络层. http对应应用层
• ISO 七层模型: 物理层, 数据链路层, 网络层, 传输层, 会话层, 表示层, 应用层.  http对应应用

流行的一些东西：

1. Node.js

2. Mongodb

3. npm

4. MVVM

5. MEAN

6. three.js

7. React

本文链接：https://blog.csdn.net/kincaid_z/article/details/116530326

很简单一个问题,0.1+0.2,我们肉眼可见的算出来等于0.3,但js是一个神奇的语言,我们在控制台输入0.1+0.2等于0.30000000000000004,为什么会这样尼,我百度了了一下,原因如下:

JavaScript 中所有数字包括整数和小数都只有一种类型 — Number。它的实现遵循 IEEE 754 标准，使用 64 位固定长度来表示，也就是标准的 double 双精度浮点数（相关的还有float 32位单精度）。0.1的二进制表示的是一个无限循环小数，该版本的 JS 采用的是浮点数标准需要对这种无限循环的二进制进行截取，从而导致了精度丢失，造成了0.1不再是0.1，截取之后0.1变成了 0.100…001，0.2变成了0.200…002。所以两者相加的数大于0.3。

原因就是这么个奇葩,做需求的时候涉及到数字计算,那就得解决它老人家这个毛病,解决这个问题,我一般会封装成一个文件,到后面需要的地方可以模块化引入,并使用

1.判断obj是否为一个整数

export const  isInteger = (obj) => {
    return Math.floor(obj) === obj //向下取整就是为了让整数部分截取下来不变
}

2.将一个浮点数转成整数，返回整数和倍数

比如:3.14 -->314，倍数是 100 ,floatNum {number} 小数,返回一个对象, {times:100, num: 314}

export const toInteger = (floatNum) => {
    var ret = {times: 1, num: 0};
    if (isInteger(floatNum)) {
        ret.num = floatNum;
        return ret
    }
    //1.//转字符串
    var strfi = floatNum + '';  
    //2.//拿到小数点为
    var dotPos = strfi.indexOf('.');  
    //3. //截取需要的长度
    var len = strfi.substr(dotPos + 1).length;
    //4.倍数就是长度的幂
    var times = Math.pow(10, len);
    var intNum = parseInt(floatNum * times , 10);
    ret.times = times;
    ret.num = intNum;
    return ret
}

3.把小数放大为整数（乘），进行算术运算，再缩小为小数（除）

1. 参数:a {number} 运算数1
2. b:{number} 运算数2,
3. op {string} 运算类型，有加减乘除（add/subtract/multiply/divide)

export const operation = (a, b, op) => {
    var o1 = toInteger(a);
    var o2 = toInteger(b);
    var n1 = o1.num;
    var n2 = o2.num;
    var t1 = o1.times;
    var t2 = o2.times;
    var max = t1 > t2 ? t1 : t2;
    var result = null;
    switch (op) {
        case 'add':
            if (t1 === t2) { // 两个小数位数相同
                result = n1 + n2
            } else if (t1 > t2) { // o1 小数位 大于 o2
                result = n1 + n2 * (t1 / t2)
            } else { // o1 小数位 小于 o2
                result = n1 * (t2 / t1) + n2
            }
            return result / max;
        case 'subtract':
            if (t1 === t2) {
                result = n1 - n2
            } else if (t1 > t2) {
                result = n1 - n2 * (t1 / t2)
            } else {
                result = n1 * (t2 / t1) - n2
            }
            return result / max;
        case 'multiply':
            result = (n1 * n2) / (t1 * t2);
            return result;
        case 'divide':
            result = (n1 / n2) * (t2 / t1);
            return result
    }
}

在创建JavaScript模块时，export 用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import使用它们。
被导出的绑定值依然可以在本地进行修改。
在使用import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。

exports

ES6模块只支持静态导出，只可以在模块的最外层作用域使用export，不可在条件语句与函数作用域中使用。

Named exports (命名导出)

这种方式主要用于导出多个函数或者变量, 明确知道导出的变量名称。
使用：只需要在变量或函数前面加 export 关键字即可。
使用场景：比如 utils、tools、common 之类的工具类函数集，或者全站统一变量

1. export 后面不可以是表达式，因为表达式只有值，没有名字。
2. 每个模块包含任意数量的导出。

// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}


// index.js 使用方式1
import { square, diag } from 'lib';
console.log(square(11)); // 121

// index.js 使用方式2
import * as lib from 'lib';
console.log(lib.square(11)); // 121

// lib.js
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add (x, y) {
    return x + y;
}
export { sqrt, square, add };

export default 123;

// myFunc.js
export default function () { ... };

// index.js
import myFunc from 'myFunc';
myFunc();

// MyClass.js
class MyClass{
  constructor() {}
}
export default MyClass;
// 或者
export { MyClass as default, … };

// index.js
import MyClass from 'MyClass';

// lib.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
  ...
}
export function* myGeneratorFunc() {
  ...
}
export default class MyClass {
  ...
}

// index.js
import MyClass, { myValue, myFunc } from 'lib';

// lib.js
function getName() {
   ...
};
function setName() {
  ...
};

export {
  getName as get,
  getName as getUserName,
  setName as set
}

export * from 'lib'; // 没有设置 export default
export * as myFunc2 from 'myFunc'; // 【ES2021】没有设置 export default

export { default as function1, function2 } from 'bar.js';

import { default as function1, function2 } from 'bar.js';
export { function1, function2 };

import DefaultExport from 'bar.js'; // 有效的
export DefaultExport from 'bar.js'; // 无效的

export { default as DefaultExport } from 'bar.js';

// Named imports
import { foo, bar as b } from './some-module.mjs';

// Namespace import
import * as someModule from './some-module.mjs';

// Default import
import someModule from './some-module.mjs';

// Combinations:
import someModule, * as someModule from './some-module.mjs';
import someModule, { foo, bar as b } from './some-module.mjs';

// Empty import (for modules with side effects)
import './some-module.mjs';

关于前端防御性编程

• 我们大多数情况可能遇到过，后端的由于同时请求人数过多，或者数据量过大，又或者是因为异常导致服务异常，接口请求失败，然后前端出现白屏或者报错
• 还有一种情况，是前端自身写的代码存在一些缺陷，整个系统不够健壮，从而会出现白屏，或者业务系统异常，用户误操作等
• 那么，就出现了前端防御性编程

常见的问题和防范

1.最常见的问题:

uncaught TypeError: Cannot read property 'c' of undefined

出现这个问题最根本原因是：

当我们初始化一个对象obj为{}时候,obj.a这个时候是undefined.我们打印obj.a可以得到undefined,但是我们打印obj.a.c的时候，就会出现上面的错误。js对象中的未初始化属性值是undefined,从undefined读取属性就会导致这个错误(同理，null也一样)

如何避免?

js和ts目前都出现了一个可选链概念,例如：

const obj = {};

console.log(obj?.b?.c?.d)

上面的代码并不会报错，原因是?.遇到是空值的时候便会返回undefined.

2.前端接口层面的错误机制捕获

前端的接口调用，一般都比较频繁，我们这时候可以考虑使用单例模式,将所有的axios请求都用一个函数封装一层。统一可以在这个函数中catch捕获接口调用时候的未知错误，伪代码如下：

function ajax(url,data,method='get'){

  const promise = axios[method](url,data)

  return  promise.then(res=>{

  }).catch(error){

  //统一处理错误

}

}

那么只要发生接口调用的未知错误都会在这里被处理了

3.错误边界（Error Boundaries,前端出现未知错误时，展示预先设定的UI界面）

以React为例

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

使用示例：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

注意

• 错误边界无法捕获以下场景中产生的错误：

  • 事件处理（了解更多）
  • 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
  • 服务端渲染
  • 它自身抛出来的错误（并非它的子组件）

4.前端复杂异步场景导致的错误

• 这个问题可能远不止这么简单，但是大道至简，遵循单向数据流的方式去改变数据，例如：

• //test.js
  export const obj = {
    a:1,
    b:2
  }
  
  //使用obj
  import {obj} from './test.js';
  obj.a=3;

  当你频繁使用这个obj对象时，你无法根据代码去知道它的改变顺序（即在某个时刻它的值是什么）,而且这里面可能存在不少异步的代码，当我们换一种方式，就能知道它的改变顺序了,也更方便我们debug

  例如：//test.js

  export const obj = {
    a:1,
    b:2
  }
  export function setObj (key,value)  {
    console.log(key,value)
    obj[key] = value
  }

  这样，我们就做到了

  5.前端专注“前端”

  • 对于一些敏感数据，例如登录态，鉴权相关的。前端应该是尽量做无感知的转发、携带（这样也不会出现安全问题）

  6.页面做到可降级

  • 对于一些刚上新的业务，或者有存在风险的业务模块，或者会调取不受信任的接口，例如第三方的接口，这个时候就要做一层降级处理，例如接口调用失败后，剔除对应模块的展示，让用户无感知的使用

  7.巧用loading和disabled

  • 用户操作后，要及时loading和disabled确保不让用户进行重复，防止业务侧出现bug

  8.慎用innerHTML

  • 容易出现安全漏洞，例如接口返回了一段JavaScript脚本，那么就会立即执行。此时脚本如果是恶意的，那么就会出现不可预知的后果，特别是电商行业，尤其要注意

  
  

this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，但是相信很多JsvaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗？

请先回答第一个问题：如何准确判断this指向的是什么？【面试的高频问题】

【图片来源于网络，侵删】

再看一道题，控制台打印出来的值是什么？【浏览器运行环境】

var number = 5;
var obj = {
    number: 3,
    fn1: (function () {
        var number;
        this.number *= 2;
        number = number * 2;
        number = 3;
        return function () {
            var num = this.number;
            this.number *= 2;
            console.log(num);
            number *= 3;
            console.log(number);
        }
    })()
}
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);

如果你思考出来的结果，与在浏览中执行结果相同，并且每一步的依据都非常清楚，那么，你可以选择继续往下阅读，或者关闭本网页，愉快得去玩耍。如果你有一部分是靠蒙的，或者对自己的答案并不那么确定，那么请继续往下阅读。

毕竟花一两个小时的时间，把this彻底搞明白，是一件很值得事情，不是吗？

本文将细致得讲解this的绑定规则，并在最后剖析前文两道题。

为什么要学习this?

首先，我们为什么要学习this？

1. this使用频率很高，如果我们不懂this，那么在看别人的代码或者是源码的时候，就会很吃力。
2. 工作中，滥用this，却没明白this指向的是什么，而导致出现问题，但是自己却不知道哪里出问题了。【在公司，我至少帮10个以上的开发人员处理过这个问题】
3. 合理的使用this，可以让我们写出简洁且复用性高的代码。
4. 面试的高频问题，回答不好，抱歉，出门右拐，不送。

不管出于什么目的，我们都需要把this这个知识点整的明明白白的。

OK，Let's go!

this是什么？

言归正传，this是什么？首先记住this不是指向自身！this 就是一个指针，指向调用函数的对象。这句话我们都知道，但是很多时候，我们未必能够准确判断出this究竟指向的是什么？这就好像我们听过很多道理 却依然过不好这一生。今天咱们不探讨如何过好一生的问题，但是呢，希望阅读完下面的内容之后，你能够一眼就看出this指向的是什么。

为了能够一眼看出this指向的是什么，我们首先需要知道this的绑定规则有哪些？

1. 默认绑定
2. 隐式绑定
3. 硬绑定
4. new绑定

上面的名词，你也许听过，也许没听过，但是今天之后，请牢牢记住。我们将依次来进行解析。

默认绑定

默认绑定，在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用。

function sayHi(){

    console.log('Hello,', this.name);

}

var name = 'YvetteLau';

sayHi();

在调用Hi()时，应用了默认绑定，this指向全局对象（非严格模式下），严格模式下，this指向undefined，undefined上没有this对象，会抛出错误。

上面的代码，如果在浏览器环境中运行，那么结果就是 Hello,YvetteLau

但是如果在node环境中运行，结果就是 Hello,undefined.这是因为node中name并不是挂在全局对象上的。

本文中，如不特殊说明，默认为浏览器环境执行结果。

隐式绑定

函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的形式为 XXX.fun().我们来看一段代码：

function sayHi(){

    console.log('Hello,', this.name);

}

var person = {

    name: 'YvetteLau',

    sayHi: sayHi

}

var name = 'Wiliam';

person.sayHi();

打印的结果是 Hello,YvetteLau.

sayHi函数声明在外部，严格来说并不属于person，但是在调用sayHi时,调用位置会使用person的上下文来引用函数，隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象（即此例中的person）

需要注意的是：对象属性链中只有最后一层会影响到调用位置。

function sayHi(){

    console.log('Hello,', this.name);

}

var person2 = {

    name: 'Christina',

    sayHi: sayHi

}

var person1 = {

    name: 'YvetteLau',

    friend: person2

}

person1.friend.sayHi();

结果是：Hello, Christina.

因为只有最后一层会确定this指向的是什么，不管有多少层，在判断this的时候，我们只关注最后一层，即此处的friend。

隐式绑定有一个大陷阱，绑定很容易丢失(或者说容易给我们造成误导，我们以为this指向的是什么，但是实际上并非如此).

function sayHi(){

    console.log('Hello,', this.name);

}

var person = {

    name: 'YvetteLau',

    sayHi: sayHi

}

var name = 'Wiliam';

var Hi = person.sayHi;

Hi();

结果是: Hello,Wiliam.

这是为什么呢，Hi直接指向了sayHi的引用，在调用的时候，跟person没有半毛钱的关系，针对此类问题，我建议大家只需牢牢继续这个格式:XXX.fn();fn()前如果什么都没有，那么肯定不是隐式绑定，但是也不一定就是默认绑定，这里有点小疑问，我们后来会说到。

除了上面这种丢失之外，隐式绑定的丢失是发生在回调函数中(事件回调也是其中一种)，我们来看下面一个例子:

function sayHi(){

    console.log('Hello,', this.name);

}

var person1 = {

    name: 'YvetteLau',

    sayHi: function(){

        setTimeout(function(){

            console.log('Hello,',this.name);

        })

    }

}

var person2 = {

    name: 'Christina',

    sayHi: sayHi

}

var name='Wiliam';

person1.sayHi();

setTimeout(person2.sayHi,100);

setTimeout(function(){

    person2.sayHi();

},200);

结果为:

Hello, Wiliam

Hello, Wiliam

Hello, Christina

• 第一条输出很容易理解，setTimeout的回调函数中，this使用的是默认绑定，非严格模式下，执行的是全局对象
• 第二条输出是不是有点迷惑了？说好XXX.fun()的时候，fun中的this指向的是XXX呢，为什么这次却不是这样了！Why?

  其实这里我们可以这样理解: setTimeout(fn,delay){ fn(); },相当于是将person2.sayHi赋值给了一个变量，最后执行了变量，这个时候，sayHi中的this显然和person2就没有关系了。

• 第三条虽然也是在setTimeout的回调中，但是我们可以看出，这是执行的是person2.sayHi()使用的是隐式绑定，因此这是this指向的是person2，跟当前的作用域没有任何关系。

读到这里，也许你已经有点疲倦了，但是答应我，别放弃，好吗？再坚持一下，就可以掌握这个知识点了。

显式绑定

显式绑定比较好理解，就是通过call,apply,bind的方式，显式的指定this所指向的对象。(注意:《你不知道的Javascript》中将bind单独作为了硬绑定讲解了)

call,apply和bind的第一个参数，就是对应函数的this所指向的对象。call和apply的作用一样，只是传参方式不同。call和apply都会执行对应的函数，而bind方法不会。

function sayHi(){

    console.log('Hello,', this.name);

}

var person = {

    name: 'YvetteLau',

    sayHi: sayHi

}

var name = 'Wiliam';

var Hi = person.sayHi;

Hi.call(person); //Hi.apply(person)

输出的结果为: Hello, YvetteLau. 因为使用硬绑定明确将this绑定在了person上。

那么，使用了硬绑定，是不是意味着不会出现隐式绑定所遇到的绑定丢失呢？显然不是这样的，不信，继续往下看。

function sayHi(){

    console.log('Hello,', this.name);

}

var person = {

    name: 'YvetteLau',

    sayHi: sayHi

}

var name = 'Wiliam';

var Hi = function(fn) {

    fn();

}

Hi.call(person, person.sayHi); 

输出的结果是 Hello, Wiliam. 原因很简单，Hi.call(person, person.sayHi)的确是将this绑定到Hi中的this了。但是在执行fn的时候，相当于直接调用了sayHi方法(记住: person.sayHi已经被赋值给fn了，隐式绑定也丢了)，没有指定this的值，对应的是默认绑定。

现在，我们希望绑定不会丢失，要怎么做？很简单，调用fn的时候，也给它硬绑定。

function sayHi(){

    console.log('Hello,', this.name);

}

var person = {

    name: 'YvetteLau',

    sayHi: sayHi

}

var name = 'Wiliam';

var Hi = function(fn) {

    fn.call(this);

}

Hi.call(person, person.sayHi);

此时，输出的结果为: Hello, YvetteLau，因为person被绑定到Hi函数中的this上，fn又将这个对象绑定给了sayHi的函数。这时，sayHi中的this指向的就是person对象。

至此，革命已经快胜利了，我们来看最后一种绑定规则: new 绑定。

new 绑定

javaScript和Ｃ＋＋不一样，并没有类，在javaScript中，构造函数只是使用new操作符时被调用的函数，这些函数和普通的函数并没有什么不同，它不属于某个类，也不可能实例化出一个类。任何一个函数都可以使用new来调用，因此其实并不存在构造函数，而只有对于函数的“构造调用”。

使用new来调用函数，会自动执行下面的操作：

1. 创建一个新对象
2. 将构造函数的作用域赋值给新对象，即this指向这个新对象
3. 执行构造函数中的代码
4. 返回新对象

因此，我们使用new来调用函数的时候，就会新对象绑定到这个函数的this上。

function sayHi(name){

    this.name = name;

    

}

var Hi = new sayHi('Yevtte');

console.log('Hello,', Hi.name);

输出结果为 Hello, Yevtte, 原因是因为在var Hi = new sayHi('Yevtte');这一步，会将sayHi中的this绑定到Hi对象上。

绑定优先级

我们知道了this有四种绑定规则，但是如果同时应用了多种规则，怎么办？

显然，我们需要了解哪一种绑定方式的优先级更高，这四种绑定的优先级为:

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

这个规则时如何得到的，大家如果有兴趣，可以自己写个demo去测试，或者记住上面的结论即可。

绑定例外

凡事都有例外，this的规则也是这样。

如果我们将null或者是undefined作为this的绑定对象传入call、apply或者是bind,这些值在调用时会被忽略，实际应用的是默认绑定规则。

var foo = {

    name: 'Selina'

}

var name = 'Chirs';

function bar() {

    console.log(this.name);

}

bar.call(null); //Chirs 

输出的结果是 Chirs，因为这时实际应用的是默认绑定规则。

箭头函数

箭头函数是ES6中新增的，它和普通函数有一些区别，箭头函数没有自己的this，它的this继承于外层代码库中的this。箭头函数在使用时，需要注意以下几点:

（1）函数体内的this对象，继承的是外层代码块的this。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

（5）箭头函数没有自己的this，所以不能用call()、apply()、bind()这些方法去改变this的指向.

OK，我们来看看箭头函数的this是什么？

var obj = {

    hi: function(){

        console.log(this);

        return ()=>{

            console.log(this);

        }

    },

    sayHi: function(){

        return function() {

            console.log(this);

            return ()=>{

                console.log(this);

            }

        }

    },

    say: ()=>{

        console.log(this);

    }

}

let hi = obj.hi();  //输出obj对象

hi();               //输出obj对象

let sayHi = obj.sayHi();

let fun1 = sayHi(); //输出window

fun1();             //输出window

obj.say();          //输出window

那么这是为什么呢？如果大家说箭头函数中的this是定义时所在的对象，这样的结果显示不是大家预期的，按照这个定义，say中的this应该是obj才对。

我们来分析一下上面的执行结果：

1. obj.hi(); 对应了this的隐式绑定规则，this绑定在obj上，所以输出obj，很好理解。
2. hi(); 这一步执行的就是箭头函数，箭头函数继承上一个代码库的this，刚刚我们得出上一层的this是obj，显然这里的this就是obj.
3. 执行sayHi();这一步也很好理解，我们前面说过这种隐式绑定丢失的情况，这个时候this执行的是默认绑定，this指向的是全局对象window.
4. fun1(); 这一步执行的是箭头函数，如果按照之前的理解，this指向的是箭头函数定义时所在的对象，那么这儿显然是说不通。OK，按照箭头函数的this是继承于外层代码库的this就很好理解了。外层代码库我们刚刚分析了，this指向的是window，因此这儿的输出结果是window.
5. obj.say(); 执行的是箭头函数，当前的代码块obj中是不存在this的，只能往上找，就找到了全局的this，指向的是window.

你说箭头函数的this是静态的？

依旧是前面的代码。我们来看看箭头函数中的this真的是静态的吗？

我要说：非也

var obj = {

    hi: function(){

        console.log(this);

        return ()=>{

            console.log(this);

        }

    },

    sayHi: function(){

        return function() {

            console.log(this);

            return ()=>{

                console.log(this);

            }

        }

    },

    say: ()=>{

        console.log(this);

    }

}

let sayHi = obj.sayHi();

let fun1 = sayHi(); //输出window

fun1();             //输出window



let fun2 = sayHi.bind(obj)();//输出obj

fun2();                      //输出obj

可以看出，fun1和fun2对应的是同样的箭头函数，但是this的输出结果是不一样的。

所以，请大家牢牢记住一点: 箭头函数没有自己的this，箭头函数中的this继承于外层代码库中的this.

总结

关于this的规则，至此，就告一段落了，但是想要一眼就能看出this所绑定的对象，还需要不断的训练。

我们来回顾一下，最初的问题。

1. 如何准确判断this指向的是什么？

1. 函数是否在new中调用(new绑定)，如果是，那么this绑定的是新创建的对象。
2. 函数是否通过call,apply调用，或者使用了bind(即硬绑定)，如果是，那么this绑定的就是指定的对象。
3. 函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this绑定的是那个上下文对象。一般是obj.foo()
4. 如果以上都不是，那么使用默认绑定。如果在严格模式下，则绑定到undefined，否则绑定到全局对象。
5. 如果把Null或者undefined作为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。
6. 如果是箭头函数，箭头函数的this继承的是外层代码块的this。

2. 执行过程解析

var number = 5;

var obj = {

    number: 3,

    fn: (function () {

        var number;

        this.number *= 2;

        number = number * 2;

        number = 3;

        return function () {

            var num = this.number;

            this.number *= 2;

            console.log(num);

            number *= 3;

            console.log(number);

        }

    })()

}

var myFun = obj.fn;

myFun.call(null);

obj.fn();

console.log(window.number);

我们来分析一下，这段代码的执行过程。

1.在定义obj的时候，fn对应的闭包就执行了，返回其中的函数，执行闭包中代码时，显然应用不了new绑定(没有出现new 关键字)，硬绑定也没有(没有出现call,apply,bind关键字),隐式绑定有没有？很显然没有，如果没有XX.fn()，那么可以肯定没有应用隐式绑定，所以这里应用的就是默认绑定了，非严格模式下this绑定到了window上(浏览器执行环境)。【这里很容易被迷惑的就是以为this指向的是obj，一定要注意，除非是箭头函数，否则this跟词法作用域是两回事，一定要牢记在心】

window.number * = 2; //window.number的值是10(var number定义的全局变量是挂在window上的)



number = number * 2; //number的值是NaN;注意我们这边定义了一个number，但是没有赋值，number的值是undefined;Number(undefined)->NaN



number = 3;  //number的值为3

2.myFun.call(null);我们前面说了，call的第一个参数传null，调用的是默认绑定;

fn: function(){

    var num = this.number;

    this.number *= 2;

    console.log(num);

    number *= 3;

    console.log(number);

}

执行时:

var num = this.number; //num=10; 此时this指向的是window

this.number * = 2;  //window.number = 20

console.log(num);  //输出结果为10

number *= 3;  //number=9; 这个number对应的闭包中的number;闭包中的number的是3

console.log(number);  //输出的结果是9

3.obj.fn();应用了隐式绑定，fn中的this对应的是obj.

var num = this.number;//num = 3;此时this指向的是obj

this.number *= 2; //obj.number = 6;

console.log(num); //输出结果为3;

number *= 3; //number=27;这个number对应的闭包中的number;闭包中的number的此时是9

console.log(number);//输出的结果是27

4.最后一步console.log(window.number);输出的结果是20

因此组中结果为:

10

9

3

27

20

严格模式下结果，大家可以根据今天所学，自己分析，巩固一下知识点。

最后，恭喜坚持读完的小伙伴们，你们成功get到了this这个知识点，但是想要完全掌握，还是要多回顾和练习。如果你有不错的this练习题，欢迎在评论区留言哦，大家一起进步！

原文：https://segmentfault.com/a/1190000018630013

前言

众所周知，在前端开发领域中，函数是一等公民，由此可见函数的重要性，本文旨在介绍函数中的一些特性与方法，对函数有更好的认知

正文

1.箭头函数

ECMAScript 6 新增了使用胖箭头（=>）语法定义函数表达式的能力。很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数：

let arrowSum = (a, b) => { 

 return a + b; 

}; 

let functionExpressionSum = function(a, b) { 

 return a + b; 

}; 

console.log(arrowSum(5, 8)); // 13 

console.log(functionExpressionSum(5, 8)); // 13

使用箭头函数须知：

• 箭头函数的函数体如果不用大括号括起来会隐式返回这行代码的值
• 箭头函数不能使用 arguments、super 和new.target，也不能用作构造函数
• 箭头函数没有 prototype 属性

2.函数声明与函数表达式

JavaScript 引擎在任何代码执行之前，会先读取函数声明，并在执行上下文中生成函数定义。而函数表达式必须等到代码执行到它那一行，才会在执行上下文中生成函数定义。

// 没问题 

console.log(sum(10, 10)); 

function sum(num1, num2) { 

 return num1 + num2; 

}

以上代码可以正常运行，因为函数声明会在任何代码执行之前先被读取并添加到执行上下文。这个过程叫作函数声明提升（function declaration hoisting）。在执行代码时，JavaScript 引擎会先执行一遍扫描，把发现的函数声明提升到源代码树的顶部。因此即使函数定义出现在调用它们的代码之后，引擎也会把函数声明提升到顶部。如果把前面代码中的函数声明改为等价的函数表达式，那么执行的时候就会出错：

// 会出错

console.log(sum(10, 10)); 

let sum = function(num1, num2) { 

 return num1 + num2; 

};

上述代码的报错有一些同学可能认为是let导致的暂时性死区。其实原因并不出在这里，这是因为这个函数定义包含在一个变量初始化语句中，而不是函数声明中。这意味着代码如果没有执行到let的那一行，那么执行上下文中就没有函数的定义。大家可以自己尝试一下，就算是用var来定义，也是一样会出错。

3.函数内部

在 ECMAScript 5 中，函数内部存在两个特殊的对象：arguments 和 this。ECMAScript 6 又新增了 new.target 属性。

arguments

它是一个类数组对象，包含调用函数时传入的所有参数。这个对象只有以 function 关键字定义函数（相对于使用箭头语法创建函数）时才会有。但 arguments 对象其实还有一个 callee 属性，是一个指向 arguments 对象所在函数的指针。

function factorial(num) { 

 if (num <= 1) { 

 return 1; 

 } else { 

 return num * factorial(num - 1); 

 } 

}



// 上述代码可以运用arguments来进行解耦

function factorial(num) { 

 if (num <= 1) { 

 return 1; 

 } else { 

 return num * arguments.callee(num - 1); 

 } 

}

这个重写之后的 factorial()函数已经用 arguments.callee 代替了之前硬编码的 factorial。这意味着无论函数叫什么名称，都可以引用正确的函数。

arguments.callee 的解耦示例

let trueFactorial = factorial; 

factorial = function() { 

 return 0; 

}; 

console.log(trueFactorial(5)); // 120 

console.log(factorial(5)); // 0

这里 factorial 函数在赋值给trueFactorial后被重写了 那么我们如果在递归中不使用arguments.callee 那么显然trueFactorial(5)的运行结果也是0，但是我们解耦之后，新的变量还是可以正常的进行

this

函数内部另一个特殊的对象是 this，它在标准函数和箭头函数中有不同的行为。

在标准函数中，this 引用的是把函数当成方法调用的上下文对象，这时候通常称其为 this 值（在网页的全局上下文中调用函数时，this 指向 windows）。

在箭头函数中，this引用的是定义箭头函数的上下文。

caller

这个属性引用的是调用当前函数的函数，或者如果是在全局作用域中调用的则为 null。

function outer() { 

 inner(); 

} 

function inner() { 

 console.log(inner.caller); 

} 

outer();

以上代码会显示 outer()函数的源代码。这是因为 ourter()调用了 inner()，inner.caller指向 outer()。如果要降低耦合度，则可以通过 arguments.callee.caller 来引用同样的值：

function outer() { 

 inner(); 

} 

function inner() { 

 console.log(arguments.callee.caller); 

} 

outer();

new.target

ECMAScript 中的函数始终可以作为构造函数实例化一个新对象，也可以作为普通函数被调用。ECMAScript 6 新增了检测函数是否使用 new 关键字调用的 new.target 属性。如果函数是正常调用的，则 new.target 的值是 undefined；如果是使用 new 关键字调用的，则 new.target 将引用被调用的构造函数。

function King() { 

 if (!new.target) { 

 throw 'King must be instantiated using "new"' 

 } 

 console.log('King instantiated using "new"'); 

} 

new King(); // King instantiated using "new" 

King(); // Error: King must be instantiated using "new"

这里可以做一些延申，还有没有其他办法来判断函数是否通过new来调用的呢？

可以使用 instanceof 来判断。我们知道在new的时候发生了哪些操作？用如下代码表示：

var p = new Foo()

// 实际上执行的是

// 伪代码

var o = new Object(); // 或 var o = {}

o.__proto__ = Foo.prototype

Foo.call(o)

return o

上述伪代码在MDN是这么说的：

1. 一个继承自 Foo.prototype 的新对象被创建。
2. 使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
3. 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

new 的操作说完了 现在我们看一下 instanceof，MDN上是这么说的：instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

也就是说，A的N个__proto__ 全等于 B.prototype，那么A instanceof B返回true，现在知识点已经介绍完毕，可以开始上代码了

  function Person() {

        if (this instanceof Person) {

          console.log("通过new 创建");

          return this;

        } else {

          console.log("函数调用");

        }

      }

      const p = new Person(); // 通过new创建

      Person(); // 函数调用

解析：我们知道new构造函数的this指向实例，那么上述代码不难得出以下结论this.__proto__ === Person.prototype。所以这样就可以判断函数是通过new还是函数调用

这里我们其实还可以将 this instanceof Person 改写为 this instanceof arguments.callee

4.闭包

终于说到了闭包，闭包这玩意真的是面试必问，所以掌握还是很有必要的

闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。

function foo() {

    var a = 20;

    var b = 30;



    function bar() {

        return a + b;

    }

  return bar;

}

上述代码中，由于foo函数内部的bar函数使用了foo函数内部的变量，并且bar函数return把变量return了出去，这样闭包就产生了，这使得我们可以在外部拿到这些变量。

const b = foo();

b() // 50

foo函数在调用的时候创建了一个执行上下文，可以在此上下文中使用a，b变量，理论上说，在foo调用结束，函数内部的变量会v8引擎的垃圾回收机制通过特定的标记回收。但是在这里，由于闭包的产生，a，b变量并不会被回收，这就导致我们在全局上下文（或其他执行上下文）中可以访问到函数内部的变量。

我之前看到了一个说法：

无论何时声明新函数并将其赋值给变量，都要存储函数定义和闭包，闭包包含在函数创建时作用域中的所有变量，类似于背包，函数定义附带一个小背包，它的包中存储了函数定义时作用域中的所有变量

以此引申出一个经典面试题

for (var i = 1; i <= 5; i++) {

  setTimeout(function timer() {

    console.log(i);

  }, i * 1000);

}

怎样可以使得上述代码的输出变为1,2,3,4,5？

使用es6我们可以很简单的做出解答：将var换成let。

那么我们使用刚刚学到的闭包知识怎么来解答呢？代码如下：

for (var i = 1; i <= 5; i++) {

(function (i) {

  setTimeout(function timer() {

    console.log(i);

  }, i * 1000);

})(i)

}

根据上面的说法，将闭包看成一个背包，背包中包含定义时的变量，每次循环时，将i值保存在一个闭包中，当setTimeout中定义的操作执行时，则访问对应闭包保存的i值，即可解决。

5.立即调用的函数表达式(IIFE)

如下就是立即调用函数表达式

(function() { 

 // 块级作用域 

})();

使用 IIFE 可以模拟块级作用域，即在一个函数表达式内部声明变量，然后立即调用这个函数。这样位于函数体作用域的变量就像是在块级作用域中一样。

// IIFE 

(function () { 

 for (var i = 0; i < count; i++) { 

 console.log(i); 

 } 

})(); 

console.log(i); // 抛出错误

ES6的块级作用域：

// 内嵌块级作用域 

{ 

 let i; 

 for (i = 0; i < count; i++) { 

 console.log(i); 

 } 

} 

console.log(i); // 抛出错误

// 循环的块级作用域

for (let i = 0; i < count; i++) { 

 console.log(i); 

} 

console.log(i); // 抛出错误

IIFE的另一个作用就是上文中的解决settimeout的输出问题

附录知识点

关于instanceof

Function instanceof Object;//true

Object instanceof Function;//true

上述代码大家可以尝试在浏览器中跑一下，非常的神奇，那么这是什么原因呢？

借用大佬的一张图

//构造器Function的构造器是它自身
Function.constructor=== Function;//true

//构造器Object的构造器是Function（由此可知所有构造器的constructor都指向Function）
Object.constructor === Function;//true



//构造器Function的__proto__是一个特殊的匿名函数function() {}
console.log(Function.__proto__);//function() {}

//这个特殊的匿名函数的__proto__指向Object的prototype原型。
Function.__proto__.__proto__ === Object.prototype//true

//Object的__proto__指向Function的prototype，也就是上面中所述的特殊匿名函数
Object.__proto__ === Function.prototype;//true
Function.prototype === Function.__proto__;//true

结论：

1. 所有的构造器的constructor都指向Function
2. Function的prototype指向一个特殊匿名函数，而这个特殊匿名函数的__proto__指向Object.prototype

结尾

本文主要参考 《JavaScript 高级程序设计 第四版》 由于作者水平有限，如有错误，敬请与我联系，谢谢您的阅读！

原文：https://segmentfault.com/a/1190000039904453

背景

在之前的一篇文章中， 我们遇到了一个项目在构建时内存溢出的问题。

当时的解决方案是: 直接调大 node 的内存限制，避免达到内存上限。

今天听同事分享了一个新方法，觉得不错， 特此记录， 顺便分享给大家, 希望对大家有所帮助。

正文

但 Node 进程的内存限制会是多少呢？

在网上查阅了到如下描述：

Currently, by default V8 has a memory limit of 512mb on 32-bit systems, and 1gb on 64-bit systems. The limit can be raised by setting --max-old-space-size to a maximum of ~1gb (32-bit) and ~1.7gb (64-bit), but it is recommended that you split your single process into several workers if you are hitting memory limits.

翻译一下：

当前，默认情况下，V8在32位系统上的内存限制为512mb，在64位系统上的内存限制为1gb。

可以通过将--max-old-space-size设置为最大〜1gb（32位）和〜1.7gb（64位）来提高此限制，但是如果达到内存限制, 建议您将单个进程拆分为多个工作进程。

如果你想知道自己电脑的内存限制有多大， 可以直接把内存撑爆， 看报错。

运行如下代码:

// Small program to test the maximum amount of allocations in multiple blocks.
// This script searches for the largest allocation amount.

// Allocate a certain size to test if it can be done.
function alloc (size) {
  const numbers = size / 8;
  const arr = []
  arr.length = numbers; // Simulate allocation of 'size' bytes.
  for (let i = 0; i < numbers; i++) {
    arr[i] = i;
  }
  return arr;
};

// Keep allocations referenced so they aren't garbage collected.
const allocations = []; 

// Allocate successively larger sizes, doubling each time until we hit the limit.
function allocToMax () {
  console.log("Start");

  const field = 'heapUsed';
  const mu = process.memoryUsage();

  console.log(mu);

  const gbStart = mu[field] / 1024 / 1024 / 1024;

  console.log(`Start ${Math.round(gbStart * 100) / 100} GB`);

  let allocationStep = 100 * 1024;

  // Infinite loop
  while (true) {
    // Allocate memory.
    const allocation = alloc(allocationStep);
    // Allocate and keep a reference so the allocated memory isn't garbage collected.
    allocations.push(allocation);
    // Check how much memory is now allocated.
    const mu = process.memoryUsage();
    const gbNow = mu[field] / 1024 / 1024 / 1024;

    console.log(`Allocated since start ${Math.round((gbNow - gbStart) * 100) / 100} GB`);
  }

  // Infinite loop, never get here.
};

allocToMax();

我的电脑是 Macbook Pro masOS Catalina 16GB，Node 版本是 v12.16.1，这段代码大概在 1.6 GB 左右内存时候抛出异常。

那我们现在知道 Node Process 确实是有一个内存限制的， 那我们就来增大它的内存限制再试一下。

用 node --max-old-space-size=6000 来运行这段代码，得到如下结果：

内存达到 4.6G 的时候也溢出了。

你可能会问， node 不是有内存回收吗？这个我们在下面会讲。

使用这个参数：node --max-old-space-size=6000, 我们增加的内存中老生代区域的大小，比较暴力。

就像上文中提到的： 如果达到内存限制, 建议您将单个进程拆分为多个工作进程。

这个项目是一个 ts 项目，ts 文件的编译是比较占用内存的，如果把这部分独立成一个单独的进程， 情况也会有所改善。

因为 ts-loader 内部调用了 tsc，在使用 ts-loader 时，会使用 tsconfig.js配置文件。

当项目中的代码变的越来越多，体积也越来越庞大时，项目编译时间也随之增加。

这是因为 Typescript 的语义检查器必须在每次重建时检查所有文件。

ts-loader 提供了一个 transpileOnly 选项，它默认为 false，我们可以把它设置为 true，这样项目编译时就不会进行类型检查，也不会输出声明文件。

对一下 transpileOnly 分别设置 false 和 true 的项目构建速度对比：

• 当 transpileOnly 为 false 时，整体构建时间为 4.88s.
• 当 transpileOnly 为 true 时，整体构建时间为 2.40s.

虽然构建速度提升了，但是有了一个弊端: 打包编译不会进行类型检查。

好在官方推荐了这样一个插件， 提供了这样的能力： fork-ts-checker-webpack-plugin。

官方示例的使用也非常简单：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')



module.exports = {

  ...

  plugins: [

    new ForkTsCheckerWebpackPlugin()

  ]

}

在我这个实际的项目中，vue.config.js 修改如下：

configureWebpack: config => {

 // get a reference to the existing ForkTsCheckerWebpackPlugin

 const existingForkTsChecker = config.plugins.filter(

   p => p instanceof ForkTsCheckerWebpackPlugin,

 )[0];



// remove the existing ForkTsCheckerWebpackPlugin

// so that we can replace it with our modified version

 config.plugins = config.plugins.filter(

   p => !(p instanceof ForkTsCheckerWebpackPlugin),

 );



 // copy the options from the original ForkTsCheckerWebpackPlugin

 // instance and add the memoryLimit property

 const forkTsCheckerOptions = existingForkTsChecker.options;

 

 forkTsCheckerOptions.memoryLimit = 4096;

 

 config.plugins.push(new ForkTsCheckerWebpackPlugin(forkTsCheckerOptions));

}

修改之后， 构建就成功了。

关于垃圾回收

在 Node.js 里面，V8 自动帮助我们进行垃圾回收， 让我们简单看一下V8中如何处理内存。

一些定义

• 常驻集大小：是RAM中保存的进程所占用的内存部分，其中包括：

  1. 代码本身
  2. 栈
  3. 堆
• stack：包含原始类型和对对象的引用
• 堆：存储引用类型，例如对象，字符串或闭包
• 对象的浅层大小：对象本身持有的内存大小
• 对象的保留大小：删除对象及其相关对象后释放的内存大小

垃圾收集器如何工作

垃圾回收是回收由应用程序不再使用的对象所占用的内存的过程。

通常，内存分配很便宜，而内存池用完时收集起来很昂贵。

如果无法从根节点访问对象，则该对象是垃圾回收的候选对象，因此该对象不会被根对象或任何其他活动对象引用。

根对象可以是全局对象，DOM元素或局部变量。

堆有两个主要部分，即 New Space和 Old Space。

新空间是进行新分配的地方。

在这里收集垃圾的速度很快，大小约为1-8MB。

留存在新空间中的物体被称为新生代。

在新空间中幸存下来的物体被提升的旧空间-它们被称为老生代。

旧空间中的分配速度很快，但是收集费用很高，因此很少执行。

node 垃圾回收

Why is garbage collection expensive?

The V8 JavaScript engine employs a stop-the-world garbage collector mechanism.

In practice, it means that the program stops execution while garbage collection is in progress.

通常，约20％的年轻一代可以存活到老一代，旧空间的收集工作将在耗尽后才开始。

为此，V8 引擎使用两种不同的收集算法：

1. Scavenge: 速度很快，可在新生代上运行，
2. Mark-Sweep: 速度较慢，并且可以在老生代上运行。

篇幅有限，关于v8垃圾回收的更多信息，可以参考如下文章：

1. http://jayconrod.com/posts/55...
2. https://juejin.cn/post/684490...
3. https://juejin.cn/post/684490...

总结

小小总结一下，上文介绍了两种方式：

1. 直接加大内存，使用: node --max-old-space-size=4096
2. 把一些耗内存进程独立出去, 使用了一个插件: fork-ts-checker-webpack-plugin

希望大家留个印象， 记得这两种方式。

好了， 内容就这么多， 谢谢。

才疏学浅，如有错误， 欢迎指正。

谢谢。

原文：https://segmentfault.com/a/1190000039877970

本文整理了前端常用的下载文件以及上传文件的方法
例子均以vue+element ui+axios为例,不使用el封装好的上传组件，这里自行进行封装实现

先附上demo

上传文件

以图片为例，文件上传可以省略预览图片功能

图片上传可以使用2种方式：文件流和base64;

1.文件流上传+预览：

<input type="file" id='imgBlob' @change='changeImgBlob' />
  <el-image style="width: 100px; height: 100px" :src="imgBlobSrc"></el-image>

// data
imgBlobSrc: ""

// methods
changeImgBlob() {
      let file = document.querySelector("#imgBlob");
      /**
       *图片预览
       *更适合PC端，兼容ie7+，主要功能点是window.URL.createObjectURL
       */
      var ua = navigator.userAgent.toLowerCase();
      if (/msie/.test(ua)) {
        this.imgBlobSrc = file.value;
      } else {
        this.imgBlobSrc = window.URL.createObjectURL(file.files[0]);
      }
      //上传后台
      const fd = new FormData();
      fd.append("files", file.files[0]);
      fd.append("xxxx", 11111); //其他字段,根据实际情况来
      axios({
        url: "/yoorUrl", //URL,根据实际情况来
        method: "post",
        headers: { "Content-Type": "multipart/form-data" },
        data: fd
      });
}

2.Base64上传+预览：

<input type="file" id='imgBase' @change='changeImgBase' />
<el-image style="width: 100px; height: 100px" :src="imgBaseSrc"></el-image>

// data
imgBaseSrc : ""

// methods
    changeImgBase() {
      let that = this;
      let file = document.querySelector("#imgBase");
      /**
      *图片预览
      *更适合H5页面，兼容ie10+，图片base64显示，主要功能点是FileReader和readAsDataURL
      */
      if (window.FileReader) {
        var fr = new FileReader();
        fr.onloadend = function (e) {
          that.imgBaseSrc = e.target.result;
          //上传后台
          axios({
            url: "/yoorUrl", //URL,根据实际情况来
            method: "post",
            data: {
              files: that.imgBaseSrc
            }
          });
        };
        fr.readAsDataURL(file.files[0]);
      }
    }

下载文件

图片下载

假设需要下载图片为url，文件流处理和这个一样

<el-image style="width: 100px; height: 100px" :src="downloadImgSrc"></el-image>
  <el-button type="warning" round plain size="mini" @click='downloadImg'>点击下载</el-button>

• 注意：这里需要指定 responseType为blob

//data
 downloadImgSrc:'https://i.picsum.photos/id/452/400/300.jpg?hmac=0-o_NOka_K6sQ_sUD84nxkExoDk3Bc0Qi7Y541CQZEs'
//methods
downloadImg() {
      axios({
        url: this.downloadImgSrc, //URL,根据实际情况来
        method: "get",
        responseType: "blob"
      }).then(function (response) {
        const link = document.createElement("a");
        let blob = new Blob([response.data], { type: response.data.type });
        let url = URL.createObjectURL(blob);
        link.href = url;
        link.download = `实际需要的文件名.${response.data.type.split('/')[1]}`;
        link.click();
        document.body.removeChild(link);
      });
    }

文件下载(以pdf为例)

<el-image style="width: 100px; height: 100px" :src="downloadImgSrc"></el-image>
  <el-button type="warning" round plain size="mini" @click='downloadImg'>点击下载</el-button>

//data
 downloadImgSrc:'https://i.picsum.photos/id/452/400/300.jpg?hmac=0-o_NOka_K6sQ_sUD84nxkExoDk3Bc0Qi7Y541CQZEs'
//methods
downloadImg() {
      axios({
        url: this.downloadImgSrc, //URL,根据实际情况来
        method: "get",
        responseType: "blob"
      }).then(function (response) {
        const link = document.createElement("a");
        let blob = new Blob([response.data], { type: response.data.type });
        let url = URL.createObjectURL(blob);
        link.href = url;
        link.download = `实际需要的文件名.${response.data.type.split('/')[1]}`;
        link.click();
        document.body.removeChild(link);
      });
    }

pdf预览可以参考如何预览以及下载pdf文件

原文：https://segmentfault.com/a/1190000039893814

前言

埋点，是网站分析的一种常用的数据采集方法。我们主要用来采集用户行为数据（例如页面访问路径，点击了什么元素）进行数据分析，从而让运营同学更加合理的安排运营计划。现在市面上有很多第三方埋点服务商，百度统计，友盟，growingIO 等大家应该都不太陌生，大多情况下大家都只是使用，最近我研究了下 web 埋点，你要不要了解下。

现有埋点三大类型

用户行为分析是一个大系统，一个典型的数据平台。由用户数据采集，用户行为建模分析，可视化报表展示几个模块构成。现有的埋点采集方案可以大致被分为三种，手动埋点，可视化埋点，无埋点

1. 手动埋点
   手动代码埋点比较常见，需要调用埋点的业务方在需要采集数据的地方调用埋点的方法。优点是流量可控，业务方可以根据需要在任意地点任意场景进行数据采集，采集信息也完全由业务方来控制。这样的有点也带来了一些弊端，需要业务方来写死方法，如果采集方案变了，业务方也需要重新修改代码，重新发布。
2. 可视化埋点
   可是化埋点是近今年的埋点趋势，很多大厂自己的数据埋点部门也都开始做这块。优点是业务方工作量少，缺点则是技术上推广和实现起来有点难（业务方前端代码规范是个大前提）。阿里的活动页很多都是运营通过可视化的界面拖拽配置实现，这些活动控件元素都带有唯一标识。通过埋点配置后台，将元素与要采集事件关联起来，可以自动生成埋点代码嵌入到页面中。
3. 无埋点
   无埋点则是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据，优点是前端只要加载埋点脚本。缺点是流量和采集的数据过于庞大，服务器性能压力山大，主流的 GrowingIO 就是这种实现方案。

我们暂时放弃可视化埋点的实现，在 手动埋点 和 无埋点 上进行了尝试，为了便于描述，下文我会称采集脚本为 SDK。

思考几个问题

埋点开发需要考虑很多内容，贯穿着不轻易动手写代码的原则，我们在开发前先思考下面这几个问题

1. 我们要采集什么内容，进行哪些采集接口的约定
2. 业务方通过什么方式来调用我们的采集脚本
3. 手动埋点：SDK 需要封装一个方法给业务方进行调用，传参方式业务方可控
4. 无埋点：考虑到数据量对于服务器的压力，我们需要对无埋点进行开关配置，可以配置进行哪些元素进行无埋点采集
5. 用户标识：游客用户和登录用户的采集数据怎么进行区分关联
6. 设备Id：用户通过浏览器来访问 web 页面，设备Id需要存储在浏览器上，同一个用户访问不同的业务方网站，设备Id要保持一样，怎么实现
7. 单页面应用：现在流行的单页面应用和普通 web 页面的数据采集是否有差异
8. 混合应用：app 与 h5 的混合应用我们要怎么进行通讯

我们要采集什么内容，进行哪些采集接口的约定

第一期我们先实现对 PV（即页面浏览量或点击量） 、UV（一天内同个访客多次访问） 、点击量、用户的访问路径的基础指标的采集。精细化分析的流量转化需要和业务相关，需要和数据分析方做约定，我们预留扩展。所以我们的采集接口需要进行以下的约定

{
    "header":{ // HTTP 头部
        "X-Device-Id":" 550e8400-e29b-41d4-a716-446655440000", //设备ID，用来区分用户设备
        "X-Source-Url":"https://www.baidu.com/", //源地址，关联用户的整个操作流程，用于用户行为路径分析，例如登录，到首页，进入商品详情，退出这一整个完整的路径
        "X-Current-Url":"", //当前地址，用户行为发生的页面
        "X-User-Id":"",//用户ID，统计登录用户行为
    },
    "body":[{ // HTTP Body体
        "PageSessionID":"", //页面标识ID，用来区分页面事件，例如加载和离开我们会发两个事件，这个标识可以让我们知道这个事件是发生在一个页面上
        "Event":"loaded", //事件类型，区分用户行为事件
        "PageTitle":  "埋点测试页",  //页面标题，直观看到用户访问页面
        "CurrentTime":  “1517798922201”,  //事件发生的时间
        "ExtraInfo":  {
         }    //扩展字段，对具体业务分析的传参
    }]
}

以上就是我们现在约定好了的通用的事件采集的接口，所传的参数基本上会根据采集事件的不同而发生变化。但是在用户的整一个访问行为中，用户的设备是不会变化的，如果你想采集设备信息可以重新约定一个接口，在整个采集开始之前发送设备信息，这样可以避免在事件采集接口上重复采集固定数据。

{
    "header":{ // HTTP 头部
          "X-Device-Id"  ："550e8400-e29b-41d4-a716-446655440000"  ,      //  设备id
    },
    "body":{ // HTTP Body体
              "DeviceType":  "web" ,   //设备类型
             "ScreenWide"  :  768 , //  屏幕宽
             "ScreenHigh":  1366 , //  屏幕高
             "Language":    "zh-cn"  //语言
    }
}

手动埋点：SDK

如果业务方需要采集更多业务定制的数据，可以调用我们暴露出的方法进行采集

//自定义事件

  sdk.dispatch('customEvent',{extraInfo:'自定义事件的额外信息'})

游客与用户关联

我们使用 userId 来做用户标识，同一个设备的用户，从游客用户切换到登录用户，如果我们要把他们关联起来，需要有一个设备Id 做关联

web 设备Id

用户通过浏览器来访问 web 页面，设备Id需要存储在浏览器上，同一个用户访问不同的业务方网站，设备Id要保持一样。web 变量存储，我们第一时间想到的就是 cookie，sessionStorage，localStorage，但是这3种存储方式都和访问资源的域名相关。我们总不能每次访问一个网站就新建一个设备指纹吧，所以我们需要通过一个方法来跨域共享设备指纹

我们想到的方案是，通过嵌套 iframe 加载一个静态页面，在 iframe 上加载的域名上存储设备id，通过跨域共享变量获取设备id，共享变量的原理是采用了iframe 的 contentWindow通讯，通过 postMessage 获取事件状态，调用封装好的回调函数进行数据处理具体的实现方式

//web 应用，通过嵌入 iframe 进行跨域 cookie 通讯，设置设备id,
    collect.setIframe = function () {
        var that = this
        var iframe = document.createElement('iframe')
        iframe.id = "frame",
        iframe.src = 'http://collectiframe.trc.com' // 配置域名代理，目的是让开发测试生产环境代码一致
        iframe.style.display='none' //iframe 设置的目的是用来生成固定的设备id，不展示
        document.body.appendChild(iframe)

        iframe.onload = function () {
                iframe.contentWindow.postMessage('loaded','*');
        }

        //监听message事件，iframe 加载完成，获取设备id ，进行相关的数据采集
        helper.on(window,"message",function(event){
            that.deviceId = event.data.deviceId

            if(event.data && event.data.type == 'loaded'){
                that.sendDevice(that.getDevice(), that.deviceUrl);
                setTimeout(function () {
                    that.send(that.beforeload)
                    that.send(that.loaded)
                },1000)
            }
        })
    }

iframe 与 SDK 通讯

function receiveMessageFromIndex ( event ) {
    getDeviceInfo() // 获取设备信息
    var data =  {
            deviceId: _deviceId,
            type:event.data
    }

    event.source.postMessage(data, '*'); // 将设备信息发送给 SDK
}

//监听message事件
if(window.addEventListener){
        window.addEventListener("message", receiveMessageFromIndex, false);
}else{
        window.attachEvent("onmessage", receiveMessageFromIndex, false)

如果你想知道可以看我的另一篇博客 web 浏览器指纹跨域共享

单页面应用：现在流行的单页面应用和普通 web 页面的数据采集是否有差异

我们知道单页面应用都是无刷新的页面加载，所以我们在页面跳转的处理和我们的普通的页面会有所不同。单页面应用的路由插件运用了 window 自带的无刷新修改用户浏览记录的方法，pushState 和 replaceState。

window 的 history 对象 提供了两个方法，能够无刷新的修改用户的浏览记录，pushSate，和 replaceState，区别的 pushState 在用户访问页面后面添加一个访问记录， replaceState 则是直接替换了当前访问记录，所以我们只要改写 history 的方法，在方法执行前执行我们的采集方法就能实现对单页面应用的页面跳转事件的采集了

// 改写思路：拷贝 window 默认的 replaceState 函数，重写 history.replaceState 在方法里插入我们的采集行为，在重写的 replaceState 方法最后调用，window 默认的 replaceState 方法

    collect = {}
    collect.onPushStateCallback : function(){}  // 自定义的采集方法

    (function(history){
        var replaceState = history.replaceState;   // 存储原生 replaceState
        history.replaceState = function(state, param) {     // 改写 replaceState
           var url = arguments[2];
           if (typeof collect.onPushStateCallback == "function") {
                 collect.onPushStateCallback({state: state, param: param, url: url});   //自定义的采集行为方法
           }
           return replaceState.apply(history, arguments);    // 调用原生的 replaceState
        };
     })(window.history);

这块介绍起来也比较的复杂，如果你想了解更多，可以看我的另一篇博客你需要知道的单页面路由实现原理

混合应用：app 与 h5 的混合应用我们要怎么进行通讯

现在大部分的应用都不是纯原生的应用， app 与 h5 的混合的应用是现在的一种主流。

纯 web 数据采集我们考虑到前端存储数据容易丢失，我们在每一次事件触发的时候都用采集接口传输采集到的数据。考虑到现在很多用户的手机会有流量管家的软件监控，如果在 App 中 h5 还是采集到数据就传输给服务端，很有可能会让流量管家检测到，给用户报警，从而使得用户不再信任你的 App , 所以我们在用户操作的时候将数据传给 app 端，存储到 app。用户切换应用到后台的时候，通过 app 端的 SDK 打包传输到服务器，我们给 app 提供的方法封装了一个适配器

// app 与 h5 混合应用，直接将数信息发给 app
collect.saveEvent = function (jsonString) {

    collect.dcpDeviceType && setTimeout(function () {
        if(collect.dcpDeviceType=='android'){
            android.saveEvent(jsonString)
        } else {
            window.webkit && window.webkit.messageHandlers ? window.webkit.messageHandlers.nativeBridge.postMessage(jsonString) : window.postBridgeMessage(jsonString)
        }

    },1000)
    }

实现思路

通过上面几个问题的思考，我们对埋点的实现大致已经有了一些想法，我们使用思维导图来还原下我们即将要做的事情，图片记得放大看哦，太小了可能看不清。

我们需要暴露给业务方调用的方法

我们来看下几个核心代码的实现

工具方法

我们定义了几个工具方法，提高开发的幸福指数 😝

var helper = {};

    // 生成一个唯一的标识，pageSessionId （用这个变量来关联开始加载、加载完成、离开页面的事件，计算出页面加菜时间，停留时间）
    helper.uuid = function(){}

    // 元素绑定事件监听，兼容浏览器到IE8
    helper.on = function(){}

    //元素移除事件监听的适配器函数，兼容浏览器到IE8
    helper.remove = function(){}

    //将json转为字符串,事件传输的参数类型转化
    helper.changeJSON2Query = function(){}

    //将相对路径解析成文档全路径
    helper.normalize = function(){}

采集逻辑

var collect = {
        deviceUrl:'http://collect.trc.com/rest/collect/device/h5/v1',
        eventUrl:'http://collect.trc.com/rest/collect/event/h5/v1',
        isuploadUrl:'http://collect.trc.com/rest/collect/isupload/app/v1',
        parmas:{ ExtraInfo:{} },
        device:{}
    };

    //获取埋点配置
    collect.setParames = function(){}

    //更新访问路径及页面信息
    collect.updatePageInfo = function(){}

    //获取事件参数
    collect.getParames = function(){}

    //获取设备信息
    collect.getDevice = function(){}

    //事件采集
    collect.send = function(){}

    //设备采集
    collect.sendDevice = function(){}

    //判断才否采集，埋点采集的开关
    collect.isupload = function(){

        1. 判断是否采集，不采集就注销事件监听（项目中区分游客身份和用户身份的采集情况，这个方法会被判断两次）
        2. 采集则判断是否已经采集过
            a.已经采集过不做任何操作
            b.没有采集过添加事件监听
        3. 判断是 混合应用还是纯 web 应用
            a.如果是web 应用，调用 collect.setIframe 设置 iframe
            b.如果是混合应用 将开始加载和加载完成事件传输给 app
    }

    //点击事件处理函数
    collect.clickHandler = function(){}

    //离开页面的事件处理函数
    collect.beforeUnloadHandler = function(){}

    //页面回退事件处理函数
    collect.onPopStateHandler = function(){}

    //系统事件初始化，注册离开事件，浏览器后退事件
    collect.event = function(){}

    //获取记录开始加载数据信息
    collect.getBeforeload = function(){}

    //存储加载完成，获取设备类型，记录加载完成信息
    collect.onload = function(){

        1. 判断cookie是否有存设备类型信息，有表示混合应用
        2. 采集加载完成时间等信息
        3. 调用 collect.isupload 判断是否进行采集
    }

    //web 应用，通过嵌入 iframe 进行跨域 cookie 通讯，设置设备id
    collect.setIframe = function(){}

    //app 与 h5 混合应用，直接将数信息发给 app,判断设备类型做原生方法适配器
    collect.saveEvent = function(){}

    //采集自定义事件类型
    collect.dispatch = function(){}

    //将参数 userId 存入sessionStorage
    collect.storeUserId = function(){}

    //采集H5信息,如果是混合应用，将采集到的信息发送给 app 端
    collect.saveEventInfo = function(){}

    //页面初始化调用方法
    collect.init = function(){

        1. 获取开始加载的采集信息
        2. 获取 SDK 配置信息，设备信息
        3. 改写 history 两个方法，单页面应用页面跳转前调用我们自己的方法
        4. 页面加载完成，调用 collect.onload 方法

    }


    collect.init(); // 初始化

    //暴露给业务方调用的方法
    return {
        dispatch:collect.dispatch,
        storeUserId:collect.storeUserId,
    }

原文链接：https://segmentfault.com/a/1190000014922668

上一篇简单的介绍了react-router 的使用方法和基本的API，对于react-router几个重要的API做了源码解读。这篇就实现一个简易版的 react-router

设计思路

由上图可知，核心内容就是如何监听到URL的改变？图中说到三种方式，其实也就两种pushstate 和 浏览器的前进和回退。刷新页面还是处于当前的URL，不涉及URL的改变。上一篇文章中也讲到 前端路由的原理有两点

1. URL改变 页面不刷新。
2. 监听到URL的改变。

所以在设计 react-router 的时候需要考虑 pushstate 和 浏览器的前进和回退这两种方式的URL改变。

Router

功能：负责监听页面对象发生了改变，并开始重新渲染页面 **

1. 先定义一个上下文，方便把history数据传入所有的子组件

const RouteContext = React.createContext({})

1. 定义 Router 组件，主要内容监听URL变化

const globalHistory = window.history // history 使用window 全局的history

class Router extends React.Component {

  constructor(props) {

    super(props)

    this.state = { // 把location 设置为state 每次URL的改变，能够更新页面

      location: window.location

    }

    // 第一种跳转方式：浏览器的前进后退，触发popstate 事件

    window.addEventListener("popstate", () => {

      this.setState({

        location: window.location

      })

    })

  }

  // 第二种跳转方式：pushstate

    // 向子组件提供push 方法更新路由，跳转页面

  push = (route) => {

    globalHistory.pushState({}, "", route)

    this.setState({

      location: window.location

    })

  }

    // 定义上下文，把通用内容传入子组件

  render() {

    const { children } = this.props

    const { location } = this.state

    return (

      <RouteContext.Provider value={{

        history: globalHistory,

        location,

        push: this.push,

      }}>

        {

          React.cloneElement(children, {

            history: globalHistory,

            location,

            push: this.push,

          })

        }

      </RouteContext.Provider>

    )

  }

}



export default Router

Route

功能：页面开始渲染后，根据具体的页面location信息展示具体路由地址对应的内容 **

import React, { useContext } from 'react'

const Route = (props) => {

  // 在上下文中获取到相关信息

  const context = useContext(RouteContext)

  // 计算 location 匹配到的 path

  const computedPath = (path, exact) => {

    ...TODO 

    // 这里内容和源码一样，其核心使用了path-to-regexp 库，能够计算出URL中的参数

  }

  // eslint-disable-next-line no-unused-vars

  const { render, children, component, path, exact = false, ...rest } = props

  const match = computedPath(path, exact)

  const params = { ...context, match, location: context.location }

  // 渲染 也就是源码中的三目运算。把相关的属性传入子组件

  if (match) {

    if (children) {

      if (typeof children === 'function') {

        return children(params)

      }

      return React.cloneElement(children, params)

    } else if (component) {

      return component(params)

    } else if (render) {

      return render(params)

    }

  }

  return null

}



export default Route

这样一个简单的React-Router 就实现了，能够实现页面的跳转。

完整代码：https://github.com/LiuSandy/web

原文链接：https://zhuanlan.zhihu.com/p/366482879

class Index extends React.Component {

  this.state = {

    count: 0

  }

  onClick = () => {

    this.setState({

       count: 10

    })

  }

  render() {

    return (

      <div>

        <span>{this.state.count}</span>

        <button onClick={this.onClick}>click</button>

      </div>

    )

  }

}

this.setState({

    key:newState

})

// prevState 是上一次的 state，props 是此次更新被应用时的 props

this.setState((prevState, props) => {

  return {

      key: prevState.key 

  }

})

onClick = () => {

  const { count } = this.state

  this.setState({ count: count + 1 })

  this.setState({ count: count + 1 })

  this.setState({ count: count + 1 })

}

Object.assign(

  state,

  { count: state.count + 1 },

  { count: state.count + 1 },

  { count: state.count + 1 }

)

onClick = () => {

  this.setState((prevState, props) => {

    return {

      count: prevState.count + 1

    }

  })

  this.setState((prevState, props) => {

    return {

      count: prevState.count + 1

    }

  })

  this.setState((prevState, props) => {

    return {

      count: prevState.count + 1

    }

  })

}

onClick = () => {

    this.setState({ count: this.state.count + 1 })

  console.log(this.state)

  setTimeout(() => {

    this.setState({ count: this.state.count + 1 })

    console.log(this.state)

  }, 0)

}

原文：https://zhuanlan.zhihu.com/p/366781311

对于没有子元素或不需要子元素的 HTML 标签，通常写成其自闭合的形式会显得简洁些，

- <SomeComponent></SomeComponent>

+ <SomeComponent/>

通过配置 ESLint 可在格式化的时候将标签自动变成自闭合形式。

create-react-app

如果是使用 create-react-app 创建的项目，直接在 package.json 的 eslint 配置部分加上如下配置即可：

"eslintConfig": {

    "extends": "react-app",

+   "rules": {

+     "react/self-closing-comp": [

+       "error"

+     ]

    }

安装依赖

安装 ESLint 相关依赖：

$ yarn add eslint eslint-plugin-react

如果是 TypeScript 项目，还需要安装如下插件：

$ yarn add @typescript-eslint/eslint-plugin  @typescript-eslint/parser

配置 ESLint

通过 yarn eslint --init 向导来完成创建，

或手动创建 .eslintrc.json 填入如下配置：

{

  "extends": ["eslint:recommended", "plugin:react/recommended"],

  "parser": "@typescript-eslint/parser",

  "plugins": ["react", "@typescript-eslint"],

  "rules": {

    "react/self-closing-comp": ["error"]

  }

}

安装 ESLint for Vscode

当然了，还需要安装 VSCode 插件 dbaeumer.vscode-eslint。

然后配置 VSCode 在保存时自动进行修正动作：

"editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  },

使用

完成上述配置后，如果发现保存时，格式并未生效，或者只 JavaScript 文件生效，需要补上如下的 VSCode 配置：

"eslint.validate": [

    "javascript",

    "javascriptreact",

    "typescript",

    "typescriptreact",

  ]

也可查看 VSCode 的状态栏，看是否有报错可确定是什么原因导致 ESLint 工作不正常，比如 mac BigSur 中细化了权限，需要点击警告图标然后点击允许。

原文：https://zhuanlan.zhihu.com/p/368639332