谈一下个人认为的react hooks的优缺点，通过和传统的React.Component进行对比得出。

#优点

一、更容易复用代码

这点应该是react hooks最大的优点，它通过自定义hooks来复用状态，从而解决了类组件有些时候难以复用逻辑的问题。hooks是怎么解决这个复用的问题呢，具体如下：

1. 每调用useHook一次都会生成一份独立的状态，这个没有什么黑魔法，函数每次调用都会开辟一份独立的内存空间。
2. 虽然状态(from useState)和副作用(useEffect)的存在依赖于组件，但它们可以在组件外部进行定义。这点是class component做不到的，你无法在外部声明state和副作用（如componentDidMount）。

上面这两点，高阶组件和renderProps也同样能做到。但hooks实现起来的代码量更少，以及更直观（代码可读性）。

举个例子，经常使用的antd-table，用的时候经常需要维护一些状态 ，并在合适的时机去更改它们:

componentDidMount(){

 this.loadData();

}



loadData = ()=>{

   this.setState({

     current: xxx,

     total: xxx,

     pageSize: xxx,

     dataSource: xxx[]

   })

}



onTableChange = ()=>{

   this.setState({

     current: xxx,

     total: xxx,

     pageSize: xxx,

   })

}



render(){

 const {total,pageSize,current,dataSource} = this.state;

 return <Table

  dataSource={dataSource}

  pagination={{total,pageSize,current}

  onChange={this.onTableChange}

 />

}

每个table都要写一些这种逻辑，那还有啥时间去摸鱼。这些高度类似的逻辑，可以通过封装一个高阶组件来抽象它们。这个高阶组件自带这些状态，并可以自动调用server去获取remote data。

用高阶组件来实现的话会是这样：

import { Table } from 'antd'

import server from './api'



function useTable(server) {

  return function (WrappedComponent) {

    return class HighComponent extends React.Component {

      state = {

        tableProps: xxx, 

      };

      render() {

        const { tableProps } = this.state;

        return <WrappedComponent tableProps={tableProps} />;

      }

    };

  };

}





@useTable(server)

class App extends Component{

  render(){

/**

 * 高阶组件/renderProps是通过增强组件的props（赋予一个新的属性或者方法到组件的props属性），

 * 实现起来比较隐式。你难以区分这个props是来自哪个高阶组件（特别是使用了较多的高阶组件时），

 * 或者还是来自业务的父组件。

 */

    const { tableProps } = this.props;

    return (

      <Table 

        columns={[...]}

      // tableProps包含pagination, onChange, dataSource等属性。

        {...tableProps}

      />

    )

  }

}

如果用hooks来实现的话，会是：

import { Table } from 'antd'

import server from './api'



function useTable(server) {

  const [tableProps, setTableProps] = useState(xxx);

  return tableProps;

}



function App {

    const { tableProps } = useTable();

    return (

      <Table 

        columns={[...]}

      // tableProps包含pagination, onChange, dataSource等属性

        {...tableProps}

      />

    )

}

/*

相对比高阶组件“祖父=>父=>子”的层层嵌套，

hooks是这样的：  

const { brother1 } = usehook1; 

const { brother2} = usehook2;

*/

可以看到，hooks的逻辑更清晰，可读性更好。

二、清爽的代码风格+代码量更少

1. 函数式编程风格，函数式组件、状态保存在运行环境、每个功能都包裹在函数中，整体风格更清爽，更优雅。

2. 对IDE更友好，对比类组件，函数组件里面的unused状态和unused-method更容易被编辑器发现。

3. 使用typescript的话，类型声明也变得更容易。

class Example{

   hello: string;

   constructor(){

      this.hello = 'hello world'

   }

}



// 代码量更少

function Example(){

   const hello:string = 'hello world'

}

4. 向props或状态取值更加方便，函数组件的取值都从当前作用域直接获取变量，而类组件需要先访问实例this，再访问其属性或者方法，多了一步。

5. 更改状态也变得更加简单, `this.setState({ count:xxx })`变成 `setCount(xxx)`。

因为减少了很多模板代码，特别是小组件写起来更加省事，人们更愿意去拆分组件。而组件粒度越细，被复用的可能性越大。所以，hooks也在不知不觉中改变人们的开发习惯，提高项目的组件复用率。

#缺点

一、响应式的useEffect

写函数组件时，你不得不改变一些写法习惯。你必须清楚代码中useEffect和useCallback的“依赖项数组”的改变时机。有时候，你的useEffect依赖某个函数的不可变性，这个函数的不可变性又依赖于另一个函数的不可变性，这样便形成了一条依赖链。一旦这条依赖链的某个节点意外地被改变了，你的useEffect就被意外地触发了，如果你的useEffect是幂等的操作，可能带来的是性能层次的问题，如果是非幂等，那就糟糕了。

所以，对比componentDidmount和componentDidUpdate，useEffect带来的心智负担更大。

二、hooks不擅长异步的代码（旧引用问题）

函数的运行是独立的，每个函数都有一份独立的作用域。函数的变量是保存在运行时的作用域里面。当我们有异步操作的时候，经常会碰到异步回调的变量引用是之前的，也就是旧的（这里也可以理解成闭包）。比如下面的一个例子（codesandbox）：

import React, { useState } from "react";



const Counter = () => {

  const [counter, setCounter] = useState(0);



  const onAlertButtonClick = () => {

    setTimeout(() => {

      alert("Value: " + counter);

    }, 3000);

  };



  return (

    <div>

      <p>You clicked {counter} times.</p>

      <button onClick={() => setCounter(counter + 1)}>Click me</button>

      <button onClick={onAlertButtonClick}>

        Show me the value in 3 seconds

      </button>

    </div>

  );

};



export default Counter;

当你点击Show me the value in 3 seconds的后，紧接着点击Click me使得counter的值从0变成1。三秒后，定时器触发，但alert出来的是0（旧值），但我们希望的结果是当前的状态1。

这个问题在class component不会出现，因为class component的属性和方法都存放在一个instance上，调用方式是：this.state.xxx和this.method()。因为每次都是从一个不变的instance上进行取值，所以不存在引用是旧的问题。

其实解决这个hooks的问题也可以参照类的instance。用useRef返回的immutable RefObject（把值保存在current属性上）来保存state，然后取值方式从counter变成了： counterRef.current。如下：

import React, { useState, useRef, useEffect } from "react";



const Counter = () => {

  const [counter, setCounter] = useState(0);

  const counterRef = useRef(counter);



  const onAlertButtonClick = () => {

    setTimeout(() => {

      alert("Value: " + counterRef.current);

    }, 3000);

  };



  useEffect(() => {

    counterRef.current = counter;

  });



  return (

    <div>

      <p>You clicked {counter} times.</p>

      <button onClick={() => setCounter(counter + 1)}>Click me</button>

      <button onClick={onAlertButtonClick}>

        Show me the value in 3 seconds

      </button>

    </div>

  );

};



export default Counter;

结果如我们所期待，alert的是当前的值1。

我们可以把这个过程封装成一个custom hook，如下：

import { useEffect, useRef, useState } from "react";



const useRefState = <T>(

  initialValue: T

): [T, React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>] => {

  const [state, setState] = useState<T>(initialValue);

  const stateRef = useRef(state);

  useEffect(() => {

    stateRef.current = state;

  }, [state]);

  return [state, stateRef, setState];

};



export default useRefState;

尽管这个问题被巧妙地解决了，但它不优雅、hack味道浓，且丢失了函数编程风格。

三、custom hooks有时严重依赖参数的不可变性

import {useState, useEffect} from 'react'



export function() useData(api){

  const [data, setDate] = useState([]);

  useEffect(()=>{ 

    api().then(res=>setData(res.data)) ;

    // 这里要求传入的api是immutable的，被useCallback/useMemo所包裹。不然每次api一变，

    // 都会非预期地多调用一次useEffect。

  },[api])

}

对于这点，除了在团队约定参数的不可变性，还可以对useCallback/useMemo进行魔改：

import React from "react";



let useCallback = React.useCallback;



if (__DEV__) {

  useCallback = (fn, arr) => {

    fn.__useCallback__ = true;

    return useCallback(fn, arr);

  };

}



export default useCallback;

然后在run-time中去检查是否存在__useCallback__这个属性:

import {useState, useEffect} from 'react'



function checkFn(fn){

  if(__DEV__){

    if(!fn.__useCallback__){

      throw Error('请用团队封装的useCallback来包裹fn')

    }

  }

}



export function() useData(api){

  const [data, setDate] = useState([]);



  checkFn(api);

  

  useEffect(()=>{ 

    api().then(res=>setData(res.data)) ;

    // 这里要求传入的api是immutable的，被useCallback/useMemo所包裹。不然每次api一变，

    // 都会非预期地多调用一次useEffect。

  },[api])

}

也有其他的方案：比如用eslint插件去检查。

#怎么避免react hooks的常见问题

1. 不要在useEffect里面写太多的依赖项，划分这些依赖项成多个单一功能的useEffect。其实这点是遵循了软件设计的“单一职责模式”。
2. 如果你碰到状态不同步的问题，可以考虑下手动传递参数到函数。如：

   // showCount的count来自父级作用域 

   const [count,setCount] = useState(xxx); 

   function showCount(){ console.log(count) } 

   

   // showCount的count来自参数 

   const [count,setCount] = useState(xxx); 

   function showCount(c){ console.log(c) }

但这个也只能解决一部分问题，很多时候你不得不使用上述的useRef方案。

3. 拆分组件，细化组件的粒度。复杂业务场景中使用hooks，应尽可能地细分组件，使得组件的功能尽可能单一，这样的hooks组件更好维护。

#感想

hooks很好用很强大，但它不擅长异步。但在有太多异步逻辑的代码时，class比它更适合、更稳、更好维护。

原文链接：https://zhuanlan.zhihu.com/p/88593858

我们大部分 React 类组件可以保存状态，而函数组件不能？ 并且类组件具有生命周期，而函数组件却不能？

React 早期版本，类组件可以通过继承PureComponent来优化一些不必要的渲染，相对于函数组件，React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染，直接 16.6 出来的 React.memo函数。

React 16.8 新出来的Hook可以让React 函数组件具有状态，并提供类似 componentDidMount和componentDidUpdate等生命周期方法。

类被会替代吗？

Hooks不会替换类，它们只是一个你可以使用的新工具。React 团队表示他们没有计划在React中弃用类，所以如果你想继续使用它们，可以继续用。

我能体会那种总有新东西要学的感觉有多痛苦，不会就感觉咱们总是落后一样。Hooks 可以当作一个很好的新特性来使用。当然没有必要用 Hook 来重构原来的代码, React团队也建议不要这样做。

Go Go

来看看Hooks的例子,咱们先从最熟悉的开始:函数组件。

以下 OneTimeButton 是函数组件，所做的事情就是当我们点击的时候调用 sayHi 方法。

import React from 'react';
import { render } from 'react-dom';

function OneTimeButton(props) {
  return (
    <button onClick={props.onClick}>
        点我点我
    </button>
  )
}

function sayHi() {
  console.log('yo')
}

render(
  <OneTimeButton onClick={sayHi}/>,
  document.querySelector('#root')
)

我们想让这个组件做的是，跟踪它是否被点击，如果被点击了，禁用按钮，就像一次性开关一样。

但它需要一个state，因为是一个函数，它不可能有状态(React 16.8之前)，所以需要重构成类。

函数组件转换为类组件的过程中大概有5个阶段：

• 否认：也许它不需要是一个类，我们可以把 state 放到其它地方。

• 实现： 废话，必须把它变成一个class，不是吗？

• 接受：好吧，我会改的。

• 努力加班重写：首先 写 class Thing extends React.Component，然后 实现 render等等 。

• 最后：添加state。

  ---

class OneTimeButton extends React.Component {
  state = {
    clicked: false
  }

  handleClick = () => {
    this.props.onClick();

    // Ok, no more clicking.
    this.setState({ clicked: true });
  }

  render() {
    return (
      <button
        onClick={this.handleClick}
        disabled={this.state.clicked}
      >
        You Can Only Click Me Once
      </button>
    );
  }
}

这是相当多的代码，组件的结构也发生了很大的变化， 我们需要多个小的功能，就需要改写很多。

使用　Hook　轻松添加　State

接下来，使用新的　useState　hook向普通函数组件添加状态：

import React, { useState } from 'react'

function OneTimeButton(props) {
  const [clicked, setClicked] = useState(false)
  
  function doClick() {
    props.onClick();
    setClicked(true)
  }

  return (
    <button
      onClick={clicked ? undefined : doClick}
      disabled={clicked}
    >
      点我点我
    </button>
  )
}

这段代码是如何工作的

这段代码的大部分看起来像我们一分钟前写的普通函数组件，除了useState。

useState是一个hook。 它的名字以“use”开头（这是Hooks的规则之一 - 它们的名字必须以“use”开头）。

useState hook 的参数是 state 的初始值，返回一个包含两个元素的数组:当前state和一个用于更改state 的函数。

类组件有一个大的state对象，一个函数this.setState一次改变整个state对象。

函数组件根本没有状态，但useState hook允许我们在需要时添加很小的状态块。 因此，如果只需要一个布尔值，我们就可以创建一些状态来保存它。

由于Hook以某种特殊方式创建这些状态，并且在函数组件内也没有像setState函数来更改状态，因此 Hook 需要一个函数来更新每个状态。 所以 useState 返回是一对对应关系：一个值，一个更新该值函数。 当然，值可以是任何东西 - 任何JS类型 - 数字，布尔值，对象，数组等。

现在，你应该有很多疑问，如：

• 当组件重新渲染时，每次都不会重新创建新的状态吗？ React如何知道旧状态是什么？

• 为什么hook 名称必须以“use”开头？ 这看起来很可疑。

• 如果这是一个命名规则，那是否意味着我可以自定义 Hook。

• 如何存储更复杂的状态，很多场景不单单只有一个状态值这么简单。

Hooks 的魔力

将有状态信息存储在看似无状态的函数组件中，这是一个奇怪的悖论。这是第一个关于钩子的问题，咱们必须弄清楚它们是如何工作的。

原作者得的第一个猜测是某种编译器的在背后操众。搜索代码useWhatever并以某种方式用有状态逻辑替换它。

然后再听说了调用顺序规则(它们每次必须以相同的顺序调用)，这让我更加困惑。这就是它的工作原理。

React第一次渲染函数组件时，它同时会创建一个对象与之共存，该对象是该组件实例的定制对象，而不是全局对象。只要组件存在于DOM中，这个组件的对象就会一直存在。

使用该对象，React可以跟踪属于组件的各种元数据位。

请记住，React组件甚至函数组件都从未进行过自渲染。它们不直接返回HTML。组件依赖于React在适当的时候调用它们，它们返回的对象结构React可以转换为DOM节点。

React有能力在调用每个组件之前做一些设置，这就是它设置这个状态的时候。

其中做的一件事设置 Hooks 数组。 它开始是空的, 每次调用一个hook时，React 都会向该数组添加该 hook。

为什么顺序很重要

假设咱们有以下这个组件：

function AudioPlayer() {
  const [volume, setVolume] = useState(80);
  const [position, setPosition] = useState(0);
  const [isPlaying, setPlaying] = useState(false);

  .....
}

因为它调用useState 3次，React 会在第一次渲染时将这三个 hook 放入 Hooks 数组中。

下次渲染时，同样的3个hooks以相同的顺序被调用，所以React可以查看它的数组，并发现已经在位置0有一个useState hook ，所以React不会创建一个新状态，而是返回现有状态。

这就是React能够在多个函数调用中创建和维护状态的方式，即使变量本身每次都超出作用域。

多个useState 调用示例

让咱们更详细地看看这是如何实现的，第一次渲染：

1. React 创建组件时，它还没有调用函数。React 创建元数据对象和Hooks的空数组。假设这个对象有一个名为nextHook的属性，它被放到索引为0的位置上，运行的第一个hook将占用位置0。

2. React 调用你的组件（这意味着它知道存储hooks的元数据对象）。

3. 调用useState，React创建一个新的状态，将它放在hooks数组的第0位，并返回[volume，setVolume]对，并将volume 设置为其初始值80，它还将nextHook索引递增1。

4. 再次调用useState，React查看数组的第1位，看到它是空的，并创建一个新的状态。 然后它将nextHook索引递增为2，并返回[position，setPosition]。

5. 第三次调用useState。 React看到位置2为空，同样创建新状态，将nextHook递增到3，并返回[isPlaying，setPlaying]。

现在，hooks 数组中有3个hook，渲染完成。 下一次渲染会发生什么？

1. React需要重新渲染组件, 由于 React 之前已经看过这个组件，它已经有了元数据关联。

2. React将nextHook索引重置为0，并调用组件。

3. 调用useState，React查看索引0处的hooks数组，并发现它已经在该槽中有一个hook。，所以无需重新创建一个，它将nextHook推进到索引1并返回[volume，setVolume]，其中volume仍设置为80。

4. 再次调用useState。 这次，nextHook为1，所以React检查数组的索引1。同样，hook 已经存在，所以它递增nextHook并返回[position，setPosition]。

5. 第三次调用useState，我想你知道现在发生了什么。

就是这样了，知道了原理，看起来也就不那么神奇了， 但它确实依赖于一些规则，所以才有使用 Hooks 规则。

Hooks 的规则

自定义 hooks 函数只需要遵守规则 3 ：它们的名称必须以“use”为前缀。

例如，我们可以从AudioPlayer组件中将3个状态提取到自己的自定义钩子中：

function AudioPlayer() {
  // Extract these 3 pieces of state:
  const [volume, setVolume] = useState(80);
  const [position, setPosition] = useState(0);
  const [isPlaying, setPlaying] = useState(false);

  // < beautiful audio player goes here >
}

因此，咱们可以创建一个专门处理这些状态的新函数，并使用一些额外的方法返回一个对象，以便更容易启动和停止播放，例如：

function usePlayerState(lengthOfClip) {
  const [volume, setVolume] = useState(80);
  const [position, setPosition] = useState(0);
  const [isPlaying, setPlaying] = useState(false);

  const stop = () => {
    setPlaying(false);
    setPosition(0);
  }

  const start = () => {
    setPlaying(true);
  }

  return {
    volume,
    position,
    isPlaying,
    setVolume,
    setPosition,
    start,
    stop
  };
}

像这样提取状态的一个好处是可以将相关的逻辑和行为组合在一起。可以提取一组状态和相关事件处理程序以及其他更新逻辑，这不仅可以清理组件代码，还可以使这些逻辑和行为可重用。

另外，通过在自定义hooks中调用自定义hooks，可以将hooks组合在一起。hooks只是函数，当然，函数可以调用其他函数。

总结

Hooks 提供了一种新的方式来处理React中的问题，其中的思想是很有意思且新奇的。

React团队整合了一组很棒的文档和一个常见问题解答，从是否需要重写所有的类组件到钩Hooks是否因为在渲染中创建函数而变慢? 以及两者之间的所有东西，所以一定要看看。

原文：https://daveceddia.com/intro-to-hooks/

前言

在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。

说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。尤其当我们使用诸如umi.js之类的应用框架还帮我们把webpack配置再封装一层的时候，webpack的本质似乎离我们更加遥远和深不可测了。

当面试官问你是否了解webpack的时候，或许你可以说出一串耳熟能详的webpack loader和plugin的名字，甚至还能说出插件和一系列配置做按需加载和打包优化，那你是否了解他的运行机制以及实现原理呢，那我们今天就一起探索webpack的能力边界，尝试了解webpack的一些实现流程和原理，拒做API工程师。

你知道webpack的作用是什么吗？

从官网上的描述我们其实不难理解，webpack的作用其实有以下几点：

• 模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。
• 编译兼容。在前端的“上古时期”，手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。
• 能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

说一下模块打包运行原理？

如果面试官问你Webpack是如何把这些模块合并到一起，并且保证其正常工作的，你是否了解呢？

首先我们应该简单了解一下webpack的整个打包流程：

• 1、读取webpack的配置参数；
• 2、启动webpack，创建Compiler对象并开始解析项目；
• 3、从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树；
• 4、对不同文件类型的依赖模块文件使用对应的Loader进行编译，最终转为Javascript文件；
• 5、整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。

其中文件的解析与构建是一个比较复杂的过程，在webpack源码中主要依赖于compiler和compilation两个核心对象实现。

compiler对象是一个全局单例，他负责把控整个webpack打包的构建流程。compilation对象是每一次构建的上下文对象，它包含了当次构建所需要的所有信息，每次热更新和重新构建，compiler都会重新生成一个新的compilation对象，负责此次更新的构建过程。

而每个模块间的依赖关系，则依赖于AST语法树。每个模块文件在通过Loader解析完成之后，会通过acorn库生成模块代码的AST语法树，通过语法树就可以分析这个模块是否还有依赖的模块，进而继续循环执行下一个模块的编译解析。

最终Webpack打包出来的bundle文件是一个IIFE的执行函数。

// webpack 5 打包的bundle文件内容

(() => { // webpackBootstrap
    var __webpack_modules__ = ({
        'file-A-path': ((modules) => { // ... })
        'index-file-path': ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => { // ... })
    })
    
    // The module cache
    var __webpack_module_cache__ = {};
    
    // The require function
    function __webpack_require__(moduleId) {
        // Check if module is in cache
        var cachedModule = __webpack_module_cache__[moduleId];
        if (cachedModule !== undefined) {
                return cachedModule.exports;
        }
        // Create a new module (and put it into the cache)
        var module = __webpack_module_cache__[moduleId] = {
                // no module.id needed
                // no module.loaded needed
                exports: {}
        };

        // Execute the module function
        __webpack_modules__[moduleId](module, module.exports, __webpack_require__ "moduleId");

        // Return the exports of the module
        return module.exports;
    }
    
    // startup
    // Load entry module and return exports
    // This entry module can't be inlined because the eval devtool is used.
    var __webpack_exports__ = __webpack_require__("./src/index.js");
})

和webpack4相比，webpack5打包出来的bundle做了相当的精简。在上面的打包demo中，整个立即执行函数里边只有三个变量和一个函数方法，__webpack_modules__存放了编译后的各个文件模块的JS内容，__webpack_module_cache__ 用来做模块缓存，__webpack_require__是Webpack内部实现的一套依赖引入函数。最后一句则是代码运行的起点，从入口文件开始，启动整个项目。

其中值得一提的是__webpack_require__模块引入函数，我们在模块化开发的时候，通常会使用ES Module或者CommonJS规范导出/引入依赖模块，webpack打包编译的时候，会统一替换成自己的__webpack_require__来实现模块的引入和导出，从而实现模块缓存机制，以及抹平不同模块规范之间的一些差异性。

你知道sourceMap是什么吗？

提到sourceMap，很多小伙伴可能会立刻想到Webpack配置里边的devtool参数，以及对应的eval，eval-cheap-source-map等等可选值以及它们的含义。除了知道不同参数之间的区别以及性能上的差异外，我们也可以一起了解一下sourceMap的实现方式。

sourceMap是一项将编译、打包、压缩后的代码映射回源代码的技术，由于打包压缩后的代码并没有阅读性可言，一旦在开发中报错或者遇到问题，直接在混淆代码中debug问题会带来非常糟糕的体验，sourceMap可以帮助我们快速定位到源代码的位置，提高我们的开发效率。sourceMap其实并不是Webpack特有的功能，而是Webpack支持sourceMap，像JQuery也支持souceMap。

既然是一种源码的映射，那必然就需要有一份映射的文件，来标记混淆代码里对应的源码的位置，通常这份映射文件以.map结尾，里边的数据结构大概长这样：

{
  "version" : 3,                          // Source Map版本
  "file": "out.js",                       // 输出文件（可选）
  "sourceRoot": "",                       // 源文件根目录（可选）
  "sources": ["foo.js", "bar.js"],        // 源文件列表
  "sourcesContent": [null, null],         // 源内容列表（可选，和源文件列表顺序一致）
  "names": ["src", "maps", "are", "fun"], // mappings使用的符号名称列表
  "mappings": "A,AAAB;;ABCDE;"            // 带有编码映射数据的字符串
}

其中mappings数据有如下规则：

• 生成文件中的一行的每个组用“;”分隔；
• 每一段用“,”分隔；
• 每个段由1、4或5个可变长度字段组成；

有了这份映射文件，我们只需要在我们的压缩代码的最末端加上这句注释，即可让sourceMap生效：

//# sourceURL=/path/to/file.js.map

有了这段注释后，浏览器就会通过sourceURL去获取这份映射文件，通过解释器解析后，实现源码和混淆代码之间的映射。因此sourceMap其实也是一项需要浏览器支持的技术。

如果我们仔细查看webpack打包出来的bundle文件，就可以发现在默认的development开发模式下，每个_webpack_modules__文件模块的代码最末端，都会加上//# sourceURL=webpack://file-path?，从而实现对sourceMap的支持。

sourceMap映射表的生成有一套较为复杂的规则，有兴趣的小伙伴可以看看以下文章，帮助理解soucrMap的原理实现：

Source Map的原理探究[1]

Source Maps under the hood – VLQ, Base64 and Yoda[2]

是否写过Loader？简单描述一下编写loader的思路？

从上面的打包代码我们其实可以知道，Webpack最后打包出来的成果是一份Javascript代码，实际上在Webpack内部默认也只能够处理JS模块代码，在打包过程中，会默认把所有遇到的文件都当作 JavaScript代码进行解析，因此当项目存在非JS类型文件时，我们需要先对其进行必要的转换，才能继续执行打包任务，这也是Loader机制存在的意义。

Loader的配置使用我们应该已经非常的熟悉：

// webpack.config.js
module.exports = {
  // ...other config
  module: {
    rules: [
      {
        test: /^your-regExp$/,
        use: [
          {
             loader: 'loader-name-A',
          }, 
          {
             loader: 'loader-name-B',
          }
        ]
      },
    ]
  }
}

通过配置可以看出，针对每个文件类型，loader是支持以数组的形式配置多个的，因此当Webpack在转换该文件类型的时候，会按顺序链式调用每一个loader，前一个loader返回的内容会作为下一个loader的入参。因此loader的开发需要遵循一些规范，比如返回值必须是标准的JS代码字符串，以保证下一个loader能够正常工作，同时在开发上需要严格遵循“单一职责”，只关心loader的输出以及对应的输出。

loader函数中的this上下文由webpack提供，可以通过this对象提供的相关属性，获取当前loader需要的各种信息数据，事实上，这个this指向了一个叫loaderContext的loader-runner特有对象。有兴趣的小伙伴可以自行阅读源码。

module.exports = function(source) {
    const content = doSomeThing2JsString(source);
    
    // 如果 loader 配置了 options 对象，那么this.query将指向 options
    const options = this.query;
    
    // 可以用作解析其他模块路径的上下文
    console.log('this.context');
    
    /*
     * this.callback 参数：
     * error：Error | null，当 loader 出错时向外抛出一个 error
     * content：String | Buffer，经过 loader 编译后需要导出的内容
     * sourceMap：为方便调试生成的编译后内容的 source map
     * ast：本次编译生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，进而省去重复生成 AST 的过程
     */
    this.callback(null, content);
    // or return content;
}

更详细的开发文档可以直接查看官网的 Loader API[3]。

是否写过Plugin？简单描述一下编写plugin的思路？

如果说Loader负责文件转换，那么Plugin便是负责功能扩展。Loader和Plugin作为Webpack的两个重要组成部分，承担着两部分不同的职责。

上文已经说过，webpack基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务，从而实现自己想要的功能。

既然基于发布订阅模式，那么知道Webpack到底提供了哪些事件钩子供插件开发者使用是非常重要的，上文提到过compiler和compilation是Webpack两个非常核心的对象，其中compiler暴露了和 Webpack整个生命周期相关的钩子（compiler-hooks[4]），而compilation则暴露了与模块和依赖有关的粒度更小的事件钩子（Compilation Hooks[5]）。

Webpack的事件机制基于webpack自己实现的一套Tapable事件流方案（github[6]）

// Tapable的简单使用
const { SyncHook } = require("tapable");

class Car {
    constructor() {
        // 在this.hooks中定义所有的钩子事件
        this.hooks = {
            accelerate: new SyncHook(["newSpeed"]),
            brake: new SyncHook(),
            calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
        };
    }

    /* ... */
}


const myCar = new Car();
// 通过调用tap方法即可增加一个消费者，订阅对应的钩子事件了
myCar.hooks.brake.tap("WarningLampPlugin", () => warningLamp.on());

Plugin的开发和开发Loader一样，需要遵循一些开发上的规范和原则：

• 插件必须是一个函数或者是一个包含 apply 方法的对象，这样才能访问compiler实例；
• 传给每个插件的 compiler 和 compilation 对象都是同一个引用，若在一个插件中修改了它们身上的属性，会影响后面的插件;
• 异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程，不然会卡住;

了解了以上这些内容，想要开发一个 Webpack Plugin，其实也并不困难。

class MyPlugin {
  apply (compiler) {
    // 找到合适的事件钩子，实现自己的插件功能
    compiler.hooks.emit.tap('MyPlugin', compilation => {
        // compilation: 当前打包构建流程的上下文
        console.log(compilation);
        
        // do something...
    })
  }
}

最后

本文也是结合一些优秀的文章和webpack本身的源码，大概地说了几个相对重要的概念和流程，其中的实现细节和设计思路还需要结合源码去阅读和慢慢理解。

Webpack作为一款优秀的打包工具，它改变了传统前端的开发模式，是现代化前端开发的基石。这样一个优秀的开源项目有许多优秀的设计思想和理念可以借鉴，我们自然也不应该仅仅停留在API的使用层面，尝试带着问题阅读源码，理解实现的流程和原理，也能让我们学到更多知识，理解得更加深刻，在项目中才能游刃有余的应用。

参考资料

[1]Source Map的原理探究: https://blog.fundebug.com/201...

[2]Source Maps under the hood – VLQ, Base64 and Yoda: *https://docs.microsoft.com/zh...

[3]Loader API: *https://www.webpackjs.com/api...

[4]compiler-hooks: https://webpack.js.org/api/co...

[5]Compilation Hooks: https://webpack.js.org/api/co...

[6]github: https://github.com/webpack/ta...

[7]Plugin API: https://www.webpackjs.com/api...

原文地址(前端大全)

ECMAScript发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变JavaScript编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符：空运算符，AND和OR运算符，这些运算符的出现，也是希望让我们的代码更干净简洁，下面分享几个优雅的JavaScript运算符使用技巧

一、可选链接运算符【？.】

可选链接运算符（Optional Chaining Operator） 处于ES2020提案的第4阶段，因此应将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深层嵌套的属性。它也可以作为TypeScript 3.7+中的功能使用。

相信大部分开发前端的的小伙伴们都会遇到null和未定义的属性。JS语言的动态特性使其无法不碰到它们。特别是在处理嵌套对象时，以下代码很常见：

if (data && data.children && data.children[0] && data.children[0].title) {

    // I have a title!

}

上面的代码用于API响应，我必须解析JSON以确保名称存在。但是，当对象具有可选属性或某些配置对象具有某些值的动态映射时，可能会遇到类似情况，需要检查很多边界条件。

这时候，如果我们使用可选链接运算符，一切就变得更加轻松了。它为我们检查嵌套属性，而不必显式搜索梯形图。我们所要做的就是使用“？” 要检查空值的属性之后的运算符。我们可以随意在表达式中多次使用该运算符，并且如果未定义任何项，它将尽早返回。

对于静态属性用法是：

object?.property

对于动态属性将其更改为：

object?.[expression]

上面的代码可以简化为：

let title = data?.children?.[0]?.title;

然后，如果我们有:

let data;

console.log(data?.children?.[0]?.title) // undefined



data  = {children: [{title:'codercao'}]}

console.log(data?.children?.[0]?.title) // codercao

这样写是不是更加简单了呢？ 由于操作符一旦为空值就会终止，因此也可以使用它来有条件地调用方法或应用条件逻辑

const conditionalProperty = null;

let index = 0;



console.log(conditionalProperty?.[index++]); // undefined

console.log(index);  // 0

对于方法的调用你可以这样写

object.runsOnlyIfMethodExists?.()

例如下面的parent对象，如果我们直接调用parent.getTitle(),则会报Uncaught TypeError: parent.getTitle is not a function错误，parent.getTitle?.()则会终止不会执行

let parent = {

    name: "parent",

    friends: ["p1", "p2", "p3"],

    getName: function() {

      console.log(this.name)

    }

  };

  

  parent.getName?.()   // parent

  parent.getTitle?.()  //不会执行

  

与无效合并一起使用

提供了一种方法来处理未定义或为空值和表达提供默认值。我们可以使用??运算符，为表达式提供默认值

console.log(undefined ?? 'codercao'); // codercao

因此，如果属性不存在，则可以将无效的合并运算符与可选链接运算符结合使用以提供默认值。

let title = data?.children?.[0]?.title ?? 'codercao';

console.log(title); // codercao

二、逻辑空分配（?? =）

expr1 ??= expr2

逻辑空值运算符仅在空值（空值或未定义undefined）时才将值分配给expr1，表达方式：

x ??= y

可能看起来等效于：

x = x ?? y;

但事实并非如此！有细微的差别。

空的合并运算符（??）从左到右操作，如果x不为空，则短路。因此，如果x不为null或未定义，则永远不会对表达式y进行求值。因此，如果y是一个函数，它将根本不会被调用。因此，此逻辑赋值运算符等效于

x ?? (x = y);

三、逻辑或分配（|| =）

此逻辑赋值运算符仅在左侧表达式为 falsy值时才赋值。Falsy值与null有所不同，因为falsy值可以是任何一种值：undefined，null，空字符串(双引号""、单引号’’、反引号``)，NaN，0。IE浏览器中的 document.all，也算是一个。

语法

x ||= y

等同于

x || (x = y)

在我们想要保留现有值（如果不存在）的情况下，这很有用，否则我们想为其分配默认值。例如，如果搜索请求中没有数据，我们希望将元素的内部HTML设置为默认值。否则，我们要显示现有列表。这样，我们避免了不必要的更新和任何副作用，例如解析，重新渲染，失去焦点等。我们可以简单地使用此运算符来使用JavaScript更新HTML：

document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'

四、逻辑与分配（&& =）

可能你已经猜到了，此逻辑赋值运算符仅在左侧为真时才赋值。因此：

x &&= y

等同于

x && (x = y)

最后

本次分享几个优雅的JavaScript运算符使用技巧，重点分享了可选链接运算符的使用，这样可以让我们不需要再编写大量我们例子中代码即可轻松访问嵌套属性。但是IE不支持它，因此，如果需要支持该版本或更旧版本的浏览器，则可能需要添加Babel插件。对于Node.js，需要为此升级到Node 14 LTS版本，因为12.x不支持该版本。

如果你也有优雅的优雅的JavaScript运算符使用技巧，请不要吝惜，在评论区一起交流~

原文链接：https://segmentfault.com/a/1190000039885243

h5项目转uniapp项目总结

why

先说一下为什么要用uniapp，主要是因为之前我们刚做完云闪付小程序(webview页面)，老板又让我们做抖音小程序（后面还会做各种小程序），于是我们就想到了uniapp，之前也没做过想想也挺激动的

项目目录

├── README.md

├── babel.config.js

├── dist

├── node_modules

├── package-lock.json

├── package.json

├── postcss.config.js
├── public

├── src

      ├── App.vue   

      ├── api   

      ├── assets  

      ├── components  

      ├── config  

      ├── main.js  

      ├── manifest.json  

      ├── mixins  

      ├── pages  

      ├── pages.json  

      ├── pagesub  

      ├── services  

      ├── static  

      ├── store  

      ├── uni.scss   

      └── utils

├── tsconfig.json

├── vue.config.js

├── yarn-error.log

└── yarn.lock

条件编译

/** #ifdef 平台名称 **/ 



你的css或者js代码 



/** #endif **/

样式

scoped 样式穿透
/deep/ 选择器 {}

// vue.config 配置less全局变量引入
let path = require('path');
module.exports = {
  // 全局使用less变量
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/assets/theme.less') // 我的主题变量文件地址
      ]
    }
  }
}

插件

符合easycom命名规范可以省略引入组件的步骤

vuex

store数据改变页面未更新，我使用了一个mixin来解决，大概思路是混入需要更新的属性，在onShow钩子函数中执行
// mixin
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    getUserInfo() {  
      this.userInfo = this.$store.getters.userInfo
    }
  }
}

