Hexo 2020-01-05T10:01:25.442Z https://wzes.github.io/ Xuantang Cun Hexo Chrome Extension 入门 https://wzes.github.io/2020/01/05/JavaScript/Chrome Extension/ 2020-01-05T08:59:16.000Z 2020-01-05T10:01:25.442Z 前言

2020年了，新年第一篇小文章！祝大家新年快乐～一直觉得浏览器是个很神秘的东西，天天在用，自以为很熟悉，也在用一些插件，有些还挺好用。所以自己也想写一个小小的插件，满足一下自己的好奇心！暂且翻译一下Chrome的插件开发的官网文档吧

原文链接

开始

扩展(Extension)由不同的但相互联系的组件构成。 组件可以包括后台脚本，内容脚本，选项页，UI元素和各种逻辑文件。 扩展组件是使用Web开发技术创建的：HTML，CSS和JavaScript。 扩展的组件将取决于其功能，并且可能不需要所有选项。

本教程将构建一个扩展，允许用户更改 developer.chrome.com 网页上任何页面的背景颜色。 我们将使用许多核心组件来介绍它们之间的关系。

首先，创建一个新目录来保存扩展文件。

1
$ mkdir colorchange_extension && cd colorchange_extension

完整的扩展程序可以在此处下载。

创建 manifest 文件

扩展从清单文件开始。 创建一个名为 manifest.json 的文件并包含以下代码，或在此处下载该文件。

1
2
3
4
5
6
{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2
}

在当前状态下在开发人员模式将包含清单文件的目录添加到Chrome扩展程序中。

  1. Chrome浏览器地址中输入 chrome://extensions，打开“扩展管理”页面。
    • 也可以通过单击Chrome菜单，将鼠标悬停在“更多工具”上，然后选择“扩展程序”来打开“扩展程序管理”页面。
  2. 通过单击开发人员模式旁边的切换开关启用开发人员模式。
  3. 单击LOAD UNPACKED按钮，然后选择扩展目录。

哇😯！Amazing！该扩展程序已成功安装。 由于清单中未包含任何图标，因此将为扩展程序创建通用工具栏图标。

添加说明

尽管已安装扩展程序，但没有说明。 通过创建名为background.js的文件或在此处下载该文件并将其放置在扩展目录中，来引入背景脚本。

后台脚本和许多其他重要组件必须在清单中注册。 在清单中注册后台脚本会告诉扩展名要引用哪个文件，以及该文件的行为。

1
2
3
4
5
6
7
8
9
10
{
   "name": "Getting Started Example",
   "version": "1.0",
   "description": "Build an Extension!",
   "background": {                     // new
     "scripts": ["background.js"],     // new
     "persistent": false               // new
   },
   "manifest_version": 2
}

现在，该扩展程序知道它包含一个非持久性后台脚本，并将扫描已注册文件中需要侦听的重要事件。

此扩展在安装后将需要来自持久变量的信息。首先在后台脚本中包含一个 runtime.onInstalled 的侦听事件。 在 onInstalled 侦听器内部，扩展将使用 storage API 设置一个值。 这将允许多个扩展组件访问该值并进行更新。

1
2
3
4
5
chrome.runtime.onInstalled.addListener(function() {
   chrome.storage.sync.set({color: '#3aa757'}, function() {
     console.log("The color is green.");
   });
 });

大多数API（包括 storage API）都必须在清单的 "permissions" 字段下注册，扩展才能有权限使用。

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

浏览回到扩展管理页面，然后单击重新加载按钮。 带有蓝色链接（背景页面）的新字段“检查视图”可用。

单击链接以查看背景脚本控制台日志，

1
The color is green.

介绍用户界面

扩展可以具有多种形式的用户界面，但是这种形式将使用弹出窗口。 创建一个名为 popup.html 的文件并将其添加到该目录，或在此处下载。 此扩展程序使用按钮来更改背景颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

与后台脚本一样，需要在 page_action 下的清单中将此文件指定为弹出窗口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
   "name": "Getting Started Example",
   "version": "1.0",
   "description": "Build an Extension!",
   "permissions": ["storage"],
   "background": {
     "scripts": ["background.js"],
     "persistent": false
   },
   "page_action": {
     "default_popup": "popup.html"
   },
   "manifest_version": 2
 }

工具栏图标的名称也包含在 default_icons 字段的 page_action 下。 在此处下载 images 文件夹，将其解压缩，并将其放置在扩展程序的目录中。更新清单文件，以便扩展程序知道如何使用图像。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "manifest_version": 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
{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

如果在此阶段重新加载扩展，它将包含一个灰度图标，但不会包含任何功能差异。 由于 page_action 是在清单中声明的，因此由扩展程序决定是否告诉浏览器用户何时可以与 popup.html 进行交互。

在 runtime.onInstalled 侦听器事件中，使用 declarativeContent API将声明的规则添加到后台脚本中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

该扩展将需要权限才能访问其清单中的 declarativeContent API。

1
2
3
4
5
6
{
   "name": "Getting Started Example",
 ...
   "permissions": ["declarativeContent", "storage"],
 ...
 }

现在，当用户导航到包含“ developer.chrome.com”的URL时，浏览器将在浏览器工具栏中显示一个全彩页面操作图标。 图标为全色时，用户可以单击它以查看popup.html。

弹出式UI的最后一步是为按钮添加颜色。 使用以下代码创建一个名为popup.js的文件并将其添加到扩展目录，或在此处下载。

1
2
3
4
5
6
let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

此代码从 popup.html 获取按钮，并从存储中请求颜色值。 然后，它将颜色用作按钮的背景。 在popup.html 中将脚本标记包含到 popup.js 中。

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

重新加载扩展以查看绿色按钮。

层逻辑

现在，该扩展程序知道在 developer.chrome.com 上用户应该可以使用该弹出窗口，并显示一个彩色按钮，但是需要逻辑来进行进一步的用户交互。 更新popup.js以包含以下代码。

1
2
3
4
5
6
7
8
9
10
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

更新的代码在按钮上添加了onclick事件，该事件触发以编程方式插入的内容脚本。 这会将页面的背景色变成与按钮相同的颜色。 使用程序注入可以允许用户调用内容脚本，而不是将不需要的代码自动插入到网页中。

清单将需要activeTab权限，以允许扩展程序临时访问tabs API。 这使扩展程序可以调用tabs.executeScript。

1
2
3
4
5
6
{
   "name": "Getting Started Example",
 ...
   "permissions": ["activeTab", "declarativeContent", "storage"],
 ...
 }

该扩展程序现在可以正常使用了！ 重新加载扩展程序，刷新此页面，打开弹出窗口，然后单击按钮将其变为绿色！ 但是，某些用户可能希望将背景更改为其他颜色。

用户选项

该扩展程序当前仅允许用户将背景更改为绿色。 包括一个选项页面使用户可以更好地控制扩展功能，从而进一步自定义其浏览体验。

首先在目录中创建一个名为options.html的文件，并包含以下代码，或在此处下载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
          margin: 10px;
        }
      </style>
    </head>
    <body>
      <div id="buttonDiv">
      </div>
      <div>
        <p>Choose a different background color!</p>
      </div>
    </body>
    <script src="options.js"></script>
  </html>

然后在清单中注册选项页面

1
2
3
4
5
6
7
{
    "name": "Getting Started Example",
    ...
    "options_page": "options.html",
    ...
    "manifest_version": 2
  }

重新加载扩展，然后单击详细信息。

向下滚动详细信息页面，然后选择扩展选项以查看选项页面，尽管该页面当前将显示为空白。

提供了四个颜色选项，然后使用 onclick 事件侦听器将它们生成为选项页面上的按钮。 用户单击按钮时，它将更新扩展程序全局存储中的颜色值。 由于所有扩展文件都从全局存储中提取颜色信息，因此无需更新其他值。

下一步

恭喜你！ 该目录现在包含一个功能齐全的Chrome扩展程序，尽管它很简单。

下一步是什么？

  • “ Chrome扩展程序概述”进行了一些备份，并在总体上填写了有关扩展程序架构的许多详细信息，以及开发人员希望熟悉的一些特定概念。

  • 在调试教程中了解可用于调试扩展的选项。

  • Chrome扩展程序可以访问功能强大的API，而这些API均超出开放网络所提供的范围。 chrome。* API文档将介绍每个API。

  • 开发人员指南还有许多其他链接，这些链接指向与高级扩展创建相关的文档。

根据CC-By 3.0许可提供的内容

]]> 2020年了，新年第一篇小文章！祝大家新年快乐～一直觉得浏览器是个很神秘的东西，天天在用，自以为很熟悉，也在用一些插件，有些还挺好用。所以自己也想写一个小小的插件，满足一下自己的好奇心！暂且翻译一下Chrome的插件开发的官网文档吧 Less 入门指南 https://wzes.github.io/2019/12/09/JavaScript/Less/ 2019-12-09T10:30:16.000Z 2020-01-05T10:09:15.465Z

前言

啦啦啦，好久没有写Wiki了，已然成为了一名 Web 开发工程师，上周在写业务的时候用到了 less，周末了，过来总结下吧。

Less ？

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

编译为：

1
2
3
4
5
6
7
8
.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

开始

如果是独立使用的话，首先安装 less

1
npm install -g less

手写一个 less 文件

1
echo '.test { height: (1+1)  }' > styles.less

编译 less 文件，输出 css 文件

1
lessc styles.less

输出

1
2
3
.test {
  height: 2;
}

更多姿势

变量以 @ 开头

变量

1
2
3
4
5
@color: white;

.link {
color: @color;
}

编译输出

1
2
3
.link {
  color: white;
}

插值

1
2
3
4
5
6
@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

编译输出

1
2
3
4
.widget {
  color: #0ee;
  background-color: #999;
}

混合

混合可以是直接使用class或者id选择器

1
2
3
4
5
6
7
8
9
.a, #b {
  color: red;
}
.mixin-class {
  .a(); // 使用的时候 ➕不加 `()` 都一样的！
}
.mixin-id {
  #b();
}

编译输出

1
2
3
4
5
6
7
8
9
.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

不输出混合集

选择器带了括号，则编译后不输出

1
2
3
4
5
6
7
8
9
10
.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

输出：

1
2
3
4
5
6
7
.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

带参数的混合

1
2
3
4
5
6
7
8
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius;
}

输出：

1
2
3
4
5
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

导入

可以通过 @import 导入 less，css 文件

1
2
3
4
// this-is-valid.less
.foo {
  background: #900;
}

使用

1
@import "this-is-valid.less";

编译输出

1
2
3
.foo {
  color: red;
}

Guard

使用 when 进行判断

1
2
3
4
5
6
7
8
9
10
11
12
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

编译输出

1
2
3
4
5
6
7
8
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

循环

1
2
3
4
5
6
7
8
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 递归调用自身
  width: (10px * @counter); // 每次调用时产生的样式代码
}

div {
  .loop(5); // 调用循环
}

编译输出

1
2
3
4
5
6
7
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

合并

1
2
3
4
5
6
7
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

编译输出

1
2
3
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

思考

王境泽-真香！

参考

https://www.html.cn/doc/less

]]> 啦啦啦，好久没有写Wiki了，已然成为了一名 Web 开发工程师，上周在写业务的时候用到了 less，周末了，过来总结下吧。 Javascript 单元测试 https://wzes.github.io/2019/11/24/JavaScript/Javascript Test/ 2019-11-24T11:09:16.000Z 2019-12-21T04:27:37.884Z 前言

又是一周过去了，前两天去了 TP，还是挺累的，但文章不能停，虽然有点水，但还是要继续的。这周就学习一下前端的单元测试框架吧，尤其是 UI 测试

测试框架

  • Jest
  • Mocha
  • Jasmine

Jest

Jest 是 Facebook 出品的测试框架，是非常优秀的～其提供了 快照测试，对于 UI 测试是很有帮助的

基本使用

使用 npm 安装：

1
npm install --save-dev jest

让我们开始为一个假设函数编写测试，该函数将两个数字相加。 首先，创建一个 sum.js 文件：

1
2
3
4
function sum(a, b) {
  return a + b;
}
module.exports = sum;

然后，创建一个名为 sum.test.js 的文件。 这将包含我们的实际测试：

1
2
3
4
5
const sum = require('../src/lib/sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

将下面的配置部分添加到你的 package.json 里面：

1
2
3
4
5
{
  "scripts": {
    "test": "jest test"
  }
}

最后，运行 yarn test 或 npm run test ，Jest 将打印下面这个消息：

1
2
PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

也可以使用hook钩子，使用 describe，完成一个测试套件，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const sum = require('../src/lib/sum');

describe('sum', () => {
  beforeAll(() => {
    //
    console.log("before all")
  })
  test('adds 1 + 2 to equal 3', () => {
    console.log("exec test")
    expect(sum(1, 2)).toBe(3)
  })

  afterAll(() => {
    //
    console.log("after all")
  })
})

输出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 PASS  test/sum.test.js
  sum
    ✓ adds 1 + 2 to equal 3 (3ms)

  console.log test/sum.test.js:6
    before all

  console.log test/sum.test.js:9
    exec test

  console.log test/sum.test.js:15
    after all

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.819s, estimated 1s
Ran all test suites matching /test/i.

快照测试

每当你想要确保你的UI不会有意外的改变，快照测试是非常有用的工具。

安装 react-test-renderer 库

1
2
3
4
5
6
7
8
9
10
import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

运行以后会生成 snapshot 文件

1
2
3
4
5
6
7
8
9
10
exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

更新后

1
2
3
4
5
6
7
// Updated test case with a Link to a different address
it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.instagram.com">Instagram</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

再次运行，会出现不一致的报错

failedSnapshotTest

可以使用以下命令更新快照文件

1
jest --updateSnapshot

Enzyme UI测试

Enzyme是Airbnb开源的React测试工具库

三种渲染方法

  1. shallow：浅渲染，是对官方的Shallow Renderer的封装。将组件渲染成虚拟DOM对象，只会渲染第一层，子组件将不会被渲染出来，使得效率非常高。不需要DOM环境， 并可以使用jQuery的方式访问组件的信息
  2. render：静态渲染，它将React组件渲染成静态的HTML字符串，然后使用Cheerio这个库解析这段字符串，并返回一个Cheerio的实例对象，可以用来分析组件的html结构
  3. mount：完全渲染，它将组件渲染加载成一个真实的DOM节点，用来测试DOM API的交互和组件的生命周期。用到了jsdom来模拟浏览器环境

三种方法中，shallow和mount因为返回的是DOM对象，可以用simulate进行交互模拟，而render方法不可以。一般shallow方法就可以满足需求，如果需要对子组件进行判断，需要使用render，如果需要测试组件的生命周期，需要使用mount方法。

总结

Jest 博大精深，功能非常完善

]]> 又是一周过去了，前两天去了 TP，还是挺累的，但文章不能停，虽然有点水，但还是要继续的。这周就学习一下前端的单元测试框架吧 Koa-ejs 入门 https://wzes.github.io/2019/11/17/JavaScript/koa-ejs/ 2019-11-17T04:56:00.000Z 2019-11-17T13:00:00.951Z 前言

又是一周过去了，该给自己充充电了，使用了 koa 作为服务端渲染的服务引擎，那么使用 koa-ejs 作为 HTML 输出也是顺其自然的事了

开始

安装 koa，koa-ejs

1
npm install koa koa-ejs

index.js 目录，创建 koa 对象，koa-ejs 返回一个 render 对象，通过这个对象给 ctx 对象进行 render 赋值，之后就可以在路由中使用 ctx.render

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const Koa = require('koa')
const render = require('koa-ejs');

const app = new Koa();

render(app, {
// 模版根目录
  root: path.join(__dirname, 'view'),
  // 标准模版名字
  layout: 'template',
  // 模版后缀，默认是 html
  viewExt: 'html',
  // 是否使用缓存
  cache: false,
  // 是否开启 debug
  debug: false,
});

app.use(async function (ctx) {
  const users = [{ name: 'Dead Horse' }, { name: 'Jack' }, { name: 'Tom' }];
  await ctx.render('content', {
    users
  });
});

template.html 文件

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <title>koa ejs</title>
  </head>
  <body>
    <h3>koa ejs</h3>
    <%- body %>
  </body>
</html>

content.html 文件

1
2
3
<div>
  <% include user.html %>
</div>

user.html

1
2
3
4
5
<ul>
  <% users.forEach(function (user) {%>
    <li><%= user.name %></li>
  <% })%>
</ul>
输出
1
2
3
Dead Horse
Jack
Tom

源码解析

其实 koa-ejs 的源码很简单，主要是引用了 ejs 框架，简单做了封装，将 render 挂载到 ctx 上

入口

当引入的时候，执行了 render 就会进行初始化，并且声明了 render 的异步方法，主要是获取 template 文件，然后使用 ejs.compile 去构造函数，该方法主要的作用就是替换 ejs 中的变量，生成 html。如果有缓存，那么则不读取文件了，直接进行替换

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
exports = module.exports = function (app, settings) {
  if (app.context.render) {
    return;
  }
  
  settings.root = path.resolve(process.cwd(), settings.root);
  
  /**
   * cache the generate package
   * @type {Object}
   */
  const cache = Object.create(null);

  settings = Object.assign({}, defaultSettings, settings);

  settings.viewExt = settings.viewExt
    ? '.' + settings.viewExt.replace(/^\./, '')
    : '';
    
  async function render(view, options) {
    view += settings.viewExt;
    const viewPath = path.join(settings.root, view);
    debug(`render: ${viewPath}`);
    // get from cache
    if (settings.cache && cache[viewPath]) {
      return cache[viewPath].call(options.scope, options);
    }

    const tpl = await fs.readFile(viewPath, 'utf8');

    // override `ejs` node_module `resolveInclude` function
    ejs.resolveInclude = function(name, filename, isDir) {
      if (!path.extname(name)) {
        name += settings.viewExt;
      }
      return parentResolveInclude(name, filename, isDir);
    }

    const fn = ejs.compile(tpl, {
      filename: viewPath,
      _with: settings._with,
      compileDebug: settings.debug && settings.compileDebug,
      debug: settings.debug,
      delimiter: settings.delimiter,
      cache: settings.cache,
      async: settings.async
    });
    if (settings.cache) {
      cache[viewPath] = fn;
    }

    return fn.call(options.scope, options);
  }


  app.context.render = async function (view, _context) {
    //
  };
};

最后将为 app 的 context 新增 render 方法

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
app.context.render = async function (view, _context) {
  const ctx = this;

  const context = Object.assign({}, ctx.state, _context);
// 获取 html
  let html = await render(view, context);
// 如果使用了 layout，也就是有二级页面，再一次渲染
  const layout = context.layout === false ? false : (context.layout || settings.layout);
  if (layout) {
    // if using layout
    context.body = html;
    html = await render(layout, context);
  }
// 直接赋值给 body
  const writeResp = context.writeResp === false ? false : (context.writeResp || settings.writeResp);
  
  if (writeResp) {
    // normal operation
    ctx.type = 'html';
    ctx.body = html;
  } else {
    // only return the html
    return html;
  }
};

之后就可以使用 ctx.render

1
2
3
await ctx.render('content', {
    users
});

非常简单的源码，包含了缓存等逻辑，基本满足我们的日常需要

思考

