前言

在最近的一个项目中，用到了 ant-design 的 轮播图组件 Carousel，发现无法按照预期给每个 slide 加样式（内联样式），后来发现是 ant-design 的轮播图组件引用的三方库 react-slick，通过源码查找，终于发现是代码把内联样式重写了

情景再现

按照 ant-design 的官方示例，把demo拷贝过来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { Carousel } from 'antd';

function onChange(a, b, c) {
  console.log(a, b, c);
}

ReactDOM.render(
  <Carousel afterChange={onChange}>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>,
  mountNode
);

一切正常。然后按业务改动代码，加入背景图

1
2
3
4
5
6
7
8
9
10
11
12

import urlBg001  from "./images/urlBg001.png";
import urlBg002 from "./images/urlBg002.png";
import urlBg003 from "./images/urlBg003.png";

ReactDOM.render(
  <Carousel afterChange={onChange}>
    <div style={{ backgroundImage: `url(${urlBg001})` }}><h3>1</h3></div>
    <div style={{ backgroundImage: `url(${urlBg002})` }}><h3>2</h3></div>
    <div style={{ backgroundImage: `url(${urlBg003})` }}><h3>3</h3></div>
  </Carousel>,
  mountNode
);

然而，没有任何效果（不显示背景图）

思考问题所在

为何会这样呢

首先，我以为是图片路径的问题，做了个验证，发现图片正常显示

1
2
3
4
5
6
7

ReactDOM.render(
  <Carousel afterChange={onChange}>
    <div><img src={urlBg001} /></div>
  </Carousel>,
  mountNode
);

然后，我就怀疑是不是 Carousel 这个组件对插槽做了限制，进行了进一步的验证

1
2
3
4
5
6
7
8
9
10
11
12

ReactDOM.render(
  <Carousel afterChange={onChange}>
    <div id="test-slide" style={
        { 
            backgroundImage: `url(${urlBg001})`,
            color:"#f02",
            width:"50px",
        }}>1</div>
  </Carousel>,
  mountNode
);

结果，没有任何效果，打开控制台，找到 id 是 test-slide 的那个元素，发现渲染的结果是下面这样：

1

<div id="test-slide" tabindex="-1" style="width: 100%; display: inline-block;">1</div>

style 属性被重写了，我自己加的 style 不见了，更加确信了是 Carousel 组件内部搞的鬼

打开 github 扒 ant-design 源码，没有发现对 style 属性做任何更改，然后在头部找到该组件其实是引入一个 react-slick，然后包装了下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// https://github.com/ant-design/ant-design/blob/master/components/carousel/index.tsx#L23

const SlickCarousel = require("react-slick").default;

export default class Carousel extends React.Component<CarouselProps, {}> {
  // 部分代码省略 ...
  renderCarousel = ({ getPrefixCls }: ConfigConsumerProps) => {
    // 部分代码省略 ...
    return (
      <div className={className}>
        <SlickCarousel ref={this.saveSlick} {...props} />
      </div>
    );
  };

  render() {
    return <ConfigConsumer>{this.renderCarousel}</ConfigConsumer>;
  }
}

真相慢慢的付出了水面，再次扒 react-slick 的源码，终于功夫不负有心人，在这个文件里发现了问题的源头

1
2
3
4
5
6
7
8
9
10

// https://github.com/akiran/react-slick/blob/master/src/slider.js#L184

React.cloneElement(children[k], {
  key: 100 * i + 10 * j + k,
  tabIndex: -1,
  style: {
    width: `${100 / settings.slidesPerRow}%`,
    display: "inline-block"
  }
})

直接将子元素children 的 style 属性覆盖了

最后在 react-slick 找到了相关 issue，然额这个 issue 仍然是 open 状态

在 PR 中找到 pull#1372，有人尝试修复过，但是 PR 又关了，不知道什么原因

解决方案

由于不知道源码作者为何要这么设置，我只能先找其他方法解决

• 方法一
  多嵌套一层，只要不是在第一层元素上操作就行

1
2
3
4
5
6
7
8

ReactDOM.render(
  <Carousel>
    <div>
      <div style={{ backgroundImage: `url(${logo})` }}>1</div>
    </div>
  </Carousel>,
  mountNode
);

• 方法二

用其他方式达成目的

1
2
3
4
5
6

ReactDOM.render(
  <Carousel>
    <img src={logo} alt="001"/>
  </Carousel>,
  mountNode
);

总结

• 找这个 bug 还是挺费时间的，不过，通过这次 bug 之旅，学到一定要用科学的方法，精准定位问题来源，多做空白试验参照，进行对比，这样才能更快的解决问题
• 一定要多看源码，可以学到很多技巧

备注

可以点击下面的链接查看 “情景重现” 和组件源码

• “情景重现”
  demo https://codesandbox.io/s/92n1x0w1my
• 源码
  ant-design https://github.com/ant-design/ant-design/blob/master/components/carousel/index.tsx#L23
  react-slick https://github.com/akiran/react-slick/blob/master/src/slider.js#L185

• 原文地址：https://overreacted.io/how-are-function-components-different-from-classes/
• 原文作者：Dan Abramov
• Markdown 地址：https://github.com/gaearon/overreacted.io/edit/master/src/pages/how-are-function-components-different-from-classes/index.md
• 译者：Yangfan2016
• 英文版权所有：Dan Abramov

一段时间内，权威的答案是 “类” 可以提供更多的特性的访问（比如，state）。而 Hooks 就不一样了

或许你已了解到一种最佳实践。哪一种内？大多数基准测试都不完美，因此我得小心谨慎从它们中得出结论。性能本质上取决于代码做了什么而不是你选择函数还是类。我们观察到，它们的性能差别微不足道，尽管优化策略有些不同

无论哪种情况下，我们都不推荐重写你已存在的组件，除非你有其他原因，和不介意做第一个 “吃螃蟹” 的人。Hooks 仍然是新概念（就像 2014 年的 React），并且那些 “最佳实践” 至今都没有在教程里找到

那么给我们留下了什么内？React 函数和类有本质的区别吗？当然，它们有（在心智模型层面上）。这篇文章，我将找到它们之间的最大的不同。 它自从 2015 的函数式组件被引入就存在了，但是它经常被忽视：

函数式组件捕获已渲染的值

让我们拆开这个概念来理解

注意：这篇文章并不做类或函数的价值评判。我只是描述下这两种编程模式在 React 中的不同。更多采用函数式的问题，请查阅 Hooks FAQ

仔细看看这个组件：

1
2
3
4
5
6
7
8
9
10
11
12
13