// 页面 重新赋值
onShow() {
    this.getUserInfo()
  }

路由

• Vue的路由全写在pages里面
• 路由跳转使用uniapp api
• 页面title设置参考uniapp API

原生组件层级过高

页面的textarea层级过高盖住了popup弹窗

• 使用cover-view提高popup组件层级（头条小程序不支持cover-view）
• 使用hidden属性动态显示隐藏原生组件，popup组件弹出隐藏原生组件，反之亦然

最后

一开始写是愉悦的，改样式bug是痛苦的，结局是还算是好的。

mpvue作为美团技术团队的一个KPI产品，莫名其妙突然就不维护了，随着node版本和项目依赖不断更新，你会发现你原先的项目可能突然跑不起来了，此时你需要mpvue的替代品，没错，我要说的就是uni-app。

只需几步，你可以很轻松的把mpvue项目迁移到uni-app。

先去官网按步骤建好项目

https://uniapp.dcloud.io/quickstart

1、 把mpvue项目里src目录的文件复制到uni-app项目里

2、把main.js搬到uniapp的page.json里

mpvue的main.js

搬过来之后是这样的

3、运行，看看css是否跟原版有偏差，重新调整。此外要把api改成uni-app的，例如发请求api的要换成这个

https://uniapp.dcloud.io/api/request/request