🤔好好学习

]]> 又是一周过去了，该给自己充充电了，使用了 koa 作为服务端渲染的服务引擎，那么使用 koa-ejs 作为 HTML 输出也是顺其自然的事了 NextJS 入门指南 https://wzes.github.io/2019/11/09/JavaScript/NextJS/ 2019-11-09T10:30:16.000Z 2019-11-10T07:50:48.873Z 前言

最近在研究SSR服务端渲染，NextJS 算是比较经典的框架了，所以了解了解其用法对SSR或许能加深理解。如果能了解其实现原理，那就更好了。

服务端渲染

简单理解就是：你访问网页的时候，会一次性把完整的HTML返回给你。区别于 React，Vue 项目，HTML 文档只是一个壳子，需要运行 js 才能得到首屏的 Dom。

简介

Next.js 是一个轻量级的 React 服务端渲染应用框架。

Get Started

初始化项目，安装 next

1
npm install --save next react react-dom

将下面脚本添加到 package.json 中:

1
2
3
4
5
6
7
{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

新建 ./pages/index.js 到你的项目中:

1
export default () => <div>Welcome to next.js!</div>

运行 npm run dev 命令并打开 http://localhost:3000。 如果你想使用其他端口，可运行 npm run dev -- -p <设置端口号>.

如何使用服务端渲染？

默认支持服务端渲染，获取网络请求写在 getInitialProps 内部，就可以在 render 中获取数据，直接渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react'

export default class extends React.Component {
  static async getInitialProps({ req }) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
    return { userAgent }
  }

  render() {
    return (
      <div>
        Hello World  {this.props.userAgent}
      </div>
    )
  }
}

原理

应用入口

使用了 node command line，能让我们仅仅写了 page 的代码，就能让整个应用跑起来。以至于我们都找不到入口。nextjs 真的是很厉害～封装的很好

可以看到，当我们使用 yarn start 的时候，应用执行了 next-start

1
2
3
4
5
6
7
8
9
const commands: { [command: string]: () => Promise<cliCommand> } = {
  build: async () => await import('../cli/next-build').then(i => i.nextBuild),
  start: async () => await import('../cli/next-start').then(i => i.nextStart),
  export: async () =>
    await import('../cli/next-export').then(i => i.nextExport),
  dev: async () => await import('../cli/next-dev').then(i => i.nextDev),
  telemetry: async () =>
    await import('../cli/next-telemetry').then(i => i.nextTelemetry),
}

next-start 开启了一个服务

1
2
3
4
5
6
7
8
9
10
11
12
13
startServer({ dir }, port, args['--hostname'])
  .then(async app => {
    // tslint:disable-next-line
    console.log(
      `> Ready on http://${args['--hostname'] || 'localhost'}:${port}`
    )
    await app.prepare()
  })
  .catch(err => {
    // tslint:disable-next-line
    console.error(err)
    process.exit(1)
  })

startServer 的实现，获取 next 实例，然后使用 http 创建服务，主要的请求逻辑的代码都在 next 的 getRequestHandler 里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default async function start(
  serverOptions: any,
  port?: number,
  hostname?: string
) {
  const app = next(serverOptions)
  const srv = http.createServer(app.getRequestHandler())
  await new Promise((resolve, reject) => {
    // This code catches EADDRINUSE error if the port is already in use
    srv.on('error', reject)
    srv.on('listening', () => resolve())
    srv.listen(port, hostname)
  })
  // It's up to caller to run `app.prepare()`, so it can notify that the server
  // is listening before starting any intensive operations.
  return app
}

handleRequest 处理请求

1
2
3
4
5
6
7
8
9
10
11
12
private handleRequest(
  req: IncomingMessage,
  res: ServerResponse,
  parsedUrl?: UrlWithParsedQuery
): Promise<void> {
  res.statusCode = 200
  return this.run(req, res, parsedUrl).catch(err => {
    this.logError(err)
    res.statusCode = 500
    res.end('Internal Server Error')
  })
}

run 获取 route 实例并进行处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
protected async run(
  req: IncomingMessage,
  res: ServerResponse,
  parsedUrl: UrlWithParsedQuery
) {
  this.handleCompression(req, res)
  try {
    const fn = this.router.match(req, res, parsedUrl)
    if (fn) {
      await fn()
      return
    }
  } catch (err) {
    if (err.code === 'DECODE_FAILED') {
      res.statusCode = 400
      return this.renderError(null, req, res, '/_error', {})
    }
    throw err
  }

  await this.render404(req, res, parsedUrl)
}

router 是在项目初始化的时候进行创建的，其中一个就是根据，默认都会有很多路由处理器

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
protected generateRoutes(): Route[] {
  const publicRoutes = fs.existsSync(this.publicDir)
    ? this.generatePublicRoutes()
    : []
  const staticFilesRoute = fs.existsSync(join(this.dir, 'static'))
    ? [
        {
          match: route('/static/:path*'),
          fn: async (req, res, params, parsedUrl) => {
            const p = join(this.dir, 'static', ...(params.path || []))
            await this.serveStatic(req, res, p, parsedUrl)
          },
        } as Route,
      ]
    : []
  const routes: Route[] = [
    {
      match: route('/_next/static/:path*'),
      fn: async (req, res, params, parsedUrl) => {
        await this.serveStatic(req, res, p, parsedUrl)
      },
    },
    {
      match: route('/_next/data/:path*'),
      fn: async (req, res, params, _parsedUrl) => {
        await this.render(
          req,
          res,
          pathname,
          { _nextSprData: '1' },
          parsedUrl
        )
      },
    },
    {
      match: route('/_next/:path*'),
      fn: async (req, res, _params, parsedUrl) => {
        await this.render404(req, res, parsedUrl)
      },
    },
    ...publicRoutes,
    ...staticFilesRoute,
    {
      match: route('/api/:path*'),
      fn: async (req, res, params, parsedUrl) => {
        const { pathname } = parsedUrl
        await this.handleApiRequest(
          req as NextApiRequest,
          res as NextApiResponse,
          pathname!
        )
      },
    },
  ]

  if (this.nextConfig.useFileSystemPublicRoutes) {
    this.dynamicRoutes = this.getDynamicRoutes()
    routes.push({
      match: route('/:path*'),
      fn: async (req, res, _params, parsedUrl) => {
        const { pathname, query } = parsedUrl
        if (!pathname) {
          throw new Error('pathname is undefined')
        }
        await this.render(req, res, pathname, query, parsedUrl)
      },
    })
  }

  return routes
}

默认页面路由都是走到最后，也就是执行 render，获取渲染的 html

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
public async render(
  req: IncomingMessage,
  res: ServerResponse,
  pathname: string,
  query: ParsedUrlQuery = {},
  parsedUrl?: UrlWithParsedQuery
): Promise<void> {
  const url: any = req.url
  if (isInternalUrl(url)) {
    return this.handleRequest(req, res, parsedUrl)
  }

  if (isBlockedPage(pathname)) {
    return this.render404(req, res, parsedUrl)
  }

  const html = await this.renderToHTML(req, res, pathname, query, {
    dataOnly:
      (this.renderOpts.ampBindInitData && Boolean(query.dataOnly)) ||
      (req.headers &&
        (req.headers.accept || '').indexOf('application/amp.bind+json') !==
          -1),
  })
  // Request was ended by the user
  if (html === null) {
    return
  }

  return this.sendHTML(req, res, html)
}

其中 renderToHTML 实现了具体逻辑，通过 sendHTML 返回页面 HTML

renderToHTML 实现，首先通过 findPageComponents 获取路由具体页面 Compenent，然后使用renderToHTMLWithComponents 进行 React 转换为 HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public renderToHTML(
    ...
    ): Promise<string | null> {
    return this.findPageComponents(pathname, query)
      .then(
        result => {
          return this.renderToHTMLWithComponents(
          ....
            result,
            { ...this.renderOpts, amphtml, hasAmp, dataOnly }
          )
        },
      )
  }

renderToHTML，在 renderToHTMLWithComponents 内部执行

省略了很多代码，为了了解主要逻辑。

首先会执行 loadGetInitialProps，也就是业务代码中的 props 获取，运行在服务端。

然后使用 Document 的 getInitialProps 创建 Document，并把 component 赋值，获取最终的 html

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
export async function renderToHTML(
  req: IncomingMessage,
  res: ServerResponse,
  pathname: string,
  query: ParsedUrlQuery,
  renderOpts: RenderOpts
): Promise<string | null> {
....
  let props: any


  const AppContainer = ({ children }: any) => (
    <RouterContext.Provider value={router}>
      <DataManagerContext.Provider value={dataManager}>
        <AmpStateContext.Provider value={ampState}>
          <LoadableContext.Provider
            value={moduleName => reactLoadableModules.push(moduleName)}
          >
            {children}
          </LoadableContext.Provider>
        </AmpStateContext.Provider>
      </DataManagerContext.Provider>
    </RouterContext.Provider>
  )

  try {
    props = await loadGetInitialProps(App, {
      AppTree: ctx.AppTree,
      Component,
      router,
      ctx,
    })
    ......
 }
 ....
    renderPage = (
      options: ComponentsEnhancer = {}
    ): { html: string; head: any } => {
      const renderError = renderPageError()
      if (renderError) return renderError

      const {
        App: EnhancedApp,
        Component: EnhancedComponent,
      } = enhanceComponents(options, App, Component)

      return render(
        renderElementToString,
        <AppContainer>
          <EnhancedApp
            Component={EnhancedComponent}
            router={router}
            {...props}
          />
        </AppContainer>,
        ampState
      )
    
  }
  const documentCtx = { ...ctx, renderPage }
  const docProps = await loadGetInitialProps(Document, documentCtx)
  // the response might be finished on the getInitialProps call
  if (isResSent(res) && !isSpr) return null

  let dataManagerData = '[]'
  if (dataManager) {
    dataManagerData = JSON.stringify([...dataManager.getData()])
  }

  if (!docProps || typeof docProps.html !== 'string') {
    const message = `"${getDisplayName(
      Document
    )}.getInitialProps()" should resolve to an object with a "html" prop set with a valid html string`
    throw new Error(message)
  }

  if (docProps.dataOnly) {
    return dataManagerData
  }

  const dynamicImportIdsSet = new Set<string>()
  const dynamicImports: ManifestItem[] = []

  for (const mod of reactLoadableModules) {
    const manifestItem = reactLoadableManifest[mod]

    if (manifestItem) {
      manifestItem.map(item => {
        dynamicImports.push(item)
        dynamicImportIdsSet.add(item.id as string)
      })
    }
  }

  const dynamicImportsIds = [...dynamicImportIdsSet]
  const inAmpMode = isInAmpMode(ampState)
  const hybridAmp = ampState.hybrid

  // update renderOpts so export knows current state
  renderOpts.inAmpMode = inAmpMode
  renderOpts.hybridAmp = hybridAmp

  let html = renderDocument(Document, {
    ...renderOpts,
    dangerousAsPath: router.asPath,
    dataManagerData,
    ampState,
    props,
    headTags: await headTags(documentCtx),
    bodyTags: await bodyTags(documentCtx),
    htmlProps: await htmlProps(documentCtx),
    docProps,
    pathname,
    ampPath,
    query,
    inAmpMode,
    hybridAmp,
    dynamicImportsIds,
    dynamicImports,
    files,
    devFiles,
    polyfillFiles,
  })

  if (inAmpMode && html) {
    // use replace to allow rendering directly to body in AMP mode
    html = html.replace(
      '__NEXT_AMP_RENDER_TARGET__',
      `<!-- __NEXT_DATA__ -->${docProps.html}`
    )
    html = await optimizeAmp(html)

    if (renderOpts.ampValidator) {
      await renderOpts.ampValidator(html, pathname)
    }
  }

  if (inAmpMode || hybridAmp) {
    // fix &amp being escaped for amphtml rel link
    html = html.replace(/&amp;amp=1/g, '&amp=1')
  }

  return html
}

使用 renderElementToString 渲染获取 html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function render(
  renderElementToString: (element: React.ReactElement<any>) => string,
  element: React.ReactElement<any>,
  ampMode: any
): { html: string; head: React.ReactElement[] } {
  let html
  let head

  try {
    html = renderElementToString(element)
  } finally {
    head = Head.rewind() || defaultHead(isInAmpMode(ampMode))
  }

  return { html, head }
}

到这里基本就结束了

Nextjs 还可以有很多自定的东西，与 koa，express 结合～

参考

https://nextjs.org/

后续

博大精深啊

]]> 最近在研究SSR服务端渲染，NextJS 算是比较经典的框架了，所以了解了解其用法对SSR或许能加深理解。如果能了解其实现原理，那就更好了 Intersection Obersever API 中文 https://wzes.github.io/2019/10/26/JavaScript/IntersectionObserverAPI/ 2019-10-26T07:30:16.000Z 2019-10-26T07:16:55.511Z Intersection observer 简介

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档的视口相交的方法。

在以前，检测一个元素的可见性或两个元素相对于彼此的相对可见性一直是一项艰巨的任务，其解决方案不可靠且易于导致浏览器和用户访问的网页变慢。 随着网络的成熟，对此类功能的需求也在增长。 出于多种原因需要元素的可见性信息，例如：

  • 滚动页面时延迟加载图像或其他内容。

  • 实现“无限滚动”的网页，在您滚动时会加载和呈现越来越多的内容，从而使用户不必翻阅页面。

  • 统计广告可见度，以计算广告收入。

  • 根据用户是否会看到结果来决定是否执行任务或动画处理。

过去实现交叉检测通常涉及到事件处理程序，并且循环调用 Element.getBoundingClientRect（）之类的方法来为每个受影响的元素建立所需的信息。 由于所有这些代码都在主线程上运行，因此即使只有一个，也可能会导致性能问题。 当网站加载了这些测试时，事情可能会变得很难看。

考虑使用无限滚动的网页。它使用供应商提供的库来管理在整个页面中定期放置的广告，这些广告具有动画图形，使用自定义库绘制通知框等等。每个元素都有其自己的相交检测程序，它们均在主线程上运行。该网站的作者甚至可能没有意识到这种情况的发生，因为他们可能对所使用的两个库的内部运作了解得很少。当用户滚动页面时，这些相交检测程序在滚动处理代码期间不断触发，从而导致用户对浏览器，网站及其计算机感到崩溃。

Intersection Observer API 使代码可以注册一个回调函数，该回调函数将在他们希望监视的元素进入或退出另一个元素（或视口）时，或者当两个相交的量改变请求的量时执行。这样，站点不再需要在主线程上执行任何操作来监视这种元素交集，并且浏览器可以自由地优化交集的管理。

Intersection Observer API不能告诉您的一件事：重叠的确切像素数或确切地说是重叠像素。但是，它涵盖了更常见的用例：“如果它们相交N％左右，我需要做点什么。”

Intersection observer 概念和使用

Intersection Observer API允许您配置一个 callback，只要一个元素（称为目标）与设备视口或指定元素相交，就会调用该 callback。 就此API而言，这称为根元素或根。 通常，您将需要注意与元素最接近的可滚动祖先相关的相交变化，或者，如果元素不是可滚动元素的后代，则要观察视口。 要注意相对于根元素的交点，请指定null。

无论您是使用视口还是其他元素作为根，API都以相同的方式工作，只要目标元素的可见性发生变化，以便与根交叉超过所需的交集量，就执行您提供的回调函数。

目标元素与其根之间的相交度为相交比。 这表示目标元素的百分比，该百分比可见为0.0到1.0之间的值。

创建一个 intersection observer

通过调用交集观察器的构造函数并向其传递一个回调函数来创建交集观察者，只要在一个方向或另一个方向上超过阈值，该回调函数便会运行：

1
2
3
4
5
6
7
let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

阈值1.0表示在root选项指定的元素中可见目标的100％时，将调用回调。

Intersection observer options 参数

传递给 IntersectionObserver（）构造函数的 options 对象使您可以控制在哪些情况下调用观察者的回调。 它具有以下字段：

  • root

    用作检查目标可见性的视口的元素。 必须是目标的祖先。 如果未指定或为null，则默认为浏览器视口。

  • rootMargin

    围绕根的边距。可以具有类似于CSS margin属性的值，例如 "10px 20px 30px 40px"（（上，右，下，左）。这些值可以是百分比。这组值用于在计算相交之前增大或缩小根元素边界框的每一侧。默认为全零。

  • threshold

    一个数字或一个数字数组，指示观察者的回调应在目标可见性的百分比上执行。如果只想检测可见性何时超过50％标记，则可以使用0.5值。如果希望每次可见性再超过25％时都运行回调，则可以指定数组[0，0.25，0.5，0.75，1]。默认值为0（意味着即使可见一个像素，回调也将运行）。值为1.0意味着直到每个像素都可见，才认为阈值已通过。

定位要观察的元素

创建观察者后，需要给它一个目标元素以进行观察：

1
2
let target = document.querySelector('#listItem');
observer.observe(target);

每当目标达到为所指定的阈值时IntersectionObserver，就会调用回调。回调接收IntersectionObserverEntry对象列表和观察者：

1
2
3
4
5
6
7
8
9
10
11
12
13
let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

请注意，您的回调是在主线程上执行的。它应尽快运行；如果需要完成任何耗时的操作，请使用Window.requestIdleCallback()。

另外，请注意，如果指定了该root选项，则目标必须是根元素的后代。

如何计算交集

Intersection Observer API考虑的所有区域都是矩形。形状不规则的元素被认为占据了包围元素所有部分的最小矩形。类似地，如果元素的可见部分不是矩形，则该元素的相交矩形被解释为包含该元素所有可见部分的最小矩形。

了解一点有关提供的各种属性如何IntersectionObserverEntry描述相交的方法很有用。

交点根和根边距

在跟踪元素与容器的交集之前，我们需要知道该容器是什么。该容器是交集根或根元素。这可以是文档中的特定元素（是要观察的元素的祖先），也null可以是文档的视口作为容器。

根的相交矩形是用于所要检查的目标或目标的矩形。该矩形的确定如下：

  • 如果相交根是隐式根（即顶级Document），则根相交矩形是视口的矩形。
  • 如果相交根具有溢出剪辑，则根相交矩形是根元素的内容区域。
  • 否则，根相交矩形是相交根的边界客户端矩形（通过调用getBoundingClientRect()它返回）。

创建时，可以通过设置根边缘来进一步调整根相交矩形。定义偏移量中的值添加到相交根的边界框的每一侧，以创建最终的相交根边界（在执行回调时公开）。rootMarginIntersectionObserverrootMarginIntersectionObserverEntry.rootBounds

Thresholds 门槛

Intersection Observer API使用阈值，而不是报告可见的目标元素多少微小变化。创建观察者时，可以提供一个或多个数字值，这些数字值表示可见的目标元素的百分比。然后，API仅报告超过这些阈值的可见性更改。

例如，如果您希望每次目标的可见性通过每个25％标记向后或向前移动时都得到通知，则在创建观察者时，可以将数组[0，0.25，0.5，0.75，1]指定为阈值列表。您可以通过在可见性更改时检查传递给回调函数的isIntersecting属性值，来确定可见性的变化方向（即，元素变得更可见还是不可见）IntersectionObserverEntry。如果isIntersecting为true，则目标元素已变得至少与已通过的阈值一样可见。如果为false，则目标不再像给定阈值那样可见。