function ProfilePage(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

它会显示一个用 setTimeout 模拟网络请求的按钮，并且之后会显示一个确认框。例如，如果 props.user 的值是 'Dan'，那么在 3 秒之后会显示 'Followed Dan'。足够简单

（注意，在这个例子中，不论我使用箭头函数还是声明式函数都没有关系。function handleClick() 都会以相同的方式正确执行）

我们如何用 “类” 重写内？原生翻译看起来可能是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

通常认为这两个代码片段是等价的。人们总是在这些模式进行自由的重构，而从来没有注意到它们的意义：

找出两个版本的不同

然而，这两个代码片段只有细微的差别。 仔细看看它们，你发现不同了吗？就我个人而言，我花了一些时间才找到

前方剧透，如果你要自己弄明白的话，请看这个在线 demo ，文章的剩下的部分都在解释它们的差别和为何它如此重要

在继续之前，我想强调下这篇文章描述的区别和 React Hooks 半毛钱关系都没有。甚至上面的例子里都没有提及 Hooks！

文章都是关于 React 中所有函数和 “类” 的差异。如果你计划在 React app 中更频繁的使用函数，你可能更想理解它

我们将用一个 React 应用中常见的 “类” bug 来图解这个区别

打来这个 sandbox 例子，有一个简介选择器和两个 信息页面（每个都有一个关注按钮）

试着按下面的顺序触发这两个按钮：

1. 单击 其中一个关注按钮
2. 在 3 秒过去之前 改变 已选的简介
3. 读取 警告框的内容

你会发现一个奇怪的差异：

• 使用上面的 function 信息页面 ，点击关注 Dan 的简介后，然后导航到 Sophie 的简介依然弹框显示 'Followed Dan'

• 使用上面的 class 信息页面 ，它会弹框显示 'Followed Sophie'：

步骤示范

在这个例子中，第一个行为是正确的。如果我关注了一个人，然后导航到另一个人的简介页面，我的组件不应该困惑我到底关注了谁。 这个 “类” 实现明显是个 bug

（虽然你完全可以这样关注 Sophie）

那么为何我们的 “类” 例子会如此表现内？

让我们仔细看看我们 “类” 方法 showMessage：

1
2
3
4

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

这个 “类” 方法从 this.props.user 读取。Props 在 React 里是不可变的，因此它们永远也不会改变。然而，this 是，总是多变的

事实上，这就是 “类” 里 this 的全部目的。React 自己会随着时间改变，以至于你可以在 render 和生命周期方法获取到最新的版本

因此如果我们在请求期间重新渲染我们的组件，this.props 会改变。showMessage 方法获取到 user 将是 “更新的” props

这个例子揭露出一个关于用户界面本质的有趣的观察。如果我们说 UI 概念上是当前应用状态的函数，那么事件处理器就是渲染结果的一部分（就像可视化输出一样）。我们事件处理器 “属于” 一个拥有特定 props 和 state 的特定渲染

然而，这些回调读取 this.props 超时会断开这个联系。我们的 showMessage 回调不能 “绑” 到任何特定的渲染，那么它就会 “丢失” 正确的 props。读取 this 的链接就会被切断

我们假设函数式组件不存在。 我们该如何解决这个问题内？

我们想以某种方式 “修复” 带着正确的 props 的 render 和 showMessage 回调读取它们的联系。在某个地方，props 可能会丢失

一种方式是在事件处理更早读取 this.props，并且显示通过超时完成处理器传递进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class ProfilePage extends React.Component {
  showMessage = (user) => {
    alert('Followed ' + user);
  };

  handleClick = () => {
    const {user} = this.props;
    setTimeout(() => this.showMessage(user), 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

起作用了。然而，这种方式随着时间变化显著造成代码更冗余和容易出错。如果我们需要不止一个 prop？如果我们也需要访问这个 state？如果 showMessage 调用其他方法，而且这个方法也需要读取 this.props.something 或 this.state.something，我们又遇到了同样的问题。 因此我们把 this.props 和 this.state 作为参数从 showMessage 传递给每个它调用的方法

这么做会破坏 “类” 正常提供的工程学。它也难以记住和执行，这就是为何人们常常满足于 bug 的原因

同样，在 handleClick 里内嵌 alert 代码并不能解决更大的问题。我们想用一种方式结构化代码允许被更多方法拆分，但是 还是要读取调用相应渲染的 props 和 state。这个问题甚至都不是 React 独有的（你可以把这个可变对象如 this，放到任何一个 UI 库里都可以重现）

或许，我们可以在构造器中 绑定 这个方法？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

class ProfilePage extends React.Component {
  constructor(props) {
    super(props);
    this.showMessage = this.showMessage.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  showMessage() {
    alert('Followed ' + this.props.user);
  }

  handleClick() {
    setTimeout(this.showMessage, 3000);
  }

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

不，它不会解决任何问题。记住，问题所在是我们读取 this.props 太迟了（不是我们使用的语法有错！）然而，如果我们完全依赖 JavaScript 闭包可以解决这个问题

闭包总是被回避，因为它难以理解，值会随着时间变化。但是在 React 中，props 和 state 是不可变的！（或者至少，它是强烈推荐）消除了
闭包的主要阻碍

这意味着如果你在一个特别的渲染遮蔽了 props 或 state，你总是可以指望它们完全相同：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class ProfilePage extends React.Component {
  render() {
    // 捕获这个 props！
    const props = this.props;

    // 注意：我们在 *render 内部*。
    // 这些不是类方法
    const showMessage = () => {
      alert('Followed ' + props.user);
    };

    const handleClick = () => {
      setTimeout(showMessage, 3000);
    };

    return <button onClick={handleClick}>Follow</button>;
  }
}

你已经捕获了渲染时的 props：

捕捉口袋妖怪

这种方法，任何代码内置在它里面（包含在 showMessage 里），保证看到特定渲染的 props。React 不再 “移动我们的奶酪”

我们可以在里面添加我们想要的任何数量的辅助函数，并且它们都将使用捕获的 prop 和 state。 闭包营救了我们！

上面这个例子是对的，但是看起来有点怪，如果你在 render 里定义了函数而不是使用 “类” 方法，那么在 “类” 里这么做有什么意义内？

事实上，我们可以通过移除它周围的 “壳” 来简化代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

function ProfilePage(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

就像上面这样，props 依然可以被捕获（React 把它们作为参数传递进去）。不像 this，props 对象永远不可能因 React 而发生改变

如果你把函数定义里的 props 解构的话，会更清晰：

1
2
3
4
5
6
7
8
9
10
11
12
13

function ProfilePage({ user }) {
  const showMessage = () => {
    alert('Followed ' + user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

当父组件携带不同的 props 渲染 ProfilePage 时，React 会再次调用 ProfilePage 函数。但是我们已经点击 “属于” 前一次渲染它自己的 user 的值和读取 showMessage 回调的那个事件处理程序。它们都原封不动

这就是为何在这个版本的 demo 函数中，点击关注 Sophie 的简介和改变选项到 Sunil 依然弹出 'Followed Sophie'：

正确行为的 demo

这个行为是对的。（尽管你可能也想关注 Sunil）

现在我们就理解了 React 中 “类” 和函数的最大差别：

函数式组件捕获已渲染的值

对于 Hooks，同样的原则也适用于 state。 仔细看看下面这个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function MessageThread() {
  const [message, setMessage] = useState('');

  const showMessage = () => {
    alert('You said: ' + message);
  };

  const handleSendClick = () => {
    setTimeout(showMessage, 3000);
  };

  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };

  return (
    <>
      <input value={message} onChange={handleMessageChange} />
      <button onClick={handleSendClick}>Send</button>
    </>
  );
}

（这里有一个在线 demo）

虽然这个消息 app UI 并不是很好，但它阐述了相同的原理：如果我发送了一个特别的消息，那么组件不应该困惑发送出去的消息实际是什么。这个函数组件的 message 捕获了 “属于” 返回浏览器调用的点击处理程序的渲染的 state。因此，message 被设置为我点击 “发送” 那一时刻的输入框的值

因此我们了解到 React 的函数默认捕获 props 和 state。但是如果 想 读取到最新的不是属于这个特定渲染的 props 或 state？ 假如我们想从未来读取它们？

在 “类” 中，你可以通过 this.props 或 this.state 读取到，因为 this 本身是可变的。React 改变了它。在函数式组件里，你也可以拥有一个可变值，该值由所有组件渲染器共享。它称为 “ref”：

1
2
3
4
5

function MyComponent() {
  const ref = useRef(null);
  // 你可以读取或设置 `ref.current`
  // ...
}

然而，你需要自己管理它

一个 ref 扮演者和一个实例字段相同的角色。它是进入可变命令式世界的转义口。你或许对 “DOM refs” 很熟悉，但是这个概念更宽泛。它就像你放东西的盒子一样

即使在视觉上，this.something 看起来像是 something.current 的镜像。它们代表相同的概念

默认情况下，React 不会为了在函数式组件的最新 props 或 state 创建 refs。大多数情况下你不需要它们，而且给它们赋值会浪费工作。然而，如果你喜欢的话，可以手动跟踪这个值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function MessageThread() {
  const [message, setMessage] = useState('');
  const latestMessage = useRef('');

  const showMessage = () => {
    alert('You said: ' + latestMessage.current);
  };

  const handleSendClick = () => {
    setTimeout(showMessage, 3000);
  };

  const handleMessageChange = (e) => {
    setMessage(e.target.value);
    latestMessage.current = e.target.value;
  };

如果我们在 showMessage 读取 message，我们会看到我们按下发送按钮时的那个消息。但是当我们读取 latestMessage.current 时，我们得到了最新的值（即使我们在发送按钮按下之后，仍然在打字输入）

你可以比较这两个例子的区别。ref 是一种渲染一致性的 “选择性退出” 方法，而且在某些情况下很方便

通常，你应该避免在渲染 期间 读取或设置 refs，因为它们是可变的。我们想要保持渲染的可预测性。然而，如果想要得到一个特别的 prop 或 state 的最新值，手动更新 ref 可能会非常恼火。 我们可以用这个效果实现自动化：

1
2
3
4
5
6
7
8
9
10
11
12

function MessageThread() {
  const [message, setMessage] = useState('');

  // 持续跟踪最新值
  const latestMessage = useRef('');
  useEffect(() => {
    latestMessage.current = message;
  });

  const showMessage = () => {
    alert('You said: ' + latestMessage.current);
  };

（这有一个demo）

我们在这个效果 内部 进行赋值，以致于 ref 值只有在 DOM 更新之后改变。这就确保了我们的改变不会打破像 [Time Slicing and Suspense] (https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html)特性，它们依赖渲染中断

这样使用 ref 并不是经常必须的。捕获 props 或 state 还是使用默认最好。 然而，它可以方便处理像时间间隔和订阅类命令式 API。记住你可以像 this 一样跟踪 任何 值（prop，state 变量，整个 props 对象，或甚至一个函数）

这个模式也方便优化（例如，当 useCallback id 改变太频繁）。然而，使用 reducer通常是一个更好的解决方案。（后面的文章会提及到这个主题！）

在这篇文章中，我们已经看到了 “类” 的常见的破坏模式，而且闭包如何帮助我们修复它。然而，你可能注意到当你试图指定的依赖数组优化 Hooks 时，你可能遇到陈旧的闭包的 bug。这么说是闭包的 “锅” 喽？我不这么认为

正如我们上面看到的那样，闭包确实帮助我们 修复 了很难察觉的细微问题。同样，它们也使得在并发模式正常工作的代码更容易编写。它是有可能的，因为在组件内的逻辑遮蔽了已经渲染的正确的 props 和 state

在我目前所遇到的所有情况里，“陈旧的闭包” 的问题发生是由于假设 “函数不会发生改变” 或 ”props 总是相同的“ 造成的。事实并非如此，我希望通过这篇文章有助于澄清这一点

函数遮蔽了它们的 props 和 state（而且因此它们的 id 是如此重要）。这不是 bug，而是函数式组件的一个特性。对于 useEffect 或 useCallback 函数不应该把 “依赖数组” 排除。（正确的修复是通常用 useReducer 或 useRef 来解决上面的问题 - 我们会尽快出如何在它们之间进行选择的文档）

当我们在 React 写大多数函数时，我们需要调整我们关于优化代码 和 什么值会随着时间改变的直觉

正如 Fredrik 所说：

我目前在 hooks 发现的最好的心理规律就是 “代码就像任何值，任何时候都可能改变”

函数也不例外。它需要花费一定的时间来了解 React 学习材料的常识。它需要从 “类” 中调整一些心态。但是我希望这篇文章可以帮助你刷新你的眼光

React 函数总是会捕获它们的值（现在我们知道原因了）

微笑的皮卡丘

它们是完全不同的口袋妖怪

• 本文仅代表原作者个人观点，译者不发表任何观点
• 版权由原作者所有
  Copyright (c) Dan Abramov and the contributors.
  All rights reserved.

前言

我们在 Element-UI 的其他组件里发现，有使用这个组件，并且还不错，由于 Element-UI 官方文档并没有写到关于 el-scrollbar 的文档，所以稳定性上可能是有些问题，这里只是爬了源码，翻译了一些属性的使用，仅供参考

快速使用

1
2
3
4

<el-scrollbar>
    <li v-for="user in userList" :key="user.id">{{user.name}}</li>
</el-scrollbar>

具体实例

1
2
3
4
5
6
7
8
9
10
11

<el-scrollbar
    wrapClass="yf-container"
    viewClass="yf-content"
    wrapStyle="color:'#fff';fontSize:'16px';"
    viewStyle="color:'#fff';fontSize:'16px';"
    :native="false"
    :noresize="true"
    tag="ul"
>
    <li v-for="user in userList" :key="user.id">{{user.name}}</li>
</el-scrollbar>

结构构成

constructor

文档

Attribute

备注

源码 https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js

文章 element ScrollBar滚动组件源码深入分析

前言

收集了一些工作中常用到的 Chrome 调试技巧，其他大部分 Chrome 调试功能工具介绍已经在其他的很多文章中介绍到了，这里就不 DRY 了

Request blocking 阻塞请求

使用这个功能可以拦截请求

大部分情况是页面执行完某个操作后，页面就重定向了（比如登录），这时就不方便调试了，下面这个工具很好的解决了这个问题

比如你想了解在页面重定向之前，发去的登录请求都做了什么，使用操作如下图所示：

console-reqblock-001

Coverage 代码覆盖率

可以观察到代码覆盖率，哪些是没用的，去除无用代码，较少代码体积

你需要点击下图的记录按钮进行记录，然后你需要在页面上进行一些交互操作（如点击、鼠标移入等）

console-coverage-001

然后你会得到下图，红色的部分是没有用到的代码占比，绿色部分是用到的代码占比，你可以点击占比进度条，到达指定源代码区进行细致查看

console-coverage-002

Changes 变化

显示更改代码的比较，你可以通过这个工具观察，你用控制台修改过的代码，就和 git 的 diff 功能类似，红色代表删除、绿色代码新增

console-changes-001

你如果点击代码里的某一行，它会打开源代码面板，你可以在这里进行修改、调试操作

console-changes-002

Snippets 代码片段

一般在 console 里可以临时运行代码，但是书写格式不太友好，而且一换行就执行了（当然你可以 shift+enter 换行），这时，你又懒癌发作，不想打开代码编辑器，你可以使用 Snippets 这个工具，如下图所示：

console-snippets-001

可以像代码编辑器一样书写，可以格式化代码、可以断点调试、也可以单独导出文件

1

$ git clone https://github.com/Yangfan2016/PersonalWorks.git

下载仓库内的指定文件

1
2
3
4
5
6
7

$ git init
$ git config core.sparseCheckout true # 配置
$ git remote add -f origin https://github.com/Yangfan2016/PersonalWorks.git
$ echo "static-page/" >> .git/info/sparse-checkout # 写入要下载的文件目录
$ echo "web-app/" >> .git/info/sparse-checkout
$ git pull origin master

• 原文地址：http://javascriptissexy.com/understanding-es2015-in-depth-part-1-block-scope-with-let-and-const/
• 原文作者：Dan Wellman
• Markdown 地址：https://github.com/Yangfan2016/learn-translate/blob/master/2-Understanding-ES2015-In-Depth-Part-1.md
• 译者：Yangfan2016

ES2015 最大的特性之一就是有了一个全新的作用域。在这个章节里，我们将开始学习什么是作用域。我们将继续学习如何创建新的作用域类型，以及给我们代码带来的好处

快速了解作用域

作用域描述为一个变量，函数，标识符可以被访问的区域。JavaScript 传统上有两种作用域类型：全局作用域和函数作用域，你定义变量的位置会影响其他代码是否可以访问。让我们来看一个简单的例子来阐述作用域的概念。想象一下，你的 JavaScript 文件只包含以下代码：

1
2
3
4
5
6
7
8
9

var globalVariable = 'This is global';

function globalFunction1() {
  var innerVariable1 = 'Non-global variable 1';
}

function globalFunction2() {
  var innerVariable2 = 'Non-global variable 2';
}

在上面的代码中，我们首先声明了一个变量 globalVariable。这个语句不在函数内部，所以会自动存到全局作用域中。浏览器用 window 对象创建了一个全局作用域，除了可以用 globalVariable 访问，我们还可以通过挂在 window 对象上的 window.globalVariable 访问。我们可以在文件的任何地方访问这个变量，这两个函数的之前或之后，甚至是在函数的内部（这就是为什么我们说全局变量是 “隐藏的”，我们可以在任何地方正确的访问他们），甚至是在附在同一页面的其他 JavaScript 文件

在全局作用域里，我们定义了两个函数，globalFunction1 和 globalFunction2，就像全局变量一样，他们是 “可见的” 并且可以在这个文件的任何地方调用，也可以被同一页面的其他 JavaScript 文件调用。然而，当 JavaScript 引擎解析这些函数时，会分别创建他们自己的作用域。因吹斯听，这两个新的函数作用域被嵌套在全局作用域下，成为子作用域。这也就意味着函数内的代码可以访问全局变量，就像是和在函数 “内部的” 定义变量一样

当我们试图访问 JavaScript 里的标识符时，浏览器会首先在当前作用域中查找。如果没有找到，浏览器会在当前作用域的父作用域中查找，并且继续向上查找，直到找到这个变量，或者到达全局作用域为止。如果这个变量在全局作用域里依旧没有找到的话，那么浏览器会抛出一个 ReferenceError 错误。这种嵌套的作用域被称作作用域链，而这个检查当前作用域和父作用域的过程被称作变量查找。这种查找只会向上查找作用域链，它永远不会在它的子作用域里查找

在上面的作用域链查找方向我们得知，例子中的 innerVariable1 变量只能在 globalFunction1 函数内部被访问，innerVariable2 变量只能在 globalFunction2 函数内部被访问。innerVariable1 变量不能在 globalFunction2 函数内部或全局作用域内被访问，innerVariable2 变量也不能在 globalFunction1 函数内部或全局作用域内被访问

下面的图片是上面代码中作用域的抽象表示：

js-scopes

全局作用域包含了 globalVariable 以及两个内嵌的函数作用域。每个内嵌的函数作用域又包含自己的变量，但是这些变量不能被全局作用域访问。虚线表示的是作用域链的查找方向

让我们来看下另一个简短的代码示例，彻底的了解下到目前为止我们所介绍到的作用域概念。假设 JavaScript 文件只包含如下代码：

1
2
3
4
5
6
7

function outer() {
  var variable1;

  function inner() {
    var variable2;
  }
}

在这段代码里，我们在全局作用域里声明了一个叫 outer 的函数。因为它是一个函数，所以它创建了一个函数作用域，嵌套在全局作用域下。在这个作用域下，我们又声明了一个叫 variable1 的变量和 一个叫 inner 的函数。因为 inner 也是一个函数，所以一个新的作用域又被创建了，嵌套在 outer 函数的作用域下

在 inner 函数中，我们既可以访问 variable2 也可以访问 variable1。当我们在 inner 函数中访问 variable1 时，浏览器首先会在它的作用域里查找这个变量；当这个变量没有被找到时，会继续向上在父作用域里查找（也就是 outer 函数的作用域）。代码里作用域如下图所示：

js-scopes2

函数作用域可以嵌套在其他的函数作用域里，但是作用域链查找规则是一样的，因此在 inner 作用域下可以访问到 variable1 和 variable2，但是在 outer 作用域下只能访问 variable1

这个示例中的作用域链比较长，从 inner 函数延伸到 outer 函数，直到全局对象 window

JavaScript 的新作用域

在 JavaScript 中，一个块是由一个或多个语句用大括号包裹起来的。诸如 if，for，while 的条件表达式，都是用块基于特定的条件来执行块语句

其他流行的常见的编程语言都有块作用域，JavaScript 作用域中，直到如今却只有全局作用域和函数作用域，因此使我们变得很困惑。ES2015 在 JavaScript 新增了块作用域，对于我们的代码来说有很大的影响，并且对于那些熟悉其他编程语言的开发者来说变得更直观

块作用域意味着一个块可以创建它自己的作用域，而不是简单的存在于它最近到父级函数作用域或全局作用域下。让我们在认识块作用域是如何工作的之前，先来了解下传统上块里的 JavaScript 是如何工作的：

1
2
3
4
5
6
7
8
9
10
11
12

function fn() {
  var x = 'function scope';

  if (true) {
    var y = 'not block scope';
  }

  function innerFn() {
    console.log(x, y); // function scope not block scope
  }
  innerFn();
}

var 语句是不能够创建块作用域的，即使是在块里，因此 console.log 语句可以访问到 x 和 y 变量。 fn 函数创建了一个函数作用域而且 x 和 y 变量都是可以通过作用域内的作用域链访问到

声明提升

理解提升的概念是理解 JavaScript 如何工作的基础。JavaScript 有两个阶段：解析阶段（JavaScript 引擎读取所有的代码）、执行阶段（执行已解析的代码）。大多数的事情都发生在第二阶段；例如，当你使用 console.log 语句时，实际的日志消息会在执行阶段打印到控制台

然而，一些重要的事情也会在解析阶段发生，包括变量的内存分配、作用域创建。提升这个术语指的是 JavaScript 引擎在遇到标识符，如变量、函数声明时所发生到事情；当发生声明提升时，它的行为就像是把它定义的字面量提升到当前作用域的顶部。鉴于此，上面到代码示例实际会变成如下情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function fn() {
  var x;
  var y;

  x = 'function scope';

  if (true) {
    y = 'not block scope';
  }

  function innerFn() {
    console.log(x, y); // function scope not block scope
  }
  innerFn();
}

只有变量到声明会提升到它的作用域的顶部；在这个例子的 if 语句中，变量赋值依然发生在我们所赋值的地方。当然，我们到变量并不会移动，而是引擎行为表现如此，因此这样可以更好的帮助我们理解代码

除了变量，函数声明也会被提升。结果就是，从 JavaScript 引擎到角度来看，代码实际上看起来是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function fn() {
  var x;
  var y;
  function innerFn() {
    console.log(x, y); // function scope not block scope
  }

  x = 'function scope';

  if (true) {
    y = 'not block scope';
  }
  innerFn();
}

innerFn 的声明也被提升到了它的作用域的顶部。但是，记住它仅仅是函数声明被提升了，函数调用没有被提升。上面的代码并不会报任何错，因为 innerFn 在 x 和 y 赋值之前并没有被调用

使用 let

即使使用了 ES2015，var 声明也不会创建块作用域。为了创建块作用域，我们需要在块里使用 let 或 const 声明。我们一会再看 const，首先来看下 let

表面上，let 和 var（我们用它来声明变量）的行为很相似：

1
2
3
4

function fn() {
  var variable1;
  let variable2;
}

在这个简单的例子中，var 和 let 声明都做了相同的事情（在 fn 创建的作用域下初始化了一个新的变量）。为了创建一个新的块作用域，我们需要在块里使用 let：

1
2
3
4
5
6
7
8
9
10

function fn() {
  var variable1 = 'function scope';

  if (true) {
    let variable2 = 'block scope';
  }

  console.log(variable1, variable2); // Uncaught ReferenceError: variable2 is not defined
}
fn();

在这个代码示例中，抛出了一个引用错误（reference error）；让我们来探索下为什么会这样。fn 函数创建了一个新作用域，里面声明了变量 variable1。然后我们在 if 语句的块里，声明了变量 variable2。然而，因为我们在块里使用了 let 声明，因此一个新的块作用域在 fn 的作用域下被创建了

如果 console.log 语句也在 if 块中的话，那么它就和 variable2 在相同的作用域下了，也能够通过作用域链找到 variable1。但是因为 console.log 在外头，因此它不能访问 variable2，所以会抛出一个引用错误

块作用域和函数作用域的行为相同，但是他们是为块创建的，而不是函数

暂时性死区

当一个用 var 声明的常规变量被创建时，会被提升到它的作用域的顶部，然后并初始化一个 undefined 值，这样就允许我们能够在它赋值之前引用一个常规变量

1
2

console.log(x); // undefined
var x = 10;

记住，由于存在声明提升，代码实际看起来是这样的：

1
2
3

var x = undefined;
console.log(x); // undefined
x = 10;

这个行为会阻止抛出引用错误 ReferenceError

用 let 声明的变量也被提升了，但重要的是，他们并不会自动初始化值 undefined，因此意味着下面的代码会产生一个错误：

1
2

console.log(x); // Uncaught ReferenceError: x is not defined
let x = 10;

这个错误是由暂时性死区（TDZ）引起的。TDZ 存在于作用域初始化到变量声明期间。为了修复这个错误（ReferenceError），我们需要在访问它前声明它：

译者注：TDZ

1
2
3

let x;
console.log(x); // undefined
x = 10;

TDZ 这样设计是为了使开发更容易（试图引用一个还没声明的变量通常视为一个错误，而不是故意为之），因此这个错误可以立即提醒我们

使用 const

新的 const 被用来声明一个不可再次赋值的变量。它和 let 的在 TDZ 的行为非常相似，但是，const 变量必须初始化一个值

1

const VAR1 = 'constant';

从现在开始， 变量 VAR1 的值将永远是 “constant” 这个字符串。如果我们试图再次对它赋值，我们会得到一个错误：

TypeError: Assignment to constant variable

如果我们试图创建一个没有初始化的 const 变量，我们将看到一个语法错误：

SyntaxError: Missing initializer in const declaration

相似地，一个 const 变量不能被再次声明。如果我们试图再次用 const 声明一个相同变量时，我们将得到一个不同类型的语法错误

SyntaxError: Identifier ‘VAR1′ has already been declared

和其他编程语言一样，常量是被用来保存我们的程序在生命周期里不希望改变的值

记住 let 和 const 都是 JavaScript 的保留词，因此在严格模式下，是不能被用作标识符名称的（变量名，函数名等）。随着 ES2015 越来越普遍，let 和 const 优于 var 已形成一个共识，因为变量创建的作用域更与其他现代编程语言看齐，并且代码的行为也更好预测。
因此，在大多数情况下尽可能的避免使用 var

不可变性

用 const 声明的变量不能被再次赋值的，但是 const 声明的变量并不是完全不可变的。如果我们用对象或数组初始化了一个 const 变量，我们依然可以修改对象的属性和增加删除数组的元素

练习

1. 在 for 循环里用 let 来初始化计数器变量
2. 修复下面 const 的错误：

1
2
3
4

const VAR1 = 'constant';
const VAR1 = 'constant2';
const VAR2;
VAR2 = 'constant';

成功是通过不断的练习和知识的积累，而非智力

• 本文仅代表原作者个人观点，译者不发表任何观点
• Markdown 文件由译者手动整理，如有勘误，欢迎指正
• 译文和原文采用一样协议，侵删

上一篇文章，我们介绍了如何构建一个 react 插件，今天我们说说如何构建 vue 插件

准备工作

由于与上一篇 react 插件文章使用的是相同的结构，代码测试、持续集成及发布 npm 包也都是一个套路，这里就不再敖述。
下面主要说下不同的地方，let’s start 😊

1. 开发依赖包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "babel-loader": "^8.0.2",
        "chai": "^4.2.0",
        "coveralls": "^3.0.2",
        "css-loader": "^1.0.0",
        "jest": "^23.6.0",
        "style-loader": "^0.23.1",
        "vue": "^2.5.21",
        "vue-loader": "^15.5.0", // 解析 SFC 文件
        "vue-style-loader": "^4.1.2",
        "vue-template-compiler": "^2.5.21", // vue-loader 的同步依赖 
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0"
    },
}

2. webpack 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    mode: "production", // 生产模式
    entry: { // 入口
        "YanProgress": path.resolve(__dirname, './src/index.js')
    },
    output: { // 出口
        path: path.resolve(__dirname, './dist'),
        filename: '[name].min.js',
        publicPath: "./dist/",
        libraryTarget: 'umd', // 按 UMD 模式打包
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    // 模板编译过程中，编译器可以将某些特性转换为 require 调用
                    transformAssetUrls: {
                        video: ['src', 'poster'],
                        source: 'src',
                        img: 'src',
                        image: 'xlink:href' // SVG
                    }
                },
                // 只命中src目录里的js文件，加快 Webpack 搜索速度
                include: path.resolve(__dirname, "./src"),
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    },
                ],
                // 只命中src目录里的js文件，加快 Webpack 搜索速度
                include: path.resolve(__dirname, "./src/"),
            },
            {

                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    plugins: [
        // vue-loader **这个插件是必须的！**它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。
        new VueLoaderPlugin
    ],
    resolve: { // 省略文件后缀时，默认按下面的配置取
        extensions: ['.js', '.vue'],
    },
    externals: { // 不把 vue 打包进去
        vue: 'vue',
    }
};

编写插件

写 vue 插件稍微复杂一点 😢，根据官网的案例，我们需要提供一个包含 install 方法的对象或者一个函数（传送门），供 Vue.use 调用注册你的插件

• 写法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import Component from './YanProgress.vue'; // 这个就是你平时写的 SFC 组件

// 这里要导出一个包含 install 方法的对象
let plugin = { // 这里要导出一个 install 方法
    install(Vue,options) { 
        // 这里写你的代码，你可以全局注册组件，也可以写全局指令，也可以扩展 Vue 的方法
        // 1. 全局组件
        Vue.component('yan-progress',Component); 
        // 2. 全局方法或属性
        Vue.myGlobalMethod = function () {
            // 逻辑...
        }
        // 3. 全局指令
        Vue.directive('my-directive', {
            bind (el, binding, vnode, oldVnode) {
                // 逻辑...
            }
        })
        // 4. 注入组件
        Vue.mixin({
            created: function () {
                // 逻辑...
            }
        })
        // 5. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {
            // 逻辑...
        }
    }
};

if (window && window.Vue) { // 如果是渐进式开发（script 引入简单粗暴的开发方式），需要自动注册你的插件
    window.Vue.use(plugin);
}

export default plugin;

• 写法二

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import Component from './YanProgress.vue'; // 这个就是你平时写的 SFC 组件

// 或者这里也可以写成函数
function plugin(Vue,options) { 
        // 这里写你的代码，你可以全局注册组件，也可以写全局指令，也可以扩展 Vue 的方法
        Vue.component('yan-progress',Component); 
    }
};

if (window && window.Vue) { // 如果是渐进式开发（script 引入简单粗暴的开发方式），需要自动注册你的插件
    window.Vue.use(plugin);
}

export default plugin;

这样写的原因是，下面源码伺候😄

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) { // 在这里哦，可以传对象，也可以传函数
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) { // 避免重复注册插件
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') { // 如果是带有 install 方法的对象
      plugin.install.apply(plugin, args) // 不改变插件的 this（这里的 this 还是指向插件对象本身）
    } else if (typeof plugin === 'function') { // 如果是函数
      plugin.apply(null, args) // 不改变插件的 this（这里应该是指向window，在浏览器非严格模式下）
    }
    installedPlugins.push(plugin)
    return this
  }
}

开源贡献

拥抱开源，这样才能让社区，乃至行业发展更有动力，哎，似曾相识的赶脚，😂

注：例如，你的 star 是对我最大的鼓励，是支持我继续开源的动力，😄

• awesome-vue 社区 awesome-vue
• 其他社区，可以到 Github 探索

完结撒花🎉

👏 再次欢迎大家一起和我搞 ji 由（Github）😊

• 项目地址 https://github.com/Yangfan2016/vue-yan-progress
• 博客原文 https://yangfan2016.github.io
• react-yan-progress https://github.com/Yangfan2016/react-yan-progress
• vue-yan-progress https://github.com/Yangfan2016/vue-yan-progress

一般情况下，我们写 React 项目，用 create-react-app 脚手架开发比较方便，但是如果要写一个插件的话，用三方脚手架就显得有点臃肿了，我们可以自己配置一个符合我们开发的简单工具，本文教你如何一步一步开发一个
React 插件 ，let’s start 😊

准备工作

工欲善其事，必先利其器，我们来选型

• Typescript

为了方便开发，我们选用 Typescript 作为开发语言，可以即时类型检查，顺便还能装逼（巨硬大法好），

注：
Typescript 可选的，你也可以选择 js 刀耕火种，不过最好还是用 Typescript 写吧，毕竟9102年了，骚年 😄

• webpack + babel

这里先用我们熟悉的 webpack 作为打包工具（之后会尝试改成 rollup 作为打包工具）

• jest + travis + coveralls

jest 作为我们代码测试的工具,这里选用 travis ，一个在线持续集成的工具（帮助你打包、构建、运行scripts命令、代码测试等）
选用 coveralls 可以根据 travis 代码测试后生成的代码覆盖率生成 badge（Github 好多项目都有的）

目录结构

下面我们来大体组织下目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

react-yan-progress
├── build                                 // 打包目录
│   └── YanProgress.min.js
├── src                                   // 源码
│   ├── index.css
│   └── index.tsx
├── test                                  // 测试文件
│   └── YanProgress.test.js
├── index.d.ts                            // 声明文件（ts）
├── jest.config.js                        // jest 测试配置文件
├── webpack.config.js                     // webpack 配置文件
├── tsconfig.json                         // ts 配置文件
├── package.json
├── .travis.yml                           // travis 配置文件
├── LICENSE 
└── README.md

开发者选项

所有的依赖的包如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{
    "devDependencies": {
        "@babel/core": "^7.1.6",
        "@babel/preset-env": "^7.1.6", 
        "@babel/preset-react": "^7.0.0", // for react
        "@types/react": "^16.7.18", // 声明文件
        "@types/react-dom": "^16.0.11", // 声明文件
        "babel-loader": "^8.0.4",
        "chai": "^4.2.0", // 测试断言库
        "coveralls": "^3.0.2", // 代码覆盖率
        "css-loader": "^1.0.1", 
        "jest": "^23.6.0", // 测试工具
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "style-loader": "^0.23.1",
        "ts-loader": "^5.3.2", // 解析 ts 
        "typescript": "^3.2.2", // 解析 ts
        "webpack": "^4.25.1",
        "webpack-cli": "^3.1.2"
    }      
}

命令配置如下，详情 package.json

1
2
3
4
5
6
7

{
    "scripts": {
        "build": "webpack --config webpack.config.js --progress --colors",
        "test": "jest ./test/YanProgress.test.js",
        "coveralls": "cat ./coverage/lcov.info | coveralls"
    },
}

webpack 配置

我们采用 webpack4 ,具体配置请看官网，传送门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

const path = require('path');

module.exports = {
mode: "production", // 生产模式
entry: { // 入口
"YanProgress": path.resolve(__dirname, './src/index.tsx')
},
output: { // 出口
path: path.resolve(__dirname, './build'),
filename: '[name].min.js',
publicPath: "./build/",
libraryTarget: 'commonjs2', // 注意这里按 commonjs2 模块规范打包
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', "@babel/preset-react"]
}
},
{
loader: 'ts-loader', // 解析 ts
}
],
include: path.resolve(__dirname, "./src/"), // 只解析 src 目录下的文件
},
{

test: /\.css$/,
loader: "style-loader!css-loader?modules&localIdentName=[hash:8]", // css_modules 配置详情  http://www.ruanyifeng.com/blog/2016/06/css_modules.html
include: path.resolve(__dirname, "./src/"),
}
]
},
resolve: { // 省略文件后缀时，默认按下面的配置取
extensions: ['.ts', '.tsx', '.js'],
},
externals: { // 不把 react 打包进去
react: 'react'
}
};