实现倒计时对前端工程师来说，是很常见的需求。那么，要怎么实现精确的倒计时呢？

首先，考虑到客户端时间和服务端时间有误差，所以计算倒计时的时候，应该读取服务端的时间。但是，只考虑到这一点还远远不够的。页面运行时间长了，新打开页面的倒计时和原打开页面的倒计时还是存在误差。要减少这里的误差，就要说到Javascript解释器的工作原理。

Javascript解释器工作原理
Javascript解释器是单线程工作的，它执行任务按照任务进入队列的先后顺序执行。这会造成什么影响呢？
打个比方，设置定时器的时候，按照理想状况，下面的程序应当稳定的输出0。

let start = new Date().getTime()
    let count = 0
    setInterval(function(){
        count++
        console.log(new Date().getTime() - (start + count * 1000))
    },1000)

由于代码执行占用时间，以及其他事件的阻塞，导致有些事件的执行延迟了几ms，阻塞事件不多时，影响微乎其微。但当我们添加更多的阻塞事件时，这个影响就会被放大，如下面的代码

let start = new Date().getTime()
    let count = 0
    setInterval(function(){
        let j = 0
        while(j++ < 100000000){}
    },1)
    setInterval(function(){
        count++
        console.log(new Date().getTime() - (start + count * 1000))
    },1000)