要了解阈值的工作原理，请尝试滚动下面的框。其中的每个彩色框都会显示其在四个角上都可见的百分比，因此您可以在滚动容器时看到这些比例随时间的变化。每个框都有不同的阈值集：

  • 第一个框有一个针对每个可见度百分比的阈值；也就是说，IntersectionObserver.thresholds数组是[0.00, 0.01, 0.02, ..., 0.99, 1.00]。
  • 第二个框只有一个阈值，为50％。
  • 第三个框的阈值是可见性的每10％（0％，10％，20％等）。
  • 最后一个框的阈值各为25％。

裁剪和交点矩形

浏览器按以下方式计算最终的相交矩形：这一切都为您完成，但是了解这些步骤有助于更好地准确把握何时发生交叉点。

  1. 通过调用getBoundingClientRect()目标，可以获得目标元素的边界矩形（即，完全包围组成该元素的每个组件的边界框的最小矩形）。这是最大的相交矩形。其余步骤将删除所有不相交的部分。
  2. 从目标的直接父块开始并向外移动，每个包含块的剪辑（如果有）都应用于相交矩形。根据两个块的交集和该overflow属性指定的剪切模式（如果有）来确定块的剪切。设置overflow为其他任何值visible都会导致发生裁剪。
  3. 如果其中一个包含元素是嵌套浏览上下文的根（例如包含在中的文档）[](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)，则交集矩形会被裁剪到包含上下文的视口，并且向上递归通过容器继续进行到容器的包含块。到达的最高层，将相交矩形剪切到框架的视口，然后框架的父元素是向相交根递归的下一个块。
  4. 当向上递归到达相交根时，生成的矩形将映射到相交根的坐标空间。
  5. 然后，通过与根相交矩形相交来更新生成的矩形。
  6. 最后，将此矩形映射到目标的坐标空间document。

交叉变更callbacks

当在根元素中可见的目标元素的数量超过可见性阈值之一时，将IntersectionObserver执行对象的回调。回调接收所有IntersectionObserverEntry对象的数组作为输入，每个超过阈值的对象一个，以及对IntersectionObserver对象本身的引用。

阈值列表中的每个条目都是一个IntersectionObserverEntry对象，它描述一个被超过的阈值。也就是说，每个条目都描述了给定元素中有多少与根元素相交，该元素是否被认为相交以及过渡发生的方向。

下面的代码段显示了一个回调，该回调保留了元素从不相交根到相交至少75％过渡的次数的计数。

1
2
3
4
5
6
7
8
9
10
11
intersectionCallback(entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      let elem = entry.target;

      if (entry.intersectionRatio >= 0.75) {
        intersectionCounter++;
      }
    }
  });
}

接口

IntersectionObserver

Intersection Observer API的主要接口。提供用于创建和管理观察者的方法，该观察者可以监视相同交集配置的任意数量的目标元素。每个观察者可以异步观察一个或多个目标元素和共用祖先元素之间或与它们顶层的交点变化Document的视口。祖先或视口称为根。

IntersectionObserverEntry

描述在特定过渡时刻目标元素及其根容器之间的交集。只能以两种方式获得此类型的对象：作为IntersectionObserver回调的输入，或通过调用IntersectionObserver.takeRecords()。

一个简单的例子

这个简单的示例使目标元素在变得或多或少可见时更改其颜色和透明度。在使用Intersection Observer API的“计时元素可见性”中，您可以找到一个更广泛的示例，该示例显示如何计时用户可以看到一组元素（例如广告）多长时间，以及如何通过记录统计信息或更新元素来对该信息做出反应…

HTML

此示例的HTML非常简短，其中有一个主要元素，即我们将要定位的框（带有creative ID "box"）和该框中的一些内容。

1
2
3
4
5
<div id="box">
  <div class="vertical">
    Welcome to <strong>The Box!</strong>
  </div>
</div>

CSS

就本示例而言，CSS并不是十分重要。它对元素进行了布局，并确定background-colorand border属性可以参与CSS过渡，当元素或多或少被遮盖时，我们将使用它来影响元素的更改。

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
#box {
  background-color: rgba(40, 40, 190, 255);
  border: 4px solid rgb(20, 20, 120);
  transition: background-color 1s, border 1s;
  width: 350px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vertical {
  color: white;
  font: 32px "Arial";
}

.extra {
  width: 350px;
  height: 350px;
  margin-top: 10px;
  border: 4px solid rgb(20, 20, 120);
  text-align: center;
  padding: 20px;
}

JavaScript

最后，让我们看一下使用Intersection Observer API进行事情的JavaScript代码。

配置

首先，我们需要准备一些变量并安装观察器。

1
2
3
4
5
6
7
8
9
10
11
12
13
const numSteps = 20.0;

let boxElement;
let prevRatio = 0.0;
let increasingColor = "rgba(40, 40, 190, ratio)";
let decreasingColor = "rgba(190, 40, 40, ratio)";

// Set things up
window.addEventListener("load", (event) => {
  boxElement = document.querySelector("#box");

  createObserver();
}, false);

我们在此处设置的常量和变量是：

  • numSteps

    一个常数，指示我们希望在0.0和1.0的可见性比率之间具有多少个阈值。

  • prevRatio

    此变量将用于记录上次超过阈值时可见性比率。这将让我们弄清楚目标元素是否变得越来越明显。

  • increasingColor

    定义可见性比率增加时将应用于目标元素的颜色的字符串。该字符串中的“比率”一词将替换为目标的当前可见性比率，因此该元素不仅会改变颜色，而且会变得越来越不透明，因为它变得越来越模糊。

  • decreasingColor

    同样，这是一个字符串，定义了可见率降低时将应用的颜色。

我们呼吁Window.addEventListener()开始收听load事件。一旦页面加载完成后，我们得到的元素的引用与ID "box"使用querySelector()，然后调用createObserver()我们将在稍后创建来处理建筑方法和安装的交叉点观测。

创建相交观察器

createObserver()一旦页面加载完成，便会调用该方法以处理实际创建新对象IntersectionObserver并开始观察目标元素的过程。

1
2
3
4
5
6
7
8
9
10
11
12
function createObserver() {
  let observer;

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  };

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(boxElement);
}

首先从设置一个options包含观察者设置的对象开始。我们要留意的目标元素相对于文档的视口的可见性的变化，所以root是null。我们不需要边距，因此边距偏移量rootMargin指定为“ 0px”。这使观察者可以观察目标元素的边界与视口边界之间的交集处的变化，而无需增加（或减去）任何空间。

可见度阈值列表threshold由函数构造buildThresholdList()。在此示例中，以编程方式构建阈值列表，因为存在许多阈值列表，并且该数量旨在调整。

一旦options准备好了，我们创建了新的观察员，调用IntersectionObserver()构造函数，指定一个函数被调用时，路口穿越我们的其中一个阈值，handleIntersect()和我们一组选项。然后observe()，我们调用返回的观察者，将所需的目标元素传递给它。

如果我们愿意的话，我们可以选择通过监视observer.observe()每个元素来监视多个元素是否相对于视口相交。

建立阈值比率数组

buildThresholdList()构建阈值列表的函数如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
function buildThresholdList() {
  let thresholds = [];
  let numSteps = 20;

  for (let i=1.0; i<=numSteps; i++) {
    let ratio = i/numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}

这将构建阈值数组-通过将值介于1和之间的每个整数推i/numSteps入thresholds数组，每个阈值之间的比率为0.0和1.0 i之间numSteps。它还推0以包括该值。给定默认值numSteps（20），结果是以下阈值列表：

＃Ratio＃Ratio
1个0.05110.55
20.1120.6
30.15130.65
40.2140.7
50.25150.75
60.3160.8
70.35170.85
80.4180.9
90.45190.95
100.5201.0

当然，我们可以将阈值数组硬编码到我们的代码中，而这通常是您最终要做的。但是，此示例为添加配置控件以调整粒度提供了空间。

处理交集变更

当浏览器检测到目标元素（在我们的示例中为ID的元素"box"）已经被公开或模糊，以致其可见性比率超过列表中的阈值之一时，它将调用处理程序函数handleIntersect()：

1
2
3
4
5
6
7
8
9
10
11
function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > prevRatio) {
      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
    } else {
      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
    }

    prevRatio = entry.intersectionRatio;
  });
}

对于IntersectionObserverEntry列表中的每个entries条目，我们查看条目intersectionRatio是否在上升；如果是，我们将目标的设置background-color为中的字符串increasingColor（请记住，它是"rgba(40, 40, 190, ratio)"），将单词“ ratio”替换为条目的intersectionRatio。结果：不仅颜色改变了，目标元素的透明度也改变了；当交叉比例降低时，背景色的Alpha值随之降低，从而使元素更透明。

同样，如果intersectionRatio下降，则使用字符串，decreasingColor并intersectionRatio在设置目标元素的之前将其中的“比率”一词替换为background-color。

最后，为了跟踪交叉比率是上升还是下降，我们记住变量中的当前比率prevRatio。

浏览器兼容性

Update compatibility data on GitHub

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
IntersectionObserverExperimentalFull support51Full support15Full support55OpenNo supportNoFull supportYesFull support12.1Full support51Full support51??Full support12.2Full support5.0
IntersectionObserver() constructorExperimentalFull support51Full support15Full support55OpenNo supportNo?Full support12.1Full support51Full support51??Full support12.2Full support5.0
disconnectExperimentalFull support51Full support15NotesOpenFull support55OpenNo supportNoFull supportYes?Full support51Full support51???Full support5.0
observeExperimentalFull support51Full support15Full support55OpenNo supportNoFull supportYesFull support12.1Full support51Full support51??Full support12.2Full support5.0
rootExperimentalFull support51Full support15Full support55OpenNo supportNoFull supportYesFull support12.1Full support51Full support51??Full support12.2Full support5.0
rootMarginExperimentalFull support51Full support15Full support55OpenNo supportNoFull supportYesFull support12.1NotesOpenFull support51Full support51??Full support12.2NotesOpenFull support5.0
takeRecordsExperimentalFull support51Full support15NotesOpenFull support55OpenNo supportNoFull supportYes?Full support51Full support51???Full support5.0
thresholdsExperimentalFull support51Full support15Full support55OpenNo supportNoFull supportYesFull support12.1Full support51Full support51??Full support12.2Full support5.0
unobserveExperimentalFull support51Full support15NotesOpenFull support55OpenNo supportNoFull supportYesFull support12.1Full support51Full support51??Full support12.2Full support5.0
]]> 摘自MDN，翻译一下吧，对检测元素可见效问题挺有用的哈哈 iScroll 源码学习 https://wzes.github.io/2019/10/23/JavaScript/iScroll/ 2019-10-23T10:30:16.000Z 2019-10-24T06:15:03.500Z 前言

强大的 iScroll 啊，功能的确多，但我只想看看你的 flinger 滑动处理的精髓！感觉 iscroll 的滑动处理的还可以吧，虽然比不上系统的 scroll，但也不至于很难受，学会了这招，可以出去吹吹牛（招摇撞骗）了。

须知

通常如果我们给容器设置一个高度，如果子节点的高度超出了父容器的高度，那么内容就可以进行滚动，原因在于 overflow 属性默认为 auto，当然最好将父容器设置为 overflow: scroll，子内容就可以进行滚动。还可以单独设置 X 或 Y 轴的滚动，overflow-x:scroll 或 overflow-y:scroll，如果不想让内容滚动，则设置 overflow: hidden

是什么

iScroll 是一种高性能，占用空间小，无依赖的多平台 javascript 滚动器。

它适用于台式机，移动电视和智能电视。它已针对性能和尺寸进行了优化，以在现代和旧设备上提供最平滑的结果。

iScroll不仅可以滚动。它可以处理需要通过用户交互移动的任何元素。它为您的项目添加了滚动，缩放，平移，无限滚动，视差滚动，轮播，并且仅以4kb的速度做到了这一点。给它扫帚，它也会打扫你的办公室。

即使在本机滚动足以胜任的平台上，iScroll也会添加原本无法实现的功能。特别：

即使在动量期间，也可以对滚动位置进行精细控制。您始终可以获取并设置滚动条的x，y坐标。
可以使用用户定义的缓动功能（弹跳，弹性，后退…）自定义动画。
您可以轻松地挂钩到大量自定义事件（onBeforeScrollStart，onScrollStart，onScroll，onScrollEnd，flick等）。
开箱即用的多平台支持。从较旧的Android设备到最新的iPhone，从Chrome到Internet Explorer。

Get started

假设我们的元素长这个样子

1
2
3
4
5
6
7
<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

那我们只需要在脚本中使用 new IScroll 即可

1
myScroll = new IScroll('#wrapper');

当然，他还有很多属性（只可意会）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
this.options = {
disablePointer : !utils.hasPointer,
disableTouch : utils.hasPointer || !utils.hasTouch,
disableMouse : utils.hasPointer || utils.hasTouch,
startX: 0, // 开始滚动的值
startY: 0,
scrollY: true,
directionLockThreshold: 5,
momentum: true,  // 对其 Native 的 flinger(手指放开后还会继续滚动一段距离)
bounce: true,   // 滚动回弹
bounceTime: 600,
bounceEasing: '',
preventDefault: true,
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },
HWCompositing: true,
useTransition: true,
useTransform: true,
bindToWrapper: typeof window.onmousedown === "undefined"
}

原理概括

iScroll 当然没有使用系统的 scroll，原因有很多点，上面也提到过。

iScroll 使用了 transform: translate(px, px)来实现滚动，完全是通过自己计算来实现的，当然，如果系统支持 transation，那么 iScroll 的松手后滚动将借助 transitionTimingFunction，否则就自定义动画，完成平滑滚动。

源码解析

入口

IScroll 是一个方法，调用了以后会创建属性，进行初始化，其中 this.x 和 this.y 分别记录了x 轴 与 y 轴的滚动距离。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function IScroll (el, options) {
this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
this.scroller = this.wrapper.children[0];
this.scrollerStyle = this.scroller.style;// cache style for better performance

// 此处省略了 this.options 的赋值

// Some defaults
this.x = 0;  
this.y = 0;
this.directionX = 0;
this.directionY = 0;
this._events = {};

this._init();
this.refresh();

this.scrollTo(this.options.startX, this.options.startY);
this.enable();
}

初始化事件

在 this._init(); 中初始化了事件监听，在手机端主要是 touch 开头的事件，PC 端主要是 mouse 事件，pointer 是指针事件，此外，还会监听 transitionend 事件，用于滚动结束事件的监听。

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
_initEvents: function (remove) {
var eventType = remove ? utils.removeEvent : utils.addEvent,
target = this.options.bindToWrapper ? this.wrapper : window;

eventType(window, 'orientationchange', this);
eventType(window, 'resize', this);

if ( this.options.click ) {
eventType(this.wrapper, 'click', this, true);
}

if ( !this.options.disableMouse ) {
eventType(this.wrapper, 'mousedown', this);
eventType(target, 'mousemove', this);
eventType(target, 'mousecancel', this);
eventType(target, 'mouseup', this);
}

if ( utils.hasPointer && !this.options.disablePointer ) {
eventType(this.wrapper, utils.prefixPointerEvent('pointerdown'), this);
eventType(target, utils.prefixPointerEvent('pointermove'), this);
eventType(target, utils.prefixPointerEvent('pointercancel'), this);
eventType(target, utils.prefixPointerEvent('pointerup'), this);
}

if ( utils.hasTouch && !this.options.disableTouch ) {
eventType(this.wrapper, 'touchstart', this);
eventType(target, 'touchmove', this);
eventType(target, 'touchcancel', this);
eventType(target, 'touchend', this);
}

eventType(this.scroller, 'transitionend', this);
eventType(this.scroller, 'webkitTransitionEnd', this);
eventType(this.scroller, 'oTransitionEnd', this);
eventType(this.scroller, 'MSTransitionEnd', this);
},

初始化变量

计算容器高度、宽度，滚动内容高度、宽度，最大滚动距离（X轴，Y轴）等等。

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
refresh: function () {
utils.getRect(this.wrapper);// Force reflow

this.wrapperWidth= this.wrapper.clientWidth;
this.wrapperHeight= this.wrapper.clientHeight;

var rect = utils.getRect(this.scroller);
/* REPLACE START: refresh */

this.scrollerWidth= rect.width;
this.scrollerHeight= rect.height;

this.maxScrollX= this.wrapperWidth - this.scrollerWidth;
this.maxScrollY= this.wrapperHeight - this.scrollerHeight;

/* REPLACE END: refresh */

this.hasHorizontalScroll= this.options.scrollX && this.maxScrollX < 0;
this.hasVerticalScroll= this.options.scrollY && this.maxScrollY < 0;

if ( !this.hasHorizontalScroll ) {
this.maxScrollX = 0;
this.scrollerWidth = this.wrapperWidth;
}

if ( !this.hasVerticalScroll ) {
this.maxScrollY = 0;
this.scrollerHeight = this.wrapperHeight;
}

this.endTime = 0;
this.directionX = 0;
this.directionY = 0;

if(utils.hasPointer && !this.options.disablePointer) {
// The wrapper should have `touchAction` property for using pointerEvent.
this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, true);

// case. not support 'pinch-zoom'
// https://github.com/cubiq/iscroll/issues/1118#issuecomment-270057583
if (!this.wrapper.style[utils.style.touchAction]) {
this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, false);
}
}
this.wrapperOffset = utils.offset(this.wrapper);

this._execEvent('refresh');

this.resetPosition();

// INSERT POINT: _refresh

},

滚动函数

给定一个 x，y，滚动时间 time，滚动效果 easing；

如果 time 为 0，则为瞬时滚动，使用 _translate 改变位置，如果环境支持 transition , 那么将使用 transition 属性实现动画。

如果浏览器不支持 transition，time 又不为 0，那么则自定义动画实现滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
scrollTo: function (x, y, time, easing) {
easing = easing || utils.ease.circular;

this.isInTransition = this.options.useTransition && time > 0;
var transitionType = this.options.useTransition && easing.style;
if ( !time || transitionType ) {
if(transitionType) {
this._transitionTimingFunction(easing.style);
this._transitionTime(time);
}
this._translate(x, y);
} else {
this._animate(x, y, time, easing.fn);
}
},

移动实现

如果元素支持 transform 给元素赋值 transform 属性即可，否则使用 left 属性。然后将 x , y 设置为目标位置，既目前滚动位置，通常都是为负值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
_translate: function (x, y) {
if ( this.options.useTransform ) {

/* REPLACE START: _translate */

this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;

/* REPLACE END: _translate */

} else {
x = Math.round(x);
y = Math.round(y);
this.scrollerStyle.left = x + 'px';
this.scrollerStyle.top = y + 'px';
}

this.x = x;
this.y = y;

// INSERT POINT: _translate

},

触摸事件处理 Core

便于分析，我只考虑y方向的滑动，x方向同理（会删除掉 x 方向的代码）

start（movestart，mousedown…）

其中比较重要的是 startY，startTime，记录下目前滚动位置，滚动时刻 pointY 则是点击位置

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
_start: function (e) {
 var point = e.touches ? e.touches[0] : e,
  pos;

 this.initiated = utils.eventType[e.type];
 this.moved  = false;
 this.distY  = 0;
 this.directionY = 0;
 this.directionLocked = 0;

 this.startTime = utils.getTime();

 if ( this.options.useTransition && this.isInTransition ) {
  this._transitionTime();
  this.isInTransition = false;
  pos = this.getComputedPosition();
  this._translate(Math.round(pos.x), Math.round(pos.y));
  this._execEvent('scrollEnd');
 } else if ( !this.options.useTransition && this.isAnimating ) {
  this.isAnimating = false;
  this._execEvent('scrollEnd');
 }

 this.startY    = this.y;
 this.absStartY = this.y;
 this.pointY    = point.pageY;

 this._execEvent('beforeScrollStart');
},
move