【选读】Typescript 配置

由于我们要在 ts 文件中 引入 css 模块，但是 ts 不认识，所以我们需要进行如下配置

在项目的根目录下新建一个 index.d.ts ts 声明文件

1

declare module '*.css';

开始编写插件

这里就是与平常的开发组件一样，举个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// jsx
import React from 'react';

class YanProgress extends React.Component{
render() {
return (
<div>
骚年，写代码快乐吗，看我干嘛 😄，赶快滚去写代码啊，别忘了点个 star 😂
</div>
);
}
}

export default YanProgress; // 记得导出啊，骚年

你可以直接看我写好的代码（然后 ctrl+c,ctrl+v），源码在这里，点我

安装依赖及代码压缩打包

webpack4 默认会压缩代码，so 我们直接执行刚才 package.json 配置好的 scripts 的命令

1
2

$ yarn
$ yarn run build

代码测试

• 单元测试
  可以在 test 目录下新建一个 xxx.test.js 的测试文件，写好测试用例（这里使用的是 chai 断言库的 expect 风格），执行如下命令

  1	$ yarn run test

• 包测试
  如果你也想以 npm 包的形式引入（import YanProgress from 'react-yan-progress'），测试的话，可以执行如下命令

  在你的项目根目录下，打开终端运行如下命令，建立链接

  1	$ yarn link

  在你要测试的 demo 项目根目录下，执行如下，然后你就可以这样使用了 import YanProgress from 'react-yan-progress'

  1	$ yarn link react-yan-progress