线程阻塞解决方案

那么我们要怎么解决线程阻塞的问题呢？
按照正常的思路，如果没有被阻塞，下面设置好的定时器应该每隔1s执行一次。

setInterval(function(){},1000)

但是，如果出现阻塞事件，定时器可能就要隔1000+ms才执行一次。要精确的实现每隔1s执行一次，必须要先获取阻塞的时间。这里要用到定时器函数setTimeout控制定时器的执行时间，代码实现如下

setInterval(function(){
        let j = 0
        while(j++ < 100000000){}
    },1)
    let  interval = 1000,
        ms = 50000,  //从服务器和活动开始时间计算出的时间差，这里测试用50000ms
        count = 0,
        startTime = new Date().getTime();
    if( ms >= 0){
        var timeCounter = setTimeout(countDownStart,interval);
    }

第一部分的setInterval是一段阻塞代码。然后，我们分别定义了interval作为定时器的执行时间，距活动结束的时间用ms表示（ms=活动结束时间-服务器时间），
count表示计数器，然后启动定时器timeCounter。其中，countDownStart函数的实现逻辑如下

function countDownStart(){
        count++;
        let offset = new Date().getTime() - (startTime + count * interval);
        let nextTime = interval - offset;
        if (nextTime < 0) { nextTime = 0 };
        ms -= interval;
        console.log("误差：" + offset + "ms" );
        if(ms < 0){
            clearTimeout(timeCounter);
        }else{
            timeCounter = setTimeout(countDownStart,nextTime);
        }
    }

countDownStart的实现原理是，首先定义一个变量offset用来记录阻塞导致延误的时间是多少。nextTime代表offset和interval的差距，根据nextTime修改定时器timeCounter的执行时间，使它nextTime(ms)执行一次。

打个比方，如果上一次执行过程中因为阻塞延误了100ms，那么下一次就提前100ms启动定时器，即

timeCounter = setTimeout(countDownStart,900)

原文链接：https://blog.csdn.net/weixin_41672178/article/details/88372553

文件内容如下：

// add.js
export default (a, b) => {
    return a + b
}
// minus.js
export const minus = (a, b) => {
    return a - b
}
// index.js
import add from './add.js'
import { minus } from './minus.js'

const sum = add(1, 2)
const division = minus(2, 1)
console.log('sum>>>>>', sum)
console.log('division>>>>>', division)

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<body>
    <script src="./src/index.js"></script>
</body>
</html>

Uncaught SyntaxError: Cannot use import statement outside a module

// bundle.js
const fs = require('fs')
const getModuleInfo = file => {
    const body = fs.readFileSync(file, 'utf-8')
    console.log(body)
}
getModuleInfo('./src/index.js')

// bundle.js
const fs = require('fs')
const parser = require('@babel/parser')
const getModuleInfo = file => {
    const body = fs.readFileSync(file, 'utf-8')
    const ast = parser.parse(body, {
        // 表示我们要解析的是es6模块
       sourceType: 'module' 
    })
    console.log(ast)
    console.log(ast.program.body)
}
getModuleInfo('./src/index.js')

const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default

const getModuleInfo = file => {
    const body = fs.readFileSync(file, 'utf-8')
    const ast = parser.parse(body, {
       sourceType: 'module' 
    })
    const deps = {}
    traverse(ast, {
        ImportDeclaration({ node }) {
            const dirname = path.dirname(file);
            const absPath = './' + path.join(dirname, node.source.value)
            deps[node.source.value] = absPath
        }
    })
    console.log(deps)
}
getModuleInfo('./src/index.js')

const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

const getModuleInfo = file => {
    const body = fs.readFileSync(file, 'utf-8')
    const ast = parser.parse(body, {
       sourceType: 'module' 
    })
    const deps = {}
    traverse(ast, {
        ImportDeclaration({ node }) {
            const dirname = path.dirname(file);
            const absPath = './' + path.join(dirname, node.source.value)
            deps[node.source.value] = absPath
        }
    })
    const { code } = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    })
    const moduleInfo = { file, deps, code }
    console.log(moduleInfo)
    return moduleInfo
}
getModuleInfo('./src/index.js')

const parseModules = file => {
    // 定义依赖图
    const depsGraph = {}
    // 首先获取入口的信息
    const entry = getModuleInfo(file)
    const temp = [entry]
    for (let i = 0; i < temp.length; i++) {
        const item = temp[i]
        const deps = item.deps
        if (deps) {
            // 遍历模块的依赖，递归获取模块信息
            for (const key in deps) {
                if (deps.hasOwnProperty(key)) {
                    temp.push(getModuleInfo(deps[key]))
                }
            }
        }
    }
    temp.forEach(moduleInfo => {
        depsGraph[moduleInfo.file] = {
            deps: moduleInfo.deps,
            code: moduleInfo.code
        }
    })
    console.log(depsGraph)
    return depsGraph
}
parseModules('./src/index.js')

const bundle = file => {

    const depsGraph = JSON.stringify(parseModules(file))

}

复

const bundle = file => {

    const depsGraph = JSON.stringify(parseModules(file))

    return `(function(graph){

        function require(file) {

            var exports = {};

            return exports

        }

        require('${file}')

    })(${depsGraph})`

}

const bundle = file => {

    const depsGraph = JSON.stringify(parseModules(file))

    return `(function(graph){

        function require(file) {

            var exports = {};

            (function(code){

                eval(code)

            })(graph[file].code)

            return exports

        }

        require('${file}')

    })(${depsGraph})`

}

const bundle = file => {

    const depsGraph = JSON.stringify(parseModules(file))

    return `(function(graph){

        function require(file) {

            var exports = {};

            function absRequire(relPath){

                return require(graph[file].deps[relPath])

            }

            (function(require, exports, code){

                eval(code)

            })(absRequire, exports, graph[file].code)

            return exports

        }

        require('${file}')

    })(${depsGraph})`

}

const content = bundle('./src/index.js')

// 写入到dist/bundle.js

fs.mkdirSync('./dist')

fs.writeFileSync('./dist/bundle.js', content)

const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

const getModuleInfo = file => {
    const body = fs.readFileSync(file, 'utf-8')
    console.log(body)
    const ast = parser.parse(body, {
       sourceType: 'module' 
    })
    // console.log(ast.program.body)
    const deps = {}
    traverse(ast, {
        ImportDeclaration({ node }) {
            const dirname = path.dirname(file);
            const absPath = './' + path.join(dirname, node.source.value)
            deps[node.source.value] = absPath
        }
    })
    const { code } = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    })
    const moduleInfo = { file, deps, code }
    return moduleInfo
}

const parseModules = file => {
    // 定义依赖图
    const depsGraph = {}
    // 首先获取入口的信息
    const entry = getModuleInfo(file)
    const temp = [entry]
    for (let i = 0; i < temp.length; i++) {
        const item = temp[i]
        const deps = item.deps
        if (deps) {
            // 遍历模块的依赖，递归获取模块信息
            for (const key in deps) {
                if (deps.hasOwnProperty(key)) {
                    temp.push(getModuleInfo(deps[key]))
                }
            }
        }
    }
    temp.forEach(moduleInfo => {
        depsGraph[moduleInfo.file] = {
            deps: moduleInfo.deps,
            code: moduleInfo.code
        }
    })
    // console.log(depsGraph)
    return depsGraph
}


// 生成最终可以在浏览器运行的代码
const bundle = file => {
    const depsGraph = JSON.stringify(parseModules(file))
    return `(function(graph){
        function require(file) {
            var exports = {};
            function absRequire(relPath){
                return require(graph[file].deps[relPath])
            }
            (function(require, exports, code){
                eval(code)
            })(absRequire, exports, graph[file].code)
            return exports
        }
        require('${file}')
    })(${depsGraph})`
}


const build = file => {
    const content = bundle(file)
    // 写入到dist/bundle.js
    fs.mkdirSync('./dist')
    fs.writeFileSync('./dist/bundle.js', content)
}

build('./src/index.js')

随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，比如 sass 和 less 的代码浏览器是不支持的， 但如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack 脱颖而出成为了当今最流行的前端构建工具。 然而大多数的使用者都只是单纯的会使用，而并不知道其深层的原理。希望通过以下的面试题总结可以帮助大家温故知新、查缺补漏，知其然而又知其所以然。

1. webpack 与 grunt、gulp 的不同？

三者都是前端构建工具，grunt 和 gulp 在早期比较流行，现在 webpack 相对来说比较主流，不过一些轻量化的任务还是会用 gulp 来处理，比如单独打包 CSS 文件等。

grunt 和 gulp 是基于任务和流（Task、Stream）的。类似 jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个 web 的构建流程。

webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 来处理不同的文件，用 Plugin 来扩展 webpack 功能。

所以总结一下：

• 从构建思路来说
  • gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个 `Task`，并合理控制所有 `Task` 的调用关系。
    webpack 需要开发者找到入口，并需要清楚对于不同的资源应该使用什么 Loader 做何种解析和加工。