通常，手指不松开，屏幕滚动是跟随手指移动的，手指怎么移动，屏幕就怎么移动。

首先会判断该次滑动是否有效，然后锁定滑动方向，最后计算 newY，需要滑动的位置 newY = this.y + deltaY 是通过 delta 来计算的。然后使用 translate 函数移动进行瞬时移动。

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
_move: function (e) {
var point= e.touches ? e.touches[0] : e,
deltaY= point.pageY - this.pointY,
timestamp= utils.getTime(),
newY,
absDistY;

this.pointY= point.pageY;
this.distY+= deltaY;
absDistY= Math.abs(this.distY);

// We need to move at least 10 pixels for the scrolling to initiate
if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
return;
}

// If you are scrolling in one direction lock the other
if ( !this.directionLocked && !this.options.freeScroll ) {
if ( absDistX > absDistY + this.options.directionLockThreshold ) {
this.directionLocked = 'h';// lock horizontally
} else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
this.directionLocked = 'v';// lock vertically
} else {
this.directionLocked = 'n';// no lock
}
}

if ( this.directionLocked == 'h' ) {
if ( this.options.eventPassthrough == 'vertical' ) {
e.preventDefault();
} else if ( this.options.eventPassthrough == 'horizontal' ) {
this.initiated = false;
return;
}

deltaY = 0;
} else if ( this.directionLocked == 'v' ) {
if ( this.options.eventPassthrough == 'horizontal' ) {
e.preventDefault();
} else if ( this.options.eventPassthrough == 'vertical' ) {
this.initiated = false;
return;
}

deltaX = 0;
}

deltaY = this.hasVerticalScroll ? deltaY : 0;
newY = this.y + deltaY;

// Slow down if outside of the boundaries
if ( newY > 0 || newY < this.maxScrollY ) {
newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
}
this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
if ( !this.moved ) {
this._execEvent('scrollStart');
}
this.moved = true;
this._translate(newX, newY);

/* REPLACE START: _move */

if ( timestamp - this.startTime > 300 ) {
this.startTime = timestamp;
this.startX = this.x;
this.startY = this.y;
}

/* REPLACE END: _move */

},

其中一个比较重要的是，如果这次 move 的时刻与上一次（start）的时间超过 300 ms，会进行重置（太妙了！！）这与接下来的 end 有着非常重要的意义

1
2
3
4
if ( timestamp - this.startTime > 300 ) {
this.startTime = timestamp;
this.startY = this.y;
}
end

在 end 中将进行动量滚动（松开后还能进行滚动）

动量滚动最重要的是计算两个值，松开后滚动的 时间 和 距离，也是 iscroll 最核心的部分。

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
_end: function (e) {
var point = e.changedTouches ? e.changedTouches[0] : e,
momentumY,
duration = utils.getTime() - this.startTime,
newY = Math.round(this.y),
distanceY = Math.abs(newY - this.startY),
time = 0,
easing = '';

this.isInTransition = 0;
this.initiated = 0;
this.endTime = utils.getTime();

// reset if we are outside of the boundaries
if ( this.resetPosition(this.options.bounceTime) ) {
return;
}

this.scrollTo(newX, newY);// ensures that the last position is rounded

// we scrolled less than 10 pixels
if ( !this.moved ) {
if ( this.options.tap ) {
utils.tap(e, this.options.tap);
}

if ( this.options.click ) {
utils.click(e);
}

this._execEvent('scrollCancel');
return;
}

if ( this._events.flick && duration < 200 && distanceX < 100 && distanceY < 100 ) {
this._execEvent('flick');
return;
}

// start momentum animation if needed
if ( this.options.momentum && duration < 300 ) {
momentumY = this.hasVerticalScroll ? utils.momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration) : { destination: newY, duration: 0 };
newY = momentumY.destination;
time = Math.max(momentumX.duration, momentumY.duration);
this.isInTransition = 1;
}

// INSERT POINT: _end

if ( newX != this.x || newY != this.y ) {
// change easing function when scroller goes out of the boundaries
if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
easing = utils.ease.quadratic;
}

this.scrollTo(newX, newY, time, easing);
return;
}

this._execEvent('scrollEnd');
},

计算使用了 util.momentum

输入，现在的滚动位置 y，上一次开始的 startY（该位置会在 move 中重置），time（距离上一次 start 的时间），lowerMargin 最大的滚动距离，wrapperSize 容器的尺寸，deceleration 插值器

话不多说，自己欣赏吧。返回滚动时间和目标滚动位置

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
momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
var distance = current - start,
speed = Math.abs(distance) / time,
destination,
duration;

deceleration = deceleration === undefined ? 0.0006 : deceleration;

destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
duration = speed / deceleration;

if ( destination < lowerMargin ) {
destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
distance = Math.abs(destination - current);
duration = distance / speed;
} else if ( destination > 0 ) {
destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
distance = Math.abs(current) + destination;
duration = distance / speed;
}

return {
destination: Math.round(destination),
duration: duration
};
};

然后就是使用 scrollTo 函数进行动量滚动了。this.isInTransition 标志正在进行动量滚动，如果期间存在 touchdown 事件，则会立刻停止滚动。

1
2
3
4
5
6
7
8
9
10
11
if ( this.options.useTransition && this.isInTransition ) {
this._transitionTime();
this.isInTransition = false;
pos = this.getComputedPosition();
this._translate(Math.round(pos.x), Math.round(pos.y));
this._execEvent('scrollEnd');
} else if ( !this.options.useTransition && this.isAnimating ) {
this.isAnimating = false;
this._execEvent('scrollEnd');
}
}

至此，核心功能差不多了

但 iscroll 还有其他很多功能，比如

  • 轮播图
  • 放大缩小
  • …

最后

其实吧，iScroll 也也就那么回事。

]]> 强大的 iScroll 啊，功能的确多，但我只想看看你的 flinger 滑动处理的精髓！感觉 iscroll 的滑动处理的还可以吧，虽然比不上系统的 scroll，但也不至于很难受，学会了这招，可以出去吹吹牛（招摇撞骗）了 Gulp 入门指南 https://wzes.github.io/2019/10/20/JavaScript/Gulp/ 2019-10-20T07:30:16.000Z 2019-10-20T09:58:06.150Z 前言

明天就要晋升答辩了，今天写篇入门 Wiki 压压惊吧，正好最近想学构建工具之类的东西，Gulp 好像就很合适

Glup 是什么？

Gulp 有狼吞虎咽的意思。

官方【https://gulpjs.com/docs】解释

gulp 是一个工具包，用于在开发工作流程中自动化繁琐或耗时的任务，因此您可以避免混乱并构建一些东西。

直白来说，就是一个构建工具。常用来制作开发脚手架，生产模版～

Get Started

Node 环境

首先，检查 node、npm 和 npx 是否正确安装

全局安装

1
npm install gulp-cli -g

创建项目目录并进入

1
mkdir gulp-project & cd gulp-project

在项目目录下创建 package.json 文件

1
npm init

安装 gulp，作为开发时依赖项

1
npm install --save-dev gulp

创建 gulpfile 文件

利用任何文本编辑器在项目大的根目录下创建一个名为 gulpfile.js 的文件，并在文件中输入以下内容：

1
2
3
4
5
6
function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

测试

在项目根目录下执行 gulp 命令：

1
gulp

输出

1
2
3
[17:16:32] Using gulpfile ~/WebProjects/gulp-project/gulpfile.js
[17:16:32] Starting 'default'...
[17:16:32] Finished 'default' after 1.37 ms

高级用法

文件监控和处理

使用 watch，监听文件变化，将 src 目录的 js 文件复制到 output 目录下。

1
2
3
4
5
6
7
8
9
10
11
const { src, dest, watch } = require('gulp');
const gulp = require('gulp')

function streamTask() {
  return src('src/**/*.js')
    .pipe(dest('output'));
}
// 创建一个任务
gulp.task('watch', function () {
  watch('src/*.js', streamTask);
})

似乎非常方便，封装了 chokidar

写在最后

可以集成 rollup，webpack 等 node api，做一个 hotreload

参考

]]> 明天就要晋升答辩了，今天写篇入门 Wiki 压压惊吧，正好最近想学构建工具之类的东西，Gulp 好像就很合适 JavaScript Event preventDefault和stopPropagation https://wzes.github.io/2019/09/30/JavaScript/JavaScript Event/ 2019-09-30T07:30:16.000Z 2019-09-30T07:52:23.506Z 前言

对于JS的事件传递还是比较陌生，所以打算好好理一理preventDefault和stopPropagation的用法，彻底告别模糊，提升自己的前端段位！

栗子

在以下示例中，单击Web浏览器中的超链接将触发事件的流程（执行事件监听器）和事件目标的默认操作（打开新选项卡）。

HTML：

1
2
3
<div id="a">
  <a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var el = document.getElementById("c");
function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
}
function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
}
function bubblingOnClick1(ev) {
    el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);

输出

event captureA event captureA event bubblingDIV event bubbling
1
2
3
4
DIV event capture
A event capture
A event bubbling
DIV event bubbling
向capturingOnClick1函数添加stopPropagation()
1
2
3
4
function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.stopPropagation();
}

结果只输出

1
DIV event capture

事件侦听器阻止了事件的进一步向下和向上传播。但是，这并没有阻止默认操作（打开新标签页）。

向capturingOnClick2函数添加stopPropagation()
1
2
3
4
function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
    ev.stopPropagation();
}

或者

1
2
3
4
function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
    ev.stopPropagation();
}

结果

1
2
3
DIV event capture
A event capture
A event bubbling

这是因为两个事件侦听器都注册在同一事件目标上。事件侦听器阻止了事件的进一步向上传播。但是，它们并没有阻止默认操作（打开新标签页）。

将preventDefault()添加到任何函数中
1
2
3
4
function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.preventDefault();
}

结果照常输出

1
2
3
4
DIV event capture
A event capture
A event bubbling
DIV event bubbling

但它阻止打开新标签页

原理解析

事件顺序

基本问题很简单，假设元素内部有一个元素，如下：

1
2
3
4
5
6
7
-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

两者都有一个onClick事件处理程序。如果用户单击element2，他将在element1和element2中都引起click事件。但是哪个事件首先触发？应该先执行哪个事件处理程序？换句话说，事件顺序是什么？

两种事件模型

在过去，Netscape和Microsoft得出了不同的结论。

  • Netscape说，element1上的事件首先发生。这称为事件捕获***(capturing)***。

  • Microsoft坚持认为element2上的事件优先。这称为事件冒泡**(bubbling)**。

这两个事件顺序完全相反。 Explorer仅支持事件冒泡。 Mozilla，Opera 7和Konqueror都支持。旧版Opera和iCab都不支持。

事件捕获（capturing）

使用事件捕获时

1
2
3
4
5
6
7
8
               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

element1的事件处理程序首先触发，element2的事件处理程序最后触发。

事件冒泡（bubbling）

使用事件冒泡时

1
2
3
4
5
6
7
8
               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

element2的事件处理程序首先触发，element1的事件处理程序最后触发。

W3C 事件模型

W3C非常明智地决定在这场斗争中处于中间位置。 W3C事件模型中发生的任何事件都首先被捕获，直到到达目标元素，然后再次冒泡。