持续集成

这里用到比较方便简单的 travis 在线测试工具，和测试代码覆盖率工具 coveralls，网址如下：
持续集成 https://travis-ci.org
代码覆盖率 https://coveralls.io

注册使用过程就略过了，毕竟已经有很多教程了（面向谷歌编程 😂）

在项目根目录下新建一个 .travis.yml 文件，配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14

language: node_js # 运行环境
node_js:
  - "10.6.0" # 版本
branches:
  only:
  - master # 只有主支可以
before_install:
    - export TZ='Asia/Shanghai' # 如果你的项目里涉及到时间处理，这里需要设置时区
install: yarn install # 安装 npm 包
script: # 执行命令
  - yarn run build # 打包
  - yarn run test # 测试
after_success: # 成功之后执行如下命令
  - yarn run coveralls # 测试代码覆盖率

发布 npm 包

注册 npm 账号，注册过程略

注意之前，先去 npm 官网找一下，你的包名有木有被抢先占用了

执行如下命令进行发布

1

$ npm publish

升级包
执行如下命令（x.x.x -> major.minor.patch）

1

$ npm version patch

开源贡献

拥抱开源，这样才能让社区，乃至行业发展更有动力

注：例如，你的 star 是对我最大的鼓励，是支持我继续开源的动力