• 对于知识背景来说
  • gulp 更像后端开发者的思路，需要对于整个流程了如指掌。 webpack 更倾向于前端开发者的思路。

2. 你为什么最终选择使用 webpack？

基于入口的打包工具除了 webpack 以外，主流的还有：rollup 和 parcel。

从应用场景上来看：

• webpack 适用于大型复杂的前端站点构建
• rollup 适用于基础库的打包，如 vue、react
• parcel 适用于简单的实验性项目，他可以满足低门槛的快速看到效果

由于 parcel 在打包过程中给出的调试信息十分有限，所以一旦打包出错难以调试，所以不建议复杂的项目使用 parcel

3. 有哪些常见的 Loader？解决什么问题？

• babel-loader：把 ES6 转换成 ES5
• eslint-loader：通过 ESLint 检查 JavaScript 代码
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
• image-loader：加载并且压缩图片文件
• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试

4. 有哪些常见的Plugin？解决什么问题？

• define-plugin：定义环境变量
• commons-chunk-plugin：提取公共代码
• uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
• HTMLWebpackPlugin：webpack 在自定生成 html 时需要用到它，能自动引入 js/css 文件
• MiniCssExtractPlugin：将 css 代码抽成单独的文件，一般适用于发布环境，生产环境用 css-loader

5. Loader 和 Plugin 的不同？

不同的作用

• Loader 直译为"加载器"。webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 所以 Loader 的作用是让 webpack 拥有了加载和解析非JavaScript文件 的能力。
• Plugin 直译为"插件"。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。

不同的用法

• Loader 在 module.rules 中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载器 (loader) 和使用的参数（options）
• Plugin 在 plugins 中单独配置。 类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。

6. 如何利用 webpack 来优化前端性能？

用 webpack 优化前端性能是指：优化 webpack 的输出结果，让打包的最终结果在浏览器运行快速高效。

• 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用 webpack 的 UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩 css
• 利用 CDN 加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用 webpack 对于output参数和各loader 的 publicPath 参数来修改资源路径
• 删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
• 提取公共代码。

7. 如何提高 webpack 的构建速度？

1. 多入口情况下，使用 CommonsChunkPlugin 来提取公共代码
2. 通过 externals 配置来提取常用库
3. 利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过 DllReferencePlugin将预编译的模块加载进来。
4. 使用 Happypack 实现多线程加速编译
5. 使用 webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度
6. 使用 Tree-shaking 和 Scope Hoisting 来剔除多余代码

最近在读《webpack深入浅出》，总结一下webpack关于面试常见的问题，分享出来，希望可以帮助更多小伙伴在找到心爱的工作和期待的薪水。

一.常见的构建工具有哪些？他们各自优缺点？为什么选择了webpack？

Grunt、Gulp、Fis3、Rollup、Npm Script、webpack

<1>Grunt的优点是：

• 灵活，它只负责执行我们定义的任务；

• 大量的可复用插件封装好了常见的构建任务。

Grunt的缺点是：

集成度不高，要写很多配置后才可以用，无法做到开箱即用。Grunt相当于进化版的NpmScript，它的诞生其实是为了弥补NpmScript的不足。

<2>Gulp的优点是： 好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。

其缺点： 和Grunt类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用。

<3> Fis3的优点是：集成了各种Web开发所需的构建功能，配置简单、开箱即用。

其缺点是 目前官方己经不再更新和维护，不支持最新版本的T、fode

<4>Webpack的优点是：• 专注于处理模块化的项目，能做到开箱即用、一步到位：

• 可通过Plugin扩展，完整好用又不失灵活；

• 使用场景不局限于Web开发

• 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展：

• 良好的开发体验。

Webpack的缺点是:只能用于采用模块化开发的项目。

<5> Rollup是在Webpack流行后出现的替代品，讲述差别：：
• Rollup生态链还不完善，体验不如Webpack;

• Rollup的功能不如Webpack完善，但其配置和使用更简单：

• Rollup不支持CodeSpliting，但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码。

Roll up在用于打包JavaScript库时比Webpack更有优势，因为其打包出来的代码更小、

深入浅出Webpack更快。

缺点：但它的功能不够完善，在很多场景下都找不到现成的解决方案

<6>Npm Script的优点 是内置，无须安装其他依赖。
其缺点 是功能太简单，虽然提供了pre和post两个钩子，但不能方便地管理多个任务之间的依赖

为啥选择webpack？
大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化＋新语言＋新框架”，Webpack可以为这些新项目提供一站式的解决方案：
• Webpack有良好的生态链和维护团队，能提供良好的开发体验并保证质量：

• Webpack被全世界大量的Web开发者使用和验证，能找到各个层面所需的教程和经验分享。

二.有哪些常见的Loader？你用过哪些Loader？

1. 加载文件
• raw-loader ：将文本文件的内容加载到代码中

• file-loader ：将文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

• url-loader ：和 file-loader 类似，但是能在文件很小的情况下以 base64 方式将文件的内容注入代码中

• source-map-loader ：加载额外的 SourceMap 文件，以方便断点调试

• svg-inline-loader ：将压缩后的SVG 内容注入代码中

• node-loader ：加载 Node.js 原生模块的 .node 文件

• image-loader ：加载并且压缩图片文件

• json-loader：加载 JSON 文件

• yaml-loader：加载 YAML 文件

2. 编译模版
• pug-loader ：将 Pug 模版转换成 JavaScript 函数井返回。

• handlebars-loader：将 Handlebars模版编译成函数并返回

• s-loader ：将 EJS 模版编译成函数井返回

• haml-loader：将 HAML 代码转换成 HTML

• markdown-loader 将 Markdown 文件转换成 HTML

3.转换脚本语言
• babel-loader ：将 ES6 转换成 ES5 

• ts-loader ：将 TypeScript 转换成 JavaScript,

• awesome-typescript-loader: Type Script 转换成 JavaScript ，性能要比 ts-loader好

• coffee-loader 将 CoffeeScript换成 JavaScript

4.转换样式文件
• css-loader ：加载 css ，支持模块化、压缩、文件导入等特性。

• style-loader ：将 css 代码 注入JavaScript 中，通过 DOM 操作去加载 css

• sass-loader ：将 SCSS SASS 代码转换成 css 

• postcss-loader ： 扩展 css 语法，使用css 

• less-loader ： Less 代码转换成 css代码

• stylus-loader ：将 Stylu 代码转换成 css 码。

5. 检查代码
• eslint-loader ：通过 ESLint 检查 JavaScript
代码

• tslint-loader ：通过 TSLint peScript
代码

• mocha-loader ：加载 Mocha 测试
用例的代码

• coverjs-loader ： 计算测试的覆盖率。

6.其他 Loader
• vue-loader ：加载 Vue. 单文件组件

• i18n-loader：加载多语言版本，支持国际化

• ignore-loader ：忽略部分文件

• ui-component-loader：按需加载
UI 组件库，例如在使用 antdUI 组件库时，不会因为只用到了 Button 组件而打包进所有的组件

3.有哪些常见的Plugin？你用过哪些Plugin？

1.用于修改行为
• define-plugin ：定义环境变量

• context-replacement-plugin : 修改 require 语句在寻找文件时的默认行为

• ignore-plugin  ：用 于忽略部分文件

2.用于优化
• commons-chunk-plugin ：提取公共代码。

• extract-text-webpack-plugin ：提取 JavaScript 中的 css 代码到单独的文件中

• prepack-webpack-plugin  ：通过Facebook Prepack 优化输出的 JavaScript 代码的性能

• uglifyjs-webpack-plugin ：通过 UglifyES 压缩 S6 代码

• webpack-parallel-uglify-plugin ：多进程执行 glifyJS 代码压缩，提升构建的速度

• imagemin-webpack-plugin : 压缩图片文件。

• webpack-spritesmith ：用插件制作碧图

• ModuleConcatenationPlugin : 开启 WebpackScopeHoisting 功能

• dll-plugin  ：借鉴 DDL 的思想大幅度提升构建速度

• hot-module-replacem nt-plugin 开启模块热替换功能。

3. 其他 Plugin 
• serviceworker-webpack-plugin ：为网页应用增加离钱缓存功能

• stylelint-webpack-plugin ： stylelint集成到项目中，

• i18n-webpack-plugin ： 使网页支持国际化。

• provide-plugin ： 从环境中提供的全局变量中加载模块，而不用导入对应的文件。

• web-webpack-plugin ： 可方便地为单页应用输出 HTML ，比 html-webpack-plugin 好用

4.那你再说一说Loader和Plugin的区别

Loader ：模块转换器，用于将模块的原内容按照需求转换成新内容。
Plugin ：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑，来改变构建结
果或做我们想要的事情。

5.Webpack构建流程简单说一下

初始化参数 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
• 开始编译：用上 步得到的参数初始 Co er 对象，加载所有配置的插件，通
过执行对象的 run 方法开始执行编译
• 确定入口 根据配置中的 ntry 找出所有入口文件
• 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出
模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
• 完成模块编译 在经过第 步使用 Loader 翻译完所有模块后， 得到了每个模块被
翻译后的最终内容及它们之间的依赖关系。
• 输出资源：根据入口和模块之间的依赖关系，组装成 个个包含多个模块的 Chunk,
再将每个 Chunk 转换成 个单独的文件加入输出列表中，这是可以修改输出内容
的最后机会
• 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内
容写入文件系统中。

6.使用webpack开发时，你用过哪些可以提高效率的插件

webpack-dashboard：可以更友好的展示相关打包信息。
webpack-merge：提取公共配置，减少重复配置代码
speed-measure-webpack-plugin：简称 SMP，分析出 Webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈。
size-plugin：监控资源体积变化，尽早发现问题
HotModuleReplacementPlugin：模块热替换

import { readFile} from 'fs';
import react from 'react';

// 导出
export function hello(){};
export default{...}

前端

1.BootStrap Table

1.1.1 HTML

<div>
		<div class="panel-body table-responsive">
			<table id="productTable" class="table">
			</table>
		</div>
</div>

1.1.2 js初始化（开发常用方法）

$('#productTable').bootstrapTable('refreshOptions',{pageNumber:1,pageSize:10});
var tableObject= $.find("#productTable");
$(tableObject).bootstrapTable({
	locale: 'zn-CN',
	pageSize: 10,
	pageNumber: 1,
	pageList: [10, 25, 50,100],
	clickToSelect: true,
	striped: true,
	ajax: function(ajaxParams) {
		json.NEXT_KEY = (ajaxParams.data.offset /ajaxParams.data.limit  + 1) + "";
		json.PAGE_SIZE = ajaxParams.data.limit + "";
		//json.SORT_NAME = ajaxParams.data.sort;
		//json.SORT_ORDER = ajaxParams.data.order;
		YT.ajaxData({
			url:dataUrl,
			params: json,
			success: function (msg) {
				var resultData = {total: msg.TOTAL_NUM||0,rows:  msg.LIST|| []};
				ajaxParams.success(resultData);
			}
		});
	},
	pagination: true,
	sidePagination: 'server',
	//sortName: '表格头排序字段',
	//sortOrder: 'desc',
	formatNoMatches: function() {
		return "暂无数据";
	},
	columns: [
	{
		checkbox: true,
		singleSelect : true,
		align: 'center'
	}，
	{
		field: '',
		title: '操作',
		formatter: removeHtml,
		align: 'center'
	}]
});	
// 自定义table列
function removeHtml(value,row,index){
		var data = $("#productTable").bootstrapTable('getData');
		var params= data[index];
		return [
			'<a class="btn btn-xs btn-primary" >自定义一些方法</a>'
		].join('')
	}
// 常用方法
1.获取当前table初始化数据
	var data = $("#productTable").bootstrapTable('getData');
	data-index：该属性是bootstrap table 下角标
2.获取多选选中行的数据
	var data = $("#productTable").bootstrapTable('getSelections');
3.清楚多选框全选
	$("#prodTable input[type='checkbox']:checked").prop("checked",false);