1
2
3
4
5
6
7
8
                 | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------`

Web开发人员可以选择是在捕获阶段还是冒泡阶段中注册事件处理程序。这是通过“高级模型”页面上说明的addEventListener()方法完成的。如果最后一个参数为true，则为捕获阶段设置事件处理程序，如果为false，则为冒泡阶段设置事件处理程序。

假设

1
2
element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)

如果用户单击element2，则会发生以下情况：

  • 单击事件在捕获阶段开始。该事件查找element2的任何祖先元素是否具有用于捕获阶段的onclick事件处理程序。
  • 该事件在element1上找到一个。doSomething2()被执行。
  • 事件向下传播到目标本身，找不到用于捕获阶段的事件处理程序。该事件进入其冒泡阶段并执行doSomething()，该事件已在冒泡阶段注册到element2。
  • 事件再次向上传播，并检查目标的任何祖先元素是否具有用于冒泡阶段的事件处理程序。事实并非如此，因此什么也没有发生。

相反

1
2
element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)

现在，如果用户单击element2，则会发生以下情况：

  • 单击事件在捕获阶段开始。该事件将查找element2的任何祖先元素是否具有用于捕获阶段的onclick事件处理程序，而找不到任何事件处理程序。
  • 事件向下传播到目标本身。该事件进入其冒泡阶段并执行doSomething()，该事件已在冒泡阶段注册到element2。
  • 事件再次向上传播，并检查目标的任何祖先元素是否具有用于冒泡阶段的事件处理程序。
  • 该事件在element1上找到一个。现在执行doSomething2()。

与传统模型的兼容性

在支持W3C DOM的浏览器中，传统的事件注册

1
element1.onclick = doSomething2;

被视为冒泡阶段的注册。

使用事件冒泡

很少有Web开发人员自觉使用事件捕获或冒泡。在当今的网页中，根本没有必要让冒泡事件由多个不同的事件处理程序处理。用户可能会因单击鼠标后发生的几件事而感到困惑，并且通常您希望将事件处理脚本分开。当用户单击某个元素时，会发生某些事情，而当用户单击另一个元素时，会发生其他事情。

当然，这种情况将来可能会改变，因此最好可以使用向前兼容的模型。但是，今天事件捕获和冒泡的主要实际用途是默认功能的注册。

总是会发生

您首先需要了解的是，事件捕获或冒泡总是会发生。如果您为整个document定义常规的onclick事件处理程序

1
2
document.onclick = doSomething;
if (document.captureEvents) document.captureEvents(Event.CLICK);

document中任何元素上的任何click事件最终都会冒泡到document中，从而触发此常规事件处理程序。仅当以前的事件处理脚本明确命令事件停止冒泡时，它才不会冒泡到 document。

使用

因为任何事件最终都出现在 document 上，所以默认事件处理程序成为可能。假设您有此页面：

1
2
3
4
5
6
7
8
9
10
11
------------------------------------
| document                         |
|   ---------------  ------------  |
|   | element1    |  | element2 |  |
|   ---------------  ------------  |
|                                  |
------------------------------------

element1.onclick = doSomething;
element2.onclick = doSomething;
document.onclick = defaultFunction;

现在，如果用户单击element1或2，则将执行doSomething()。如果需要，可以在此处停止事件传播。如果您不这样做，则事件会上升到defaultFunction()。如果用户单击其他任何地方，还将执行defaultFunction()。有时这可能很有用。

在拖放脚本中，必须设置document范围的事件处理程序。通常，上层的mousedown事件会选择该层并使之响应mousemove事件。尽管通常在层上注册mousedown以避免浏览器错误，但是其他两个事件处理程序都必须在document范围内。

记住浏览器学的第一定律：任何事情都有可能发生，并且通常在您最没有准备的情况下才会发生。因此，用户可能会非常疯狂地移动鼠标，而脚本无法跟上，以至于鼠标不再位于图层上。

  • 如果onmousemove事件处理程序已注册到图层，则该图层不再对鼠标移动做出反应，从而引起混乱。
  • 如果onmouseup事件处理程序已在图层上注册，则不会捕获此事件，因此即使用户认为他放下了该图层，该图层也会继续对鼠标移动做出反应。这引起了更多的混乱。

因此，在这种情况下，事件冒泡非常有用，因为在文档级别注册事件处理程序可确保始终执行它们。

禁用

但是通常您想关闭所有捕获和冒泡功能，以防止功能相互干扰。此外，如果您的文档结构非常复杂（很多嵌套表等），则可以通过关闭冒泡来节省系统资源。浏览器必须遍历事件目标的每个祖先元素，以查看其是否具有事件处理程序。即使未找到，搜索仍然需要时间。

在Microsoft模型中，您必须将事件的cancelBubble属性设置为true。

1
window.event.cancelBubble = true

在W3C模型中，您必须调用事件的*stopPropagation()*方法。

1
e.stopPropagation()

这将停止事件在冒泡阶段的所有传播。要获得完整的跨浏览器体验，请执行

1
2
3
4
5
6
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

在不支持该功能的浏览器中设置cancelBubble属性不会有任何问题。浏览器耸耸肩并创建属性。当然，它实际上并不能消除冒泡，但是作业本身是安全的。

当前目标

如我们前面所见，事件具有一个target或srcElement，其中包含对该事件发生所在元素的引用。在我们的示例中，这是element2，因为用户单击了它。

非常重要的一点是要理解，在捕获和冒泡阶段（如果有），该目标不会改变：它始终是对element2的引用。

但是，假设我们注册了以下事件处理程序：

1
2
element1.onclick = doSomething;
element2.onclick = doSomething;

如果用户单击element2，则doSomething()将执行两次。但是，您如何知道当前正在处理该事件的HTML元素？ target / srcElement不提供任何线索，它们始终引用element2，因为它是事件的原始来源。

为了解决此问题，W3C添加了currentTarget属性。它包含对事件当前正在处理的HTML元素的引用：正是我们所需要的。不幸的是，Microsoft模型不包含类似的属性。

您也可以使用this关键字。在上面的示例中，它引用处理事件的HTML元素，就像currentTarget一样。

Microsoft模式的问题

但是，当您使用Microsoft事件注册模型时，此关键字并不引用HTML元素。加上Microsoft模型中缺少类似于currentTarget的属性，这意味着如果您这样做

1
2
element1.attachEvent('onclick',doSomething)
element2.attachEvent('onclick',doSomething)

您不知道当前哪个HTML元素处理该事件。这是Microsoft事件注册模型中最严重的问题，对我来说，这是一个从不使用它的理由，即使在仅IE / Win的应用程序中也是如此。

我希望微软能尽快添加类似于currentTarget的属性，甚至可以遵循该标准？ Web开发人员需要此信息。

参考

Event Order

]]> 对于JS的事件传递还是比较陌生，所以打算好好理一理preventDefault和stopPropagation的用法，彻底告别模糊，提升自己的前端段位！ Browser Window 扫盲 https://wzes.github.io/2019/09/22/JavaScript/BrowserWindow/ 2019-09-22T10:56:00.000Z 2019-09-21T14:18:05.202Z 前言

作为一个 Node 开发工程师，似乎对于 Window 并不需要关心，但作为一个前端工程师，Window 是个啥子东东，还是需要花时间理一理的。本期看点，深入了解 Window 的 API ～

Window

所有的浏览器都有 Window 对象，每个窗口都会具有一个 Window，通常在浏览器开发者模式中，可以使用 window 拿到这个对象。

1
window

window 具有很多属性和方法，常见的有

  • navigator 导航器

  • screen 显示器

  • history 历史对象

  • location 位置对象

  • document 文档对象

  • 方法

    • open

    • close

    • setTimeout

    • setInterval

      …

在浏览器中，我们使用这些对象和方法，完整的用法是 window.xx，但我们可以省略 window，直接使用 xx 即可，对于新手来说可能觉得很奇怪。

复习一下方法调用， Javascript 的方法执行最终都会是以 xx.call(this, args…) 的形式，这里的 this 就是方法的上下文，通常是调用的对象

在浏览器里，如果我们直接使用一个属性或者方法，那么执行这个方法的上下文通常都是 window 对象，所以我们可以直接使用这些对象和方法，因为上下文环境就是 window，最后取的都是 window 的属性和方法。

放一张比较完整的图～

document

document 是我们的文档对象，我们可以使用开发者模式直接打印 document，document 打印出来（toString）就是我们的 html，实际上 document 对象也具有很多方法和属性。

createElement

创建元素

1
2
const div = document.createElement('div')
div.appendChild()

getElementById

获取元素

1
2
const div = document.getElementById('id')
div.appendChild()

利用这些方法创建元素，然后将元素挂载到已有的 dom (app)上，React，Vue 框架最核心的原理不过如此

cookie 对象是 document 的属性，当访问同源的网站是，浏览器会自动帮我们吧 cookie 对象传过去，cookie 对象通常包含了用户信息，服务端可以通过 cookie 判断用户的状态，cookie 默认是持久化保存的

location

location 对象即 window 的 location 对象

1
2
document.location == window.location
// true

URL

返回当前的 url

open

与 window 的 open 不同， document 的 open 是操作 document 对象，打开一个 document 的输入流，open 将会清空当前的文档

close

关闭文档流

1
2
3
4
5
document.open(); 
document.write("<p>Hello world!</p>");
document.write("<p>I am a fish</p>");
document.write("<p>The number is 42</p>"); 
document.close();

总结

window 对象博大精深～

]]> 作为一个 Node 开发工程师，似乎对于 Window 并不需要关心，但作为一个前端工程师，Window 是个啥子东东，还是需要花时间理一理的。本期看点，深入了解 Window 的 API ～～ koa-bodyparser 源码解析 https://wzes.github.io/2019/09/08/JavaScript/koa-bodyparser/ 2019-09-08T10:56:00.000Z 2019-09-08T15:31:51.951Z 前言

前面我们已经把【裸配】 Koa 学习了一下，学完了以后好像并没有什么好用的东西，然而这玩意就像一个巨大的平台，容易集成各种小插件，来达到各种各样的功能。接下来我们学习一个 koa-bodyparser 这歌短小精悍的库！

HelloWorld

当我的 hello world 如此简单的时候，我想发一个 POST 请求，那么我怎么拿到 POST 请求的参数呢，我们 ctx.request.body 是空的，Koa 原声的框架并没有帮我们解析 POST 的请求数据。所以我们就需要加入 koa-bodyparser 中间件，这样我们就可以通过 ctx.request.body 拿到数据了。

1
2
3
4
5
6
7
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
    // ctx.body = ctx.query.param;
    console.log( ctx.request.body)
});
app.listen(3000);

首先安装这个库：

1
npm install koa-bodyparser --save

然后再代码中加入这个中间件：

1
2
3
4
5
6
7
8
9
10
11
12
13
const Koa = require('koa');
const bodyParser = require('koa-bodyparser')

const app = new Koa();

app.use(bodyParser());

app.use(async ctx => {
    ctx.body = ctx.request.body.param;
    console.log(ctx.request.body)
});

app.listen(3000);

这时候 ctx.request.body 便是一个解析好的对象了，直接取对象的属性就可以了

题外话

原声的 NodeJS 通过 createServer 也是没有办法直接取到 post 的参数的，还是需要做一些读取数据的操作才可以

源码解析

bodyParser

作为一个中间件，需要返回一个 async 函数，在这个函数的最后调用 next()，关键部分是 parseBody 函数，将 request 进行解析，并将结果返回赋值给 ctx.request.body

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
return async function bodyParser(ctx, next) {
    if (ctx.request.body !== undefined) return await next();
    if (ctx.disableBodyParser) return await next();
    try {
      const res = await parseBody(ctx);
      ctx.request.body = 'parsed' in res ? res.parsed : {};
      if (ctx.request.rawBody === undefined) ctx.request.rawBody = res.raw;
    } catch (err) {
      if (onerror) {
        onerror(err, ctx);
      } else {
        throw err;
      }
    }
    await next();
  };
parseBody

ctx.request.is 可以检查 request 【Content-Type】 请求的类型是否是当中的一个，一般情况下以 form 居多，即 application/x-www-form-urlencoded

1
2
3
4
5
6
7
8
9
10
11
12
async function parseBody(ctx) {
    if (enableJson && ((detectJSON && detectJSON(ctx)) || ctx.request.is(jsonTypes))) {
      return await parse.json(ctx, jsonOpts);
    }
    if (enableForm && ctx.request.is(formTypes)) {
      return await parse.form(ctx, formOpts);
    }
    if (enableText && ctx.request.is(textTypes)) {
      return await parse.text(ctx, textOpts) || '';
    }
    return {};
  }
parse.form

主要是 raw(inflate(req), opts) 方法，将请求的参数转化为一个 string

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
module.exports = async function(req, opts) {
  req = req.req || req;
  opts = utils.clone(opts);
  const queryString = opts.queryString || {};

  // keep compatibility with qs@4
  if (queryString.allowDots === undefined) queryString.allowDots = true;

  // defaults
  const len = req.headers['content-length'];
  const encoding = req.headers['content-encoding'] || 'identity';
  if (len && encoding === 'identity') opts.length = ~~len;
  opts.encoding = opts.encoding || 'utf8';
  opts.limit = opts.limit || '56kb';
  opts.qs = opts.qs || qs;

  const str = await raw(inflate(req), opts);
  try {
    const parsed = opts.qs.parse(str, queryString);
    return opts.returnRawBody ? { parsed, raw: str } : parsed;
  } catch (err) {
    err.status = 400;
    err.body = str;
    throw err;
  }
};
raw

读取 body 数据，

1
2
3
4
5
6
7
8
9
function getRawBody (stream, options, callback) {

  return new Promise(function executor (resolve, reject) {
    readStream(stream, encoding, length, limit, function onRead (err, buf) {
      if (err) return reject(err)
      resolve(buf)
    })
  })
}

选取了 onData 函数，可以接受流数据，以字符串形式，结束后直接返回 字符串即可，数据为 buffer，使用 buffer.toString() 就可以转化为字符串。

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
function readStream (stream, encoding, length, limit, callback) {
  // attach listeners
  stream.on('aborted', onAborted)
  stream.on('close', cleanup)
  stream.on('data', onData)
  stream.on('end', onEnd)
  stream.on('error', onEnd)
  
  function onData (chunk) {
    if (complete) return

    received += chunk.length

    if (limit !== null && received > limit) {
      done(createError(413, 'request entity too large', {
        limit: limit,
        received: received,
        type: 'entity.too.large'
      }))
    } else if (decoder) {
      buffer += decoder.write(chunk)
    } else {
      buffer.push(chunk)
    }
  }

  function onEnd (err) {
    if (complete) return
    if (err) return done(err)

    if (length !== null && received !== length) {
      done(createError(400, 'request size did not match content length', {
        expected: length,
        length: length,
        received: received,
        type: 'request.size.invalid'
      }))
    } else {
      var string = decoder
        ? buffer + (decoder.end() || '')
        : Buffer.concat(buffer)
      done(null, string)
    }
  }
}

在 onEnd 中返回字符串

写在最后

koa-bodyparser 不仅做了 post 的转化，还有一些可选的参数，比如说传输类型，大小限制，这些都是可以通过参数进行配置的。源码博大精深啊！

]]> 前面我们已经把【裸配】 Koa 学习了一下，学完了以后好像并没有什么好用的东西，然而这玩意就像一个巨大的平台，容易集成各种小插件，来达到各种各样的功能。接下来我们学习一个 koa-bodyparser 这歌短小精悍的库！ JavaScript Array 的 1 个属性，35 个方法 https://wzes.github.io/2019/09/01/JavaScript/JavaScript Array/ 2019-09-01T07:30:16.000Z 2019-09-07T04:15:12.383Z 前言

这周呢，彻底学习一下 Array 的所有方法。学习地址 MDN，里面还有各个函数实现的源码！数组作为 JavaScript 的一种特殊的对象类型，与 Number，Boolean，Null，String，Undefined，Symbol 七大数据类型有所不一样。了解 Array 的所有方法，能帮助我们最快找到适合自己的函数。

Create an Array

创建一个数组很简单，直接赋值，或者使用 [] 创建空数组

1
2
var fruits = ['Apple', 'Banana'];
console.log(fruits.length); // 2

Properties

Array.length
1
2
3
4
5
6
var clothing = ['shoes', 'shirts', 'socks', 'sweaters'];

console.log(clothing.length);
// expected output: 4

var array = new Array(2)

Methods

首先看一下 Array 的三个静态方法
#####1. Array.from()
Array.from() 方法从类似数组或可迭代的对象创建一个新的，浅拷贝的 Array 实例，或者从 {length: 3} 对象中创建固定长度的 undefined 数组

Array.from(arrayLike[, mapFn[, thisArg]])

1
2
3
4
5
6
7
8
console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

console.log(Array.from({length: 3}));
// expected output: Array [undefined, undefined, undefined]
2. Array.isArray()

Array.isArray() 方法确定传递的值是否为 Array，由于 typeof Array = ‘object’ ，所以判断是否是一个数组使用 isArray 才可以

Array.isArray(value)

1
2
3
4
Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false
3. Array.of()

Array.of() 方法从可变数量的参数创建一个新的Array实例，无论参数的数量或类型如何
注意它与构造函数的不同之处

Array.of(element0[, element1[, …[, elementN]]])

1
2
3
4
5
Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // array of 7 empty slots
Array(1, 2, 3);    // [1, 2, 3]

接下来看 Array 的对象方法

4. Array.prototype.concat()

concat() 方法用于合并两个或多个数组。 此方法不会更改现有数组，而是返回一个新数组

var new_array = old_array.concat([value1[, value2[, …[, valueN]]]])

1
2
3
4
5
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]
5. Array.prototype.copyWithin()

copyWithin() 方法浅析将数组的一部分复制到同一数组中的另一个位置，并返回它而不修改其长度

arr.copyWithin(target[, start[, end]])

1
2
3
4
5
6
7
8
9
var array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]
6. Array.prototype.entries()

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

array.entries()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var array1 = ['a', 'b', 'c'];

var iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]

// 使用 for of 遍历
var a = ['a', 'b', 'c'];
var iterator = a.entries();

for (let e of iterator) {
  console.log(e);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
7. Array.prototype.every()

every() 方法测试数组中的所有元素是否都通过了由提供的函数实现的测试。 它返回一个布尔值

arr.every(callback(element[, index[, array]])[, thisArg])

1
2
3
4
5
6
7
8
function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true
8. Array.prototype.fill()

fill() 方法使用静态值从开始索引（默认为零）到结束索引（默认数组长度）填充（修改）数组的所有元素。 它返回修改后的数组，原数组会改变～

arr.fill(value[, start[, end]])

1
2
3
4
5
6
7
8
9
10
11
12
 var array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]
9. Array.prototype.filter()

filter() 方法创建一个新数组，其中包含所有传递由提供的函数实现的测试的元素

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

1
2
3
4
5
6
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
10. Array.prototype.find()

find() 方法返回数组中第一个满足提供的测试函数的元素的值。 否则返回undefined

arr.find(callback(element[, index[, array]])[, thisArg])

1
2
3
4
5
6
7
8
var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12
11. Array.prototype.findIndex()

findIndex() 方法返回数组中第一个满足提供的测试函数的元素的索引。 否则，它返回-1，表示没有元素通过测试

arr.findIndex(callback(element[, index[, array]])[, thisArg])

1
2
3
4
5
6
7
var array1 = [5, 12, 8, 130, 44];

function isLargeNumber(element) {
  return element > 13;
}

console.log(array1.findIndex(isLargeNumber));
12. Array.prototype.flat()

flat() 方法创建一个新数组，所有子数组元素以递归方式连接到指定的深度。

var newArray = arr.flat([depth]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
13. Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果展平为新数组。 它与map（）后跟深度为1的flat（）相同，但flatMap（）通常非常有用，因为将两者合并到一个方法中效率稍高

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])

1
2
3
4
5
6
7
let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
14. Array.prototype.forEach()

forEach() 方法为每个数组元素执行一次提供的函数

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

1
2
3
4
5
6
7
8
9
var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});

// expected output: "a"
// expected output: "b"
// expected output: "c"
15. Array.prototype.includes()

includes() 方法确定数组是否在其条目中包含某个值，并在适当时返回true或false

arr.includes(valueToFind[, fromIndex])

1
2
3
4
5
6
7
8
9
10
11
12
var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false
16. Array.prototype.indexOf()

indexOf() 方法返回可在数组中找到给定元素的第一个索引，如果不存在则返回-1

arr.indexOf(searchElement[, fromIndex])

1
2
3
4
5
6
7
8
9
10
11
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1
17. Array.prototype.join()

join() 方法通过连接数组（或类数组对象）中的所有元素（用逗号或指定的分隔符字符串分隔）来创建并返回一个新字符串。 如果数组只有一个项目，那么将返回该项目而不使用分隔符

arr.join([separator])

1
2
3
4
5
6
7
8
9
10
ar elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"
18. Array.prototype.keys()

keys() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键

1
2
3
4
5
6
var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
  
for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}
19. Array.prototype.lastIndexOf()

lastIndexOf() 方法返回可在数组中找到给定元素的最后一个索引，如果不存在则返回-1。 从fromIndex开始向后搜索数组

arr.lastIndexOf(searchElement[, fromIndex])

1
2
3
4
5
6
7
var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

console.log(animals.lastIndexOf('Penguin', 1));
// expected output: -1
20. Array.prototype.map()

map() 方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])

1
2
3
4
5
6
7
var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
21. Array.prototype.pop()

pop() 方法从数组中删除最后一个元素并返回该元素。 此方法更改数组的长度。

arr.pop()

1
2
3
4
5
6
7
8
9
10
11
12
var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]
22. Array.prototype.push()

push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度

arr.push(element1[, …[, elementN]])

1
2
3
4
5
6
7
8
9
10
11
12
var animals = ['pigs', 'goats', 'sheep'];

console.log(animals.push('cows'));
// expected output: 4

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens');

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens"]
23. Array.prototype.reduce()

reduce() 方法在数组的每个元素上执行reducer函数（您提供），从而产生单个输出值

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

1
2
3
4
5
6
7
8
9
10
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
24. Array.prototype.reduceRight()

reduceRight() 方法对累加器和数组的每个值（从右到左）应用函数以将其减少为单个值

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

1
2
3
4
5
6
const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]
25. Array.prototype.reverse()

reverse() 方法将数组反转到位。 第一个数组元素成为最后一个，最后一个数组元素成为第一个

a.reverse()

1
2
3
4
5
6
7
8
9
10
11
12
var array1 = ['one', 'two', 'three'];
console.log('array1: ', array1);
// expected output: Array ['one', 'two', 'three']

var reversed = array1.reverse(); 
console.log('reversed: ', reversed);
// expected output: Array ['three', 'two', 'one']

/* Careful: reverse is destructive. It also changes
the original array */ 
console.log('array1: ', array1);
// expected output: Array ['three', 'two', 'one']
26. Array.prototype.shift()

shift() 方法从数组中删除第一个元素并返回已删除的元素。 此方法更改数组的长度

arr.shift()

1
2
3
4
5
6
7
8
9
var array1 = [1, 2, 3];

var firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1
27. Array.prototype.slice()

slice() 方法将数组的一部分的浅表副本返回到从头到尾选择的新数组对象（不包括结尾），其中begin和end表示该数组中项的索引。 原始数组不会被修改

arr.slice([begin[, end]])

1
2
3
4
5
6
7
8
9
10
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
28. # Array.prototype.some()

some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。 它返回一个布尔值

arr.some(callback(element[, index[, array]])[, thisArg])

1
2
3
4
5
6
7
8
9
var array = [1, 2, 3, 4, 5];

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true
29. Array.prototype.sort()

sort() 方法对数组中的元素进行排序并返回已排序的数组。 默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。

由于取决于实现，因此无法保证排序的时间和空间复杂性。

arr.sort([compareFunction])

1
2
3
4
5
6
7
8
9
var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
30. Array.prototype.splice()

splice() 方法通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容

var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, …]]]])

1
2
3
4
5
6
7
8
9
10
var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
31. Array.prototype.unshift()

unshift() 方法将一个或多个元素添加到数组的开头并返回数组的新长度

arr.unshift(element1[, …[, elementN]])

1
2
3
4
5
6
7
var array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]
32. Array.prototype.values()

values() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的值

arr.values()

1
2
3
4
5
6
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value); // expected output: "a" "b" "c"
}
33. Array.prototype.toLocaleString()

toLocaleString() 方法返回表示数组元素的字符串。 使用toLocaleString方法将元素转换为字符串，并且这些字符串由特定于语言环境的字符串（例如逗号“，”）分隔

arr.toLocaleString([locales[, options]]);

1
2
3
4
5
6
var array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
var localeString = array1.toLocaleString('en', {timeZone: "UTC"});

console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary
34. Array.prototype.toString()

toString() 方法返回表示指定数组及其元素的字符串

arr.toString()

1
2
3
4
var array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"
35. Array.prototype@@iterator

@@iterator 属性的初始值与values（）属性的初始值是相同的函数对象。

arrSymbol.iterator

1
2
3
4
5
6
7
8
var arr = ['a', 'b', 'c', 'd', 'e'];
var eArr = arr[Symbol.iterator]();
// your browser must support for..of loop
// and let-scoped variables in for loops
// const and var could also be used
for (let letter of eArr) {
  console.log(letter);
}
]]> 这周呢，彻底学习一下 Array 的所有方法。学习地址 MDN，里面还有各个函数实现的源码！数组作为 JavaScript 的一种特殊的对象类型，与 Number，Boolean，Null，String，Undefined，Symbol 七大数据类型有所不一样。了解 Array 的所有方法，能帮助我们最快找到适合自己的函数 React Redux v0.2.1 源码学习 https://wzes.github.io/2019/08/25/JavaScript/Redux V0.2.1/ 2019-08-25T11:30:16.000Z 2019-09-02T12:16:07.731Z 前言

这周突然想学习一下状态管理的写法。看看业界是怎么实现的，之前使用过 redux，那就先从 redux 下手吧，但是，一上来就看最新版本的代码，不太适合新手学习，一方面最新版本已经发展n多年了，功能已经非常完善（代码多难懂），另一方面直接看最新的不了解这个工具是怎么设计出来的。于是就打算学习最早的发布版本 v0.2.1

先来说下我认识的一般的状态管理的基本路子：

全局只存在 唯一state，而前端不直接改变 state，而是通过 action 去改变 state

HelloWorld

一个计数器的栗子，目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
counter
├── App.js
├── Counter.js
├── actions
│   ├── CounterActions.js
│   └── index.js
├── constants
│   └── ActionTypes.js
├── dispatcher.js
└── stores
    ├── CounterStore.js
    └── index.js

actions

函数，返回一个带 type 的对象，或者返回一个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import {
  INCREMENT_COUNTER,
  DECREMENT_COUNTER
} from '../constants/ActionTypes';

export function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

export function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch(increment());
    }, 1000);
  };
}

export function decrement() {
  return {
    type: DECREMENT_COUNTER
  };
}

store

返回一个函数，参数 state 和 action，当 state 为空时返回初始值，表示初始化。根据 action 的 type 值，进行相应的做法，返回一个新的 state。

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
import {
  INCREMENT_COUNTER,
  DECREMENT_COUNTER
} from '../constants/ActionTypes';

const initialState = { counter: 0 };

function incremenent({ counter }) {
  return { counter: counter + 1 };
}

function decremenent({ counter }) {
  return { counter: counter - 1 };
}

export default function CounterStore(state, action) {
  if (!state) {
    return initialState;
  }

  switch (action.type) {
  case INCREMENT_COUNTER:
    return incremenent(state, action);
  case DECREMENT_COUNTER:
    return decremenent(state, action);
  default:
    return state;
  }
}

入口 App.js 你会发现 @provides(dispatcher) 这个奇怪的东西，在 React 里面还经常出现，装饰器。

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from 'react';
import Counter from './Counter';
import { provides } from 'redux';
import dispatcher from './dispatcher';

@provides(dispatcher)
export default class App extends Component {
  render() {
    return (
      <Counter />
    );
  }
}

Couter.js，同样，也出现 performs（方法），observes（观察者）等关键字。使用 state 直接使用 this.props 解构赋值即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import { performs, observes } from 'redux';

@performs('increment', 'decrement')
@observes('CounterStore')
export default class Counter {
  render() {
    const { increment, decrement } = this.props;
    return (
      <p>
        Clicked: {this.props.counter} times
        {' '}
        <button onClick={() => increment()}>+</button>
        {' '}
        <button onClick={() => decrement()}>-</button>
      </p>
    );
  }
}

这些关键字是早起 Redux 状态管理的关键，现在的版本应该已经不使用这种方式了。

解析

dispatcher

通过 provides 将 dispatcher 注入到 App 中，其中，dispatcher 是通过 createDispatcher 创建，并调用了 dispatcher.receive(stores, actions) 进行绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import * as stores from './stores/index';
import * as actions from './actions/index';
import { createDispatcher } from 'redux';

const dispatcher =
  module.hot && module.hot.data && module.hot.data.dispatcher ||
  createDispatcher();

dispatcher.receive(stores, actions);

module.hot.dispose(data => {
  data.dispatcher = dispatcher;
});

export default dispatcher;

receive 方法，actionCreator 将 action 进行封装，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Provide a way to receive new stores and actions
  function receive(nextStores, nextActionCreators) {
    stores = nextStores;
    actionCreators = mapValues(nextActionCreators, wrapActionCreator);

    // Merge the observers
    observers = mapValues(stores,
      (store, key) => observers[key] || []
    );

    // Dispatch to initialize stores
    if (currentTransaction) {
      updateState(committedState);
      currentTransaction.forEach(dispatch);
    } else {
      dispatch(BOOTSTRAP_STORE);
    }
  }

action 进行转化返回一个 dispatchAction 函数，如果 action 为函数，则先执行函数，把 dispatchInTransaction 作为参数传入，这样可以在 action 内部使用该函数了，否则使用 dispatchInTransaction 函数调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
// Bind action creator to the dispatcher
 function wrapActionCreator(actionCreator) {
   return function dispatchAction(...args) {
     const action = actionCreator(...args);
     if (typeof action === 'function') {
       // Async action creator
       action(dispatchInTransaction);
     } else {
       // Sync action creator
       dispatchInTransaction(action);
     }
   };
 }

dispatchInTransaction ，执行 dispatch ，计算 nextState，执行 updateState 更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  // Dispatch in the context of current transaction
  function dispatchInTransaction(action) {
    if (currentTransaction) {
      currentTransaction.push(action);
    }
    dispatch(action);
  }

// Reassign the current state on each dispatch
  function dispatch(action) {
    if (typeof action.type !== 'string') {
      throw new Error('Action type must be a string.');
    }

    const nextState = computeNextState(currentState, action);
    updateState(nextState);
  }

获取 store，也就是 CounterStore，把参数传入，获取新的 state

1
2
3
4
5
6
// To compute the next state, combine the next states of every store
function computeNextState(state, action) {
  return mapValues(stores,
    (store, key) => store(state[key], action)
  );
}

updateState 实现，计算变化的 changedKeys，执行 emitChange 进行更新。

1
2
3
4
5
6
7
8
9
10
11
12
// Update state and emit change if needed
function updateState(nextState) {
  // Swap the state
  const previousState = currentState;
  currentState = nextState;

  // Notify the observers
  const changedKeys = Object.keys(currentState).filter(key =>
    currentState[key] !== previousState[key]
  );
  emitChange(changedKeys);
}

emitChange，获取需要通知的 observers，调用通知函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Notify observers about the changed stores
  function emitChange(changedKeys) {
    if (!changedKeys.length) {
      return;
    }

    // Gather the affected observers
    const notifyObservers = [];
    changedKeys.forEach(key => {
      observers[key].forEach(o => {
        if (notifyObservers.indexOf(o) === -1) {
          notifyObservers.push(o);
        }
      });
    });

    // Emit change
    notifyObservers.forEach(o => o());
  }

这里可能有点疑问，obersevers 是什么，从哪来？往下看～

observes.js

将 组件进行装饰，构造函数中有一个

this.unobserve = this.context.observeStores(storeKeys, this.handleChange);
context 就是 dispatcher，

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
import React, { Component, PropTypes } from 'react';
import pick from 'lodash/object/pick';
import identity from 'lodash/utility/identity';

const contextTypes = {
  observeStores: PropTypes.func.isRequired
};

export default function connect(...storeKeys) {
  let mapState = identity;

  // Last argument may be a custom mapState function
  const lastIndex = storeKeys.length - 1;
  if (typeof storeKeys[lastIndex] === 'function') {
    [mapState] = storeKeys.splice(lastIndex, 1);
  }

  return function (DecoratedComponent) {
    const wrappedDisplayName =
      DecoratedComponent.displayName ||
      DecoratedComponent.name ||
      'Component';

    return class extends Component {
      static displayName = `ReduxObserves(${wrappedDisplayName})`;
      static contextTypes = contextTypes;

      constructor(props, context) {
        super(props, context);
        this.handleChange = this.handleChange.bind(this);
        this.unobserve = this.context.observeStores(storeKeys, this.handleChange);
      }
      ....

      componentWillUnmount() {
        this.unobserve();
      }

      render() {
        return (
          <DecoratedComponent {...this.props}
                              {...this.state} />
        );
      }
    };
  };
}

dispatcher observeStores 方法，将需要监听的组件传入，以及 onChange 函数，作为回调使用。最后返回一个函数，移除监听，这个也太妙了吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Provide subscription and unsubscription
  function observeStores(observedKeys, onChange) {
    // Emit the state update
    function handleChange() {
      onChange(currentState);
    }

    // Synchronously emit the initial value
    handleChange();

    // Register the observer for each relevant key
    observedKeys.forEach(key =>
      observers[key].push(handleChange)
    );

    // Let it unregister when the time comes
    return () => {
      observedKeys.forEach(key => {
        const index = observers[key].indexOf(handleChange);
        observers[key].splice(index, 1);
      });
    };
  }

当计算好 nextState 后，就会调用 observe 的 onChange 方法， onChange 方法也就是 装饰器里面的方法。最后调用自身的 updateState，使用 setState 进行组件更新。而这些 state 作为 props 传入了我们自己的组件，也就可以通过 this.props 拿到。完美～～～

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

handleChange(stateFromStores) {
  this.currentStateFromStores = pick(stateFromStores, storeKeys);
  this.updateState(stateFromStores, this.props);
}

componentWillReceiveProps(nextProps) {
  this.updateState(this.currentStateFromStores, nextProps);
}

updateState(stateFromStores, props) {
  if (storeKeys.length === 1) {
    // Just give it the particular store state for convenience
    stateFromStores = stateFromStores[storeKeys[0]];
  }

  const state = mapState(stateFromStores, props);
  if (this.state) {
    this.setState(state);
  } else {
    this.state = state;
  }
}

performs 组件

action 绑定到组件，可以通过 this.props ，通过 this.context.getActions() 拿到 actions

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
import React, { Component, PropTypes } from 'react';
import pick from 'lodash/object/pick';
import identity from 'lodash/utility/identity';

const contextTypes = {
  getActions: PropTypes.func.isRequired
};

export default function performs(...actionKeys) {
  let mapActions = identity;

  // Last argument may be a custom mapState function
  const lastIndex = actionKeys.length - 1;
  if (typeof actionKeys[lastIndex] === 'function') {
    [mapActions] = actionKeys.splice(lastIndex, 1);
  }

  return function (DecoratedComponent) {
    const wrappedDisplayName =
      DecoratedComponent.displayName ||
      DecoratedComponent.name ||
      'Component';

    return class extends Component {
      static displayName = `ReduxPerforms(${wrappedDisplayName})`;
      static contextTypes = contextTypes;

      constructor(props, context) {
        super(props, context);
        this.updateActions(props);
      }

      componentWillReceiveProps(nextProps) {
        this.updateActions(nextProps);
      }

      updateActions(props) {
        this.actions = mapActions(
          pick(this.context.getActions(), actionKeys),
          props
        );
      }

      render() {
        return (
          <DecoratedComponent {...this.props}
                              {...this.actions} />
        );
      }
    };
  };
}

到这里就差不多了～
额外收获

Lodash

  • pick

    1
    2
    3
    4
    5
    var object = { 'user': 'fred', 'age': 40 };
    _.pick(object, 'user');
    // => { 'user': 'fred' }
    _.pick(object, _.isString);
    // => { 'user': 'fred' }

  • identity

    1
    2
    3
    function identity(value) {
      return value;
    }

  • mapValues

    1
    2
    3
    4
    _.mapValues({ 'a': 1, 'b': 2 }, function(n) {
     return n * 3;
    });
    // => { 'a': 3, 'b': 6 }

最后

麻雀虽小，却能看透精髓～

]]> 这周突然想学习一下状态管理的写法。看看业界是怎么实现的，之前使用过 redux，那就先从 redux 下手吧，但是，一上来就看最新版本的代码，不太适合新手学习，一方面最新版本已经发展n多年了，功能已经非常完善（代码多难懂），另一方面直接看最新的不了解这个工具是怎么设计出来的 Node KoaJs 源码解析 https://wzes.github.io/2019/08/18/JavaScript/KoaJs/ 2019-08-18T10:56:00.000Z 2019-09-02T12:15:48.563Z 前言

又是一周过去了，常规学习不能断！但是选择什么主题呢？一时间不知道选什么好，于是又想起简单的 koajs 非常愉快的就选择他了 https://koajs.com/，了解一下？

他是个什么东西呢？

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

hello world

首先新建一个 node 项目，其实很简单，只需要一个 package.json 文件，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "koa-hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.7.0"
  }
}

然后执行

1
npm i koa

代码 index.js 文件，新建一个 koa 实例，使用 app.use 写一个 async 方法，设置 ctx.body 的值就可以了。最后使用 app.listen 启动。

1
2
3
4
5
6
7
8
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
    ctx.body = 'Hello World';
});

app.listen(3000);

这样的话，一个 web 服务器就搭建好了，访问 http://localhost:3000/ 就会得到 hello world 返回结果了。你可以尝试更改字段从而得到不同的返回结果。

源码解析

koa 的源码只有四个文件，不包含其他引用的话

1
2
3
4
5
6
7
8
9
10
 .
├── History.md
├── LICENSE
├── Readme.md
├── lib
│   ├── application.js
│   ├── context.js
│   ├── request.js
│   └── response.js
└── package.json

主入口可以在 package.json 的 main 中得到，是 application.js，暂时先知道 middleware 是中间接，通常一个请求过来就会依次执行中间件的方法。

构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module.exports = class Application extends Emitter {
  /**
   * Initialize a new `Application`.
   *
   * @api public
   */

  constructor() {
    super();

    this.proxy = false;
    this.middleware = [];
    this.subdomainOffset = 2;
    this.env = process.env.NODE_ENV || 'development';
    this.context = Object.create(context);
    this.request = Object.create(request);
    this.response = Object.create(response);
    if (util.inspect.custom) {
      this[util.inspect.custom] = this.inspect;
    }
  }
}

app.use 其实就是添加一个中间件，我们通常使用 async 的函数，generator 被抛弃了！

1
2
3
4
5
6
7
8
9
10
11
12
use(fn) {
  if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
  if (isGeneratorFunction(fn)) {
    deprecate('Support for generators will be removed in v3. ' +
              'See the documentation for examples of how to convert old middleware ' +
              'https://github.com/koajs/koa/blob/master/docs/migration.md');
    fn = convert(fn);
  }
  debug('use %s', fn._name || fn.name || '-');
  this.middleware.push(fn);
  return this;
}

app.listen 创建一个服务器，监听 3000 端口，http.createServer 是 node 的服务器。

1
2
3
4
5
listen(...args) {
  debug('listen');
  const server = http.createServer(this.callback());
  return server.listen(...args);
}

callback 是提供一个函数，所有请求都会走到这个函数里面进行处理。每次请求过来都会调用这个函数，所以，我们可以看到，每次请求都会创建一个 ctx 的对象。
compose 的作用就是将所有的中间件整合成一个函数，使用 next 函数继续调用下一个函数。

1
2
3
4
5
6
7
8
9
10
11
12
callback() {
  const fn = compose(this.middleware);

  if (!this.listenerCount('error')) this.on('error', this.onerror);

  const handleRequest = (req, res) => {
    const ctx = this.createContext(req, res);
    return this.handleRequest(ctx, fn);
  };

  return handleRequest;
}

初始化 ctx 对象，这里 this.request 将会把原生的 request 参数进行解析，方便我们进行相关参数获取。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * Initialize a new context.
 *
 * @api private
 */

createContext(req, res) {
  const context = Object.create(this.context);
  const request = context.request = Object.create(this.request);
  const response = context.response = Object.create(this.response);
  context.app = request.app = response.app = this;
  context.req = request.req = response.req = req;
  context.res = request.res = response.res = res;
  request.ctx = response.ctx = context;
  request.response = response;
  response.request = request;
  context.originalUrl = request.originalUrl = req.url;
  context.state = {};
  return context;
}

比如我们之后就可以使用
** ctx.query.key ** 来获取 http://localhost:3000?key=value，为什么可以使用 ctx.query 又可以获取参数呢，这个要靠 Object.create 的本事了，它相当于创造了一个对象，继承了原来的对象，而 this.request 有 query 的参数，而最为重要的是 this.context = Object.create(context); context 委托（使用了 Delegator）了这些 request 的相关属性和方法。【第一次体会到 js 委托，以前知识听说不知道是啥】

1
2
3
4
5
6
7
8
9
10
/**
 * Request delegation.
 */

delegate(proto, 'request')
  .access('method')
  .access('query')
  .access('path')
  .access('url')
  ....... // 省略

handleRequest 请求处理，fnMiddleware 就是所有的中间件，

1
2
3
4
5
6
7
8
handleRequest(ctx, fnMiddleware) {
  const res = ctx.res;
  res.statusCode = 404;
  const onerror = err => ctx.onerror(err);
  const handleResponse = () => respond(ctx);
  onFinished(res, onerror);
  return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}

调用完中间件以后，就执行 handleResponse 将数据返回，返回数据也就是将 ctx.body 拿出来，使用 response.end 返回数据，返回时，会对数据进行处理，在最后面可以体会到～

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
/**
 * Response helper.
 */

function respond(ctx) {
  // allow bypassing koa
  if (false === ctx.respond) return;

  if (!ctx.writable) return;

  const res = ctx.res;
  let body = ctx.body;
  const code = ctx.status;

  // ignore body
  if (statuses.empty[code]) {
    // strip headers
    ctx.body = null;
    return res.end();
  }

  if ('HEAD' == ctx.method) {
    if (!res.headersSent && isJSON(body)) {
      ctx.length = Buffer.byteLength(JSON.stringify(body));
    }
    return res.end();
  }

  // status body
  if (null == body) {
    if (ctx.req.httpVersionMajor >= 2) {
      body = String(code);
    } else {
      body = ctx.message || String(code);
    }
    if (!res.headersSent) {
      ctx.type = 'text';
      ctx.length = Buffer.byteLength(body);
    }
    return res.end(body);
  }

  // responses
  if (Buffer.isBuffer(body)) return res.end(body);
  if ('string' == typeof body) return res.end(body);
  if (body instanceof Stream) return body.pipe(res);

  // body: json
  body = JSON.stringify(body);
  if (!res.headersSent) {
    ctx.length = Buffer.byteLength(body);
  }
  res.end(body);
}

到这里，基本的请求已经清楚了～～

End

再来看一眼最简单的 http server 代码，对比一下，比 koa 代码的 hello world 相比并没有多复杂

1
2
3
4
5
6
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.write('Hello World!');
  res.end();
}).listen(8080);

但是，获取参数，使用路由等等插件，koa 生态做了很多，非常方便，快来体验吧！

]]> 又是一周过去了，常规学习不能断！但是选择什么主题呢？一时间不知道选什么好，于是又想起简单的 koajs 非常愉快的就选择他了，了解一下？ Android 一个滑动组件的原理浅析 https://wzes.github.io/2019/08/11/Android/一个滑动组件的原理浅析/ 2019-08-11T06:47:16.000Z 2019-09-02T12:19:37.016Z 前言

一个好的滑动不止能够响应手指的移动，而且还能响应 Fling（抛） 事件，响应手指的移动比较简单，手指移动多少距离，布局就移动多少距离；当快速滑动时，手指离开后，不能马上停止滑动，而是应该计算手指的移动速度，产生一个【抛】（Fling ）的动作，让内容继续滚动一段距离。这才是好的滑动组件。那么其中具体的设计究竟是如何呢，今天就来分析一波，借鉴 Android OverScroller 的实现。

Demo

1
2
3
4
5
6
7
8
if (mOverScroller.computeScrollOffset()) {
      // 获取 scrollY
     int y = mOverScroller.getCurrY();
     // 此处省略一堆控制滚动的代码
     .....
     // 更新
    postInvalidate();
}

解析

总体逻辑先梳理下，首先内容跟随手指移动而【移动】，手指离开时产生一个 【速度】，根据这个速度计算一个，此次滑动的【总时间】和【总距离】，之后可以计算每一个【时刻】对应的【位置】。那其中时刻与距离的对应关系是如何呢？看了一下 Android 的源码，计算关系之复杂，惨绝人寰，欲研又止！但这不重要，重要的是掌握全局。
一起来欣赏一下代码吧

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
/*
         * Update the current position and velocity for current time. Returns
         * true if update has been done and false if animation duration has been
         * reached.
         */
        boolean update() {
            final long time = AnimationUtils.currentAnimationTimeMillis();
            final long currentTime = time - mStartTime;

            if (currentTime == 0) {
                // Skip work but report that we're still going if we have a nonzero duration.
                return mDuration > 0;
            }
            if (currentTime > mDuration) {
                return false;
            }

            double distance = 0.0;
            switch (mState) {
                case SPLINE: {
                    final float t = (float) currentTime / mSplineDuration;
                    final int index = (int) (NB_SAMPLES * t);
                    float distanceCoef = 1.f;
                    float velocityCoef = 0.f;
                    if (index < NB_SAMPLES) {
                        final float t_inf = (float) index / NB_SAMPLES;
                        final float t_sup = (float) (index + 1) / NB_SAMPLES;
                        final float d_inf = SPLINE_POSITION[index];
                        final float d_sup = SPLINE_POSITION[index + 1];
                        velocityCoef = (d_sup - d_inf) / (t_sup - t_inf);
                        distanceCoef = d_inf + (t - t_inf) * velocityCoef;
                    }

                    distance = distanceCoef * mSplineDistance;
                    mCurrVelocity = velocityCoef * mSplineDistance / mSplineDuration * 1000.0f;
                    break;
                }

                case BALLISTIC: {
                    final float t = currentTime / 1000.0f;
                    mCurrVelocity = mVelocity + mDeceleration * t;
                    distance = mVelocity * t + mDeceleration * t * t / 2.0f;
                    break;
                }
                .....
            }

            mCurrentPosition = mStart + (int) Math.round(distance);

            return true;
        }

mCurrentPosition 就是某个时刻对应的位置，有趣的是 BALLISTIC 模式，还记得高中物理的重力加速度时间与距离的公式吗？是不是似曾相识？这算比较简单的公式，但我们今天但主角是 SPLINE 模式，ScrollView 但滑动正是使用了这个模式进行滑动，体验非常好！！！！公式有点复杂，就不洗洗研究了，喜欢的同学自行研究吧

总结

简单一个滚动，蕴藏的道理生不可测，一不小心就出现了物理知识点…学习还是挺有用的吧

]]> 一个好的滑动不止能够响应手指的移动，而且还能响应 Fling（抛） 事件，响应手指的移动比较简单，手指移动多少距离，布局就移动多少距离；当快速滑动时，手指离开后，不能马上停止滑动，而是应该计算手指的移动速度，产生一个【抛】（Fling ）的动作，让内容继续滚动一段距离 JavaScript Babel-Loader 自定义入门 https://wzes.github.io/2019/08/04/JavaScript/Babel Loader/ 2019-08-04T05:42:00.000Z 2019-09-02T12:14:06.673Z 前言

突然觉得 babel-loader https://github.com/babel/babel-loader 很好玩，比较贴近AST，然而编译原理一直是噩梦，没学懂，好在这东西不需要什么编译原理的知识。但还是涉及到语法解析等操作，所以拿过来学一学还是挺好的。

什么是 Babel

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 代码转换为当前和旧版浏览器或环境中的向后兼容版本的 JavaScript。 以下是 Babel 可以为您做的主要事情：

  • 转换语法
  • 目标环境中缺少Polyfill功能（通过@ babel / polyfill）源代码转换（codemods）
  • 更多
1
2
3
4
5
6
7
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

代码转化就涉及到了语法解析，这便是我们的重点

自定义

首先新建一个项目 webpack 项目 babel-demo
目录结构如下

1
2
3
4
5
6
7
8
9
10
11
.
├── README.md
├── babel-plugin-transform-class
│   └── index.js
├── dist
│   └── bundle.js
├── package-lock.json
├── package.json
├── src
│   └── index.js
└── webpack.config.js

新建 package.json 并使用 npm install 安装所需插件

1
npm install -D babel-loader @babel/core @babel/preset-env webpack

package.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  "scripts": {
    "start": "webpack"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "webpack": "^4.39.1"
  }
}

新建 webpack 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          plugins: [
            "transform-class"
          ]
        }
      }
    ]
  }
}

module 里面的 rule 便是配置我们自定义的 babel 插件，transform-class 是插件名。

手写插件

下面是一个简单的插件
babel-plugin-transform-class/index.js

1
2
3
4
5
6
7
8
9
10
11
// A plugin is just a function
module.exports = function ({ types: t }) {
  return {
      visitor: {
          Identifier(path) {
            let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
            path.node.name = name.split('').reverse().join('');
          }
      }
  };
}

将 babel-plugin-transform-class 文件夹移动到 node-modules 目录下即可。当运行 webpack 的时候，便会运行这个插件，这个插件会把 node 的 name 做反转。

我们的 demo

1
2
3
4
function babel() {
  let javascript = 'hello babel';
  console.log(javascript);
}

打包后

1
eval("function lebab() {\n  let tpircsavaj = 'hello babel';\n  elosnoc.gol(tpircsavaj);\n}\n\n//# sourceURL=webpack:///./src/index.js?");

我们看到变量名都反转了。

我们还可以实现更多·····更多属性，方法在这里 https://babeljs.io/docs/en/next/babel-types.html

参考

AST https://astexplorer.net/

]]> 突然觉得 babel-loader 很好玩，比较贴近AST，然而编译原理一直是噩梦，没学懂，好在这东西不需要什么编译原理的知识。但还是涉及到语法解析等操作，所以拿过来学一学还是挺好的 React Lazyload 源码解析 https://wzes.github.io/2019/07/28/JavaScript/React Lazyload/ 2019-07-28T03:59:00.000Z 2019-09-02T12:17:04.380Z 前言

早在多年前，lazyload 已经出现了，懒加载在前端里边同样具有十分重要的意义。react-lazyload 的作用是当组件未出现在屏幕内时，不去挂载该组件，而是使用 placeholder 去渲染，让滚动使内容出现后，组件会被挂载。就是这么简单！例如，一个复杂的组件（非首屏内容），使用了懒加载后，渲染首屏就会节省很多资源，从而减少首屏渲染时间。

Demo

源码地址 react-lazyload
Demo地址 Demo

HelloWorld

将需要懒加载的组件使用 LazyLoad 包裹即可，最好使用 height 进行站位，否则该组件位置将会为 0

1
2
3
4
5
6
7
<LazyLoad height={200}>
    <img src="tiger.jpg" /> /*
                              Lazy loading images is supported out of box,
                              no extra config needed, set `height` for better
                              experience
                             */
  </LazyLoad>

解析

从源码角度分析～

一览核心

本小节摘取了最核心的代码，目的在于对 LazyLoad 组件有个最核心的认识，它的核心就是监听滚动事件，检查组件是否在屏幕内，如果在的话就显示，不在的话就不显示～

1
2
3
4
5
6
7
8
9
10
11
12
13
class LazyLoad extends Component {
  componentDidMount() {
   on(scrollport, 'scroll', finalLazyLoadHandler, passiveEvent);
  }

  render() {
    return this.visible ?
           this.props.children :
             this.props.placeholder ?
                this.props.placeholder :
                <div style={{ height: this.props.height }} className="lazyload-placeholder" ref={this.setRef} />;
  }
}

LazyLoad 的属性，透过属性，我们可以知道它大概有些什么功能。

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
LazyLoad.propTypes = {
  once: PropTypes.bool,
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  offset: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
  overflow: PropTypes.bool, // 不是 window 滚动，而使用了 overflow: scroll 
  resize: PropTypes.bool, // 是否监听 resize
  scroll: PropTypes.bool, // 是否监听滚动
  children: PropTypes.node,
  throttle: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
  debounce: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
  placeholder: PropTypes.node,
  scrollContainer: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  unmountIfInvisible: PropTypes.bool,
  preventLoading: PropTypes.bool
};
// 默认值
LazyLoad.defaultProps = {
  once: false,
  offset: 0,
  overflow: false,
  resize: false,
  scroll: true,
  unmountIfInvisible: false,
  preventLoading: false,
};

完整的 componentDidMount，scrollport 是滚动试图，默认是 window，如果 props 传入了 scrollContainer，那么滚动试图将是自定义的。needResetFinalLazyLoadHandler 是控制是否重置滚动监听。debounce 和 throttle 分别是用来控制滚动事件的监听触发频率，默认都是 undefine，needResetFinalLazyLoadHandler 初始值为 false。finalLazyLoadHandler 初始值也为 undefine，而 overflow 也为 false，scroll 为 true，listeners 是需要懒加载的组件集合，初始大小肯定为0，componentDidMount 最后才会进行添加，因此最终会走到 **on(scrollport, ‘scroll’, finalLazyLoadHandler, passiveEvent)，事件只需要一次绑定即可。
**

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
componentDidMount() {
    // It's unlikely to change delay type on the fly, this is mainly
    // designed for tests
    let scrollport = window;
    const {
      scrollContainer,
    } = this.props;
    if (scrollContainer) {
      if (isString(scrollContainer)) {
        scrollport = scrollport.document.querySelector(scrollContainer);
      }
    }
    const needResetFinalLazyLoadHandler = (this.props.debounce !== undefined && delayType === 'throttle')
      || (delayType === 'debounce' && this.props.debounce === undefined);

    if (needResetFinalLazyLoadHandler) {
      off(scrollport, 'scroll', finalLazyLoadHandler, passiveEvent);
      off(window, 'resize', finalLazyLoadHandler, passiveEvent);
      finalLazyLoadHandler = null;
    }

    if (!finalLazyLoadHandler) {
      if (this.props.debounce !== undefined) {
        finalLazyLoadHandler = debounce(lazyLoadHandler, typeof this.props.debounce === 'number' ?
                                                         this.props.debounce :
                                                         300);
        delayType = 'debounce';
      } else if (this.props.throttle !== undefined) {
        finalLazyLoadHandler = throttle(lazyLoadHandler, typeof this.props.throttle === 'number' ?
                                                         this.props.throttle :
                                                         300);
        delayType = 'throttle';
      } else {
        finalLazyLoadHandler = lazyLoadHandler;
      }
    }

    if (this.props.overflow) {
      const parent = scrollParent(this.ref);
      if (parent && typeof parent.getAttribute === 'function') {
        const listenerCount = 1 + (+parent.getAttribute(LISTEN_FLAG));
        if (listenerCount === 1) {
          parent.addEventListener('scroll', finalLazyLoadHandler, passiveEvent);
        }
        parent.setAttribute(LISTEN_FLAG, listenerCount);
      }
    } else if (listeners.length === 0 || needResetFinalLazyLoadHandler) {
      const { scroll, resize } = this.props;

      if (scroll) {
        on(scrollport, 'scroll', finalLazyLoadHandler, passiveEvent);
      }

      if (resize) {
        on(window, 'resize', finalLazyLoadHandler, passiveEvent);
      }
    }

    listeners.push(this);
    checkVisible(this);
  }

通常 finalLazyLoadHandler 就是 lazyLoadHandler，不会对滚动事件进行 debounce 或 throttle，我们一般为了性能，会使用 throttle 进行处理。函数会对每一个懒加载组件进行 checkVisible，之后会移除 once component

1
2
3
4
5
6
7
8
const lazyLoadHandler = () => {
  for (let i = 0; i < listeners.length; ++i) {
    const listener = listeners[i];
    checkVisible(listener);
  }
  // Remove `once` component in listeners
  purgePending();
};

checkVisible，检查组件是否出现在 viewport 中，如果出现了就吧 visible 设置为 true，当然如果设置了 unmountIfInvisible = true，那么不可见时组件将被移除，如果之前已经渲染了，需要避免再次渲染。

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
const checkVisible = function checkVisible(component) {
  const node = component.ref;
  if (!(node instanceof HTMLElement)) {
    return;
  }

  const parent = scrollParent(node);
  const isOverflow = component.props.overflow &&
                     parent !== node.ownerDocument &&
                     parent !== document &&
                     parent !== document.documentElement;
  const visible = isOverflow ?
                  checkOverflowVisible(component, parent) :
                  checkNormalVisible(component);
  if (visible) {
    // Avoid extra render if previously is visible
    if (!component.visible && !component.preventLoading) {
      if (component.props.once) {
        pending.push(component);
      }

      component.visible = true;
      component.forceUpdate();
    }
  } else if (!(component.props.once && component.visible)) {
    component.visible = false;
    if (component.props.unmountIfInvisible) {
      component.forceUpdate();
    }
  }
};

checkNormalVisible 检查组件是否 visible 的函数，判断组件的getgetBoundingClientRect 的 top - offset（相对于屏幕顶部的距离） 与 window 的 height 之间的关系

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
const checkNormalVisible = function checkNormalVisible(component) {
  const node = component.ref;

  // If this element is hidden by css rules somehow, it's definitely invisible
  if (!(node.offsetWidth || node.offsetHeight || node.getClientRects().length)) return false;

  let top;
  let elementHeight;

  try {
    // 这个语法 node 也是支持的
    ({ top, height: elementHeight } = node.getBoundingClientRect());
  } catch (e) {
    ({ top, height: elementHeight } = defaultBoundingClientRect);
  }

  const windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;

  const offsets = Array.isArray(component.props.offset) ?
                component.props.offset :
                [component.props.offset, component.props.offset]; // Be compatible with previous API

  return (top - offsets[0] <= windowInnerHeight) &&
         (top + elementHeight + offsets[1] >= 0);
};
1
2
(top - offsets[0] <= windowInnerHeight) &&
         (top + elementHeight + offsets[1] >= 0);

一张图解析！
check visible example
到这里解析的差不多了

欣赏一下 throttle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last && now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

再欣赏一下 debounce

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
export default function debounce(func, wait, immediate) {
  let timeout;
  let args;
  let context;
  let timestamp;
  let result;

  const later = function later() {
    const last = +(new Date()) - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) {
          context = null;
          args = null;
        }
      }
    }
  };

  return function debounced() {
    context = this;
    args = arguments;
    timestamp = +(new Date());

    const callNow = immediate && !timeout;
    if (!timeout) {
      timeout = setTimeout(later, wait);
    }

    if (callNow) {
      result = func.apply(context, args);
      context = null;
      args = null;
    }

    return result;
  };
}

获取 scrollParent

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
export default (node) => {
  if (!(node instanceof HTMLElement)) {
    return document.documentElement;
  }

  const excludeStaticParent = node.style.position === 'absolute';
  const overflowRegex = /(scroll|auto)/;
  let parent = node;

  while (parent) {
    if (!parent.parentNode) {
      return node.ownerDocument || document.documentElement;
    }

    const style = window.getComputedStyle(parent);
    const position = style.position;
    const overflow = style.overflow;
    const overflowX = style['overflow-x'];
    const overflowY = style['overflow-y'];

    if (position === 'static' && excludeStaticParent) {
      parent = parent.parentNode;
      continue;
    }

    if (overflowRegex.test(overflow) && overflowRegex.test(overflowX) && overflowRegex.test(overflowY)) {
      return parent;
    }

    parent = parent.parentNode;
  }

  return node.ownerDocument || node.documentElement || document.documentElement;
};

总结思考

我们可以看到，Lazyload 并不能实现类似客户端的图片懒加载，Lazyload 加载图片也会出现白屏时间，解决办法是使用 image.onload，当图片资源请求关闭后，再显示图片，就可以做到类似客户端的效果。

]]> 早在多年前，lazyload 已经出现了，懒加载在前端里边同样具有十分重要的意义。react-lazyload 的作用是当组件未出现在屏幕内时，不去挂载该组件，而是使用 placeholder 去渲染，让滚动使内容出现后，组件会被挂载。就是这么简单！ JavaScript Swipe-js-ios 源码解析 https://wzes.github.io/2019/07/20/JavaScript/Swipe-js-ios/ 2019-07-20T06:38:00.000Z 2019-09-02T12:16:32.909Z 前言

Swipe，常用来做轮播图，需要翻页的场景，最经典的开源库 swipe-js-iso ，不过更推荐使用 React 组件 react-swipe，它封装了 swipe-js-ios 组件，而 swipe-js-ios 组件则封装了 Swipe

HelloWord

ReactSwipe

如果单独使用的化，创建一个 swipe，dom 必须是三层结构，最里面一层是放 slide 的。

1
2
3
4
5
6
7
<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS 子元素 float: left; container 的宽度为自定义，swipe-wrap 的宽度为子页面数 * container 的 width，每一个 slide 的宽度为 container 的 width

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
}

load 以后，创建 Swipe 即可

1
const mySwipe = Swipe(document.getElementById('slider'));

源码解析

swipe-js-ios 使用立即函数导出了一个 Swipe 模块，使用 typeof module !== ‘undefined’ && module.exports 兼容 Node 和 浏览器环境，如果是 Node 环境，将会有 module.export 那么则使用 module.export 导出，否则使用 root.Swipe 全局变量导出

1
2
3
4
5
6
7
8
9
10
11
12
(function(root, factory) {
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = factory();
  } else {
    root.Swipe = factory();
  }
})(this, function() {
  'use strict';
  return function Swipe(container, options) {
        ....
  };
});

检查浏览器的环境，算是一种规范吧，风别检查触摸事件和 transition 的支持
⚠️在浏览器，手机模式下，触摸事件是存在的，而普通浏览器下是不存在的，所以该组件不能在普通浏览器中使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var browser = {
      addEventListener: !!window.addEventListener,
      touch:
        'ontouchstart' in window ||
        (window.DocumentTouch && document instanceof window.DocumentTouch),
      transitions: (function(temp) {
        var props = [
          'transitionProperty',
          'WebkitTransition',
          'MozTransition',
          'OTransition',
          'msTransition'
        ];
        for (var i in props)
          if (temp.style[props[i]] !== undefined) return true;
        return false;
      })(document.createElement('swipe'))
    };

创建时会调用 setup，继而添加事件，touch 触摸事件、transitionend 移动事件，resize 重新布局事件

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
// trigger setup
setup();

// start auto slideshow if applicable
if (delay) begin();

// add event listeners
if (browser.addEventListener) {
  // set touchstart event on element
  if (browser.touch) {
    element.addEventListener('touchstart', events, false);
    element.addEventListener('touchforcechange', function() {}, false);
  }

  if (browser.transitions) {
    element.addEventListener('webkitTransitionEnd', events, false);
    element.addEventListener('msTransitionEnd', events, false);
    element.addEventListener('oTransitionEnd', events, false);
    element.addEventListener('otransitionend', events, false);
    element.addEventListener('transitionend', events, false);
  }

  // set resize event on window
  window.addEventListener('resize', events, false);
} else {
  window.onresize = function() {
    setup();
  }; // to play nice with old IE
}

setup 函数的实现，slides 就是容器里面的页面，continuous 是否自动轮播，slidePos 记录了每一个页面的位置，width 是每一个页面的宽度，此处需要剪掉widthOfSiblingSlidePreview 的大小，可以预览前后页。element 的宽度是 **页数 * width **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function setup() {
      // cache slides
      slides = element.children;
      length = slides.length;

      // set continuous to false if only one slide
      continuous = slides.length < 2 ? false : options.continuous;

      // create an array to store current positions of each slide
      slidePos = new Array(slides.length);

      // determine width of each slide
      width =
        Math.round(
          container.getBoundingClientRect().width || container.offsetWidth
        ) -
        widthOfSiblingSlidePreview * 2;

      element.style.width = slides.length * width + 'px';
    }

初始化时，需要更新页面的位置

1
2
3
4
5
6
7
8
9
10
11
12
var pos = slides.length;
while (pos--) {
  var slide = slides[pos];

  slide.style.width = width + 'px';
  slide.setAttribute('data-index', pos);

  if (browser.transitions) {
    slide.style.left = pos * -width + widthOfSiblingSlidePreview + 'px';
    move(pos, index > pos ? -width : index < pos ? width : 0, 0);
  }
}

如果支持轮播的化，需要把左边和右边也填充，然后把 container.style.visibility 设置为 visible，如果不支持 transition 的话，只需要设置 element.style.left 即可

1
2
3
4
5
6
7
8
9
10
// reposition elements before and after index
    if (continuous && browser.transitions) {
      move(circle(index - 1), -width, 0);
      move(circle(index + 1), width, 0);
    }

    if (!browser.transitions)
      element.style.left = index * -width + widthOfSiblingSlidePreview + 'px';

    container.style.visibility = 'visible';

move 的实现，translate，更新 slidePos 的位置

1
2
3
4
function move(index, dist, speed) {
  translate(index, dist, speed);
  slidePos[index] = dist;
}

translate 三个参数，index：需要移动的页，dist：移动的位置，speed：移动速度，移动只需要给 页面设置 style 的 transform 就OK了，之后就会以动画移动过去了

1
2
3
4
5
6
7
8
9
10
11
12
13
function translate(index, dist, speed) {
      var slide = slides[index];
      var style = slide && slide.style;

      if (!style) return;

      style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration =
        speed + 'ms';

      style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
      style.msTransform = style.MozTransform = style.OTransform =
        'translateX(' + dist + 'px)';
    }

prev 对外提供接口，手动翻页使用

1
2
3
4
function prev() {
   if (continuous) slide(index - 1);
   else if (index) slide(index - 1);
}

slide 移动函数，指定移动的页 index 和速度

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
function slide(to, slideSpeed) {
      // do nothing if already on requested slide
      if (index == to) return;

      if (browser.transitions) {
        var direction = Math.abs(index - to) / (index - to); // 1: backward, -1: forward

        // get the actual position of the slide
        if (continuous) {
          var natural_direction = direction;
          direction = -slidePos[circle(to)] / width;

          // if going forward but to < index, use to = slides.length + to
          // if going backward but to > index, use to = -slides.length + to
          if (direction !== natural_direction)
            to = -direction * slides.length + to;
        }

        var diff = Math.abs(index - to) - 1;

        // move all the slides between index and to in the right direction
        while (diff--)
          move(
            circle((to > index ? to : index) - diff - 1),
            width * direction,
            0
          );

        to = circle(to);

        move(index, width * direction, slideSpeed || speed);
        move(to, 0, slideSpeed || speed);

        if (continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place
      } else {
        to = circle(to); 
        animate(index * -width, to * -width, slideSpeed || speed);
        //no fallback for a circular continuous if the browser does not accept transitions
      }

      index = to;
      offloadFn(options.callback && options.callback(index, slides[index]));
    }

如果浏览器不支持 transition，那么则使用 setInterval 实现渐进移动， animation 是对整个页面进行移动，而 move 是移动每一个子页面

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
function animate(from, to, speed) {
      // if not an animation, just reposition
      if (!speed) {
        element.style.left = to + 'px';
        return;
      }

      var start = +new Date();

      var timer = setInterval(function() {
        var timeElap = +new Date() - start;

        if (timeElap > speed) {
          element.style.left = to + 'px';

          if (delay) begin();

          options.transitionEnd &&
            options.transitionEnd.call(event, index, slides[index]);

          clearInterval(timer);
          return;
        }

        element.style.left =
          (to - from) * (Math.floor((timeElap / speed) * 100) / 100) +
          from +
          'px';
      }, 4);
    }

接下来研究一下触摸事件的处理，首先是 start，start 事件会记录起始触摸位置以及时间，并且添加 touchmove 和 touchend 事件，如果没有 start 事件，触摸事件是不存在的， end 的时候会被移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
start: function(event) {
        var touches = event.touches[0];

        // measure start values
        start = {
          // get initial touch coords
          x: touches.pageX,
          y: touches.pageY,

          // store time to determine touch duration
          time: +new Date()
        };

        // used for testing first move event
        isScrolling = undefined;

        // reset delta and end measurements
        delta = {};

        // attach touchmove and touchend listeners
        element.addEventListener('touchmove', this, false);
        element.addEventListener('touchend', this, false);
      },

move 事件，delta 将手指移动距离记下，最后视同 translate 移动

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
move: function(event) {
       // ensure swiping with one touch and not pinching
       if (event.touches.length > 1 || (event.scale && event.scale !== 1))
         return;

       if (options.disableScroll) return;

       var touches = event.touches[0];

       // measure change in x and y
       delta = {
         x: touches.pageX - start.x,
         y: touches.pageY - start.y
       };

       // determine if scrolling test has run - one time test
       if (typeof isScrolling == 'undefined') {
         isScrolling = !!(
           isScrolling || Math.abs(delta.x) < Math.abs(delta.y)
         );
       }

       // if user is not trying to scroll vertically
       if (!isScrolling) {
         // prevent native scrolling
         event.preventDefault();

         // stop slideshow
         stop();

         // increase resistance if first or last slide
         if (continuous) {
           // we don't add resistance at the end

           translate(
             circle(index - 1),
             delta.x + slidePos[circle(index - 1)],
             0
           );
           translate(index, delta.x + slidePos[index], 0);
           translate(
             circle(index + 1),
             delta.x + slidePos[circle(index + 1)],
             0
           );
         } else {
           delta.x =
             delta.x /
             ((!index && delta.x > 0) || // if first slide and sliding left
             (index == slides.length - 1 && // or if last slide and sliding right
               delta.x < 0) // and if sliding at all
               ? Math.abs(delta.x) / width + 1 // determine resistance level
               : 1); // no resistance if false

           // translate 1:1
           translate(index - 1, delta.x + slidePos[index - 1], 0);
           translate(index, delta.x + slidePos[index], 0);
           translate(index + 1, delta.x + slidePos[index + 1], 0);
         }
         options.swiping && options.swiping(-delta.x / width);
       }
     },

end 事件，主要判断本次触摸滑动是否有效，并持续接下来的操作，最后将会 remove 掉监听事件。

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
end: function(event) {
        // measure duration
        var duration = +new Date() - start.time;

        // determine if slide attempt triggers next/prev slide
        var isValidSlide =
          (Number(duration) < 250 && // if slide duration is less than 250ms
            Math.abs(delta.x) > 20) || // and if slide amt is greater than 20px
          Math.abs(delta.x) > width / 2; // or if slide amt is greater than half the width

        // determine if slide attempt is past start and end
        var isPastBounds =
          (!index && delta.x > 0) || // if first slide and slide amt is greater than 0
          (index == slides.length - 1 && delta.x < 0); // or if last slide and slide amt is less than 0

        if (continuous) isPastBounds = false;

        // determine direction of swipe (true:right, false:left)
        var direction = delta.x < 0;

        // if not scrolling vertically
        if (!isScrolling) {
          if (isValidSlide && !isPastBounds) {
            if (direction) {
              if (continuous) {
                // we need to get the next in this direction in place

                move(circle(index - 1), -width, 0);
                move(circle(index + 2), width, 0);
              } else {
                move(index - 1, -width, 0);
              }

              move(index, slidePos[index] - width, speed);
              move(
                circle(index + 1),
                slidePos[circle(index + 1)] - width,
                speed
              );
              index = circle(index + 1);
            } else {
              if (continuous) {
                // we need to get the next in this direction in place

                move(circle(index + 1), width, 0);
                move(circle(index - 2), -width, 0);
              } else {
                move(index + 1, width, 0);
              }

              move(index, slidePos[index] + width, speed);
              move(
                circle(index - 1),
                slidePos[circle(index - 1)] + width,
                speed
              );
              index = circle(index - 1);
            }

            options.callback && options.callback(index, slides[index]);
          } else {
            if (continuous) {
              move(circle(index - 1), -width, speed);
              move(index, 0, speed);
              move(circle(index + 1), width, speed);
            } else {
              move(index - 1, -width, speed);
              move(index, 0, speed);
              move(index + 1, width, speed);
            }
          }
        }

        // kill touchmove and touchend event listeners until touchstart called again
        element.removeEventListener('touchmove', events, false);
        element.removeEventListener('touchend', events, false);
        element.removeEventListener('touchforcechange', function() {}, false);
      },

总结

总的来说，swipe-js-ios 充分利用了 transition，来实现移动动画，搞清楚触摸事件就比较容易能写出来可滑动的 swipe

]]> Swipe，常用来做轮播图，需要翻页的场景，最经典的开源库 [swipe-js-iso]，不过更推荐使用 React 组件 [react-swipe]，它封装了 swipe-js-ios 组件，而 swipe-js-ios 组件则封装了 [Swipe] JavaScript Webpack 源码解析 https://wzes.github.io/2019/07/13/JavaScript/Webpack/ 2019-07-13T11:59:16.000Z 2019-09-02T12:17:16.955Z 前言

算是一个h5开发了，虽然没写过什么完整的前端页面，但接触前端也有段时间了，对于一个合格的前端开发者而言，搞懂 webpack 打包原理还是比较重要的

hello world

使用 commonjs 规范，lib.js 只导出一个方法

1
2
3
4
// lib.js
module.exports = function () {
    return "hello webpack!"
}

index.js 使用 require 引入，代码很简单，输入方法返回值

1
2
3
4
5
6
// index.js
const func = require("./lib")

const result = func()
// print hello
console.log(result)
目录结构
1
2
3
4
5
6
7
8
9
10
.
├── dist
│   └── main.js
├── package-lock.json
├── package.json
├── node_modules
├── src
│   ├── index.js
│   └── lib.js
└── webpack.config.js
webpack.config.js

为了方便看生成的源码，我们将 mode 设置为 development，

1
2
3
4
5
6
7
8
9
10
11
var path = require('path');

module.exports = {
    context: path.resolve(__dirname, './'),
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    }
};
package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5"
  },
  "dependencies": {}
}
编译运行
1
2
npm run build
node dist/main.js
输出
1
2
$ node dist/main.js 
hello webpack!

起源

浏览器，node 并不支持模块化，我们在项目中使用的 require、export 将会经过 webpack 后，这些 js 就会被打包整合成一个 js 文件，只需要运行 js 文件，整个模块将会运行起来了。

main.js 解析

整个文件只有 111 行，这是未经过压缩的版本，生产环境下的输出文件比这还要精简，只需要在 webpack.config.js 中将 mode 值等于 production 即可改变打包环境

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("// index.js\nconst func = __webpack_require__(/*! ./lib */ \"./src/lib.js\")\n\nconst result = func()\n// print hello\nconsole.log(result)\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ }),

/***/ "./src/lib.js":
/*!********************!*\
  !*** ./src/lib.js ***!
  \********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("module.exports = function () {\n    return \"hello webpack!\"\n}\n\n//# sourceURL=webpack:///./src/lib.js?");

/***/ })

/******/ });

我们先将此文件的主要部分拿出来看

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
/******/
(function (modules) {
    var installedModules = {}

    function __webpack_require__ (moduleId) {
        if (installedModules[moduleId]) {
            return installedModules[moduleId].exports
        }
        var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}

        }
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
        module.l = true
        return module.exports
    }

    return __webpack_require__(__webpack_require__.s = './src/index.js')
})
({
    './src/index.js':
        (function (module, exports, __webpack_require__) {
            eval(
                '// index.js\nconst func = __webpack_require__(/*! ./lib */ "./src/lib.js")\n\nconst result = func()\n// print hello\nconsole.log(result)\n\n//# sourceURL=webpack:///./src/index.js?')
        }),
    './src/lib.js':
        (function (module, exports) {
            eval(
                'module.exports = function () {\n    return "hello webpack!"\n}\n\n//# sourceURL=webpack:///./src/lib.js?')
        })
})

这是一个立即执行函数，首先申明了 installedModules 对象，这是已安装的模块集合，之后定义了一个函数 webpack_require ，此函数用来获取模块的引用，最后 return 了此函数，参数为入口，moduleId = ‘./src/index.js’
modules 即为

1
2
3
4
5
6
7
8
9
10
11
12
{
    './src/index.js':
        (function (module, exports, __webpack_require__) {
            eval(
                '// index.js\nconst func = __webpack_require__(/*! ./lib */ "./src/lib.js")\n\nconst result = func()\n// print hello\nconsole.log(result)\n\n//# sourceURL=webpack:///./src/index.js?')
        }),
    './src/lib.js':
        (function (module, exports) {
            eval(
                'module.exports = function () {\n    return "hello webpack!"\n}\n\n//# sourceURL=webpack:///./src/lib.js?')
        })
}
1
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)

module 即模块，modules[moduleId] 即为

1
2
3
4
(function (module, exports, __webpack_require__) {
           eval(
               '// index.js\nconst func = __webpack_require__(/*! ./lib */ "./src/lib.js")\n\nconst result = func()\n// print hello\nconsole.log(result)\n\n//# sourceURL=webpack:///./src/index.js?')
       })

module.exports 为 this 上下文环境，该函数执行中，第一行即调用

1
const func = __webpack_require__("./src/lib.js")

webpack_require("./src/lib.js") 即调用了此函数

1
2
3
4
(function (module, exports) {
            eval(
                'module.exports = function () {\n    return "hello webpack!"\n}\n\n//# sourceURL=webpack:///./src/lib.js?')
        })

最后返回 module.exports 即 lib 里面的导出函数。再往后执行便是

1
2
3
const result = func()
// print hello
console.log(result)

此刻基本已经将关系理顺了，此后如果在调用模块，则世界从 installedModules 中直接返回。

总结

此文只是分析了简单的模块引用，需要仔细分析才能融会贯通。

]]> 算是一个h5开发了，虽然没写过什么完整的前端页面，但接触前端也有段时间了，对于一个合格的前端开发者而言，搞懂 webpack 打包原理还是比较重要的 Android PageTransformer 源码解析 https://wzes.github.io/2019/07/05/Android/PageTransformer/ 2019-07-05T12:35:00.000Z 2019-09-02T12:19:17.763Z 前言

作为一个很久没写过 Android 业务的人，心里有点慌了，于是拿起 Android Studio，还是找点东西学习一下，并且记录一下。一直觉得 ViewPager 是个好东西，偶然间看到一些很好的案例，很酷炫的翻页效果。直到了解了这个东西的实现原来没有想象中的那么复杂，但如果没有深刻理解，还是很难写出酷炫的效果的。于是， ViewPager Transformer 的学习就提上了日程。

Hello World

首先我们来实现一个场景，很简单，只需要一个 ViewPager，然后给他设置几页用来展现效果就行了

Layout 文件

只需要放入一个 ViewPager

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <androidx.viewpager.widget.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/view_pager">
    </androidx.viewpager.widget.ViewPager>

</androidx.constraintlayout.widget.ConstraintLayout>

之后，我们创建一个 PageAdapter，可以直接使用 FragmentPagerAdapter，getItem 返回一个 Fragment 就好了

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
class PageAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    override fun getItem(position: Int): Fragment {
        return PageFragment("Fragment $position", position)
    }

    override fun getCount(): Int {
        return 4
    }

    @SuppressLint("ValidFragment")
    class PageFragment(private var content: String, private var position: Int) : Fragment() {

        private val colors = Arrays.asList(Color.GRAY, Color.RED, Color.BLUE, Color.YELLOW)!!
        override fun onActivityCreated(savedInstanceState: Bundle?) {
            super.onActivityCreated(savedInstanceState)
            text_view.text = content
        }

        override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
            val view = inflater.inflate(R.layout.tab_item, container, false)
            view.setBackgroundColor(colors[position % colors.size])
            view.tag = "$position"
            return view
        }
    }
}

在我们的 Activity 中，设置 view_pager，这里需要注意的是，由于我们使用了 FragmentPagerAdapter，所以我们在展示是如果需要展示多页的话，必须设置为 offscreenPageLimit 一个比较大的值，以便 ViewPager 能够渲染足够多的页面满足我们的需求。
最后为 ViewPager 设置一个 PageTransformer

1
2
3
4
5
6
7
8
9
10
11
12
13
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        view_pager.adapter = PageAdapter(supportFragmentManager)

        view_pager.offscreenPageLimit = 4

        view_pager.setPageTransformer(true, ViewPagerTransformer(TransformType.DEPTH))
    }
}

一个比较简单的 PageTransformer 的实现如下

1
2
3
4
5
class ViewPagerTransformer : ViewPager.PageTransformer  {
    override fun transformPage(page: View, position: Float) {
          page.rotationY = position * -30f
    }
}

效果如下，翻页时会根据位置修改页面的显示，页面将会绕 Y 轴进行旋转一定的角度，效果很赞吧！！！只用了一点代码
页面翻转

ViewPager.PageTransformer

定义

PageTransfomer 接口只有一个方法，该方法有两个参数，一个是 page，指的是 ViewPage 的一个内容页

1
2
3
4
5
6
7
8
9
10
11
public interface PageTransformer {
    /**
     * Apply a property transformation to the given page.
     *
     * @param page Apply the transformation to this page
     * @param position Position of page relative to the current front-and-center
     *                 position of the pager. 0 is front and center. 1 is one full
     *                 page position to the right, and -1 is one page position to the left.
     */
    void transformPage(@NonNull View page, float position);
}

position 指的是该内容页的位置偏移，该偏移是相对的，具体表示请看一张图，页面静止时，以屏幕左边界为 0，屏幕内的页面 position 为0，左边为-1，依次递减，右侧为1，依次递增。当屏幕滑动时，page2只出现一半，此时，page2 的 position 为-0.5，page3 为0.5，依次类推可得出其他page 回调的 position 值
Page Transformer

实践

1、淡入淡出 效果
淡入淡出

页面随着位置改变透明度，alpha = 0 是透明，alpha = 1 是不透明

1
2
3
4
5
6
7
if (position <= -1.0f || position >= 1.0f) {
    page.alpha = 0.0f
} else if (position == 0.0f) {
    page.alpha = 1.0f
} else {
    page.alpha = 1.0f - Math.abs(position)
}

2、缩放变大效果
缩放变大

同时改变位移与透明度

1
2
3
4
5
6
7
8
9
if (position > 0 && position < 1) {
      page.alpha = 1 - position
      page.scaleXY = 0.85f + (1 - 0.85f) * (1 - Math.abs(position))
      page.translationX = page.width * -position
} else {
      page.alpha = 1f
      page.scaleXY = 1f
      page.translationX = 0f
}

更多效果

等你去发现

源码解析

其实这个原理很简单，在每一次滚动的时候，在 ViewPager 内部，计算出 每一个view 的 position ，并且调用这个接口的方法就可以实现了
源码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
protected void onPageScrolled(int position, float offset, int offsetPixels) {
     // 省略.......
     if (mPageTransformer != null) {
         final int scrollX = getScrollX();
         final int childCount = getChildCount();
         for (int i = 0; i < childCount; i++) {
             final View child = getChildAt(i);
             final LayoutParams lp = (LayoutParams) child.getLayoutParams();

             if (lp.isDecor) continue;
             final float transformPos = (float) (child.getLeft() - scrollX) / getClientWidth();
             mPageTransformer.transformPage(child, transformPos);
         }
     }
     // ....
 }

首先判断 mPageTransformer 是否存在，存在的话就可以调用了，获取 scrollX，根据 childCount 对每一个 view 执行 mPageTransformer.transformPage 方法 transformPos 是由 (float) (child.getLeft() - scrollX) / getClientWidth() 计算得出。此处使用 getLeft - scrollX 计算验证了我们对想法。

demo

总结

看似复杂的功能，其实没那么复杂，静下心来研究，原来这么简单

]]> 作为一个很久没写过 Android 业务的人，心里有点慌了，于是拿起 Android Studio，还是找点东西学习一下，并且记录一下。一直觉得 ViewPager 是个好东西，偶然间看到一些很好的案例，很酷炫的翻页效果。直到了解了这个东西的实现原来没有想象中的那么复杂