• React-componets 社区 awesome-react-components
• 其他社区，可以到 Github 探索

完结撒花🎉

👏 欢迎大家一起和我搞 ji（Github）😊

• 项目地址 https://github.com/Yangfan2016/react-yan-progress#react-yan-progress
• 博客原文 https://yangfan2016.github.io

Why

为什么会存在跨域问题

• 同源策略
  由于出于安全考虑，浏览器规定JavaScript不能操作其他域下的页面DOM，不能接受其他域下的xhr请求（不只是js，引用非同域下的字体文件，还有canvas引用非同域下的图片，也被同源策略所约束）
  只要协议、域名、端口有一者不同，就被视为非同域。

How

如何解决

要解决跨域问题，就要绕过浏览器对js的限制，另辟蹊径

1. JSONP
   这是最简单，也是最流行的跨域解决方案，它利用script标签不受同源策略的影响，解决跨域，需要后台配合，返回特殊格式的数据

前端

1
2
3
4
5
6
7
8
9
10
11
12
13

<script>
    function JSONP(link) {
        let script=document.createElement("script");
        script.src=link;
        document.body.appendChild(script);
    }

    function getUser(data) {
        console.log(data);// todo
    }
    const API_URL_USER='http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=getUser'; // 这里以爱奇艺的接口为例（来源网络，侵删）
    JSONP(API_URL_USER);