4.获取每页显示的数量
	var pageSize = $('#prodTable').bootstrapTable('getOptions').pageSize;
5.获取当前是第几页
	var pageNumber = $('#prodTable').bootstrapTable('getOptions').pageNumber;
6.隐藏列、显示列（可用于初始化table之后的列的动添显示与隐藏，执行该时间之后数据会回滚到初始化table时的数据）
	$("#prodTable").bootstrapTable("hideColumn","GROUP_LEADER_PRICE")		
	$("#prodTable").bootstrapTable("showColumn","GROUP_LEADER_PRICE")

1.1.3 总计

function statisticsTableInit() {
    	var columns = [
    		{
    			field: 'column1',
    			title: '表头1',
    			align: 'center'
    		},
    		{
    			field: 'column2',
    			title: '表头2',
    			align: 'center'
    		},
    		{
    			field: 'column3',
    			title: '表头3',
    			align: 'center'
    		}
    	];
        pageList.find("#prodTable").bootstrapTable({
            locale: 'zn-CN',
            columns: columns
        });
    }
	function statisticsAjax(json)  {
		YT.ajaxData({
			url:YT.dataUrl,
			params: json,
			success: function (msg) {
				if(msg && msg.LIST){
					pageList.find("#prodTable").bootstrapTable('load',(msg.LIST));
				}
			}
		});
	}

JavaScript 是一种易于学习的编程语言，编写运行并执行某些操作的程序很容易。然而，要编写一段干净的JavaScript 代码是很困难的。

在本文中，我们将介绍一些与清理 JavaScript 函数和类有关的重构思想。

不要直接对参数赋值

在使用参数之前，我们应该删除对参数的赋值，并将参数值赋给变量。

例如，我们可能会写这样的代码：

const discount = (subtotal) => {

  if (subtotal > 50) {

    subtotal *= 0.8;

  }

}

对比上面的代码，我们可以这样写：

const discount = (subtotal) => {

  let _subtotal = subtotal;

  if (_subtotal > 50) {

    _subtotal *= 0.8;

  }

}

因为参数有可能是通过值或者引用传递的，如果是引用传递的，直接负值操作，有些结果会让感到困惑。

本例是通过值传递的，但为了清晰起见，我们还是将参数赋值给变量了。

用函数替换方法

我们可以将一个方法变成自己的函数，以便所有类都可以访问它。

例如，我们可能会写这样的代码：

const hello = () => {

  console.log('hello');

}

class Foo {

  hello() {

    console.log('hello');

  }

  //...

}

class Bar {

  hello() {

    console.log('hello');

  }

  //...

}

我们可以将hello方法提取到函数中，如下所示：

const hello = () => {

  console.log('hello');

}

class Foo {

  //...

}

class Bar {

  //...

}

由于hello方法不依赖于this，并且在两个类中都重复，因此我们应将其移至其自己的函数中以避免重复。

替代算法

相对流程式的写法，我们想用一个更清晰的算法来代替，例如，我们可能会写这样的代码：

const doubleAll = (arr) => {

  const results = []

  for (const a of arr) {

    results.push(a * 2);

  }

  return results;

}

对比上面的代码，我们可以这样写：

const doubleAll = (arr) => {

  return arr.map(a => a * 2);

}

通过数组方法替换循环，这样doubleAll函数就会更加简洁。

如果有一种更简单的方法来解决我们的需求，那么我们就应该使用它。

移动方法

在两个类之间，我们可以把其中一个类的方法移动到另一个类中，例如，我们可能会写这样的代码：

class Foo {

  method() {}

}

class Bar {

}

假如，我们在 Bar 类使用 method 的次数更多，那么应该把 method 方法移动到 Bar 类中， Foo 如果需要在直接调用 Bar 类的中方法即可。

class Foo {

}

class Bar {

  method() {}

}

移动字段

除了移动方法外，我们还可以移动字段。例如，我们可能会写这样的代码：

class Foo {

  constructor(foo) {

    this.foo = foo;

  }

}

class Bar {

}

跟移动方法的原因类似，我们有时这么改代码：

class Foo {

}

class Bar {

  constructor(foo) {

    this.foo = foo;

  }

}

我们可以将字段移至最需要的地方

提取类

如果我们的类很复杂并且有多个方法，那么我们可以将额外的方法移到新类中。

例如，我们可能会写这样的代码：

class Person {

  constructor(name, phoneNumber) {

    this.name = name;

    this.phoneNumber = phoneNumber;

  }

  addAreaCode(areaCode) {

    return `${areaCode}-${this.phoneNumber}`

  }

}

我们可以这样重构：

class PhoneNumber {

  constructor(phoneNumber) {

    this.phoneNumber = phoneNumber;

  }

  addAreaCode(areaCode) {

    return `${areaCode}-${this.phoneNumber}`

  }

}

class Person {

  constructor(name, phoneNumber) {

    this.name = name;

    this.phoneNumber = new PhoneNumber(phoneNumber);

  }

}

上面我们将Person类不太相关的方法addAreaCode 移动了自己该处理的类中。

通过这样做，两个类只做一件事，而不是让一个类做多件事。

总结

我们可以从复杂的类中提取代码，这些复杂的类可以将多种功能添加到自己的类中。

此外，我们可以将方法和字段移动到最常用的地方。

将值分配给参数值会造成混淆，因此我们应该在使用它们之前将其分配给变量。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://levelup.gitconnected....

简单性原则

What：追求简单

自始至终都以最简单的逻辑编写代码，让编程初学者一眼就能看懂。在编程时我们要重视的是局部的完整性，而不是复杂的整体关联性。

Why：Bug 喜欢出现在复杂的地方

软件故障常集中在某一个区域，而这些区域都有一个共同的特点，那就是复杂。编写代码时如果追求简单易懂，代码就很难出现问题。不过，简单易懂的代码往往给人一种不够专业的感觉。这也是经验老到的程序员喜欢写老练高深的代码的原因。所以我们要有足够的定力来抵挡这种诱惑。

Do：编写自然的代码

放下高超的技巧，坚持用简单的逻辑编写代码。既然故障集中在代码复杂的区域，那我们只要让代码简单到让故障无处可藏即可。不要盲目地让代码复杂化、臃肿化，要保证代码简洁。

同构原则

What：力求规范

同等对待相同的东西，坚持不搞特殊。同等对待，举例来说就是同一个模块管理的数值全部采用同一单位、公有函数的参数个数统一等。

Why：不同的东西会更显眼

相同的东西用相同的形式表现能够使不同的东西更加突出。不同的东西往往容易产生 bug。遵循同构原则能让我们更容易嗅出代码的异样，从而找出问题所在。
统一的代码颇具美感，而美的东西一般更容易让人接受，因此统一的代码有较高的可读性。

Do：编写符合规范的代码

可靠与简单是代码不可或缺的性质，在编写代码时，务必克制住自己的表现欲，以规范为先。

对称原则

What：讲究形式上的对称

在思考一个处理时，也要想到与之成对的处理。比如有给标志位置 1 的处理，就要有给标志位置 0 的处理。

Why：帮助读代码的人推测后面的代码

具有对称性的代码能够帮助读代码的人推测后面的代码，提高其理解代码的速度。同时，对称性会给代码带来美感，这同样有助于他人理解代码。
此外，设计代码时将对称性纳入考虑的范围能防止我们在思考问题时出现遗漏。如果说代码的条件分支是故障的温床，那么对称性就是思考的框架，能有效阻止条件遗漏。

Do：编写有对称性的代码

在出现“条件”的时候，我们要注意它的“反条件”。每个控制条件都存在与之成对的反条件(与指示条件相反的条件)。要注意条件与反条件的统一，保证控制条件具有统一性。
我们还要考虑到例外情况并极力避免其发生。例外情况的特殊性会破坏对称性，成为故障的温床。特殊情况过多意味着需求没有得到整理。此时应重新审视需求，尽量从代码中剔除例外情况。
命名也要讲究对称性。命名时建议使用 set/get、start/stop、begin/ end 和 push/pop 等成对的词语。

层次原则

What：讲究层次

注意事物的主从关系、前后关系和本末关系等层次关系，整理事物的关联性。
不同层次各司其职，同种处理不跨越多个层次，这一点非常重要。比如执行了获取资源的处理，那么释放资源的处理就要在相同的层次进行。又比如互斥控制的标志位置 1 和置 0 的处理要在同一层次进行。

Why：层次结构有助于提高代码的可读性

有明确层次结构的代码能帮助读代码的人抽象理解代码的整体结构。读代码的人可以根据自身需要阅读下一层次的代码，掌握更加详细的信息。
这样可以提高代码的可读性，帮助程序员表达编码意图，降低 bug 发生的概率。

Do：编写有抽象层次结构的代码

在编写代码时设计各部分的抽象程度，构建层次结构。保证同一个层次中的所有代码抽象程度相同。另外，高层次的代码要通过外部视角描述低层次的代码。这样做能让调用低层次代码的高层次代码更加简单易懂。

线性原则

What：处理流程尽量走直线

一个功能如果可以通过多个功能的线性结合来实现，那它的结构就会非常简单。
反过来，用条件分支控制代码、毫无章法地增加状态数等行为会让代码变得难以理解。我们要避免做出这些行为，提高代码的可读性。

Why：直线处理可提高代码的可读性

复杂的处理流程是故障的温床。故障多出现在复杂的条件语句和循环语句中。另外，goto 等让流程出现跳跃的语句也是故障的多发地。
如果能让处理由高层次流向低层次，一气呵成，代码的可读性就会大幅提高。与此同时，可维护性也将提高，添加功能等改良工作将变得更加容易。
一般来说，自上而下的处理流程简单明快，易于理解。我们应避开复杂反复的处理流程。

Do：尽量不在代码中使用条件分支

尽量减少条件分支的数量，编写能让代码阅读者线性地看完整个处理流程的代码。
为此，我们需要把一些特殊的处理拿到主处理之外。保证处理的统一性，注意处理的流程。记得时不时俯瞰代码整体，检查代码是否存在过于复杂的部分。
另外，对于经过长期维护而变得过于复杂的部分，我们可以考虑对其进行重构。明确且可靠的设计不仅对我们自身有益，还可以给负责维护的人带来方便。

清晰原则

What：注意逻辑的清晰性

逻辑具有清晰性就代表逻辑能清楚证明自身的正确性。也就是说，我们编写的代码要让人一眼就能判断出没有问题。任何不明确的部分都要附有说明。

Why：消除不确定性

代码免不了被人一遍又一遍地阅读，所以代码必须保持较高的可读性。编写代码时如果追求高可读性，我们就不会采用取巧的方式编写代码，编写出的代码会非常自然。代码是给人看的，也是由人来修改的，所以我们必须以人为对象来编写代码。消除代码的不确定性是对自己的作品负责，这么做也可以为后续负责维护的人提供方便。

Do：编写逻辑清晰的代码

我们应选用直观易懂的逻辑。会给读代码的人带来疑问的部分要么消除，要么加以注释。另外，我们应使用任何人都能立刻理解且不存在歧义的术语。要特别注意变量名等一定不能没有意义。

安全原则

What：注意安全性

就是在编写代码时刻意将不可能的条件考虑进去。比如即便某个 if 语句一定成立，我们也要考虑 else 语句的情况；即便某个 case 语句一定成立，我们也要考虑 default 语句的情况；即便某个变量不可能为空，我们也要检查该变量是否为 null。

Why：防止故障发展成重大事故

硬件提供的服务必须保证安全，软件也一样。硬件方面，比如取暖器，为防止倾倒起火，取暖器一般会配有倾倒自动断电装置。同样，设计软件时也需要考虑各种情况，保证软件在各种情况下都能安全地运行。这一做法在持续运营服务和防止数据损坏等方面有着积极的意义。

Do：编写安全的代码

选择相对安全的方法对具有不确定性的部分进行设计。列出所有可能的运行情况，确保软件在每种情况下都能安全运行。理解需求和功能，将各种情况正确分解到代码中，这样能有效提高软件安全运行的概率。
为此，我们也要将不可能的条件视为考察对象，对其进行设计和编程。不过，为了统一标准，我们在编写代码前最好规定哪些条件需要写，哪些条件不需要写。