</script>

后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Express(Nodejs)
// mock data
const USERS=[
    {name:"Tom",age:23},
    {name:"Jack",age:23}
];

app.get("/user",function (req,res) {
    let cbName=req.query["callback"];
    // 这里做一个容错处理
    res.send(`
        try{
            ${cbName}(${JSON.stringify(USRES)});
        }catch(ex) {
            console.error("The data is invalid");
        }
    `);
});

2. CORS (cross-origin resource sharing)
   跨域资源共享，是W3C的一个标准，它允许浏览器发送跨域服务器的请求，CORS需要浏览器和服务器同时支持

后端

简单请求和非简单请求详情，请阅读阮一峰老师的博文，这里不再敖述

1
2
3
4
5
6
7

app.use(function (req,res,next){
    res.header('Access-Control-Allow-Origin', 'http://localhost:6666'); // 允许跨域的白名单，一般不建议使用 * 号
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); // 允许请求的方法，非简单请求，会进行预检
    res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允许请求携带的头信息，非简单请求，会进行预检
    res.header('Access-Control-Allow-Credentials','true'); // 允许发送cookie，这里前端xhr也需要一起配置 `xhr.withCredentials=true`
    next();
});

3. 代理
   只要是在与你同域下的服务器，新建一个代理（服务端不存在同源策略），将你的跨域请求全部代理转发

后端

1
2

const proxy=require("http-proxy-middleware"); // 这里使用这个中间件完成代理
app.use('/api', proxy("http://b.com")); // http://a.com/api -> http://b.com/api

4. window.name+iframe
   MDN里解释道它是获取/设置窗口的名称，因为的它在不同页面甚至域名加载后值都不会改变，该属性也被用于作为 JSONP 的一个更安全的备选来提供跨域通信（cross-domain messaging）

前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!--http://a.com/page1.html-->
<script>
    function request(url,callback) {
        let iframe=document.createElement("iframe");
        let isFirst=true;
        iframe.style.display="none";
        iframe.addEventListener("load",function () {
            if (isFirst) { 
                isFirst=false; // 防止iframe循环加载
                iframe.src="http://a.com/page2.html";
                callback && callback(iframe.contentWindow.name);
                iframe.remove();               
            }
        });
        iframe.src=url;
    }

    requeset("http://b.com/user",function (data) {
        console.log(data); // todo
    });
</script>

后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Express(Nodejs)
// mock data
const USERS=[
    {name:"Tom",age:23},
    {name:"Jack",age:23}
];

app.get("/user",function (req,res) {
    res.send(`
        <script>
            ;window.name=${JSON.stringify(USERS)};
        </script>
    `);
});

5. document.domian
   这个使用情况有限，例如
   http://a.c.com
   http://b.c.com
   主域相同时，分别设置他们页面的document.domain="c.com";

6. locaction.hash+iframe
   嵌套两层iframe，达到第一层与第三层同域，就可以互相通信了

1
2
3
4
5
6
7
8
9
10

<!--http://a.com/page1.html-->
<script>
    let iframe=document.createElement("iframe");
    iframe.style.display="none";
    iframe.src="http://b.com/user.html";

    window.addEventListener("hashchange",function () {
        console.log(location.hash.slice(1)); // todo
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!--http://b.com/user.html-->
<script>
    let iframe=document.createElement("iframe");
    iframe.style.display="none";

    function getUserData() {
        fetch("http://b.com/user")
            .then(res=>{
                let data=res.json();
                iframe.src=`http://a.com/page2.html#${data}`;
            });
    }

    getUserData();

    window.addEventListener("hashchange",function () {
        getUserData();
    });
</script>

1
2
3

<script>
    top.location.hash=window.location.hash;
</script>

7. 图片ping
   这个只能发出去请求，无法获取到服务器的响应，常常用于网站流量统计

1
2
3
4
5

let img=new Image();
img.addEventListener("load",function () {
    console.log("Send success"); // todo
});
img.src="http://site.c.com/a.gif?count=666";

8. postMessage+iframe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- http://a.com -->
<button id="sendBtn">从B接口获取用户数据</button>
<iframe src="http://b.com" id="ifr"></iframe>
<script>
window.addEventListener("message",function({detail,origin}){
    if (origin==="http://b.com") { // 最好判断下消息来源
        if (detail.type==="set-user") {
            console.log(detail.data); // todo
        }
    }
});

sendBtn.addEventListener("click",function () {
    ifr.contentWindow.postMessage({
        type:"get-user",
    },"http://b.com");
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- http://b.com -->
<script>
window.addEventListener("messagae",function({detail,origin}){
    if (origin==="http://a.com") { // 最好判断下消息来源
        if (detail.type==="get-user") {
            fetch("http://b.com/user")
            .then(res=>{
                top.contentWindow.postMessage({
                    type:"set-user",
                    data:res.json(), // 假设接口返回的是json格式的数据
                },"http://a.com");
            })
        }
    }
});


</script>

9. postMessage+form+iframe

这个需要后台配合返回特殊格式的数据，TL,DR 可以看这个demo

10. WebSocket

WebSocket是一种通信协议，该协议不实行同源政策，
注意需要浏览器和服务器都支持的情况下

1
2
3
4
5
6
7

 <script src="//cdn.bootcss.com/socket.io/1.7.2/socket.io.min.js"></script>
 <script>
    var io = io.connect('http://b.com');
    io.on('data', function (data) {
        console.log(data); // 接受来自服务器的消息
    });
</script>

后端

1
2
3
4
5
6
7

// Nodejs
const server = require('http').createServer();
const io = require('socket.io')(server);

io.on('connection', function (client) {
    client.emit('data', 'This message from "http://b.com"');
});

Summary

• 目前个人在工作中遇到的解决方法就是这些，当然还有许多其他的方法，你看，其实跨域并不难吧 ^_^
• js通过xhr发的跨域请求，虽然得不到响应，但是可以发送出去，其实如果是单向通信的话，也可以，比如文章阅读统计，网站流量统计

Reference

跨域资源共享 CORS 详解—阮一峰
不要再问我跨域的问题了
FatDong1/cross-domain

点击预览
在之前的代码风格，和样式上做了大调整，如下图，主要是美化了移动端

• Before

before-pc

• After

poster

snake-game-pc

Start

移动端：中间的圆点按钮是重新开始，周围的方向按钮和游戏手柄操作一样
web端：键盘方向键控制

Technology stack

Typescript
rollup
yarn
canvas API

Done

• 本次得分
• 历史最高分
• 移动端、web端适配

Todo

• 蛇的样式美化
• 游戏设置障碍物

Review and issues

github源码
关注我

This is just a common toolkit for the Front End

安装使用

• Install

  1	$ npm install yanjs

• Example

  1	var yanjs = require('yanjs');

• Documentation
  使用文档

造轮子的初衷

现在的前端发展正是百花齐放的时代，各种框架、各种库、各种插件层出不穷，为何还要重复造轮子内（毕竟大家都知道DRY，Don’t repeat yourself）：

1. 为了公司内部使用，减少三方插件的依赖
2. 为了轻量级，加快页面的加载速度，现有业务用目前流行的工具库（如 lodash.js）使用率不是很高，并不是所有功能都用上
3. 现在业务的技术栈主要是Vue，要进一步去除jQuery的依赖，做一个替代jQuery里部分工具函数的过渡
4. 为了熟悉实践下前端开发的流程，学习一下如何造轮子（向轮子哥vczh致敬），提升一下自己的水平
5. 为大前端的发展添砖加瓦，^_^

开发流程

• 开发需求
  主要是根据平时业务中常用的总结如下需求

1. ajax模块
2. 时间格式转换模块
3. 字符串格式转换模块
4. cookie模块
5. url解析模块
6. 浏览器模块

• 开发依赖
  鉴于开发中常用的ajax库是axios，所以就不再重复造轮子了，简单的封装了下，cookie直接使用的是MDN封装好的docCookies

1. axios
2. docCookies

• 开发环境
  语言：Typescript 3.x
  转换：babel 7.x
  打包：webpack 4.x
  测试：mocha+chai+phantomjs
• 发布环境
  集成：Travis-ci
  发布：npm
  托管：github

开发心得

• 经历了
  第一次用typescript编写业务代码
  第一次发布npm包
  第一次用mocha测试工具完成代码测试
  第一次用Travis-ci集成工具

• 结果
  完整的体验了一次前端工程化开发，基本熟悉了整个开发流程
  公司内部已有两个项目在使用此库，已经基本稳定

碎碎念

鄙人还在成长中，可能还有许多地方考虑不周，欢迎交流学习，欢迎提 issue

联系我：
Github：https://github.com/Yangfan2016
Blog： https://yangfan2016.github.io/
Segmentfault：https://segmentfault.com/u/yangfan2016

大佬，点了star再走呗，^_^

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 关于2的倍数的乘法除法
4>>1 // 4/Math.pow(2,1) === 2
2<<2 // 2*Math.pow(2,2) === 8

// 取整
3.14|0 // 3
3.14^0 // 3
3.14&3 // 3
~~3.14 // 3
3.14>>0 // Math.floor(3/Math.pow(2,0)) === 3
3.14<<0 // Math.floor(3*Math.pow(2,0)) === 3

// 不借助第三个变量下交换两数
let a=1,
    b=2;
a^=b;
b^=a;
a^=b;
// a === 2,b === 1

Concept

位运算符

| 或 只要有一个为1，就为1
& 与 只有都是1的情况，才为1
^ 异或 相同为0，不同为1
~ 否 取反
<< 左移 向左移动指定位数，尾部补0
>> 右移 向右移动指定位数，首部补0
>>> 带符号右移

Convert

Demical

规则 逢十进一
基数 10
数码 0-9
位权 10^n-1

举例

1
2

// 转10进制
100D === 1*10^2+0*10^1+0*10^0

Binary

规则 逢二进一
基数 2
数码 0-1
位权 2^n-1

举例

1
2

// 转10进制
100B === 1*2^2+0*2^1+0*2^0

Octal

规则 逢八进一
基数 8
数码 0-7
位权 8^n-1

举例

1
2

// 转10进制
100O === 1*8^2+0*8^1+0*8^0

Hex

规则 逢十六进一
基数 16
数码 0-9,a-f
位权 16^n-1

举例

1
2

// 转10进制
100H === 1*16^2+0*16^1+0*16^0

Decaimal convert to others

短除法

短除法

1
2
3

6D -> 110B
9D -> 11O
17D -> 11H

构造函数继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function Parent() {
    this.name='parent';
}

Parent.prototype.run=function () {
    console.log('We can run');
}

function Child() {
    Parent.call(this);
}

let c=new Child();
c.name; // 'parent'
c.run(); // undefined

• 缺点

1. 无法继承父类原型上的方法

原型链实现继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function Parent() {
    this.name='parent';
    this.colors=["red","yellow"];
}

Parent.prototype.run=function () {
    console.log('We can run');
}

function Child() {
    
}

Child.prototype=new Parent();
Child.prototype.constructor=Child;   

var c1=new Child();
var c2=new Child();

c1.colors; // ['red','yellow']
c2.colors; // ['red','yellow']

c1.colors.push('green');

c1.colors; // ['red','yellow','green']
c2.colors; // ['red','yellow','green']

• 缺点

1. 子类共用一个父类的实例，造成数据污染
2. 创建子类实例时，无法向父类构造函数传参

组合式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function Parent() {
    this.name='parent';
    this.colors=["red","yellow"];
    console.log("I've executed");
}

Parent.prototype.run=function () {
    console.log('We can run');
}

function Child() {
    Parent.call(this);
}

Child.prototype=new Parent();
Child.prototype.constructor=Child;

var c1=new Child(); // "I've executed" "I've executed"
var c2=new Child(); // "I've executed" "I've executed"

c1.colors; // ['red,yellow']
c2.colors; // ['red,yellow']

c1.colors.push('green');

c1.colors; // ['red,yellow','green']
c2.colors; // ['red,yellow']

• 缺点

1. 每新建一个子类都会调用两次父类构造器

寄生组合式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function Parent() {
    this.name='parent';
    this.colors=["red","yellow"];
}

Parent.prototype.run=function () {
    console.log('We can run');
}


function Child() {
    Parent.call(this);
}
function Super() {/* noop */}
Super.prototype=Parent.prototype;
Child.prototype=new Super();
Child.prototype.constructor=Child;

• 特点

1. 完美实现继承
2. 利用寄生函数实现父类构造函数只执行一次，将原型上的方法挂载到寄生函数上，最后将寄生函数的实例作为子类的原型对象

ES6 继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class Parent {
    constructor() {
        this.name='parent';
        this.colors=["red","yellow"];
    }
    run() {
        console.log('We can run');
    }
}

class Child extends Parent{
    constructor() {
        super();
        this.name='child';
    }
}

• 特点

1. 简单明了
2. 只是一种语法糖而已

• 下面是babel将ES6转成ES5继承的实现

Babel 编译后的ES5代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

"use strict";

// 创建类
var _createClass = function() {
    function defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value"in descriptor)
                descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
        }
    }
    return function(Constructor, protoProps, staticProps) {
        // 定义原型对象的属性、方法
        if (protoProps)
            defineProperties(Constructor.prototype, protoProps);
        // 定义类的静态属性、方法
        if (staticProps)
            defineProperties(Constructor, staticProps);
        return Constructor;
    }
    ;
}();
// 确保子类初始化时调用super
function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
// 继承
function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    // 利用 Object.crete 创建了一个父类原型对象的新实例，并且修正了构造器指向
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    // 将子类原型链链到父类上
    if (superClass)
        Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
// 安全检测，确保用 'new' 操作的构造函数
function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Parent = function() {
    function Parent() {
        _classCallCheck(this, Parent);

        this.name = 'parent';
        this.colors = ["red", "yellow"];
    }

    _createClass(Parent, [{
        key: "run",
        value: function run() {
            console.log('We can run');
        }
    }]);

    return Parent;
}();

var Child = function(_Parent) {
    _inherits(Child, _Parent);

    function Child() {
        _classCallCheck(this, Child);

        var _this = _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this));

        _this.name = 'child';
        return _this;
    }

    return Child;
}(Parent);