原文链接：https://segmentfault.com/a/1190000039864589

Partial<Type>

构造类型Type，并将它所有的属性设置为可选的。它的返回类型表示输入类型的所有子类型。

例子

interface Todo {

    title: string;

    description: string;

}



function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {

    return { ...todo, ...fieldsToUpdate };

}



const todo1 = {

    title: 'organize desk',

    description: 'clear clutter',

};



const todo2 = updateTodo(todo1, {

    description: 'throw out trash',

});

Readonly<Type>

构造类型Type，并将它所有的属性设置为readonly，也就是说构造出的类型的属性不能被再次赋值。

例子

interface Todo {

    title: string;

}



const todo: Readonly<Todo> = {

    title: 'Delete inactive users',

};



todo.title = 'Hello'; // Error: cannot reassign a readonly property

这个工具可用来表示在运行时会失败的赋值表达式（比如，当尝试给冻结对象的属性再次赋值时）。

Object.freeze

function freeze<T>(obj: T): Readonly<T>;

Record<Keys, Type>

构造一个类型，其属性名的类型为K，属性值的类型为T。这个工具可用来将某个类型的属性映射到另一个类型上。

例子

interface PageInfo {

    title: string;

}



type Page = 'home' | 'about' | 'contact';



const x: Record<Page, PageInfo> = {

    about: { title: 'about' },

    contact: { title: 'contact' },

    home: { title: 'home' },

};

Pick<Type, Keys>

从类型Type中挑选部分属性Keys来构造类型。

例子

interface Todo {

    title: string;

    description: string;

    completed: boolean;

}



type TodoPreview = Pick<Todo, 'title' | 'completed'>;



const todo: TodoPreview = {

    title: 'Clean room',

    completed: false,

};

Omit<Type, Keys>

从类型Type中获取所有属性，然后从中剔除Keys属性后构造一个类型。

例子

interface Todo {

    title: string;

    description: string;

    completed: boolean;

}



type TodoPreview = Omit<Todo, 'description'>;



const todo: TodoPreview = {

    title: 'Clean room',

    completed: false,

};

Exclude<Type, ExcludedUnion>

从类型Type中剔除所有可以赋值给ExcludedUnion的属性，然后构造一个类型。

例子

type T0 = Exclude<'a' | 'b' | 'c', 'a'>; // "b" | "c"

type T1 = Exclude<'a' | 'b' | 'c', 'a' | 'b'>; // "c"

type T2 = Exclude<string | number | (() => void), Function>; // string | number

Extract<Type, Union>

从类型Type中提取所有可以赋值给Union的类型，然后构造一个类型。

例子

type T0 = Extract<'a' | 'b' | 'c', 'a' | 'f'>; // "a"

type T1 = Extract<string | number | (() => void), Function>; // () => void

NonNullable<Type>

从类型Type中剔除null和undefined，然后构造一个类型。

例子

type T0 = NonNullable<string | number | undefined>; // string | number

type T1 = NonNullable<string[] | null | undefined>; // string[]

Parameters<Type>

由函数类型Type的参数类型来构建出一个元组类型。

例子

declare function f1(arg: { a: number; b: string }): void;



type T0 = Parameters<() => string>;

//    []

type T1 = Parameters<(s: string) => void>;

//    [s: string]

type T2 = Parameters<<T>(arg: T) => T>;

//    [arg: unknown]

type T3 = Parameters<typeof f1>;

//    [arg: { a: number; b: string; }]

type T4 = Parameters<any>;

//    unknown[]

type T5 = Parameters<never>;

//    never

type T6 = Parameters<string>;

//   never

//   Type 'string' does not satisfy the constraint '(...args: any) => any'.

type T7 = Parameters<Function>;

//   never

//   Type 'Function' does not satisfy the constraint '(...args: any) => any'.

ConstructorParameters<Type>

由构造函数类型来构建出一个元组类型或数组类型。
由构造函数类型Type的参数类型来构建出一个元组类型。（若Type不是构造函数类型，则返回never）。

例子

type T0 = ConstructorParameters<ErrorConstructor>;

//    [message?: string | undefined]

type T1 = ConstructorParameters<FunctionConstructor>;

//    string[]

type T2 = ConstructorParameters<RegExpConstructor>;

//    [pattern: string | RegExp, flags?: string | undefined]

type T3 = ConstructorParameters<any>;

//   unknown[]



type T4 = ConstructorParameters<Function>;

//    never

// Type 'Function' does not satisfy the constraint 'new (...args: any) => any'.

ReturnType<Type>

由函数类型Type的返回值类型构建一个新类型。

例子

type T0 = ReturnType<() => string>;  // string

type T1 = ReturnType<(s: string) => void>;  // void

type T2 = ReturnType<(<T>() => T)>;  // {}

type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]

type T4 = ReturnType<typeof f1>;  // { a: number, b: string }

type T5 = ReturnType<any>;  // any

type T6 = ReturnType<never>;  // any

type T7 = ReturnType<string>;  // Error

type T8 = ReturnType<Function>;  // Error

InstanceType<Type>

由构造函数类型Type的实例类型来构建一个新类型。

例子

class C {

    x = 0;

    y = 0;

}



type T0 = InstanceType<typeof C>; // C

type T1 = InstanceType<any>; // any

type T2 = InstanceType<never>; // any

type T3 = InstanceType<string>; // Error

type T4 = InstanceType<Function>; // Error

Required<Type>

构建一个类型，使类型Type的所有属性为required。
与此相反的是Partial。

例子

interface Props {

    a?: number;

    b?: string;

}



const obj: Props = { a: 5 }; // OK



const obj2: Required<Props> = { a: 5 }; // Error: property 'b' missing

ThisParameterType<Type>

从函数类型中提取 this 参数的类型。
若函数类型不包含 this 参数，则返回 unknown 类型。

例子

function toHex(this: Number) {

    return this.toString(16);

}



function numberToString(n: ThisParameterType<typeof toHex>) {

    return toHex.apply(n);

}

OmitThisParameter<Type>

从Type类型中剔除 this 参数。
若未声明 this 参数，则结果类型为 Type 。
否则，由Type类型来构建一个不带this参数的类型。
泛型会被忽略，并且只有最后的重载签名会被采用。

例子

function toHex(this: Number) {

    return this.toString(16);

}



const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);



console.log(fiveToHex());

ThisType<Type>

这个工具不会返回一个转换后的类型。
它作为上下文的this类型的一个标记。
注意，若想使用此类型，必须启用--noImplicitThis。

例子

// Compile with --noImplicitThis



type ObjectDescriptor<D, M> = {

    data?: D;

    methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M

};



function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {

    let data: object = desc.data || {};

    let methods: object = desc.methods || {};

    return { ...data, ...methods } as D & M;

}



let obj = makeObject({

    data: { x: 0, y: 0 },

    methods: {

        moveBy(dx: number, dy: number) {

            this.x += dx; // Strongly typed this

            this.y += dy; // Strongly typed this

        },

    },

});



obj.x = 10;

obj.y = 20;

obj.moveBy(5, 5);

上面例子中，makeObject参数里的methods对象具有一个上下文类型ThisType<D & M>，因此methods对象的方法里this的类型为{ x: number, y: number } & { moveBy(dx: number, dy: number): number }。

在lib.d.ts里，ThisType<T>标识接口是个简单的空接口声明。除了在被识别为对象字面量的上下文类型之外，这个接口与一般的空接口没有什么不同。

原文链接：https://segmentfault.com/a/1190000039868550

复杂场景下的h5与小程序通信

一、背景

在套壳小程序盛行的当下， h5调用小程序能力来打破业务边界已成为家常便饭，h5与小程序的结合，极大地拓展了h5的能力边界，丰富了h5的功能。使许多以往纯h5只能想想或者实现难度极大的功能变得轻松简单。
但在套壳小程序中，h5与小程序通信存在以下几个问题：

• 注入小程序全局变量的时机不确定，可能调用的时候不存在小程序变量。和全局变量my相关的判断满天飞，每个使用的地方都需要判断是否已注入变量，否则就要创建监听。
• 小程序处理后的返回结果可能有多种，h5需要在具体使用时监听多个结果进行处理。
• 一旦监听建立，就无法取消，在组件销毁时如果没有判断组件状态容易导致内存泄漏。

二、在业务内的实践

• 因业务的特殊性，需要投放多端,小程序sdk的加载没有放到head里面，而是在应用启动时动态判断是小程序环境时自动注入的方式：

export function injectMiniAppScript() {
    if (isAlipayMiniApp() || isAlipayMiniAppWebIDE()) {
        const s = document.createElement('script'); 

        s.src = 'https://appx/web-view.min.js';
        s.onload = () => {
            // 加载完成时触发自定义事件
            const customEvent = new CustomEvent('myLoad', { detail:'' });
            document.dispatchEvent(customEvent);
        };

        s.onerror = (e) => {
            // 加载失败时上传日志
            uploadLog({
                tip: `INJECT_MINIAPP_SCRIPT_ERROR`,
            });
        };

        document.body.insertBefore(s, document.body.firstChild);
    }
}

// 处理扫脸签到逻辑
    const faceVerify = (): Promise => {

        return new Promise((resolve) => {
            const handle = () => {
                window.my.onMessage = (result: AlipaySignResult) => {
                    if (result.type === 'FACE_VERIFY_TIMEOUT' ||
                        result.type === 'DO_SIGN' ||
                        result.type === 'FACE_VERIFY' ||
                        result.type === 'LOCATION' ||
                        result.type === 'LOCATION_UNBELIEVABLE' ||
                        result.type === 'NOT_IN_ALIPAY') {
                        resolve(result);
                    }
                };

                window.my.postMessage({ action: SIGN_CONSTANT.FACE_VERIFY, activityId: id, userId: user.userId });
            };

            if (window.my) {
                handle();
            } else {
                // 先记录错误日志
                sendErrors('/threehours.3hours-errors.NO_MY_VARIABLE', { msg: '变量不存在' });
                // 监听load事件
                document.addEventListener('myLoad', handle);
            }
        });
    };

// 处理扫脸签到逻辑
    const faceVerify = (): Promise => {
        miniAppBus.postMessage({ action: SIGN_CONSTANT.FACE_VERIFY, activityId: id, userId: user.userId });
        return miniAppBus.subscribeAsync([
            'FACE_VERIFY_TIMEOUT',
            'DO_SIGN',
            'FACE_VERIFY',
            'LOCATION',
            'LOCATION_UNBELIEVABLE',
            'NOT_IN_ALIPAY',
        ])
    };

interface MiniAppEventBus {
           /**
           * @description 回调函数订阅单个、或多个type
           * @template T
           * @param {(string | string[])} type
           * @param {MiniAppMessageSubscriber} callback
           * @memberof MiniAppEventBus
           */
           subscribe(type: string | string[], callback: MiniAppMessageSubscriber): void;
           /**
           * @description Promise 订阅单个、或多个type
           * @template T
           * @param {(string | string[])} type
           * @returns {Promise>}
           * @memberof MiniAppEventBus
           */
           subscribeAsync(type: string | string[]): Promise>;
           /**
           * @description 取消订阅单个、或多个type
           * @param {(string | string[])} type
           * @returns {Promise}
           * @memberof MiniAppEventBus
           */
           unSubscribe(type: string | string[]): Promise;
           /**
           * @description postMessage替代，无需关注环境变量
           * @param {MessageToMiniApp} msg
           * @returns {Promise}
           * @memberof MiniAppEventBus
           */
           postMessage(msg: MessageToMiniApp): Promise;
       }

import { injectMiniAppScript } from './tools';

   /**
   * @description 小程序返回结果
   * @export
   * @interface MiniAppMessage
   */

   interface MiniAppMessageBase {
       type: string;
   }

   type MiniAppMessage = MiniAppMessageBase & {
       [P in keyof T]: T[P]
   }
   /**
   * @description 小程序接收消息
   * @export
   * @interface MessageToMiniApp
   */
   export interface MessageToMiniApp {
       action: string;
       [x: string]: unknown
   }

   interface MiniAppMessageSubscriber {
       (params: MiniAppMessage): void
   }
   interface MiniAppEventBus {
       /**
       * @description 回调函数订阅单个、或多个type
       * @template T
       * @param {(string | string[])} type
       * @param {MiniAppMessageSubscriber} callback
       * @memberof MiniAppEventBus
       */
       subscribe(type: string | string[], callback: MiniAppMessageSubscriber): void;
       /**
       * @description Promise 订阅单个、或多个type
       * @template T
       * @param {(string | string[])} type
       * @returns {Promise>}
       * @memberof MiniAppEventBus
       */
       subscribeAsync(type: string | string[]): Promise>;
       /**
       * @description 取消订阅单个、或多个type
       * @param {(string | string[])} type
       * @returns {Promise}
       * @memberof MiniAppEventBus
       */
       unSubscribe(type: string | string[]): Promise;
       /**
       * @description postMessage替代，无需关注环境变量
       * @param {MessageToMiniApp} msg
       * @returns {Promise}
       * @memberof MiniAppEventBus
       */
       postMessage(msg: MessageToMiniApp): Promise;
   }
   class MiniAppEventBus implements MiniAppEventBus{

       /**
       * @description: 监听函数
       * @type {Map}
       * @memberof MiniAppEventBus
       */
       listeners: Map;
       constructor() {
           this.listeners = new Map>>();
           this.init();
       }

       /**
       * @description 初始化
       * @private
       * @memberof MiniAppEventBus
       */
       private init() {
           if (!window.my) {
               // 引入脚本
               injectMiniAppScript();
           }

           this.startListen();
       }

       /**
       * @description 保证my变量存在的时候执行函数func
       * @private
       * @param {Function} func
       * @returns 
       * @memberof MiniAppEventBus
       */
       private async ensureEnv(func: Function) {
           return new Promise((resolve) => {
               const promiseResolve = () => {
                   resolve(func.call(this));
               };

               // 全局变量
               if (window.my) {
                   promiseResolve();
               }

               document.addEventListener('myLoad', promiseResolve);
           });
       }

       /**
       * @description 监听小程序消息
       * @private
       * @memberof MiniAppEventBus
       */
       private listen() {
           window.my.onMessage = (msg: MiniAppMessage) => {
               this.dispatch(msg.type, msg);
           };
       }

       private async startListen() {
           return this.ensureEnv(this.listen);
       }

       /**
       * @description 发送消息，必须包含action
       * @param {MessageToMiniApp} msg
       * @returns 
       * @memberof MiniAppEventBus
       */
       public postMessage(msg: MessageToMiniApp) {
           return new Promise((resolve) => {
               const realPost = () => {
                   resolve(window.my.postMessage(msg));
               };

               resolve(this.ensureEnv(realPost));
           });
       }

       /**
       * @description 订阅消息，支持单个或多个
       * @template T
       * @param {(string|string[])} type
       * @param {MiniAppMessageSubscriber} callback
       * @returns 
       * @memberof MiniAppEventBus
       */
       public subscribe(type: string | string[], callback: MiniAppMessageSubscriber) {
           const subscribeSingleAction = (type: string, cb: MiniAppMessageSubscriber) => {
               let listeners = this.listeners.get(type) || [];

               listeners.push(cb);
               this.listeners.set(type, listeners);
           };

           this.forEach(type,(type:string)=>subscribeSingleAction(type,callback));
       }

       private forEach(type:string | string[],cb:(type:string)=>void){
           if (typeof type === 'string') {
               return cb(type);
           }

           for (const key in type) {
               if (Object.prototype.hasOwnProperty.call(type, key)) {
                   const element = type[key];

                   cb(element);
               }
           }
       }

       /**
       * @description 异步订阅
       * @template T
       * @param {(string|string[])} type
       * @returns {Promise>}
       * @memberof MiniAppEventBus
       */
       public async subscribeAsync(type: string | string[]): Promise> {
           return new Promise((resolve, _reject) => {
               this.subscribe(type, resolve);
           });
       }

       /**
       * @description 触发事件
       * @param {string} type
       * @param {MiniAppMessage} msg
       * @memberof MiniAppEventBus
       */
       public async dispatch(type: string, msg: MiniAppMessage) {
           let listeners = this.listeners.get(type) || [];

           listeners.map(i => {
               if (typeof i === 'function') {
                   i(msg);
               }
           });
       }

       public async unSubscribe(type:string | string[]){
           const unsubscribeSingle = (type: string) => {
               this.listeners.set(type, []);
           };

           this.forEach(type,(type:string)=>unsubscribeSingle(type));
       }
   }

   export default new MiniAppEventBus();

const actionHandles = {
    async FACE_VERIFY(){},
    async GET_STEP(){},
    async UPLOAD_HASH(){},
    async GET_AUTH_CODE(){},
    ...// 其他action
}
.... 
// 在webview的消息监听函数中
async startProcess(e) {
    const data = e.detail;
    // 根据不同的action调用不同的handle处理
    const handle = actionHandles[data.action];
    if (handle) {
        
        return actionHandles[data.action](this, data)
    }
    return uploadLogsExtend({
        tip: STRING_CONTANT.UNKNOWN_ACTIONS,
        data
    })
}

背景

近期团队打算做一个小程序自动化测试的工具，期望能够做到业务人员操作一遍小程序后，自动还原之前的操作路径，并且捕获操作过程中发生的异常，以此来判断这次发布是否会影响小程序的基础功能。

上述描述看似简单，但是中间还是有些难点的，第一个难点就是如何在业务人员操作小程序的时候记录操作路径，第二个难点就是如何将记录的操作路径进行还原。

自动化 SDK

如何将操作路径还原这个问题，首选官方提供的 SDK： miniprogram-automator。

小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。通过该 SDK，你可以做到以下事情：

• 控制小程序跳转到指定页面
• 获取小程序页面数据
• 获取小程序页面元素状态
• 触发小程序元素绑定事件
• 往 AppService 注入代码片段
• 调用 wx 对象上任意接口
• ...

上面的描述都来自官方文档，建议阅读后面内容之前可以先看看官方文档，当然如果之前用过 puppeteer ，也可以快速上手，api 基本一致。下面简单介绍下 SDK 的使用方式。

// 引入sdk
const automator = require('miniprogram-automator')

// 启动微信开发者工具
automator.launch({
  // 微信开发者工具安装路径下的 cli 工具
  // Windows下为安装路径下的 cli.bat
  // MacOS下为安装路径下的 cli
  cliPath: 'path/to/cli',
  // 项目地址，即要运行的小程序的路径
  projectPath: 'path/to/project',
}).then(async miniProgram => { // miniProgram 为 IDE 启动后的实例
    // 启动小程序里的 index 页面
  const page = await miniProgram.reLaunch('/page/index/index')
  // 等待 500 ms
  await page.waitFor(500)
  // 获取页面元素
  const element = await page.$('.main-btn')
  // 点击元素
  await element.tap()
    // 关闭 IDE
  await miniProgram.close()
})

有个地方需要提醒一下：使用 SDK 之前需要开启开发者工具的服务端口，要不然会启动失败。

捕获用户行为

有了还原操作路径的办法，接下来就要解决记录操作路径的难题了。

在小程序中，并不能像 web 中通过事件冒泡的方式在 window 中捕获所有的事件，好在小程序所以的页面和组件都必须通过 Page 、Component 方法来包装，所以我们可以改写这两个方法，拦截传入的方法，并判断第一个参数是否为 event 对象，以此来捕获所有的事件。

// 暂存原生方法

const originPage = Page

const originComponent = Component



// 改写 Page

Page = (params) => {

  const names = Object.keys(params)

  for (const name of names) {

    // 进行方法拦截

    if (typeof obj[name] === 'function') {

      params[name] = hookMethod(name, params[name], false)

    }

  }

  originPage(params)

}

// 改写 Component

Component = (params) => {

  if (params.methods) {

      const { methods } = params

      const names = Object.keys(methods)

      for (const name of names) {

        // 进行方法拦截

        if (typeof methods[name] === 'function') {

          methods[name] = hookMethod(name, methods[name], true)

        }

      }

  }

  originComponent(params)

}



const hookMethod = (name, method, isComponent) => {

  return function(...args) {

    const [evt] = args // 取出第一个参数

    // 判断是否为 event 对象

    if (evt && evt.target && evt.type) {

      // 记录用户行为

    }

    return method.apply(this, args)

  }

}

这里的代码只是代理了所有的事件方法，并不能用来还原用户的行为，要还原用户行为还必须知道该事件类型是否是需要的，比如点击、长按、输入。

const evtTypes = [

    'tap', // 点击

    'input', // 输入

    'confirm', // 回车

    'longpress' // 长按

]

const hookMethod = (name, method) => {

  return function(...args) {

    const [evt] = args // 取出第一个参数

    // 判断是否为 event 对象

    if (

      evt && evt.target && evt.type &&

      evtTypes.includes(evt.type) // 判断事件类型

    ) {

      // 记录用户行为

    }

    return method.apply(this, args)

  }

}

确定事件类型之后，还需要明确点击的元素到底是哪个，但是小程序里面比较坑的地方就是，event 对象的 target 属性中，并没有元素的类名，但是可以获取元素的 dataset。

为了准确的获取元素，我们需要在构建中增加一个步骤，修改 wxml 文件，将所有元素的 class 属性复制一份到 

<!-- 构建前 -->

<view class="close-btn"></view>

<view class="{{mainClassName}}"></view>

<!-- 构建后 -->

<view class="close-btn"  style="box-sizing: border-box; color: rgb(221, 17, 68);">"close-btn"></view>

<view class="{{mainClassName}}"  style="box-sizing: border-box; color: rgb(221, 17, 68);">"{{mainClassName}}"></view>

但是获取到 class 之后，又会有另一个坑，小程序的自动化测试工具并不能直接获取页面里自定义组件中的元素，必须先获取自定义组件。

<!-- Page -->

<toast text="loading" show="{{showToast}}" />

<!-- Component -->

<view class="toast" wx:if="{{show}}">

  <text class="toast-text">{{text}}</text>

  <view class="toast-close" />

</view>

// 如果直接查找 .toast-close 会得到 null

const element = await page.$('.toast-close')

element.tap() // Error!



// 必须先通过自定义组件的 tagName 找到自定义组件

// 再从自定义组件中通过 className 查找对应元素

const element = await page.$('toast .toast-close')

element.tap()

所以我们在构建操作的时候，还需要为元素插入 tagName。

<!-- 构建前 -->

<view class="close-btn" />

<toast text="loading" show="{{showToast}}" />

<!-- 构建后 -->

<view class="close-btn"  style="box-sizing: border-box; color: rgb(221, 17, 68);">"close-btn"  style="box-sizing: border-box; color: rgb(221, 17, 68);">"view" />

<toast text="loading" show="{{showToast}}"  style="box-sizing: border-box; color: rgb(221, 17, 68);">"toast" />

现在我们可以继续愉快的记录用户行为了。

// 记录用户行为的数组

const actions = [];

// 添加用户行为

const addAction = (type, query, value = '') => {

  actions.push({

    time: Date.now(),

    type,

    query,

    value

  })

}



// 代理事件方法

const hookMethod = (name, method, isComponent) => {

  return function(...args) {

    const [evt] = args // 取出第一个参数

    // 判断是否为 event 对象

    if (

      evt && evt.target && evt.type &&

      evtTypes.includes(evt.type) // 判断事件类型

    ) {

      const { type, target, detail } = evt

      const { id, dataset = {} } = target

        const { className = '' } = dataset

        const { value = '' } = detail // input事件触发时，输入框的值

      // 记录用户行为

      let query = ''

      if (isComponent) {

        // 如果是组件内的方法，需要获取当前组件的 tagName

        query = `${this.dataset.tagName} `

      }

      if (id) {

        // id 存在，则直接通过 id 查找元素

        query += id

      } else {

        // id 不存在，才通过 className 查找元素

        query += className

      }

      addAction(type, query, value)

    }

    return method.apply(this, args)

  }

}