备注

• 语法为 ES6

• 以下排序默认按升序排序

• 测试案例均为自然数

前言

排序作为十分经典的算法之一。是每一个软件工程师的必备技能，学好排序算法，可以提高软件的运行效率，最重要的是掌握其算法设计思想，才能举一反三应用到实际的实践中，为己所用。

排序算法简介

1. 按照数据的大小，排序算法可以分为内部排序和外部排序（数据较大，需要借助外存）
2. 内部排序，又可以细分为 交换排序、插入排序、选择排序

1. 冒泡排序

简介：两两元素进行比较，较大者放置后头，类似水中的气泡较大者浮在水的上端

性能

平均时间复杂度 O(n^2)

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function bubble(arr) {
    let len = arr.length,
        i = 0,
        j = 0;
    // 循环 n-1 趟
    for (i = 0; i < len; i++) {
        // 每趟 需比较 n-i-1 次
        for (j = 0; j < len - 1 - i; j++) {
            // 如果后面的元素较大，则交换两者顺序
            if (arr[j + 1] < arr[j]) {
                arr[j] = [arr[j + 1], arr[j + 1] = arr[j]][0];
            }
        }
    }
    return arr;
}

2. 快速排序

简介：取一个元素为基准，把序列分成两部分，小于基准的放到它的左面，大于等于的放到它的右面，然后在把左面和右面的子序列再进行上述的拆分，直到子序列不可再分割（小于2个元素），最终达到整个序列有序

性能

平均时间复杂度 O(n*logn)

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function quick(arr) {
    // 不可再分割，直接退出
    if (arr.length <= 1) return arr;
    let len = arr.length,
        middle = len >> 1,
        pivot = (len--) && arr.splice(middle, 1)[0], // 取中间为基准数，并从数组中移除
        left = [],
        right = [],
        i = 0;

    for (i = 0; i < len; i++) {
        // 分组 小于基准的放到左边，反之
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    return [...quick(left), pivot, ...quick(right)]; // 合并
}

3. 简单选择排序

简介：假设一个有序序列，然后由剩余的元素中选出最小的（最大的）扔到有序序列，直到无序序列元素为空，从而达到整个序列有序

性能

平均时间复杂度 O(n^2)

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function selection(arr) {
    let len = arr.length,
        i = 0,
        j = 0,
        min = i;
    // 循环 n-1 趟
    for (i = 0; i < len - 1; i++) {
        min = i; // 假设每趟的第一个数为最小值
        for (j = i + 1; j < len; j++) {
            // 如果后面的树大于最小数（min对应的数），则重新对最小值的索引赋值
            if (arr[j] < arr[min]) {
                min = j;
            }
        }
        // 将最小数置于该趟排序的第一个位置
        arr[i] = [arr[min], arr[min] = arr[i]][0];
    }
    return arr;
}

4. 堆排序

简介：是简单选择排序的改进版，利用堆结构

性能

平均时间复杂度 O(n*logn)

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 堆排序
function heapSort(arr) {
    var n = arr.length,
        i, j;

    // 筛选
    var sift = (k, m, r) => {
        var p = k, // 父结点
            c = p * 2 + 1; // 左结点（默认最大）

        while (c <= m) { // 左结点(c=m)和左右结点(c<m)
            if (c < m && r[c + 1] > r[c]) c++; // 选出左右结点中的最大者，指向左结点
            if (r[p] > r[c]) break; // 父结点大于左结点 顺序正确，退出循环
            else {
                r[p] = [r[c], r[c] = r[p]][0]; // 将大的一方置于顶部（父结点）
                p = c; // 向下重新指向父结点
                c = p * 2 + 1; // 向下重新指向左结点
            }
        }
    };

    // 构建堆
    for (i = (n / 2 | 0) - 1; i >= 0; i--) { // 从最后一个分支结点开始向上逆序遍历 
        sift(i, n - 1, arr);
    }
    // 排序
    for (j = n - 1; j >= 0; j--) {
        arr[0] = [arr[j], arr[j] = arr[0]][0]; // 将最大的结点存于数组的最后一位
        n--; // 减少数组长度，排除有序序列
        sift(0, n - 1, arr, true);
    }

    return arr;
}

5. 直接插入排序

简介：假设数组的一有序序列，从后面的无序序列中，扫描，与有序序列比较，插入到合适位置

性能

平均时间复杂度 O(n^2)

代码