下载项目后，执行的第一个命令行一般都是 npm install 。在这个过程中可能一帆风顺，也可能遇到大大小小的报错，有时候花点时间各种搜索能解决，可下次遇到还是一头雾水的上网找各种方案尝试解决报错。

  那么，你清楚当你输入 npm instal ，按下 Enter 键之后，究竟发生了什么吗？

正文

一、npm install之后发生了什么

  npm install 大概会经过以下几个流程，下面我们就来简单看一下(原图地址)。

1. npm install执行后，会检查并获取npm配置，优先级为

项目级别的.npmrc文件 > 用户级别的.npmrc文件 > 全局的.npmrc文件 > npm内置的.npmrc文件

.npmrc 文件就是npm的配置文件。查看npm的所有配置, 包括默认配置，可以通过下面的命令:

npm config ls -l

2. 然后检查项目中是否有package-lock.json文件。

  从npm 5.x开始，执行npm install时会自动生成一个 package-lock.json 文件。

  package-lock.json 文件精确描述了node_modules 目录下所有的包的树状依赖结构，每个包的版本号都是完全精确的。

  因此npm会先检查项目中是否有 package-lock.json 文件，分为两种情况：

• 如果有，检查package-lock.json和package.json中声明的依赖是否一致

• 一致：直接使用 package-lock.json 中声明的依赖，从缓存或者网络中加载依赖


• 不一致：各个版本的npm处理方式如上图

• 如果没有，根据package.json递归构建依赖树，然后根据依赖树下载完整的依赖资源，在下载时会检查是否有相关的资源缓存

• 存在：将缓存资源解压到 node_modules 中


• 不存在：从远程仓库下载资源包，并校验完整性，并添加到缓存，同时解压到 node_modules 中

3. 最终将下载资源包，存放在缓存目录中；解压资源包到当前项目的node_modules目录；并生成 package-lock.json 文件。

  构建依赖树时，不管是直接依赖还是子依赖，都会按照扁平化的原则，优先将其放置在 node_modules 根目录中(最新的npm规范), 在这个过程中，如果遇到相同的模块，会检查已放置在依赖树中的模块是否符合新模块的版本范围，如果符合，则跳过，不符合，则在当前模块的 node_modules 下放置新模块。

二、npm缓存

  在执行 npm install 或 npm update 命令下载依赖后，除了将依赖包安装在 node_modules 目录下外，还会在本地的缓存目录缓存一份。我们
可以通过以下命令获取缓存位置：

// 获取缓存位置

npm config get cache



// C:\Users\DB\AppData\Roaming\npm-cache

复制代码

  如我的缓存位置在C:\Users\DB\AppData\Roaming\npm-cache下面的_cacache 文件夹中。

  再次安装依赖的时候，会根据 package-lock.json 中存储的 integrity、version、name 信息生成一个唯一的 key，然后拿着key去目录中查找对应的缓存记录，如果有缓存资源，就会找到tar包的hash值，根据 hash 再去找缓存的 tar 包，并把对应的二进制文件解压到相应的项目 node_modules 下面，省去了网络下载资源的开销。

  因此，如果我们可能因为网络原因导致下载的包不完整，这就可能造成删除node_modules重新下载的依旧是问题包，假如删除 node_modules 重新下载问题依旧，此时就需借助命令行清除缓存。

// 清除缓存

npm cache clean --force



复制代码

  不过 _cacache 文件夹中不包含全局安装的包，所以想清除存在问题的包为全局安装包时，需用 npm uninstall -g 解决

三、关于yarn

yarn简介：

  yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。

yarn特点：

• 速度快

• yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

• 安全
  
  
  
  • 在执行代码之前，yarn 会通过算法校验每个安装包的完整性。
  
  
  
  


• 可靠
  
  
  
  • 使用详细、简洁的锁文件格式和明确的安装算法，yarn 能够保证在不同系统上无差异的工作。
  
  
  
  

四、yarn和npm部分命令对比

总结

  无论是使用npm 还是 yarn 来管理你的项目依赖，我们都应该知其然更知其所以然，这样才能在项目中跟海的定位及解决问题，不是吗？

相信应用层面的知识，大家都比较熟悉了，实际 React 用来实现业务对于熟悉 Vue 的开发人员来说也不是难事，今天我们简单的了解一下 React 和 Vue 。（瞎聊聊）

先来两张源码编译图对比一下：

由于每个步骤能涉及的东西太多，所以本篇就简单聊一下他们的区别以及他在我们项目中实际的应用场景中能够做什么（想到什么聊什么）。

Vue

new Vue

我们知道 Vue 和 React 都是通过替换调指定的 Dom 元素来渲染我们的组件，来看一下：

import Vue from 'vue'

import App from './App.vue'



new Vue({

    render: h => h(App),

}).$mount('#app')

先说 Vue 的，new Vue 做了什么？相信读过源码的同学都会知道，他执行了一堆初始化操作 initLifecycle、initEvents、initRender、initInjections、initState、initProvide。

具体包括以下操作：选项合并(用户选项、默认选项)、$children、$refs、$slots、$createElement等实例属性和方法初始化、自定义事件处理、数据响应式处理、生命周期钩子调用、可能的挂载。

响应式原理

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

var data = {

    a: 1

}

var vm = new Vue({

    data

})

vm.a = 1 

data.a // 1



data.a = 2

vm.a // 2

Vue 通过劫持 get 和 set 来实现响应式原理，这也是与 React 最大区别所在，React 只能手动调用 this.setState来将state改变。

我在往期篇幅有具体谈过 Vue 的响应式原理：
深入浅出Vue响应式原理

模板编译 && 视图渲染

当 data 中的数据实现了响应式之后，就开始在模板上做功夫了。

这里有一个很重要的东西叫虚拟 Dom。

所谓虚拟 DOM 就是用 js 来描述一个 DOM 节点，在 Vue 中通过 Vnode 类来描述各种真实 DOM 节点。

在视图渲染之前，把 template 先编译成虚拟 Dom 缓存下来，等数据发生变化需要重新渲染时，通过 diff 算法找出差异对比新旧节点（patch），之后把最终结果替换到真实 Dom 上，最终完成一次视图更新。

了解更多关于 diff 移步至：diff算法

关于编译原理要细聊就有点多了，大致总结一下：

• 第一步是将 模板字符串 转换成 AST语法树（解析器）


• 第二步是对 AST 进行静态节点标记，主要用来做虚拟 DOM 的渲染优化（优化器）


• 第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）

有兴趣请移步至：
Vue 模板编译原理

生命周期

在这些过程中，Vue 会暴露一些钩子函数供我们在适当时机去执行某些操作，这就是生命周期钩子函数。关于 Vue 的生命周期大家应该都熟记于心了，简单过一下：

• 
  

  beforeCreate (创建实例前的钩子，此时 data 里的数据还不能用。)

  
  


• 
  

  created (实例创建完成后的钩子，此时 data 已完成初始化可使用，但 Dom 尚未挂载。)

  
  


• 
  

  beforeMount (将编译完成的 HTML 挂载到对应虚拟 Dom，此时页面并无内容。)

  
  


• 
  

  mounted (Dom 已完成挂载，此时可以操作 Dom，此阶段也可以调用接口等操作。)

  
  


• 
  

  beforeUpdate (更新之前的钩子，当data变化时，会触发beforeUpdate方法。基本上没有什么用处。)

  
  


• 
  

  updated (更新之后的钩子，当数据变化导致地虚拟DOM重新渲染时会被调用，被调用时，组件DOM已经更新。建议不要在这个钩子函数中操作数据，可能陷入死循环。)

  
  


• 
  

  beforeDestory (实例销毁前的钩子，此时还可以使用 this，通常在这一步会进行清除计时器等操作)

  
  


• 
  

  destoryed (实例销毁完成的钩子，调用完成后，Vue实例的所有内容都会解绑定，移出全部事件监听器，同时销毁所有的子实例。)

  
  

React

大家可能会比较关心 React 会扯什么（猜的），毕竟 Vue 已经是家喻户晓，加上国内业务使用也是居多，生态圈及各类解决方案也是层出不穷。

ReactDOM.render

ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

import App from './App.jsx'

import ReactDOM from 'react-dom'



ReactDOM.render(

    <App></App>,

    document.getElementById('root')

)

render 方法实际是调用了内部的 React.createElement 方法，进而执行 ReactMount._renderSubtreeIntoContainer。

还有一个方法 ReactDOM.unmountComponentAtNode() 作用和 ReactDOM.render() 正好相反，他是清空一个渲染目标中的 React 部件或 HTML。

React state

state 是 React 中很重要的东西，说到 state 就不得不提到 setState 这个方法，很多人认为 setState 是异步操作，其实并不是。之所以会有一种异步的表现方式是因为 React 本身的性能机制导致的。因为每次调用 setState 都会触发更新，异步操作是为了提高性能，将多个状态合并一起更新，减少 render 调用。

如图，setState 接受一个新状态并不会立即执行，而是存入 pending 队列中进行判断。

如果有阅读过源码的同学就会知道他在其中通过判断 isBatchingUpdates （是否是批量更新模式）来进行区分。

如果是，那就会将状态保存到 dirtyComponents （脏组件）。

如果否，那就遍历所有的脏组件，并调用 updateComponent 更新 pending 队列的 state 或 props。执行完后，将
isBatchingUpdates 设置为 true。

假如有如下代码：

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

    this.setState( { count: this.state.count + 1 } );

}

复制代码

若 setState 是同步机制，那么这个组件会被 render 100次，这无疑对性能是毁灭性的。

当然 React 也想到了这个问题并做了处理：

React 会将 setState 的调用合并为一个执行，所以 setState 执行时我们并没有看到 state 马上更新，而是通过回调获取到更新后的数据（有点类似 Vue 中的 nextTick），也就是刚刚上图所叙。

React 渲染流程

对于首次渲染，React 的主要是通过 React.render 接收到的 VNode 转化为 Fiber 树，并根据树的层级关系构建出 Dom 树并渲染。

而二次渲染（更新），Fiber 树已经存在内存中了，所以 React 会计算 Fiber 树中的各个节点差异（diff），并将变化更新渲染。

实际上 Vue 和 React 的 diff 算法都是同层 diff，复杂度都为O(n)，但是他们的不同在于 React 首位节点是固定不动的（除了删除），然后依次遍历对比。

Vue 的 diff 在 compile 阶段的 optimize 标记了 static 点，可以减少 diff 次数，而且是双向遍历方法，并且借鉴了开源库 snabbdom。（不论 Vue 还是 React 两者都是各有秋千）

再说回渲染， React 中也存在着和 Vue 一样的 VNode（虚拟 Dom）。

JSX 会被编译转换成 React.createElement 函数的调用，返回值就是 VNode，其作用和 Vue 中的 VNode 基本一致。

关于 Fiber 是一个比较抽象的概念比较难理解，可以理解为他是用来描述有关组件以及输入输出的信息的一个 JavaScript 对象。

了解更多 Fiber：Fiber传送门

小结一下：

React 渲染流程（浅看）：

jsx --> createElement 函数 --> 这个函数帮助我们创建 ReactElement 对象(对象树) --> ReactDOM.render 函数 --> 映射到浏览器的真实DOM

生命周期

在渲染过程中暴露出来的钩子就是生命周期钩子函数了，看图：

我在 Vue 转 React 系列中有提到过 ->传送门

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM


• Updating：正在被重新渲染


• Unmounting：已移出真实 DOM

简单过一下生命周期：

• 
  

  componentWillMount 在渲染前调用,在客户端也在服务端。

  
  


• 
  

  componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

  
  


• 
  

  componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

  
  


• 
  

  shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用，可以在你确认不需要更新组件时使用。

  
  


• 
  

  componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  
  


• 
  

  componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  
  


• 
  

  componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

  
  

小结

本文只是涉及内容众多，难免会有遗漏或不周，还请看官轻喷

前言

相信大家在用Vue的时候，一定用过他的transition-group组件。在该组件下方可以看到这么一句话

这个看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。，我们将之前实现的例子和这个技术结合，使我们列表的一切变动都会有动画过渡。

和一个特别特别酷炫的动画效果

下面，跟我一起走进Flip动画的奇妙世界

前置知识

getBoundingClientRect

通过dom.getBoundingClientRect()，可以得到某个元素在屏幕上的矩形区域

const rect = dom.getBoundingClientRect(); // 获取矩形区域

rect.left; // 获取矩形区域的left值

rect.top; // 获取矩形区域的top值

transform

transform是css3提供的属性，含义为变形或变换

css3提供了多种变换方式，包括平移、旋转、倾斜、缩放，还包括更加具有通用性的矩阵变换

所有变换，均不会影响真实布局位置，只是影响最终的视觉效果

animate api

Element 接口的animate()方法是一个创建新Animation的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 Animation 对象实例

使用animate api实现动画非常简单，仅需要通过下面的代码即可实现

dom.animate(

  [

    { /* 起始css属性 */ },

    { /* 结束css属性 */ },

  ],

  {

    duration: 800, // 完成动画的时间

  }

);

其他API请看MDN文档

Flip思想

Flip是一种动画思路，专门针对上述场景

它由四个单词组成，分别是：

• First


• Last


• Invert


• Play

具体过程如下

在代码实现上，可以遵循以下结构实现动画效果

// ① Frist

record(container); // 记录容器中每个子元素的起始坐标

// 改变元素顺序

change();

// ② Last + ③ Invert + ④ Play

move(container); // 让元素真正实现移动

实现

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style>

    * {

        margin: 0;

        padding: 0;

    }



    .btns {

        text-align: center;

    }



    .btns button {

        margin: 0 1em;

        outline: none;

        border: none;

        background: #579ef8;

        color: #fff;

        padding: 7px 10px;

        border-radius: 5px;

        cursor: pointer;

    }



    .btns button:hover {

        opacity: 0.8;

    }



    .container {

        width: 500px;

        overflow: hidden;

        margin: 20px auto;

        display: flex;

        flex-wrap: wrap;

    }



    .item {

        width: 50px;

        height: 50px;

        box-sizing: border-box;

        text-align: center;

        background: #eef5fe;

        border: 1px solid #ddebfd;

        line-height: 50px;

        margin: 5px;

    }

</style>



<body>

    <div class="btns">

        <button id="sort">随机排序</button>

    </div>

    <div class="container">

        <div class="item">1</div>

        <div class="item">2</div>

        <div class="item">3</div>

        <div class="item">4</div>

        <div class="item">5</div>

        <div class="item">6</div>

        <div class="item">7</div>

        <div class="item">8</div>

        <div class="item">9</div>

        <div class="item">10</div>

        <div class="item">11</div>

        <div class="item">12</div>

        <div class="item">13</div>

        <div class="item">14</div>

        <div class="item">15</div>

        <div class="item">16</div>

        <div class="item">17</div>

        <div class="item">18</div>

        <div class="item">19</div>

        <div class="item">20</div>

        <div class="item">21</div>

        <div class="item">22</div>

        <div class="item">23</div>

        <div class="item">24</div>

        <div class="item">25</div>

        <div class="item">26</div>

        <div class="item">27</div>

        <div class="item">28</div>

        <div class="item">29</div>

        <div class="item">30</div>

        <div class="item">31</div>

        <div class="item">32</div>

        <div class="item">33</div>

        <div class="item">34</div>

        <div class="item">35</div>

        <div class="item">36</div>

        <div class="item">37</div>

        <div class="item">38</div>

        <div class="item">39</div>

        <div class="item">40</div>

        <div class="item">41</div>

        <div class="item">42</div>

        <div class="item">43</div>

        <div class="item">44</div>

        <div class="item">45</div>

        <div class="item">46</div>

        <div class="item">47</div>

        <div class="item">48</div>

        <div class="item">49</div>

        <div class="item">50</div>

    </div>



<script>

    const container = document.querySelector('.container')

    function change() {

        const childrens = [...container.children]

        for(let i = 0, l = childrens.length; i < l; i ++) {

            const children = childrens[i]

            const j = Math.floor(Math.random() * l)

            if (i !== j) {

                // 获取当前dom的下一个元素

                const inextDom = children.nextElementSibling

                // 把i插入j之前

                container.insertBefore(children, childrens[j])

                // 把下标j的元素插入到i元素之前

                container.insertBefore(childrens[j], inextDom)

            }

        }

    }

    sort.onclick = () => {

        record(container)

        change()

        move(container)

    }



    function record(container) {

        for(let i = 0, len = container.children.length; i < len; i ++) {

            const dom = container.children[i]

            const rect = dom.getBoundingClientRect()

            dom.startX = rect.left

            dom.startY = rect.top

        }

    }



    function move(container) {

        for(let i = 0, len = container.children.length; i < len; i ++) {

            const dom = container.children[i]

            const rect = dom.getBoundingClientRect()

            const curX = rect.left, curY = rect.top

            dom.animate([

                { transform: `translate(${dom.startX - curX}px, ${dom.startY - curY}px)` },

                { transform: `translate(0px, 0px)` }

            ], { duration: 600 })

        }

    }

</script>

</body>



</html>

以上就是所有代码了，可以在控制台看到，不会出现style标签，非常的神奇。

结语

FLIP 不光可以做位置变化的动画，对于透明度，大小等等都可以很轻松的实现。

Flip非常有用，可以实现在任何需要动画的地方

Promise.allSettled() 方法返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise，并带有一个对象数组，每个对象表示对应的 promise 结果。

接着，我们来看看 Promise.allSettled() 是如何工作的。

1. Promise.allSettled()

Promise.allSettled() 可用于并行执行独立的异步操作，并收集这些操作的结果。

该函数接受一个 promise 数组(通常是一个可迭代对象)作为参数:

const statusesPromise = Promise.allSettled(promises);

当所有的输入 promises 都被 fulfilled 或 rejected 时，statusesPromise 会解析为一个具有它们状态的数组

1. 
   

   { status: 'fulfilled', value: value } — 如果对应的 promise 已经 fulfilled

   
   


2. 
   

   或者 {status: 'rejected'， reason: reason} 如果相应的 promise 已经被 rejected

   
   

在解析所有 promises 之后，可以使用 then 语法提取它们的状态:

statusesPromise.then(statuses => {

 statuses; // [{ status: '...', value: '...' }, ...]

});

或者使用 async/await 语法：

const statuses = await statusesPromise;

statuses; // [{ status: '...', value: '...' }, ...]

2. 取水果和蔬菜

在深入研究 Promise.allSettle() 之前，我们先定义两个简单的 helper 函数。

首先，resolveTimeout(value, delay)返回一个 promise ，该 promise 在经过 delay 时间后用 value 来实现

function resolveTimeout(value, delay) {

  return new Promise(

    resolve => setTimeout(() => resolve(value), delay)

  );

}

第二，rejectTimeout(reason, delay) - 返回一个 promise，在经过 delay 时间后拒绝reason。

最后，我们使用这些辅助函数来试验 promise.allsettle()。

2.1 All promises fulfilled

我们同时访问当地杂货店的蔬菜和水果。访问每个列表是一个异步操作:

const statusesPromise = Promise.allSettled([

  resolveTimeout(['potatoes', 'tomatoes'], 1000),

  resolveTimeout(['oranges', 'apples'], 1000)

]);

// wait...

const statuses = await statusesPromise;

// after 1 second

console.log(statuses); 

// [

//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },

//   { status: 'fulfilled', value: ['oranges', 'apples'] }

// ]

线上事例：codesandbox.io/s/all-resol…

Promise.allSettled([...])返回一个 promise statusesPromise，该 promise 在1秒内解决，就在蔬菜和水果被解决之后，并行地解决。

statusesPromise 解析为一个包含状态的数组。

1. 数组的第一项包含有蔬菜的已完成状态:status: 'fulfilled', value: ['potatoes', 'tomatoes'] }


2. 同样的方式，第二项是水果的完成状态: { status: 'fulfilled', value: ['oranges', 'apples'] }

2.2一个 promise 被拒绝

想象一下，在杂货店里已经没有水果了。在这种情况下，我们拒绝水果的 promise。

promise.allsettle() 在这种情况下如何工作?

const statusesPromise = Promise.allSettled([

  resolveTimeout(['potatoes', 'tomatoes'], 1000),

  rejectTimeout(new Error('Out of fruits!'), 1000)

]);

// wait...

const statuses = await statusesPromise;

// after 1 second

console.log(statuses); 

// [

//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },

//   { status: 'rejected', reason: Error('Out of fruits!') }

// ]

线上事例：codesandbox.io/s/one-rejec…

Promise.allSettled([...]) 返回的 promise 在 1 秒后解析为一个状态数组:

1. 
   

   数组的第一项，蔬菜 promise 成功解析：{ status: 'fulfilled', value: ['potatoes', 'tomatoes'] }

   
   


2. 
   

   第二项，因为水果 promise 被拒绝，所以是一个拒绝状态: { status: 'rejected', reason: Error('Out of fruits') }

   
   

即使输入数组中的第二个 promise 被拒绝，statusesPromise仍然会成功解析一个状态数组。

2.3 所有的 promises 都被 rejected

如果杂货店里的蔬菜和水果都卖光了怎么办？在这种情况下，两个 promise 都会被拒绝。

const statusesPromise = Promise.allSettled([

  rejectTimeout(new Error('Out of vegetables!'), 1000),

  rejectTimeout(new Error('Out of fruits!'), 1000)

]);

// wait...

const statuses = await statusesPromise;

// after 1 second

console.log(statuses); 

// [

//   { status: 'rejected', reason: Error('Out of vegetables!')  },

//   { status: 'rejected', reason: Error('Out of fruits!') }

// ]

线上事例：codesandbox.io/s/all-rejec…

在这种情况下，statusesPromise仍然成功地解析为一个状态数组。然而，该数组包含被拒绝的promise 的状态。

3.总结

Promise.allSettled(promises)可以并行地运行 promise，并将状态（fulfilled 或reject）收集到一个聚合数组中。

Promise.allSettled(...)在你需要执行平行和独立的异步操作并收集所有结果时非常有效，即使某些异步操作可能失败。

前言

AI 正在不断拓展前端的技术边界， 算法的加持也为前端研发注入了全新的力量。本文为大家介绍什么是端智能，端智能的应用场景以及 Web 端侧实现 AI 的基本原理概念。

什么是端智能

首先，回顾一个AI应用的开发流程，具体步骤包括了

数据的采集与预处理

模型的选取与训练

模型的评估

模型服务部署

模型训练的中间产物为一个模型文件，通过加载模型文件，部署为可调用的服务，然后就可以调用进行推理预测了。

在传统流程中，模型服务会部署在高性能的服务器上，由客户端发起请求，由服务器端进行推理，将预测结果返回给客户端，而端智能则是在客户端上完成推理的过程。

端智能的应用场景

端智能现在已经有非常多的应用场景，涵盖视觉类的 AR 、互动游戏，推荐类的信息流推荐，触达类的智能Push等，语音类的直播、智能降噪等多个领域。算法逐渐从服务端覆盖到用户实时感知更强的移动终端。

典型应用包括了

AR 应用、游戏。由 AI 提供理解视觉信息的能力，由 AR 根据视觉信息来实现虚实结合的交互，带来更沉浸式的购物、互动体验。比如美颜相机、虚拟试妆，即是通过检测人脸面部的关键点，在特定区域使用 AR 增强、渲染妆容。

互动游戏。飞猪双十一的互动游戏"找一找"， 即是一个跑在 h5 页面的图片分类应用，通过摄像头实时捕捉图片，调用分类模型进行分类，当出现游戏设定目标时得分。
端侧重排。通过实时的用户意识识别，对服务器推荐算法下发的feeds流进行重新排列，做出更精准的内容推荐。

智能Push。通过端侧感知用户状态，决策是否需要向用户实施干预，推送Push，选取合适的时机主动触达用户，而非服务器端定时的批量推送，带来更精准的营销，更好的用户体验。

端智能的优势

从普遍的应用场景，可以看到端智能的明显优势，包括了

低延时

实时的计算节省了网络请求的时间。对于高帧率要求的应用，比如美颜相机每秒都要请求服务器，高延迟绝对是用户所不能接受的。而对于高频交互场景，比如游戏，低延时变得更为重要。

低服务成本

本地的计算节省了服务器资源，现在的新手机发布都会强调手机芯片的 AI 计算能力，越来越强的终端性能让更多的端上 AI 应用成为了可能。

保护隐私

数据隐私的话题在今天变得越来越重要。通过在端侧进行模型的推理，用户数据不需要上传到服务器，保证了用户隐私的安全。

端智能的局限

同时，端智能也有一个最明显的局限，就是低算力，虽然端侧的性能越来越强，但是和服务器相比还是相差甚远。为了在有限的资源里做复杂的算法，就需要对硬件平台进行适配，做指令级的优化，让模型能够在终端设备中跑起来，同时，需要对模型进行压缩，在时间和空间上减少消耗。

现在已经有一些比较成熟的端侧推理引擎了，这些框架、引擎都对终端设备做了优化来充分发挥设备的算力。比如Tensorflow Lite、Pytorch mobile、阿里的 MNN、百度飞桨 PaddlePaddle。

Web端呢

Web 端同样拥有端侧 AI 的优势与局限，作为在 PC 上用户访问互联网内容和服务的主要手段，在移动端很多APP也会嵌入 Web 页面，但是浏览器内存和存储配额的有限，让 Web 上运行 AI 应用看上去更不可能。

然而在 2015 年的时候就已经出现了一个 ConvNetJS的库，可以在浏览器里用卷积神经网络做分类、回归任务，虽然现在已经不维护了，2018 年的时候涌现了非常多的JS的机器学习、深度学习框架。如 Tensorflow.js 、 Synaptic 、 Brain.js 、 Mind 、 Keras.js 、 WebDNN 等。

受限于浏览器算力，部分框架如 keras.js 、 WebDNN框架只支持加载模型进行推理，而不能在浏览器中训练。

此外，一些框架不适用于通用的深度学习任务，它们支持的网络类型有所不同。比如 TensorFlow.js 、 Keras.js 和 WebDNN 支持了 DNN 、 CNN 和 RNN。而 ConvNetJS 主要支持 CNN 任务，不支持 RNN。Brain.js 和 synaptic 主要支持 RNN 任务，不支持 CNN 网络中使用的卷积和池化操作。Mind 仅支持基本的 DNN。

在选择框架时需要看下是否支持具体需求。

Web端架构

Web端是如何利用有限的算力的呢？

一个典型的 JavaScript 机器学习框架如图所示，从底向上分别是驱动硬件，使用硬件的浏览器接口，各种机器学习框架、图形处理库，最后是我们的应用。

CPU vs GPU

在 Web 浏览器中运行机器学习模型的一个先决条件是通过 GPU 加速获得足够的计算能力。

在机器学习中，尤其是深度网络模型，广泛使用的操作是将大矩阵与向量相乘，再与另一个向量做加法。这种类型的典型操作涉及数千或数百万个浮点操作，而是它们通常是可并行化的。

以一个简单的向量相加为例，将两个向量相加可分为许多较小的运算，即每个索引位置相加。这些较小的操作并不相互依赖。尽管 CPU 对每个单独的加法所需的时间通常更少，随着计算量规模的变大，并发会逐渐显示出优势。

WebGPU/WebGL vs WebAssembly

有了硬件之后，需要对硬件进行充分的利用。

• 
  

  WebGL

  
  

  WebGL 是目前性能最高的 GPU 利用方案，WebGL 为在浏览器中加速 2D 和 3D图形渲染而设计，但可以用于神经网络的并行计算来加速推理过程，实现速度数量级的提升。

  
  


• 
  

  WebGPU

  
  

  随着 Web 应用对可编程 3D 图形、图像处理和 GPU 访问需求的持续增强，为了在 WEB 中引入GPU 加速科学计算性能，W3C 在 2017 年提出了 WebGPU ，作为下一代 WEB 图形的的 API 标准，具有更低的驱动开销，更好的支持多线程、使用 GPU 进行计算。

  
  


• 
  

  WebAssembly

  
  

  当终端设备没有 WebGL 支持或者性能较弱的时候，使用 CPU 的通用计算方案为 WebAssembly 。WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行，它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++ 等语言提供一个编译目标，以便它们可以在 Web 上运行。

  
  

Tensorflow.js

以 Tensorflow.js 为例，为了在不同的环境下实现运行，tensorflow 支持了不同的后端，根据设备条件自动选择相应的后端 ，当然也支持手动更改。

tf.setBackend('cpu');

console.log(tf.getBackend());

对一些通用模型进行测试，WebGL速度大于普通 CPU 后端计算的 100 倍，WebAssembly 则比普通的 JS CPU 后端快 10-30 倍。

同时， tensorflow 也提供了 tfjs-node 版本，通过 C++ 和 CUDA 代码编译的本机编译库驱动 CPU 、 GPU 进行计算，训练速度与 Python 版本的 Keras 相当。不需要切换常用语言，可以直接在 nodejs 服务上添加 AI 模块，而不是再启动一个 python 的服务。

模型压缩

有了框架对于硬件设备的适配，还需要对模型进行压缩，复杂的模型固然有更好的预测精度，但是高额的存储空间、计算资源的消耗，过长的推理速度在大部分移动端场景中还是难以接受的。

模型的复杂度在于模型结构的复杂以及海量的参数。模型文件中通常存储了两部分信息：结构与参数，如下图中简化的神经网络所示，每个方块对应一个神经元，每个神经元以及神经元中的连线上都是参数。

模型的推理即从左侧输入，通过与神经元进行计算，再通过连线加上权重传到下一层计算，到最终层得到预测输出。节点越多、连接越多，则计算量越大。

模型剪枝

对训练好的模型进行裁剪，是模型压缩的一个常见方式，网络模型中存在着大量冗余的参数，大量神经元激活值趋近于 0，通过对无效节点或者是不那么重要的节点进行裁剪，可以减少模型的冗余。

最简单粗暴的剪枝即 DropOut ，在训练过程中随机对神经元进行丢弃。
大部分的剪枝方法会计算重要性因子，计算神经元节点对于最终的结果的重要性，剪去不那么重要的节点。

模型剪枝的过程是迭代反复进行的，并非剪枝后直接用来推理，通过剪枝后的训练恢复模型的精度，模型的压缩过程是在精度和压缩比例之间的不断权衡，在可接受的精度损失范围内选择最好的压缩效果。

模型量化

为了保证较高的精度，大部分的科学运算都是采用浮点型进行计算，常见的是 32 位浮点型和 64 位浮点型，即 float32 和 double64。量化即是把高精度的数值转化为低精度。

如二值量化（1bit量化）会直接将 Float32/float64 的值映射到 1bit ，存储空间直接压缩 32 倍/ 64 倍，计算时加载所需内存同样也会变小，更小的模型尺寸，带来更低的功耗以及更快的计算速度。除此还有8bit量化、任意bit量化。

知识蒸馏

知识蒸馏则是将深度网络中所学到的知识转移到另一个相对简单的网络中，先训练一个 teacher 网络，然后使用这个 teacher 网络的输出和数据的真实标签去训练 student 网络。

工具

模型压缩的实现较为复杂，如果只是面向应用，大概了解其作用原理即可，可以直接用封装好的工具。

比如 Tensorflow Model Optimization Toolkit 提供了量化功能，其官方对于一些通用模型进行了压缩测试，如下表可以看到，对于 mobilenet 模型，模型大小由 10M+ 压缩到了 3、4M，而模型的精度损失很小。

百度的飞桨提供的 PaddleSlim 则提供了上述三种压缩方法。

总结

综上，开发一个 Web 端上的 AI 应用，流程即变成了

针对特定场景设计算法、训练模型

对模型进行压缩

转换为推理引擎所需要的格式

加载模型进行推理预测

对于算法而言，通用的深度学习框架已然提供了若干的通用预训练模型，可以直接用来做推理，也可以在其基础上训练自己的数据集。模型的压缩与推理也可以使用现有的工具。

昨天在做笔记整理的时候，看到一个面试题，如何实现水平垂直居中，虽然心里有一点点数，但是看到好几种答案，还是决定亲自动手验证一番，这验证一开始就出现了小问题，接着就像捅了个马蜂窝一样，各种疑惑扑面而来，而我又想弄清楚，折腾大半天，终于把问题锁定到了 line-height 和 vertical-align 身上。

大家现在应该都用 flex 布局，但是毕竟折腾好一会呢，好歹记录一下自己的收获哈哈

1.疑惑代码

    <div>

        <div>我要水平垂直居中</div>

    </div>

.container{

    border: 2px solid black;

    background-color: chartreuse;

    width: 200px;

    height: 200px;

    text-align: center;

    line-height: 200px;

}

.box{

    display: inline-block;

    line-height: normal;

    font-size: 1rem;

    vertical-align: middle;

    background-color: cornflowerblue;

}

你别说，还真居中了：

2.一些知识点

2.1 水平垂直对齐

有一些疑惑真的只是自己无知哈哈哈

• text-align 不仅可以作用在文本，还可以对行内元素和行内块元素有效果，设置水平对齐方式


• vertical-align 只对行内元素和行内块元素起作用，设置元素的垂直对齐方式

2.2 line-height

说来也蛮搞笑的，我对 line-height 的印象就是，当元素 height 等于 line-height 的时候，元素内部的文本就会垂直居中。但是昨天查资料的时候发现，这里面牵扯到了很多复杂的问题。

简单的和我一起学习一下吧，MDN 上边说的，line-height 可用于多行文本的间距或者是单行文本的高度等

看到这里大家可以去看一下，底下的两篇参考文章，得出以下结论：

• 没给元素设置高度时，元素高度采用的是 line-height 的高度，这个属性具有继承性。也自带默认值，所以当你给一个没有设置高度的元素设置 line-height:0;,即使里面有文本，它也是会塌陷的。


• 可以分为好几种盒子，当你设置 line-height 的时候，行内框是不会变化的，改变的是行距，它只由 font-size 的决定。这其实就是上边元素 height 等于 line-height 的时候，元素内文本会垂直居中的原因。


• 取值为 number 时，line-height 为 number 乘以当前元素的 font-size,取 normal 时一般就是 number 为 1.2

3. 疑惑产生

喜欢东拆拆西拆拆的我发现，上边代码注释掉 vertical-align: middle; 效果并没有变化，依旧垂直居中着，但是将它改成 vertical-align: top; 又起到作用了如下：

4.解决

真的，其实写博客之前我都没有理解为什么会出现这种怪异情况，但是写着写着就来灵感了，原来是这样哈哈哈

其实咱们把文字内容加一点，使它成为多行文本，效果就出来了，没注释掉 vertical-align: middle 的效果如下：

注释掉了，就是这个样子，没有垂直居中：

所以前面的只是巧合，因为是单行文本的原因，平衡上下行距，应该也不叫行距，应该就是为了平衡才会出现垂直居中的效果哦！

思路： 通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。

1. 安装及引入

// 将页面 html 转换成图片

npm install html2canvas --save  

// 将图片生成 pdf

npm install jspdf --save

在项目主文件 main.js 中引入定义好的实现方法并注册

import htmlToPdf from '@/utils/htmlToPdf';

// 使用 Vue.use() 方法就会调用工具方法中的install方法

Vue.use(htmlToPdf);

传送门：Vue中 Vue.use() 原理及使用

2. 封装导出 pdf 文件方法

配置详解

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);

第一个参数： l：横向  p：纵向

第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）；

第三个参数：可以是下面格式，默认为“a4”。如需自定义格式，只需将大小作为数字数组传递，如：[592.28, 841.89];

		   a0 - a10

		   b0 - b10

		   c0 - c10

  		   dl

		   letter

		   government-letter

		   legal

		   junior-legal

		   ledger

		   tabloid

		   credit-card

pdf.addPage() 在PDF文档中添加新页面，默认a4。参数如下：

pdf.addImage() 将图像添加到PDF。参数如下：

删除某页 pdf

let targetPage = pdf.internal.getNumberOfPages(); //获取总页

pdf.deletePage(targetPage); // 删除目标页

复制代码

保存 pdf 文档

pdf.save(`测试.pdf`);

复制代码

封装导出 pdf 文件方法（utils/htmlToPdf.js）

// 导出页面为PDF格式

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default{

  install (Vue, options) {

    Vue.prototype.getPdf = function () {

      // 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载

      let top = document.getElementById('pdfDom');

      if (top != null) {

        top.scrollIntoView();

        top = null;

      }

      let title = this.exportPDFtitle;

      html2Canvas(document.querySelector('#pdfDom'), {

        allowTaint: true

      }).then(function (canvas) {

        // 获取canvas画布的宽高

        let contentWidth = canvas.width;

        let contentHeight = canvas.height;

	      // 一页pdf显示html页面生成的canvas高度;

        let pageHeight = contentWidth / 841.89 * 592.28;

	      // 未生成pdf的html页面高度

        let leftHeight = contentHeight;

	      // 页面偏移

        let position = 0;

	      // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）

        let imgWidth = 841.89;

        let imgHeight = 841.89 / contentWidth * contentHeight;

        let pageData = canvas.toDataURL('image/jpeg', 1.0);

        let PDF = new JsPDF('l', 'pt', 'a4');

        // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度

        // 当内容未超过pdf一页显示的范围，无需分页

        if (leftHeight < pageHeight) {

          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)

        } else {

          while (leftHeight > 0) {

            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

            leftHeight -= pageHeight;

            position -= 592.28;

            // 避免添加空白页

            if (leftHeight > 0) {

              PDF.addPage();

            }

          }

        }

        PDF.save(title + '.pdf')

      })

    }

  }

}

相关组件中应用

<template>

  <div class="wrap" >

    <div id="pdfDom" style="padding: 10px;">

      <el-table

        :data="tableData"

        border>

        <el-table-column prop="date" label="日期" width="250"></el-table-column>

        <el-table-column prop="name" label="姓名" width="250"></el-table-column>

        <el-table-column prop="address" label="地址"></el-table-column>

      </el-table>

    </div>

    <button type="button" style="margin-top: 20px;" @click="btnClick">导出PDF</button>

  </div>



</template>

 

<script>

export default {

  data() { 

    return {

      exportPDFtitle: "页面导出PDF文件名",

      tableData: [

         {

          date: '2016-05-06',

          name: '王小虎',

          address: '重庆市九龙坡区火炬大道'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '重庆市九龙坡区火炬大道'

        },{

          date: '2016-05-03',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-02',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-04',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-01',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-01',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '南京市江宁区将军大道'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '南京市江宁区将军大道'

        },, {

          date: '2016-05-04',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-01',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        },{

          date: '2016-05-01',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '武汉市洪山区文化大道'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '武汉市洪山区文化大道'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '武汉市洪山区文化大道'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '南京市江宁区将军大道'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '武汉市洪山区文化大道'

        },

      ]

    } 

  }, 

  methods: {

    btnClick(){

      this.$nextTick(() => {this.getPdf();})

    },

  },  

}

</script>  

效果

待优化部分

分页时，页面内容被截断（欢迎留言讨论交流）；

不同内容，另起一页开始；思路：计算超出内容，占最后一页的高度（设定间距 = 页面高度 - 超出部分高度）。

作为一名前端开发者，你有没有遇到过这种头痛的事情。每次开发pc端的网页时，不管是官网还是管理后台，UI设计师都是按照1920*1080（16:9）的比例来给你提供设计稿的，导致你画页面的时候。会出现两种情况。

第一种按照设计师提供的设计稿比例画页面的话，导致在不同比例的屏幕上，就会呈现不同的样式效果，有的过大有的过小，这时候用户就会问你，你是不是写的bug。。。很无语

第二种就是按照设计师提供的比例按自适应的方式来画页面，这样导致页面的尺寸与设计稿不同，并且在不同设备也会有差别，这时候设计师跟用户就会跑过来说，这里是不是少了1px的单位，这里是不是写错了。。。很头疼

今天我就介绍一种可以解决pc端网页适配的方法，大家觉得有用的话，就给我个小小点赞，也可以在评论区留言。

PC实现适配也是用了rem这个css3属性，rem相对于根元素(即html元素)font-size计算值的倍数。这里以PC常见的分辨率1920px和1366px(14寸笔记本)为例说明。为了更好的说明，假设设计师给的设计稿是1920px，我们既要做1920px屏幕，也要给1366px的屏幕做适配。

现在我们随便取1920px设计稿一块区域，假设宽度273px，高度随意。那么在1366px屏幕上宽度应该显示多少呢？

我们将屏幕宽度等比分成100份

//1920分辨率屏幕

avg = 1920 / 100 = 19.20 px



//1366分辨率屏幕

avg = 1366 / 100 = 13.66 px

在1366分辨率屏幕应该显示宽度 = (1366 * 273) / 1920 最后是194.228125px

//1920分辨率屏幕定义根

font-size = 19.20px //即 1rem = 19.20px



//1366分辨率屏幕

font-size = 13.66px  //即 1rem = 13.66px

适配代码

html{

   font-size:19.20px;  /*默认以设计稿为基准*/

}



@media only screen and (max-width: 1366px) {

   html{

      font-size:13.66px;

   }

}

#test{

   width:14.21875rem;

}

id为test的盒子在1920屏幕宽度= 14.21875 * 19.20 最后是273

id为test的盒子在1366屏幕宽度= 14.21875 * 13.66 最后是194.228125

这样一来我们就适配了1920px和1366px屏幕。PC一般也就是这两个分辨率占多数，兼容了这两个分辨率屏幕基本就可以了。在说下国内基本没有在兼容IE8的浏览器了。基本都是IE9+，css3属性在IE9+上还是可以使用的。不过建议小伙伴们使用前还是确定下，浏览器兼容

最后在对上面补充点，有的小伙伴可能觉得每次设置宽高前都要手动的转换，实在是太麻烦，不要着急我为大家找了个sass方法。

// PX 转 rem 

@function px2Rem($px, $base-font-size: 19.2px) {

    @if (unitless($px)) { 

        //有无单位 

        @return ($px / 19.2) * 1rem; 

    } @else if (unit($px) == em) { 

        @return $px; 

    } 

    @return ($px / $base-font-size) * 1rem; 

}

测试下上面的方法

#test{

   width:px2Rem(273px) 

}

//输出

#test{

   width:14.21875rem;

}

大家将屏幕分辨率调整为1920px和1366px来查看灰色区域宽度。

    
侧边栏

        
测试p字体


    


    
内容

@function px2Rem($px, $base-font-size: 19.2px) {



@if (unitless($px)) { //有无单位



    @return ($px / 19.2) * 1rem;



} @else if (unit($px) == em) {



    @return $px;



}

@return ($px / $base-font-size) * 1rem;

}



*{

    margin:0;



    padding:0;

}



html{

    font-size:19.20px;

}



html,body{

 height:100%;

}



body{

    font-size:px2Rem(16px);

}



#app{

    position:relative;



    width:100%;



    height:100%;

}



.nav{

    position:fixed;



    left:0;



    top:0;



    width:px2Rem(273px);



    height:100%;



    background-color:#E4E4E4;



    transition:all .3s;



    z-index:11;

}



.content{



    position:absolute;



    left:px2Rem(273px);



    top:0;



    right:0;



    bottom:0;



    width:auto;



    height:100%;



    background-color:#CBE9CB;



    overflow-y:auto;



    z-index:10;

}



p{

    font-size:px2Rem(20px);

}



@media only screen and (max-width: 1366px) {

    html{

        font-size:13.66px;

    }

}

效果图

小伙伴们如果有更好的PC适配方案也可给我讲讲，欢迎在下方留言

sass下使用变量

height: calc(100% - #{px2rem(200px)});

不是标题党，这是一位leader在一次代码评审会对小组成员发出的“怒吼”，原因是在代码评审中发现很多地方还是采用ES5的写法，也不是说用ES5写法不行，会有BUG，只是造成代码量增多，可读性变差而已。

恰好，这位leader有代码洁癖，面对3~5年经验的成员，还写这种水平的代码，极为不满，不断对代码进行吐槽。不过对于他的吐槽，我感觉还是有很大收获的，故就把leader的吐槽记录下来，分享给掘友们，觉得有收获点个赞，有错误的或者更好的写法，非常欢迎在评论中留言。

ps：ES5之后的JS语法统称ES6！！！

一、关于取值的吐槽

取值在程序中非常常见，比如从对象obj中取值。

const obj = {

    a:1,

    b:2,

    c:3,

    d:4,

    e:5,

}

吐槽：

const a = obj.a;

const b = obj.b;

const c = obj.c;

const d = obj.d;

const e = obj.e;

或者

const f = obj.a + obj.d;

const g = obj.c + obj.e;

吐槽：“不会用ES6的解构赋值来取值吗？5行代码用1行代码搞定不香吗？直接用对象名加属性名去取值，要是对象名短还好，很长呢？搞得代码中到处都是这个对象名。”

改进：

const {a,b,c,d,e} = obj;

const f = a + d;

const g = c + e;

反驳

不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。

吐槽

看来你对ES6的解构赋值掌握的还是不够彻底。如果想创建的变量名和对象的属性名不一致，可以这么写：

const {a:a1} = obj;

console.log(a1);// 1

补充

ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。

const {a,b,c,d,e} = obj || {};

二、关于合并数据的吐槽

比如合并两个数组，合并两个对象。

const a = [1,2,3];

const b = [1,5,6];

const c = a.concat(b);//[1,2,3,1,5,6]



const obj1 = {

  a:1,

}

const obj1 = {

  b:1,

}

const obj = Object.assgin({}, obj1, obj2);//{a:1,b:1}

吐槽

ES6的扩展运算符是不是忘记了，还有数组的合并不考虑去重吗？

改进

const a = [1,2,3];

const b = [1,5,6];

const c = [...new Set([...a,...b])];//[1,2,3,5,6]



const obj1 = {

  a:1,

}

const obj2 = {

  b:1,

}

const obj = {...obj1,...obj2};//{a:1,b:1}

三、关于拼接字符串的吐槽

const name = '小明';

const score = 59;

const result = '';

if(score > 60){

  result = `${name}的考试成绩及格`; 

}else{

  result = `${name}的考试成绩不及格`; 

}

吐槽

像你们这样用ES6字符串模板，还不如不用，你们根本不清楚在${}中可以做什么操作。在${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

改进

const name = '小明';

const score = 59;

const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

四、关于if中判断条件的吐槽

if(

    type == 1 ||

    type == 2 ||

    type == 3 ||

    type == 4 ||

){

   //...

}

吐槽

ES6中数组实例方法includes会不会使用呢？

改进

const condition = [1,2,3,4];



if( condition.includes(type) ){

   //...

}

五、关于列表搜索的吐槽

在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。

const a = [1,2,3,4,5];

const result = a.filter( 

  item =>{

    return item === 3

  }

)

吐槽

如果是精确搜索不会用ES6中的find吗？性能优化懂么，find方法中找到符合条件的项，就不会继续遍历数组。

改进

const a = [1,2,3,4,5];

const result = a.find( 

  item =>{

    return item === 3

  }

)

六、关于扁平化数组的吐槽

一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。

const deps = {

'采购部':[1,2,3],

'人事部':[5,8,12],

'行政部':[5,14,79],

'运输部':[3,64,105],

}

let member = [];

for (let item in deps){

    const value = deps[item];

    if(Array.isArray(value)){

        member = [...member,...value]

    }

}

member = [...new Set(member)]

吐槽

获取对象的全部属性值还要遍历吗？Object.values忘记了吗？还有涉及到数组的扁平化处理，为啥不用ES6提供的flat方法呢，还好这次的数组的深度最多只到2维，还要是遇到4维、5维深度的数组，是不是得循环嵌套循环来扁平化？

改进

const deps = {

    '采购部':[1,2,3],

    '人事部':[5,8,12],

    '行政部':[5,14,79],

    '运输部':[3,64,105],

}

let member = Object.values(deps).flat(Infinity);

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。

补充

flat方法不支持IE浏览器。

七、关于获取对象属性值的吐槽

const name = obj && obj.name;

吐槽

ES6中的可选链操作符会使用么？

改进

const name = obj?.name;

八、关于添加对象属性的吐槽

当给对象添加属性时，如果属性名是动态变化的，该怎么处理。

let obj = {};

let index = 1;

let key = `topic${index}`;

obj[key] = '话题内容';

吐槽

为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？

改进

let obj = {};

let index = 1;

obj[`topic${index}`] = '话题内容';

九、关于输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。

if(value !== null && value !== undefined && value !== ''){

    //...

}

吐槽

ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？

if(value??'' !== ''){

  //...

}

十、关于异步函数的吐槽

异步函数很常见，经常是用 Promise 来实现。

const fn1 = () =>{

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      resolve(1);

    }, 300);

  });

}

const fn2 = () =>{

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      resolve(2);

    }, 600);

  });

}

const fn = () =>{

   fn1().then(res1 =>{

      console.log(res1);// 1

      fn2().then(res2 =>{

        console.log(res2)

      })

   })

}

吐槽

如果这样调用异步函数，不怕形成地狱回调啊！

改进

const fn = async () =>{

  const res1 = await fn1();

  const res2 = await fn2();

  console.log(res1);// 1

  console.log(res2);// 2

}

补充

但是要做并发请求时，还是要用到Promise.all()。

const fn = () =>{

   Promise.all([fn1(),fn2()]).then(res =>{

       console.log(res);// [1,2]

   }) 

}

如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。

十一、后续

欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。

此外以上的整理内容有误的地方，欢迎在评论中指正，万分感谢。

如果你还有其它想吐槽的，也非常欢迎在评论中留下你的吐槽。

前言：在这个假期，我完成了一个小Demo，Flutter 与 Springboot 进行websocket的通讯，为啥想要去做这个Demo呢，主要是在各大平台以及google搜索后发现，没有一个详细的例子来教大家进行一对一、一对多的通讯，大多数都是教你怎么连接，却没有教你怎么去进行下一步的功能实现，于是我利用了五天的假期，踩了无数的坑，终于是完成了它，所以，点个赞吧，不容易啊，兄弟们😭

源码在文章最后，直接运行就完事，服务端我都帮兄弟们架包打好了，运行一下就行，运行方法在文末简单叙述了😎

服务端分析：Springboot WebSocket 即时通讯

先上效果图（我自己搜索这样功能性的问题时，没有效果图基本上都是不想看的）：

即时通讯最重要的功能是完成了（发送文字信息）

阅读本文的注意点：

1.需要一点WebSocket的原理知识

2.Flutter使用WebSocket的方式，本文使用 'dart:io' ，大家也可以使用插件

正文：

1.WebSocket的简单原理

很多同学在第一次碰到这个协议时会发现它与HTTP相似，于是就会问，我们已经有了 HTTP 协议，为什么还需要WebSocket？它有什么特殊的地方呢？

其实是因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

而WebSocket首先是一个持久化的协议，它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，这个协议非常适合即时通讯或者消息的推送。

2.Flutter中怎么使用WebSocket

有两种方式：

1.Flutter自带的 'dart:io'

• 
  

  连接WebSocket服务器

  
  

  Future<WebSocket> webSocketFuture =  WebSocket.connect('ws://192.168.13.32:9090'); //connect中放服务端地址
  

  
  


• 
  

  存放WebSocket.connect返回的对象

  
  

  static WebSocket _webSocket;
  

  
  


• 
  

  发送消息

  
  

  _webSocket.add('发送消息内容');
  

  
  


• 
  

  监听接收消息，调用listen方法

  
  

  void onData(dynamic content) {
  
  	print('收到消息:'+content);
  
  }
  
  _webSocket.listen(onData, onDone: () {
  
          print('onDone');
  
        }, onError: () {
  
          print('onError');
  
        }, cancelOnError: true);
  

  
  


• 
  

  例子：

  
  

  webSocketFuture.then((WebSocket ws) {
  
        _webSocket = ws;
  
        void onData(dynamic content) {
  
          print('收到新的消息');
  
        }
  
        // 调用add方法发送消息
  
        _webSocket.add('message');
  
        // 监听接收消息，调用listen方法
  
       _webSocket.listen(onData, onDone: () {
  
          print('onDone');
  
        }, onError: () {
  
          print('onError');
  
        }, cancelOnError: true);
  
      });
  

  
  


• 
  

  关闭WebSocket连接

  
  

  _webSocket.close();
  

  
  

2.第三方插件库实现 WebSocket

基本使用步骤也都是：连接 WebSocket 服务器、发送消息、接收消息、关闭 WebSocket 连接。

• 在项目的 pubspec.yaml 里加入引用：

dependencies:

  web_socket_channel: 官网最新版本

• 导入包：

import 'package:web_socket_channel/io.dart';

• 连接 WebSocket 服务器：

var channel = IOWebSocketChannel.connect("ws://192.168.13.32:9090");

通过IOWebSocketChannel我们便可以进行各种操作

• 发送消息：

channel.sink.add("connected!");

• 监听接收消息：

channel.stream.listen((message) {      print('收到消息:' + message);    });

• 关闭 WebSocket 连接：

channel.sink.close();

以上就是 Flutter 通过第三方插件库实现 WebSocket 通信功能的基本步骤。

3.联系人界面以及对话界面的UI实现

我的小部件都进行了封装，源码请看文章最后，分析部分只放重要代码

• 
  

  对话框ui处理

  
  

  顶部使用appbar，包含一个返回按钮，用户信息以及状态，还有一个设置按钮（没有什么难点就不放代码了）

  
  

• 双方信息处理

这里有个ui处理难点，就是分析信息是谁发出的，是自己还是对方呢

这里我选择在每条信息Json格式的末尾加上一个判断符：messageType，”receiver“代表对方发的信息，”sender“代表是自己发的

ui处理：

ListView.builder(  itemCount: UserMessage.messages.length, //总发送信息的条数  shrinkWrap: true,  padding: const EdgeInsets.only(top: 10, bottom: 10),  physics: const NeverScrollableScrollPhysics(),  itemBuilder: (context, index) {    return Container(      padding: const EdgeInsets.only(          left: 14, right: 14, top: 10, bottom: 10),      child: Align(          alignment:              (UserMessage.messages[index].messageType == "receiver"                  ? Alignment.topLeft                  : Alignment.topRight),          child: Container(              decoration: BoxDecoration(                borderRadius: BorderRadius.circular(20),                color: (UserMessage.messages[index].messageType ==                        "receiver"                    ? Colors.grey.shade200                    : Colors.blue[200]),              ),              padding: const EdgeInsets.all(16),              child: Text(                UserMessage.messages[index].messageContent,                style: TextStyle(fontSize: 15),              ))),    );  },),

• 
  

  单个联系人的ui

  
  

一行为一个联系人模块，其内包含用户头像，用户姓名，即时通讯内容，以及上一次对话的时间，点击每行跳转到相对应的聊天框。

封装处理：

class ConversationList extends StatefulWidget {  String name; //用户姓名  String messageText; //即时内容  String imageUrl; //用户头像  String time;//上一次对话时间  bool isMessageRead; //用于处理字体大小  ConversationList(      {Key? key, required this.name,      required this.messageText,      required this.imageUrl,      required this.time,      required this.isMessageRead}) : super(key: key);  @override  _ConversationListState createState() => _ConversationListState();}

详细布局：

return GestureDetector(    onTap: () {      Navigator.push(context, MaterialPageRoute(builder: (context){        return ChatDetailPage(name:widget.name,userImageUrl:widget.imageUrl);      }));    },    child: Container(      padding: const EdgeInsets.only(left: 16, right: 16, top: 10, bottom: 10),      child: Row(        children: <Widget>[          Expanded(            child: Row(              children: <Widget>[                CircleAvatar(                  backgroundImage: AssetImage(widget.imageUrl),                  maxRadius: 30,                ),                const SizedBox(                  width: 16,                ),                Expanded(                  child: Container(                    color: Colors.transparent,                    child: Column(                      crossAxisAlignment: CrossAxisAlignment.start,                      children: <Widget>[                        Text(                          widget.name,                          style: const TextStyle(fontSize: 16),                        ),                        const SizedBox(                          height: 6,                        ),                        Text(                          widget.messageText,                          style: TextStyle(                              fontSize: 13,                              color: Colors.grey.shade600,                              fontWeight: widget.isMessageRead                                  ? FontWeight.bold                                  : FontWeight.normal),                        ),                      ],                    ),                  ),                ),              ],            ),          ),          Text(            widget.time,            style: TextStyle(                fontSize: 12,                fontWeight: widget.isMessageRead                    ? FontWeight.bold                    : FontWeight.normal),          ),        ],      ),    ),  );}

• 
  

  列表实现：

  
  

  这里简单使用ListView.builder

  
  

  ListView.builder(  itemCount: chatUsers.length,  shrinkWrap: true,  padding: const EdgeInsets.only(top: 16),  physics: const NeverScrollableScrollPhysics(),  itemBuilder: (context, index){    return ConversationList(      name: chatUsers[index].name,      messageText: chatUsers[index].messageText,      imageUrl: chatUsers[index].imageURL,      time: chatUsers[index].time,      isMessageRead: (index == 0 || index == 3)?true:false,    );  },),
  

  
  

ui的难点部分在这里就分析完成了

4.Flutter WebSocket处理

因为是个Demo，封装的信息比较简单

• 
  

  对发送的信息进行封装

  
  

  class ChatMessage {  String messageContent;  String messageType;  ChatMessage({required this.messageContent, required this.messageType});}
  

  
  


• 
  

  对基本信息，以及用户信息进行封装，

  
  

  class UserMessage{  static int userId = 0;  static String socketUrl = "ws://192.168.10.104:9090/websocket/";  ///将对话暂存在这里  static List<ChatMessage> messages = [  ];}
  

  
  


• 
  

  初始化时连接服务器并且对其进行监听

  
  

  当数据返回时，保存到内存中

  
  

  //连接wensocket并且监听void connect(String userName) {  Future<WebSocket> futureWebSocket =      WebSocket.connect(UserMessage.socketUrl + "/$userName"); //socket地址  futureWebSocket.then((WebSocket ws) {    _webSocket = ws;    _webSocket.readyState;    // 监听事件    void onData(dynamic content) {      print('收到消息:' + content);      setState(() {        if (content.toString().substring(0, 1) ==            UserMessage.userId.toString()) {          ///自己发送的消息（服务端没有完善）        } else {          UserMessage.messages.add(ChatMessage(              messageContent: content.toString().substring(                    2,                  ),              messageType: "receiver"));        }      });    }    _webSocket.listen(onData,        onError: (a) => print("error"), onDone: () => print("done"));  });}
  

  
  


• 
  

  发送信息处理

  
  

  对数据需要将json对象转换为json字符串

  
  

  // 向服务器发送消息void sendMessage(dynamic message) {  print(convert.jsonEncode(message));  _webSocket.add(convert.jsonEncode(message);}
  

  
  

  onPressed: () {  var toUser = "0"; //服务端没有完善，这里固定用户id了  if (UserMessage.userId == 0) {    toUser = "1";  } else {    toUser = "0";  }  var message = {    "msg": _controller.text,    "toUser": toUser,    "type": 1  };  ///传递信息  sendMessage(message); //发送信息  setState(() { //更新ui    UserMessage.messages.add(      ChatMessage(          messageContent: _controller.text,          messageType: "sender"),    );    _controller.clear(); //清除输入框内文字  });},
  

  
  


• 
  

  在退出页面时，关闭WebSocket连接

  
  

  @overridevoid dispose() {  // TODO: implement dispose  super.dispose();  closeSocket();}
  

  
  

5.该文章项目运行步骤

• 
  

  下载代码压缩包，解压后的目录是这样的：

  
  

其中images是图片，lib是源代码，jar包是服务端

第一步：创建一个新项目，源代码是使用了空安全的，也可以创建不是空安全的项目，改一下代码即可

第二步：将images与lib复制进去

第三步：在pubspec.yaml中配置静态图片

assets:  - images/

第四步：运行.jar包

切换到包存放的地址，服务端的端口为9090，如果与各位的端口冲突可以修改服务端代码，或者停止你在使用9090的这个端口

java -jar 包名.jar

查找端口：

netstat -aon|findstr 9090

查看指定 PID 的进程

tasklist|findstr 10021

结束进程

强制（/F参数）杀死 pid 为 10021的所有进程包括子进程（/T参数）：

taskkill /T /F /PID 9088 

第五步：在cmd中查找自己的ip，然后在代码的这里修改

第六步：运行后的操作

运行后会先进入登录界面，这里第一只手机输入0 ，第二只手机输入1，因为服务端默认从0开始（给用户分配id）,因为没有数据库。

这样进入就可以了，然后就可以像效果图一样开始交流

服务端有问题可以参考这篇文章：Springboot WebSocket 即时通讯

工厂方法模式(Factory Method)又称为多态性工厂模式，其核心不再像简单工厂模式那样负责所有的子类的创建，而是将具体的创建工作交给子类去完成

在前文已经介绍简单工厂模式 时，写了如下代码：

/**

 * type：角色类型 - 管理员、员工

 * name：对应角色的名字

 */

const Factory = (type, name) => {

  switch (type) {

    case "admin": // 创建管理员

      return new Admin(name, ["user", "salary", "vacation"]);

    case "staff": // 创建员工

      return new Staff(name, ["vacation"]);

    default: // 健壮性处理

      throw new Error("暂不支持该角色的创建");

  }

};

虽然其可以让我们在创建实例的时候很爽，不用关心内部具体的实现，通过观察代码，可以发现其存在的问题：

• 不符合设计原则-开放封闭原则

当每一次新增一个权限角色的时候，对需要对上面的代码进行修改，严重破坏了原有的代码和业务逻辑，与开放封闭原则背离

• 容易变成面条代码

虽然角色越来越多，那么内部的case也会随之变得越来越多，简单工厂函数的内容也随着变得冗余

理想情况下，我们是希望在新增新的权限角色时，对于老的代码无任何的修改便可以完成新功能的增加

首先看一下工厂方法模式的UML：

其相比简单工厂模式，会多了一个工厂方法，Admin类对应多了一个AdminFactory类，现在只需要通过AdminFactory类创建实例即可

接下来看看工厂方法模式如何创建：

class Person {

    constructor(name, permission) {

        this.name = name;

        this.permission = permission;

    }

}



/**

 * 管理员

 */

class Admin extends Person {

    constructor(name, permission) {

        super(name, permission);

    }

}



/**

 * 管理员的工厂方法

 */

class AdminFactory {

    static create(name) {

        return new Admin(name, ["user", "salary", "vacation"]);

    }

}



/**

 * 员工

 */

class Staff extends Person {

    constructor(name, permission) {

        super(name, permission);

    }

}



/**

 * 员工的工厂方法

 */

class StaffFactory {

    static create(name) {

        return new Staff(name, ["vacation"]);

    }

}



const admin = AdminFactory.create("管理员");

const zs = StaffFactory.create("张三");

const ls = StaffFactory.create("李四");

若是需要创建新的权限角色，只需要创建对应的工厂方法即可，完全符合开放封闭原则，也可以避免面条式代码，具体实例创建都是通过对应工厂方法创建

适配器模式又称为包装器模式，将一个类的接口转化为用户需要的另外一个接口，主要是为了解决对象之间接口不兼容的问题，比如随着业务迭代升级出现了旧的接口与心的接口不兼容，这个时候不可能强制使用旧接口的用户去升级，而是在中间加一个适配器进行转换，让旧接口的使用者无感使用，保证了稳定性，在日常生活中适配器的案例随处可见，比如耳机插口不统一、充电接口不统一等，这个时候就需要一个适配器来解决问题

UML:

接下看一下UML对应的代码实现：

class Target {

    constructor(type) {

        let result;



        switch (type) {

            case "adapter":

                result = new Adapter();

                break;

            default:

                result = null;

        }

        return result;

    }



    Request() {

            console.log('Target Request');

    }

}



class Adaptee {

    constructor() {

        console.log("Adaptee created");

    }



    SpecificRequest() {

        console.log("Adaptee request");

    }

}



class Adapter extends Adaptee {

    constructor() {

        super();

        console.log("Adapter created");

    }



    Request() {

        return this.SpecificRequest();

    }

}



function init_Adapter() {

    var f = new Target("adapter");

    f.Request();

}



init_Adapter();

应用场景

开发中常用的axios，其支持node端和浏览器端，那么在不同端调用axios需要进行不同的处理，而这些对于使用者而言都是无感的，我们在使用的时候都是使用同一套API直接干就完事了，不会在意内部具体做了些什么，这个时候就需要使用适配器来抹平不同端的差异，让使用者用着开心

接下来可以模拟简单实现这个过程

使用axios请求一个接口：

axios({

    url: "xxx",

    method: "GET",

})

    .then((res) => {

        console.log("success:", res);

    })

    .catch((err) => {

        console.log("fail:", err);

    });

接下来需要手动实现axios函数：

function axios(config) {

    let adaptor = getDefaultAdaptor();



    // 无论是node端 还是 浏览器端，在使用的时候都只是转入一个config配置对象，返回一个 Promise 对象

    return adaptor(config);

}

上文说到因为axios可以在浏览器端和node端使用，getDefaultAdaptor函数就是起到适配器的作用，根据不同的环境分别创建不同的adaptor

/**

 * 适配器

 */

function getDefaultAdaptor() {

    let adaptor;



    if (typeof XMLHttpRequest !== "undefined") {

        // 是浏览器环境

        adaptor = xhr;

    } else if (typeof process !== "undefined") {

        // node 环境

        adaptor = http;

    }



    return adaptor;

}

其中xhr和http为两个函数，用于创建具体的请求，至此适配器的使用已经完成，接下来就看看不同端是如何实现的接口请求

浏览器端：

/**

 * 浏览器环境

 */

function xhr(config) {

    return new Promise((resolve, reject) => {

        const req = new XMLHttpRequest();

        req.open(config.method, config.url, true);



        req.onreadystatechange = function () {

            if (req.readyState === 4) {

                if (req.status >= 200 && req.status < 300) {

                    resolve(req.responseText);

                } else {

                    reject("请求失败");

                }

            }

        };



        req.send();

    });

}

node端：

/**

 * node 环境

 */

function http(config) {

    const url = require("url");

    const http = require("http");

    // 将需要的参数 解析出来

    const { hostname, port, path } = url.parse(config.url);

    return new Promise((resolve, reject) => {

        const options = {

            hostname,

            port,

            path,

            method: config.method,

        };



        const req = http.request(options, function (response) {

            let chunks = [];



            response.on("data", (chunk) => {

                chunks.push(chunk);

            });



            response.on("end", () => {

                const res = Buffer.concat(chunks).toString();

                resolve(res);

            });

        });



        // 监听请求异常

        req.on("error", (err) => {

            reject(err);

        });



        // 请求发送完毕

        ren.end();

    });

}

两个 Node.js 进程之间如何进行通信呢？这里要分两种场景：

1. 不同电脑上的两个 Node.js 进程间通信


2. 同一台电脑上两个 Node.js 进程间通信

对于第一种场景，通常使用 TCP 或 HTTP 进行通信，而对于第二种场景，又分为两种子场景：

1. Node.js 进程和自己创建的 Node.js 子进程通信


2. Node.js 进程和另外不相关的 Node.js 进程通信

前者可以使用内置的 IPC 通信通道，后者可以使用自定义管道，接下来进行详细介绍：

不同电脑上的两个 Node.js 进程间通信

要想进行通信，首先得搞清楚如何标识网络中的进程？网络层的 ip 地址可以唯一标识网络中的主机，而传输层的协议和端口可以唯一标识主机中的应用程序（进程），这样利用三元组（ip 地址，协议，端口）就可以标识网络的进程了。

使用 TCP 套接字

TCP 套接字（socket）是一种基于 TCP/IP 协议的通信方式，可以让通过网络连接的计算机上的进程进行通信。一个作为 server 另一个作为 client，server.js 代码如下：

const net = require('net')

const server = net.createServer(socket => {

  console.log('socket connected')

  socket.on('close', () => console.log('socket disconnected'))

  socket.on('error', err => console.error(err.message))

  socket.on('data', data => {

    console.log(`receive: ${data}`)

    socket.write(data)

    console.log(`send: ${data}`)

  })

})

server.listen(8888)

client.js 代码：

const net = require('net')

const client = net.connect(8888, '192.168.10.105')



client.on('connect', () => console.log('connected.'))

client.on('data', data => console.log(`receive: ${data}`))

client.on('end', () => console.log('disconnected.'))

client.on('error', err => console.error(err.message))



setInterval(() => {

  const msg = 'hello'

  console.log(`send: ${msg}`)

  client.write(msg)

}, 3000)

运行效果：

$ node server.js

client connected

receive: hello

send: hello



$ node client.js

connect to server

send: hello

receive: hello

使用 HTTP 协议

因为 HTTP 协议也是基于 TCP 的，所以从通信角度看，这种方式本质上并无区别，只是封装了上层协议。server.js 代码为：

const http = require('http')

http.createServer((req, res) => res.end(req.url)).listen(8888)

client.js 代码：

const http = require('http')

const options = {

  hostname: '192.168.10.105',

  port: 8888,

  path: '/hello',

  method: 'GET',

}

const req = http.request(options, res => {

  console.log(`statusCode: ${res.statusCode}`)

  res.on('data', d => process.stdout.write(d))

})

req.on('error', error => console.error(error))

req.end()

运行效果：

$ node server.js

url /hello



$ node client.js

statusCode: 200

hello

同一台电脑上两个 Node.js 进程间通信

虽然网络 socket 也可用于同一台主机的进程间通讯（通过 loopback 地址 127.0.0.1），但是这种方式需要经过网络协议栈、需要打包拆包、计算校验和、维护序号和应答等，就是为网络通讯设计的，而同一台电脑上的两个进程可以有更高效的通信方式，即 IPC（Inter-Process Communication），在 unix 上具体的实现方式为 unix domain socket，这是服务器端和客户端之间通过本地打开的套接字文件进行通信的一种方法，与 TCP 通信不同，通信时指定本地文件，因此不进行域解析和外部通信，所以比 TCP 快，在同一台主机的传输速度是 TCP 的两倍。

使用内置 IPC 通道

如果是跟自己创建的子进程通信，是非常方便的，child_process 模块中的 fork 方法自带通信机制，无需关注底层细节，例如父进程 parent.js 代码：

const fork = require("child_process").fork

const path = require("path")

const child = fork(path.resolve("child.js"), [], { stdio: "inherit" });

child.on("message", (message) => {

  console.log("message from child:", message)

  child.send("hi")

})

子进程 child.js 代码：

process.on("message", (message) => {

  console.log("message from parent:", message);

})



if (process.send) {

  setInterval(() => process.send("hello"), 3000)

}

运行效果如下：

$ node parent.js

message from child: hello

message from parent: hi

message from child: hello

message from parent: hi

使用自定义管道

如果是两个独立的 Node.js 进程，如何建立通信通道呢？在 Windows 上可以使用命名管道（Named PIPE），在 unix 上可以使用 unix domain socket，也是一个作为 server，另外一个作为 client，其中 server.js 代码如下：

const net = require('net')

const fs = require('fs')



const pipeFile = process.platform === 'win32' ? '\\\\.\\pipe\\mypip' : '/tmp/unix.sock'



const server = net.createServer(connection => {

  console.log('socket connected.')

  connection.on('close', () => console.log('disconnected.'))

  connection.on('data', data => {

    console.log(`receive: ${data}`)

    connection.write(data)

    console.log(`send: ${data}`)

  })

  connection.on('error', err => console.error(err.message))

})



try {

  fs.unlinkSync(pipeFile)

} catch (error) {}



server.listen(pipeFile)

client.js 代码如下：

const net = require('net')



const pipeFile = process.platform === 'win32' ? '\\\\.\\pipe\\mypip' : '/tmp/unix.sock'



const client = net.connect(pipeFile)

client.on('connect', () => console.log('connected.'))

client.on('data', data => console.log(`receive: ${data}`))

client.on('end', () => console.log('disconnected.'))

client.on('error', err => console.error(err.message))



setInterval(() => {

  const msg = 'hello'

  console.log(`send: ${msg}`)

  client.write(msg)

}, 3000)

运行效果：

$ node server.js 

socket connected.

receive: hello

send: hello



$ node client.js

connected.

send: hello

receive: hello

介绍

本期给大家介绍一个可以随机模拟数据的库——mock.js，它是一个模拟数据生成器，帮助前端开发和原型与后端进程分离，减少一些开发时联调测试成本。它支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等数据的模拟。而且不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

看就是这么简单，我们实现可以与后端协定好接口格式和字段，然后可以在前端开发中拦截ajax请求把模拟数据直接传过去，也可以通过在线平台或搭建中端做接口模拟。后面，等后端完成接口开发，就可以直接替换接口就行了，非常提高效率。

他的API有非常丰富，我们今天先来学习一下他常用的API有哪些，看懂后绝大部分数据就直接用了。

正文

1.指定数量

A.固定数量

'name|num': any

Mock.mock({

    "star|3": "★",

    "num|3": 1,

    "arr|3": [{"level":1}],

    "obj|3":{"a":1,"b":2,"c":3,"d":4,"e":5},

    "bool|3":false

})

例如，输入固定值3则：

• star：连续返回3个★


• num：固定返回数值3


• arr：返回数组内3个对象，如果不够固定值则从第一个值开始重复下去直到填满


• obj：随机选择3个对象里的属性返回出来，如果不够固定值则有多少返回多少


• bool：随机true和false

B. 生成随机数量

'name|min-max': any

Mock.mock({

    "star|1-5": "★",

    "num|1-5": 1,

    "arr|1-5": [{"level":1}],

    "obj|1-5":{"a":1,"b":2,"c":3,"d":4,"e":5},

    "bool|1-5":false

})

例如，star随机生成1到5个★，如图其后皆为随机1到5个

2.数值自加

适用场景：ID值等唯一值在列表中的模拟。

'name|+number': number|array

Mock.mock({

  "id|+1": 1,

  "code|+1": ["a","b","c","d","e"]

})

例如，在模拟下列数据，中将每隔一个数据，id值都会在上一个值得基础上自加5。

3.随机颜色

mock内置随机颜色的函数 —— @color | @hsl | @rgba | @rgb | @hex

Mock.mock({

  "status": 1,

  "msg": "success",

  "data": {

    "list|10": [{

      "id|+1": 1,

      "color": "@color"

    }]

  }

})

4.生成图片

mock内置了生成随机图片的函数 —— @image

Random.image( size?, background?, foreground?, format?, text? )

• size：尺寸，如100x100


• background：背景色，如#FFFFFF


• foreground：前景色，也就是图片中文字颜色，如#333333


• format：图片类型，如png


• text：图片中文字

Mock.mock({

  "status": 1,

  "msg": "success",

  "data": {

    "list|10": [{

      "id|+1": 1,

      "icon": "@image(240x160, @color, #FFFFFF, png, icon)"

    }]

  }

})

5.内置常用函数

mock出了随机颜色和图片之外，还内置了很内置函数，接下来我们介绍几个使用最频繁的几个：

Mock.mock({

  "status": 1,

  "msg": "success",

  "data": {

    "list|5": [{

      "id": "@id",

      "name": "@cname",

      "title":"@ctitle(3,10)",

      "date":"@datetime",

      "email":"@email",

      "des": "@cparagraph(1,3)",

      "province":"@province",

      "city":"@city(true)",

      "address":"@county(true)",

      "link": "@url"

    }]

  }

})

• @id：随机生成唯一值


• @cname：随机生成中文名字


• @ctitle(min?,max?)：随机生成中文标题


• @date("yyyy-MM-dd HH:mm:ss")：随机生成时间


• @email：随机生成邮箱地址


• @cparagraph(min?,max?)：随机生成中文段落


• @province：随机生成省


• @city(boolean?)：随机生成市，默认为false，不传则只显示市，不显示省，传入true，则省市全显示


• @county(boolean?)：随机生成区，默认为false，不传则只显示区，不显示省市，传入true，则省市区全显示


• @url：随机生成链接

结语

相信看完以上五条规则，你已经完全可以自由模拟想要的数据了，此时，我们可以通过用node搭建一个中端做个测试地址去处理要模拟的数据。或者用fastmock，这类线上平台去实现，他们同样支持mock API。总之，不管那种方案，都会对团队开发的效率有极大的提升。

前言

背景知识：基本的CSS动画，逐帧动画，闪烁效果

有些时候，我们希望一段文本中的字符逐个显现，模拟出一种打字的效果。这个效果在技术类网站中尤为流行，用等宽字体可以营造出一种终端命令行的感觉。如果使用得当，它确实可以让整个网页的设计感提升一个档次。

这篇文章我们就用CSS来实现一下这个效果~✨

解决方案

核心思路就是让容器的宽度成为动画的主体：

把所有文本包裹在这个容器中，然后让它的宽度从0开始以步进动画的方式、一个字一个字地扩张到它应有的宽度。

你可能已经察觉到了，这个方法是有局限的：它并不适用于多行文本。

好的，我们开始写代码吧！假设我们需要把这个动画效果应用到h1标题上，并且已经它把设置为等宽字体了，结构代码如下所示

<h1>CSS is awesome!</h1>

🧑1.0版本

我们很容易地给他加上动画，让他宽度从0变化完整的宽度

/*

*1.0版本

*/

@keyframes typing {

    0% { width: 0 }

}



h1 {

  background: lightgreen;

  font: bold 200% Consolas, Monaco, monospace;

  width: 8.25em;

  animation: typing 8s ;

}

我们可以看到产生的效果简直就是车祸现场😱，跟我们想要的的打字效果没有一点关系。

👦1.1版本

宝儿你可能已经猜到问题出在哪儿了，我们忘了用white-space:nowrap；来阻止文本折行，因此文本的行数会随着宽度的扩张不断变化。其次，我们忘了加上overflow: hidden;，所以超出宽度的文本没有被裁切掉。我们完善一下代码

/*

*1.1版本

*/

@keyframes typing {

    0% { width: 0 }

}



h1 {

  background: lightgreen;

  font: bold 200% Consolas, Monaco, monospace;

  width: 8.25em;

  white-space: nowrap;

  overflow: hidden;

  animation: typing 8s steps(15);

}

值得注意的是我们这里的逐帧动画是通过设置steps实现的，我们所需要的步进数量是由字符的数量来决定的，这显然是很难维护的，而且对于动态文字来说更是不可能维护的。不过，我们稍后将看到，可以用一小段JavaScript代码来把这件事情自动化。

🕵️‍♂️2.0版本

/*

*2.0版本

*/

@keyframes typing {

	0% { width: 0 }

}



@keyframes caret {

	50% { border-right-color: transparent; }

}



h1 {

  /*background: lightgreen;*/

  font: bold 200% Consolas, Monaco, monospace;

  /* width: 8.25em; */

  width: 15ch;

  white-space: nowrap;

  overflow: hidden;

  border-right: .05em solid;

  animation: typing 8s steps(15),

	     caret 1s steps(1) infinite;

}

2.0版本我们我们使用了ch单位，这个ch单位是由CSS值与单位（第三版规范引入的一个新单位，表示“0”字形的宽度。它应该是最不为人知的一个新单位，因为在绝大多数场景下，我们并不关心0这个字符显示出来到底有多宽。但对等宽字体来说，这是个例外。在等宽字体中，“0”字形的宽度和其他所有字形的宽度是一样的。因此，如果我们用ch单位来表达这个标题的宽度，那取值实际上就是字符的数量，在本例子中，也就是15。

同时我们添加了闪烁光标，我们用右边框来模拟光标效果，同时给光标设置闪烁的动画，将光标设置为透明即可，要注意的，光标的动画是无限循环的！

这个动画现在的表现相当完美了，不过还不是很易于维护：需要根据每个标题的字数来给它们分别指定不同的宽度样式，而且还需要在每次改变标题内容时同步更新这些宽度样式。显然，这种场景正是JavaScript的用武之地：

🕵️‍♀️2.1终极版本

/*

*2.1终极版本

*/

@keyframes typing {

	0% { width: 0 }

}



@keyframes caret {

	50% { border-right-color: transparent; }

}



h1 {

  font: bold 200% Consolas, Monaco, monospace;

  white-space: nowrap;

  overflow: hidden;

  border-right: .05em solid;

  animation: typing 8s,

	     caret 1s steps(1) infinite;

}

const doc = document.querySelector('h1')

let len = doc.textContent.length, s = doc.style

s.width = len + 'ch'

s.animationTimingFunction = 'steps('+len+')'

只需短短几行JavaScript代码，我们避免了手动计算字符数量和步进数量，取得两全其美的结果：不仅动画生动逼真，而且代码易于维护！

前言

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

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

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

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

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

• 
  

  模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。

  
  


• 
  

  编译兼容。在前端的“上古时期”，手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。

  
  


• 
  

  能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

  
  

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

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

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

• 1、读取webpack的配置参数；


• 2、启动webpack，创建Compiler对象并开始解析项目；


• 3、从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树；


• 4、对不同文件类型的依赖模块文件使用对应的Loader进行编译，最终转为Javascript文件；


• 5、整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。

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

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

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

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

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



(() => { // webpackBootstrap

    var __webpack_modules__ = ({

        'file-A-path': ((modules) => { // ... })

        'index-file-path': ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => { // ... })

    })

    

    // The module cache

    var __webpack_module_cache__ = {};

    

    // The require function

    function __webpack_require__(moduleId) {

        // Check if module is in cache

        var cachedModule = __webpack_module_cache__[moduleId];

        if (cachedModule !== undefined) {

                return cachedModule.exports;

        }

        // Create a new module (and put it into the cache)

        var module = __webpack_module_cache__[moduleId] = {

                // no module.id needed

                // no module.loaded needed

                exports: {}

        };



        // Execute the module function

        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);



        // Return the exports of the module

        return module.exports;

    }

    

    // startup

    // Load entry module and return exports

    // This entry module can't be inlined because the eval devtool is used.

    var __webpack_exports__ = __webpack_require__("./src/index.js");

})

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

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

你知道sourceMap是什么吗？

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

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

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

{

  "version" : 3,                          // Source Map版本

  "file": "out.js",                       // 输出文件（可选）

  "sourceRoot": "",                       // 源文件根目录（可选）

  "sources": ["foo.js", "bar.js"],        // 源文件列表

  "sourcesContent": [null, null],         // 源内容列表（可选，和源文件列表顺序一致）

  "names": ["src", "maps", "are", "fun"], // mappings使用的符号名称列表

  "mappings": "A,AAAB;;ABCDE;"            // 带有编码映射数据的字符串

}

其中mappings数据有如下规则：

• 生成文件中的一行的每个组用“;”分隔；


• 每一段用“,”分隔；


• 每个段由1、4或5个可变长度字段组成；

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

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

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

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

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

Source Map的原理探究

Source Maps under the hood – VLQ, Base64 and Yoda

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

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

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

// webpack.config.js

module.exports = {

  // ...other config

  module: {

    rules: [

      {

        test: /^your-regExp$/,

        use: [

          {

             loader: 'loader-name-A',

          }, 

          {

             loader: 'loader-name-B',

          }

        ]

      },

    ]

  }

}

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

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

module.exports = function(source) {

    const content = doSomeThing2JsString(source);

    

    // 如果 loader 配置了 options 对象，那么this.query将指向 options

    const options = this.query;

    

    // 可以用作解析其他模块路径的上下文

    console.log('this.context');

    

    /*

     * this.callback 参数：

     * error：Error | null，当 loader 出错时向外抛出一个 error

     * content：String | Buffer，经过 loader 编译后需要导出的内容

     * sourceMap：为方便调试生成的编译后内容的 source map

     * ast：本次编译生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，进而省去重复生成 AST 的过程

     */

    this.callback(null, content);

    // or return content;

}

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

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

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

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

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

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

// Tapable的简单使用

const { SyncHook } = require("tapable");



class Car {

    constructor() {

        // 在this.hooks中定义所有的钩子事件

        this.hooks = {

            accelerate: new SyncHook(["newSpeed"]),

            brake: new SyncHook(),

            calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])

        };

    }



    /* ... */

}





const myCar = new Car();

// 通过调用tap方法即可增加一个消费者，订阅对应的钩子事件了

myCar.hooks.brake.tap("WarningLampPlugin", () => warningLamp.on());

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

• 插件必须是一个函数或者是一个包含 apply 方法的对象，这样才能访问compiler实例；


• 传给每个插件的 compiler 和 compilation 对象都是同一个引用，若在一个插件中修改了它们身上的属性，会影响后面的插件;


• 异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程，不然会卡住;

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

class MyPlugin {

  apply (compiler) {

    // 找到合适的事件钩子，实现自己的插件功能

    compiler.hooks.emit.tap('MyPlugin', compilation => {

        // compilation: 当前打包构建流程的上下文

        console.log(compilation);

        

        // do something...

    })

  }

}

更详细的开发文档可以直接查看官网的 Plugin API。

最后

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

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

睡前小故事

在某次开会的时候，组长说每次做完一个小需求和修改一个bug都要提交一个commit，下班前要将本地分支推送到远程仓库。没commit的，没push的都扣当月的绩效...,虽然觉得这样很烦躁，但是谁让自己是打工崽呢，又不敢说什么，只能照着做了，还能怎么办。之后就是每天不停的git status, git add . ,git commit -m 'xxxxx'...有时bug多的时候，一天输入几十次这样的命令，终于有一天我受不了，实在太没劲了（也许是自己懒吧），git,git,git的，代码还写不写啊。然后就想能不能输一个命令自动完成这几个步骤，接着就诞生了这个小脚本。

脚本的实现

脚本用shell写的

判断有没有安装git

if(!shell.which('git')) {

  shell.echo('你还没安装git,请先安装git')

  shell.exit(1)

}

判断有没有文件变动

if(shell.exec('git status').stdout.indexOf('working tree clean') !== -1) {

  shell.echo('没有变动文件')

  shell.exit(1)

}

查看哪些文件变动了

if(shell.exec('git status').code !== 0) {

  shell.echo('git status执行出错')

  shell.exit(1)

}

添加文件的追踪

if(shell.exec('git add .').code !== 0) {

  shell.echo('git add执行出错')

  shell.exit(1)

}

提交本地仓库

let intro = process.argv[2]



if(!intro) {

  shell.echo('请填写提交信息,格式为feat(xxxx):xxxxx')

  shell.exit(1)

}

if(shell.exec(`git commit -m ${intro}`).code !== 0) {

  shell.echo('git  commit执行出错')

  shell.exit(1)

}

推送远程仓库

let BranchName = shell.exec('git rev-parse --abbrev-ref HEAD')

// 因为我7点下班，七点后commit的都会推送到远程

if(new Date().getHours() >= 19) {

  if(shell.exec(`git push origin ${BranchName}`).code !== 0) {

    shell.echo('推送远程失败')

    shell.exit(1)

  }

  shell.echo('推送远程完成')

}

完整代码

let shell = require('shelljs')



if(!shell.which('git')) {

  shell.echo('你还没安装git,请先安装git')

  shell.exit(1)

}



shell.echo('查看哪些文件变动')



if(shell.exec('git status').stdout.indexOf('working tree clean') !== -1) {

  shell.echo('没有变动文件')

  shell.exit(1)

}



if(shell.exec('git status').code !== 0) {

  shell.echo('git status执行出错')

  shell.exit(1)

}



shell.echo('开始添加新文件追踪')



if(shell.exec('git add .').code !== 0) {

  shell.echo('git add执行出错')

  shell.exit(1)

}



let intro = process.argv[2]



if(!intro) {

  shell.echo('请填写提交信息,格式为feat(xxxx):xxxxx')

  shell.exit(1)

}



if(shell.exec(`git commit -m ${intro}`).code !== 0) {

  shell.echo('git  commit执行出错')

  shell.exit(1)

}



let BranchName = shell.exec('git rev-parse --abbrev-ref HEAD')



shell.echo(`代码提交到本地完成,当前分支是${BranchName}`)



if(new Date().getHours() >= 19) {

  if(shell.exec(`git push origin ${BranchName}`).code !== 0) {

    shell.echo('推送远程失败')

    shell.exit(1)

  }

  shell.echo('推送远程完成')

}

使用

 node git-commit.js(写上你脚本的文件) 'feat(xxx):xxxxx'(你要commit的描述)

效果

没变动

有变动

总结

程序猿懒就对。

compute的的用法

首先你要知道computed的用法，在官网中只是简单的介绍了它的缓存作用，根据双向绑定的数据通过计算返回值，当被依赖的值发生改变的时候就会触发重新计算

很多人 就只知道这个只能用来计算值并不能作为其他的用法，其实根据它依赖双向绑定的数据可以监听多个数据，这句话怎么理解呢？就是我们都知道watch只能监听一个数据对象，但是有时候我们要监听多个对象的时候就要写很多个watch方法，而且会触发很多次，很多时候我们要监听的数据并不是1个，而且我们监听的是异步的，这个时候就可以用computed去解决。如果你看到这里还不明白什么意思，你可以看看下面的例子。

这里我监听了2个双向绑定的数据 一个是testData，一个是test3，然而test3 会在挂载之后的下一次更新发生改变，当这个改变发生的时候 会再次触发computed的方法，这个时候就代表我监听到了这个变化了，反过来想我是不是监听到了2个双向绑定的数据，那么结果就是 监听单个数据的变化 可以用watch，监听多个数据变化可以考虑computed，有人觉得我另一个数据没有改变，这也是只是监听了一个数据，我改了下代码。让另一个数据也发生改变。

可以看到这里触发了3次，为啥有3次 我解释下，computed本身是处于created 跟mounted的生命周期之间会自己去调用的，这是第一次，mounted里面的$nextTick方法里面test3改变的时候触发了一次，setTimeout里面testData改变的时候 就是第三次了。也就是说它监听的双向绑定数据改变的时候都会触发 ，这样子就可以达到监听多个数据的目的了。
适用的场景有 表单校验的时候，所有数据填完按钮点亮 这个时候就可以监听多个，还有就是多个异步返回的数据同时满足条件的时候可以监听。

有这么一个场景 ，一个列表是个数组会增加，高亮的地方（也就是下标会改变），只要一个改变就执行操作，你们会用什么去监听呢？

最后抛个问题

众所周知，Map 是用于存储键值对的，而 JavaScript 中对象也是由键值对组成的，那么 Map 存在的意义是什么呢？

别把对象当 Map

1、可能通过原型链访问到未定义的属性

假设现有场景，开发一个网站，需要提供日语、汉语、韩语三种语言，我们可以定义一个字典去管理。

const dictionary = {

    'ja': {

        'Ninjas for hire': '忍者を雇う',

    },

    'zh': {

        'Ninjas for hire': '忍者出租',

    },

    'ko': {

        'Ninjas for hire': '고용 닌자',

    }

}



console.log(dictionary.ja['Ninjas for hire']) // 忍者を雇う

console.log(dictionary.zh['Ninjas for hire']) // 忍者出租

console.log(dictionary.ko['Ninjas for hire']) // 고용 닌자

这样我们就把不同语言的字典管理起来了。但是，当我们试图访问 constroctor 属性，问题就出现了。

console.log(dictionary.ko['constructor']) // ƒ Object() { [native code] }

对于不存在的属性，我们期望得到 undefined，结果却通过原型链访问到了未定义的属性，原型对象的 constructor 属性，指向构造函数。

此处有一个解决办法是把原型设置为 null

Object.setPrototypeOf(dictionary.ko, null)

console.log(dictionary.ko['constructor']) // undefined

2、对象的 Key 只能是字符串

假设需要将对象的 key 映射为 html 节点。我们写如下代码：

/* html部分

<div id="firstElement"></div>

<div id="secondElement"></div>

*/



const firstElement = document.getElementById('firstElement')

const secondElement = document.getElementById('secondElement')



const map = {}



map[firstElement] = {

    data: 'firstElement'

}

map[secondElement] = {

    data: 'secondElement'

}



console.log(map[firstElement].data)     // secondElement

console.log(map[secondElement].data)    // secondElement

第一个元素的数据被覆盖了，原因是对象中的 key 只能是字符串类型，当我们没有使用字符串类型时，它会隐式调用 toString() 函数进行转换。于是两个 html 元素都被转为字符串 [object HTMLDivElement]。

使用 Map

1、Map 常用操作

Map 可以使用任何 JavaScript 数据类型作为键

function People(name) {

    this.name = name

}

const zhangsan = new People('zhangsan')

const xiaoming = new People('xiaoming')

const lihua = new People('lihua')

// 创建 Map

const map = new Map()

// 创建 Map 并进行初始化

const map1 = new Map([

    ['key1', 'val1'],

    ['key2', 'val2'],

])

// 设置键值映射关系

map.set(zhangsan, {

    region: 'HB'

})

map.set(xiaoming, {

    region: 'HN'

})

// 根据 key 获取对应值

console.log(map.get(zhangsan)) // { region: 'HB' }

console.log(map.get(xiaoming)) // { region: 'HN' }

// 获取不存在的 key 得到 undefined

console.log(map.get(lihua))     // undefined

// 通过 has 函数判断指定 key 是否存在

console.log(map.has(lihua))     // false

console.log(map.has(xiaoming))  // true

// map存储映射个数

console.log(map.size)           // 2

// delete 删除 key

map.delete(xiaoming)

console.log(map.has(xiaoming))  // false

console.log(map.size)           // 1

// clear 清空 map

map.clear()

console.log(map.size)           // 0

2、遍历 Map

Map 可以确保遍历的顺序和插入的顺序一致

const zhangsan = { name: 'zhangsan' }

const xiaoming = { name: 'xiaoming' }

const map = new Map()

map.set(zhangsan, { region: 'HB' })

map.set(xiaoming, { region: 'HN' })



for (let item of map) { // = for (let item of map.entries()) {

    console.log(item)

}

// 每个键值对返回的是 [key, value] 的数组

// [ { name: 'zhangsan' }, { region: 'HB' } ]

// [ { name: 'xiaoming' }, { region: 'HN' } ]

for (let key of map.keys()) {

    console.log(key)

}

// 遍历 key

// { name: 'zhangsan' }

// { name: 'xiaoming' }

for (let key of map.values()) {

    console.log(key)

}

// 遍历 value

// { region: 'HB' }

// { region: 'HN' }

3、Map 中判断 key 相等

Map 内部使用 SameValueZero 比较操作。

关于SameValue 和 SameValueZero

SameValue (Object.is()) 和严格相等（===）相比，对于 NaN 和 +0，-0 的处理不同

Object.is(NaN, NaN) // true

Object.is(0, -0) // false

SameValueZero 与 SameValue 的区别主要在于 0 与 -0 是否相等。

map.set(NaN, 0)

map.set(0, 0)

console.log(map.has(NaN))   // true

console.log(map.has(-0))    // true

4、Map 序列化

感谢 @一条鱼的心事 的提醒。

Map 无法被序列化，如果试图用 JSON.stringify 获得 Map 的 JSON 的话，只会得到 "{}"。

由于 Map 的键可以是任意数据类型，而 JSON 仅允许将字符串作为键，所以一般情况下无法将 Map 转为 JSON。

不过可以通过下面的方式去尝试序列化一个 Map：

// 初始化 Map(1) {"key1" => "val1"}

const originMap = new Map([['key1', 'val1']])

// 序列化 "[[\"key1\",\"val1\"]]"

const mapStr = JSON.stringify(Array.from(originMap.entries())) 

// 反序列化 Map(1) {"key1" => "val1"}

const cloneMap = new Map(JSON.parse(mapStr))

Map 和 Object 的性能差异

1. 内存占用

不同浏览器的情况不同，但给定固定大小的内存，Map 大约可以比 Object 多存储 50% 的键/值对。

2. 插入性能

Map 略快，如果涉及大量操作，建议使用 Map。

3. 查找速度

性能差异极小，但如果只包含少量键/值对，则 Object 有时候速度更快。Object 作为数组使用时浏览器会进行优化。如果涉及大量查找操作，选择 Object 会更好一些。

4. 删除性能

如果代码涉及大量的删除操作，建议选择 Map。

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。在手机端进行多图片展示时会经常用到。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

那么瀑布流式布局有哪些实现方式呢？

column 多行布局实现瀑布流

column 实现瀑布流主要依赖两个属性。

column-count 属性，是控制屏幕分为多少列。

column-gap 属性，是控制列与列之间的距离。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>瀑布流布局-column</title>

  <style>

    .box {

          margin: 10px;

          column-count: 3;

          column-gap: 10px;

      }

      .item {

          margin-bottom: 10px;

      }

      .item img{

          width: 100%;

          height:100%;

      }

  </style>

</head>

<body>

  <div class="box">

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

  </div>

</body>

</html>

展示效果如下

flex 弹性布局实现瀑布流

flex 实现瀑布流需要将最外层元素设置为 display: flex，使用弹性布局

flex-flow:column wrap 使其纵向排列并且换行换行

设置 height: 100vh 填充屏幕的高度，也可以设置为单位为 px 的高度，来容纳子元素。

每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>瀑布流布局-flex</title>

  <style>

    .box {

        display: flex;  

        flex-flow: column wrap;

        height: 100vh;

      }

      .item {

        margin: 10px;

        width: calc(100%/3 - 20px);

      }

      .item img{

        width: 100%;

        height:100%;

      }

  </style>

</head>

<body>

  <div class="box">

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

    <div class="item">

      <img  src="./imgs/2.jpg" alt="2" />

    </div>

    <div class="item">

      <img  src="./imgs/3.jpg" alt="3" />

    </div>

    <div class="item">

      <img  src="./imgs/1.jpg" alt="1" />

    </div>

  </div>

</body>

</html>

展示效果如下

起因是因为刷到一则给女友发的每日提醒消息的沸点，每天自动定时发送消息，感觉很有趣，刚好最近在学习egg，里面有用到定时任务，于是决定尝试一把 egg 实现

环境准备

操作系统：支持 macOS，Linux，Windows

运行环境：建议选择 node LTS 版本，最低要求 8.x。

创建egg项目和目录结构介绍

快速入门

目录结构

运行

本地开发

$ npm i

$ npm run dev

$ open http://localhost:7001/

部署生产

$ npm start

$ npm stop

控制器

class HomeController extends Controller {

  async send() {

    const { ctx, app } = this;

    ctx.body = app.config;

    const result = await ctx.service.sendmsg.sendOut();

    ctx.logger.info('主动触发，发送模板消息 结果: %j', result);

    ctx.body = result;

    ctx.set('Content-Type', 'application/json');

  }

}

service服务层

 // 时间处理

 const moment = require('moment');

 class sendmsg extends Service {

  // 发送模板消息给媳妇儿

  async sendOut() {

    const { ctx, app } = this;

    const token = await this.getToken();

    const data = await this.getTemplateData();

    ctx.logger.info('获取token 结果: %j', token);

    // 模板消息接口文档

    const users = app.config.weChat.users;

    const promise = users.map(id => {

      ctx.logger.info('--------------开始发送每日提醒-----------------------------------------------: %j', id);

      data.touser = id;

      return this.toWechart(token, data);

    });

    const results = await Promise.all(promise);

    ctx.logger.info('--------------结束发送每日提醒->结果-----------------------------------------------: %j', results);

    return results;

  }

  // 通知微信接口

  async toWechart(token, data) {

     ...

  }

  // 获取token

  async getToken() {

    ...

  }

  // 组装模板消息数据

  async getTemplateData() {

    ...

  }

  // 获取天气

  async getWeather(city = '深泽') {

      ...

  }

  // 获取 下次发工资 还有多少天

  getWageDay() {

      ...

  }

  // 获取距离 下次结婚纪念日还有多少天

  getMarryDay() {

      ...

  }

  // 获取 距离 下次生日还有多少天

  getbirthday() {

      ...

  }

  // 获取 相恋天数

  getLoveDay() {

      ...

  }

  // 获取 相恋几年了

  getLoveYear() {

      ...

  }

  // 获取是第几个生日

  getBirthYear() {

      ...

  }

  // 获取是第几个结婚纪念日

  getMarryYear() {

      ...

  }

  // 获取 每日一句

  async getOneSentence() {

      ...

  }

  // 获取时间日期

  getDatetime() {

      ...

  }

}

发送模板消息

  async toWechart(token, data) {

    // 模板消息接口文档

    const url = 'https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=' + token;

    const result = await this.ctx.curl(url, {

      method: 'POST',

      data,

      dataType: 'json',

      headers: {

        'Content-Type': 'application/json',

      },

    });

    return result;

  }

获取Access token

  async getToken() {

    const { app } = this;

    const url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + app.config.weChat.appld + '&secret=' + app.config.weChat.secret;

    const result = await this.ctx.curl(url, {

      method: 'get',

      dataType: 'json',

    });

    if (result.status === 200) {

      return result.data.access_token;

    }

  }

组装模板消息数据

  async getTemplateData() {

    const { app } = this;

    // 判断所需 模板

    // 发工资模板 getWageDay == 0       wageDay

    // 结婚纪念日模板 getMarryDay == 0  marry

    // 生日 模板 getbirthday == 0       birthday

    // 正常模板                         daily



    const wageDay = this.getWageDay();

    const marry = this.getMarryDay();

    const birthday = this.getbirthday();

    const data = {

      topcolor: '#FF0000',

      data: {},

    };

    // 发工资模板

    if (!wageDay) {

      data.template_id = app.config.weChat.wageDay;

      data.data = {

        dateTime: {

          value: this.getDatetime(),

          color: '#cc33cc',

        },

      };

    } else if (!marry) {

      // 结婚纪念日模板

      data.template_id = app.config.weChat.marry;

      data.data = {

        dateTime: {

          value: this.getDatetime(),

          color: '#cc33cc',

        },

        anniversary: {

          value: this.getMarryYear(),

          color: '#ff3399',

        },

        year: {

          value: this.getLoveYear(),

          color: '#ff3399',

        },

      };

    } else if (!birthday) {

      // 生日模板

      data.template_id = app.config.weChat.birthday;

      data.data = {

        dateTime: {

          value: this.getDatetime(),

          color: '#cc33cc',

        },

        individual: {

          value: this.getBirthYear(),

          color: '#ff3399',

        },

      };

    } else {

      // 正常模板

      data.template_id = app.config.weChat.daily;

      // 获取天气

      const getWeather = await this.getWeather();

      // 获取每日一句

      const message = await this.getOneSentence();

      data.data = {

        dateTime: {

          value: this.getDatetime(),

          color: '#cc33cc',

        },

        love: {

          value: this.getLoveDay(),

          color: '#ff3399',

        },

        wage: {

          value: wageDay,

          color: '#66ff00',

        },

        birthday: {

          value: birthday,

          color: '#ff0033',

        },

        marry: {

          value: marry,

          color: '#ff0033',

        },

        wea: {

          value: getWeather.wea,

          color: '#33ff33',

        },

        tem: {

          value: getWeather.tem,

          color: '#0066ff',

        },

        airLevel: {

          value: getWeather.air_level,

          color: '#ff0033',

        },

        tem1: {

          value: getWeather.tem1,

          color: '#ff0000',

        },

        tem2: {

          value: getWeather.tem2,

          color: '#33ff33',

        },

        win: {

          value: getWeather.win,

          color: '#3399ff',

        },

        message: {

          value: message,

          color: '#8C8C8C',

        },

      };

    }

    return data;

  }

获取天气

  async getWeather(city = '石家庄') {

    const { app } = this;

    const url = 'https://www.tianqiapi.com/api?unescape=1&version=v6&appid=' + app.config.weather.appid + '&appsecret=' + app.config.weather.appsecret + '&city=' + city;

    const result = await this.ctx.curl(url, {

      method: 'get',

      dataType: 'json',

    });

    console.log(result.status);

    // "wea": "多云",

    // "tem": "27", 实时温度

    // "tem1": "27", 高温

    // "tem2": "17", 低温

    // "win": "西风",

    // "air_level": "优",

    if (result && result.status === 200) {

      return result.data;

    }

    return {

      city,

      wea: '未知',

      tem: '未知',

      tem1: '未知',

      tem2: '未知',

      win: '未知',

      win_speed: '未知',

      air_level: '未知',

    };

  }

获取 下次发工资 还有多少天

  getWageDay() {

    const { app } = this;

    const wage = app.config.time.wageDay;

    // 获取日期 day

    // 如果在 wage号之前或等于wage时 那么就用 wage-day

    // 如果在 wage号之后 那么就用 wage +（当前月总天数-day）

    // 当日 日期day

    const day = moment().date();

    // 当月总天数

    const nowDayTotal = moment().daysInMonth();

    // // 下个月总天数

    // const nextDayTotal = moment().month(moment().month() + 1).daysInMonth();

    let resultDay = 0;

    if (day <= wage) {

      resultDay = wage - day;

    } else {

      resultDay = wage + (nowDayTotal - day);

    }

    return resultDay;

  }

获取距离 下次结婚纪念日还有多少天

  getMarryDay() {

    const { app } = this;

    const marry = app.config.time.marry;

    // 获取当前时间戳

    const now = moment(moment().format('YYYY-MM-DD')).valueOf();

    // 获取纪念日 月-日

    const mmdd = moment(marry).format('-MM-DD');

    // 获取当年

    const y = moment().year();

    // 获取今年结婚纪念日时间戳

    const nowTimeNumber = moment(y + mmdd).valueOf();

    // 判断 今天的结婚纪念日 有没有过，如果已经过去（now>nowTimeNumber），resultMarry日期为明年的结婚纪念日

    // 如果还没到，则 结束日期为今年的结婚纪念日

    let resultMarry = nowTimeNumber;

    if (now > nowTimeNumber) {

      // 获取明年纪念日

      resultMarry = moment((y + 1) + mmdd).valueOf();

    }

    return moment(moment(resultMarry).format()).diff(moment(now).format(), 'day');

  }

获取 距离 下次生日还有多少天

  getbirthday() {

    const { app } = this;

    const birthday = app.config.time.birthday[moment().year()];

    // 获取当前时间戳

    const now = moment(moment().format('YYYY-MM-DD')).valueOf();

    // 获取纪念日 月-日

    const mmdd = moment(birthday).format('-MM-DD');

    // 获取当年

    const y = moment().year();

    // 获取今年生日 时间戳

    const nowTimeNumber = moment(y + mmdd).valueOf();

    // 判断 生日 有没有过，如果已经过去（now>nowTimeNumber），resultBirthday日期为明年的生日 日期

    // 如果还没到，则 结束日期为今年的目标日期

    let resultBirthday = nowTimeNumber;

    if (now > nowTimeNumber) {

      // 获取明年目标日期

      resultBirthday = moment(app.config.time.birthday[y + 1]).valueOf();

    }

    return moment(moment(resultBirthday).format()).diff(moment(now).format(), 'day');

  }

获取 相恋天数

  getLoveDay() {

    const { app } = this;

    const loveDay = app.config.time.love;

    return moment(moment().format('YYYY-MM-DD')).diff(loveDay, 'day');

  }

获取 相恋几年了

  getLoveYear() {

    const { app } = this;

    const loveDay = app.config.time.love;

    return moment().year() - moment(loveDay).year();

  }

获取是第几个生日

  getBirthYear() {

    const { app } = this;

    const birthYear = app.config.time.birthYear;

    return moment().year() - birthYear;

  }

获取是第几个结婚纪念日

  getMarryYear() {

    const { app } = this;

    const marry = app.config.time.marry;

    return moment().year() - moment(marry).year();

  }

获取 每日一句

  async getOneSentence() {

    const url = 'https://v1.hitokoto.cn/';

    const result = await this.ctx.curl(url, {

      method: 'get',

      dataType: 'json',

    });

    if (result && result.status === 200) {

      return result.data.hitokoto;

    }

    return '今日只有我爱你！';

  }

获取时间日期

  getDatetime() {

    console.log('moment().weekday()', moment().weekday());

    const week = {

      1: '星期一',

      2: '星期二',

      3: '星期三',

      4: '星期四',

      5: '星期五',

      6: '星期六',

      0: '星期日',

    };

    return moment().format('YYYY年MM月DD日 ') + week[moment().weekday()];

  }

定时任务和主动触发

定时任务

设置规则 请参考文档

└── app

     └── schedule

          └── update_cache.js

class UpdateCache extends Subscription {

  // 通过 schedule 属性来设置定时任务的执行间隔等配置

  static get schedule() {

    return {

      cron: '0 30 7 * * *', // 每天的7点30分0秒执行

      // interval: '1m', // 1 分钟间隔

      type: 'all', // 指定所有的 worker 都需要执行

    };

  }



  // subscribe 是真正定时任务执行时被运行的函数

  async subscribe() {

    const { ctx } = this;

    const result = await ctx.service.sendmsg.send();

    ctx.logger.info('定时任务执行消息提醒 结果: %j', result);

  }

}

日志中 可以查看 定时任务的 执行记录

└── logs

     └── serves

          └── serves-web

主动发送

请求或浏览器访问 http://localhost:7001/send

配置文件说明

└── logs

     └── config.default.js

天气秘钥

注册地址

// 天气接口配置

config.weather = {

  appid: '*******',

  appsecret: '*******',

};

特殊 时间点设置

下方是 birthday生日，因老家都是过阴历生日，不好处理，暂时写死的

// 时间

config.time = {

  wageDay: 15, // 工资日

  love: '2017-06-09', // 相爱日期

  marry: '2021-11-27', // 结婚纪念日

  birthday: {

    2021: '2021-04-17',

    2022: '2022-04-06',

    2023: '2023-04-25',

    2024: '2024-04-14',

    2025: '2025-04-03',

    2026: '2026-04-22',

  }, // 每年生日 阳历

  birthYear: '1995-03-06',

};

微信公众号 配置

因个人只能申请订阅号，而订阅号不支持发送模板消息，所以在此使用的测试的微信公众号，有微信号都可以申请，免注册，扫码登录

无需公众帐号、快速申请接口测试号

直接体验和测试公众平台所有高级接口

申请地址

// 测试 微信公众号

config.weChat = {

  appld: '**********',

  secret: '**********',

  // 用户的openid

  users: [

    '**********************',

    '**********************',

    '**********************',

    '**********************'

  ],

  daily: '************', // 普通模板

  marry: ''************',', // 结婚纪念日模板

  wageDay: ''************',', // 工资日模板

  birthday: ''************',', // 生日模板

};

微信消息模板

这个需要在 上文提到的 微信公众平台测试账号 单独设置

以下是 我用的模板

正常模板

{{dateTime.DATA}}

今天是 我们相恋的第{{love.DATA}}天 

距离上交工资还有{{wage.DATA}}天 

距离你的生日还有{{birthday.DATA}}天 

距离我们结婚纪念日还有{{marry.DATA}}天 

今日天气 {{wea.DATA}} 

当前温度 {{tem.DATA}}度 

最高温度 {{tem1.DATA}}度 

最低温度 {{tem2.DATA}}度 

空气质量 {{airLevel.DATA}} 

风向 {{win.DATA}} 

每日一句 

{{message.DATA}}

发工资模板

{{dateTime.DATA}}

老婆大人，今天要发工资了，预计晚九点前会准时上交，记得查收！

生日 模板

{{dateTime.DATA}}

听说今天是你人生当中第 {{individual.DATA}} 个生日？天呐，

我差点忘记！因为岁月没有在你脸上留下任何痕迹。

尽管，日历告诉我：你又涨了一岁，但你还是那个天真可爱的小妖女，生日快乐!

结婚纪念日

{{dateTime.DATA}}

今天是结婚{{anniversary.DATA}}周年纪念日,在一起{{year.DATA}}年了,

经历了风风雨雨,最终依然走在一起,很幸运,很幸福!我们的小家庭要一直幸福下去。

展示效果

前言

现有的移动端图可视化技术有Antv旗下的F2、F6。F2主要专注于数据分析的统计图，而F6专注与各种场景的关系图。两者各有侧重。F6 是一个简单、易用、完备的移动端图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。如果您希望将内容通过流程图、知识图谱、思维导图等形式进行输出，并希望可以方便的实现对图的操控，那么建议您一定要尝试一下F6。

欢迎star和提交issue

github.com/antvis/F6

什么是树图？

树图，表现形式如下，

具体原理可以参考 emr.cs.iit.edu/~reingold/t… ，由根节点不断的派生，形成一个树状结构，是一种可以很好表达层级关系的可视化方法。
举个例子：

什么场景下使用

可见树图在实际场景中有很多应用，不论是在日常生活中，还是在生产中都有多种用途。我们最熟悉的脑图（mind map）也是树图的一种形式，

F6中如何绘制

演示示例可以参考f6.antv.vision/zh/docs/exa…
本节代码已经开源，感兴趣可以查看

• 支付宝 github.com/antvis/F6/t…


• 微信 github.com/antvis/F6/t…

支付宝中

首先安装

npm install @antv/f6 @antv/f6-alipay -S

index.json

{

  "defaultTitle": "紧凑树",

  "usingComponents": {

    "f6-canvas": "@antv/f6-alipay/es/container/container"

  }

}

index.js

import F6 from '@antv/f6';

import TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';



import data from './data.js';



/**

 * 紧凑树

 */



Page({

  canvas: null,

  ctx: null, // 延迟获取的2d context

  renderer: '', // mini、mini-native等，F6需要，标记环境

  isCanvasInit: false, // canvas是否准备好了

  graph: null,



  data: {

    width: 375,

    height: 600,

    pixelRatio: 2,

    forceMini: false,

  },



  onLoad() {

    // 注册自定义树，节点等

    F6.registerGraph('TreeGraph', TreeGraph);



    // 同步获取window的宽高

    const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();



    this.setData({

      width: windowWidth,

      height: windowHeight,

      pixelRatio,

    });

  },



  /**

   * 初始化canvas回调，缓存获得的context

   * @param {*} ctx 绘图context

   * @param {*} rect 宽高信息

   * @param {*} canvas canvas对象，在render为mini时为null

   * @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native

   */

  handleInit(ctx, rect, canvas, renderer) {

    this.isCanvasInit = true;

    this.ctx = ctx;

    this.renderer = renderer;

    this.canvas = canvas;

    this.updateChart();

  },



  /**

   * canvas派发的事件，转派给graph实例

   */

  handleTouch(e) {

    this.graph && this.graph.emitEvent(e);

  },



  updateChart() {

    const { width, height, pixelRatio } = this.data;



    // 创建F6实例

    this.graph = new F6.TreeGraph({

      context: this.ctx,

      renderer: this.renderer,

      width,

      height,

      pixelRatio,

      fitView: true,

      modes: {

        default: [

          {

            type: 'collapse-expand',

            onChange: function onChange(item, collapsed) {

              const model = item.getModel();

              model.collapsed = collapsed;

              return true;

            },

          },

          'drag-canvas',

          'zoom-canvas',

        ],

      },

      defaultNode: {

        size: 26,

        anchorPoints: [

          [0, 0.5],

          [1, 0.5],

        ],

      },

      defaultEdge: {

        type: 'cubic-horizontal',

      },

      layout: {

        type: 'compactBox',

        direction: 'LR',

        getId: function getId(d) {

          return d.id;

        },

        getHeight: function getHeight() {

          return 16;

        },

        getWidth: function getWidth() {

          return 16;

        },

        getVGap: function getVGap() {

          return 10;

        },

        getHGap: function getHGap() {

          return 100;

        },

      },

    });



    this.graph.node(function(node) {

      return {

        label: node.id,

        labelCfg: {

          offset: 10,

          position: node.children && node.children.length > 0 ? 'left' : 'right',

        },

      };

    });



    this.graph.data(data);

    this.graph.render();

    this.graph.fitView();

  },

});

index.axml

<f6-canvas

  width="{{width}}"

  height="{{height}}"

  forceMini="{{forceMini}}"

  pixelRatio="{{pixelRatio}}"

  onTouchEvent="handleTouch"

  onInit="handleInit"

></f6-canvas>

微信中

首先安装

npm install @antv/f6-wx -S

@antv/f6-wx 由于微信对npm包不是很友好，所以我们封装了 @antv/f6-wx 帮助用户简化操作。

index.json

{

  "defaultTitle": "紧凑树",

  "usingComponents": {

    "f6-canvas": "@antv/f6-wx/canvas/canvas"

  }

}

index.wxml

<f6-canvas

  width="{{width}}"

  height="{{height}}"

  forceMini="{{forceMini}}"

  pixelRatio="{{pixelRatio}}"

  bind:onTouchEvent="handleTouch"

  bind:onInit="handleInit"

></f6-canvas>

index.js

import F6 from '@antv/f6-wx';

import TreeGraph from '@antv/f6-wx/extends/graph/treeGraph';



import data from './data.js';

Page({

  canvas: null,

  ctx: null, // 延迟获取的2d context

  renderer: '', // mini、mini-native等，F6需要，标记环境

  isCanvasInit: false, // canvas是否准备好了

  graph: null,



  data: {

    width: 375,

    height: 600,

    pixelRatio: 2,

    forceMini: false,

  },



  onLoad() {

    // 注册自定义树，节点等

    F6.registerGraph('TreeGraph', TreeGraph);

    // 同步获取window的宽高

    const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync();



    this.setData({

      width: windowWidth * pixelRatio,

      height: windowHeight * pixelRatio,

      pixelRatio,

    });

  },



  /**

   * 初始化canvas回调，缓存获得的context

   * @param {*} ctx 绘图context

   * @param {*} rect 宽高信息

   * @param {*} canvas canvas对象，在render为mini时为null

   * @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native

   */

  handleInit(event) {

    const { ctx, rect, canvas, renderer } = event.detail;

    this.isCanvasInit = true;

    this.ctx = ctx;

    this.renderer = renderer;

    this.canvas = canvas;

    this.updateChart();

  },



  /**

   * canvas派发的事件，转派给graph实例

   */

  handleTouch(e) {

    this.graph && this.graph.emitEvent(e.detail);

  },



  updateChart() {

    const { width, height, pixelRatio } = this.data;



    // 创建F6实例

    this.graph = new F6.TreeGraph({

      context: this.ctx,

      renderer: this.renderer,

      width,

      height,

      pixelRatio,

      fitView: true,

      modes: {

        default: [

          {

            type: 'collapse-expand', // 点击后展开/收缩

            onChange: function onChange(item, collapsed) {

              const model = item.getModel();

              model.collapsed = collapsed;

              return true;

            },

          },

          'drag-canvas',

          'zoom-canvas',

        ],

      },

      defaultNode: {

        size: 26,

        anchorPoints: [

          [0, 0.5],

          [1, 0.5],

        ],

      },

      defaultEdge: {

        type: 'cubic-horizontal',

      },

      layout: {

        type: 'compactBox',

        direction: 'LR',

        getId: function getId(d) {

          return d.id;

        },

        getHeight: function getHeight() {

          return 16;

        },

        getWidth: function getWidth() {

          return 16;

        },

        getVGap: function getVGap() {

          return 10;

        },

        getHGap: function getHGap() {

          return 100;

        },

      },

    });



    this.graph.node(function(node) {

      return {

        label: node.id,

        labelCfg: {

          offset: 10,

          position: node.children && node.children.length > 0 ? 'left' : 'right',

        },

      };

    });



    this.graph.data(data);

    this.graph.render();

    this.graph.fitView();

  },

});

闭包是基于词法作用域书写代码时所产生的自然结果，你甚至不需要为了利用它们而有意识地创建闭包

MDN的解释闭包是函数和声明该函数的词法环境的组合。

Tips: 词法作用域和词法环境 1,此时函数还没被执行,所以使用的是词法作用域即静态作用域.2, 此时函数被执行,此时词法作用域就会变成词法环境(包含静态作用域与动态作用域)

以上的解释 个人感觉还是不够清晰
我这样理解

1. 闭包就是突破了函数作用域
2. 闭包就是函数嵌套函数, 子函数可以访问父函数的变量(也就是所谓的自由变量), 所以,此变量不会被回收.

二 闭包暴露``函数作用域的3种方式:

1) 通过外部函数的参数进行暴露

闭包内 调用外部函数 通过外部函数的参数 暴露 闭包内 自由变量.

function fn() { 

  var a = 2;

  function innerFn() { 

   outerFn(a) //通过外部函数的参数进行暴露

  }

  innerFn(); 

};

function outerFn(val) { 

   console.log(val); // 2

}

fn(); // 2

2) 通过外部作用域的变量进行暴露

其中val为全局变量

function fn() { 

  var a = 1;

  function innerFn() { 

      val = a; //通过外部作用域的变量进行暴露

  }

  innerFn(); 

};



fn();

console.log(val); // 1

3) 通过return直接将整个函数进行暴露

function fn() { 

  var a = 1;

  function innerFn() { 

      console.log(a);

  }

  return innerFn; //通过return直接将整个函数进行暴露

};



let a = fn();

a(); // 1

三 关于闭包的内存泄露

首先必须声明一点:使用闭包并不一定会造成内存泄露,只有使用闭包不当才可能会造成内存泄露.

为什么闭包可能会造成内存泄露呢?原因就是上面提到的,因为它一般会暴露自身的作用域给外部使用.如果使用不当,就可能导致该内存一直被占用,无法被JS的垃圾回收机制回收.就造成了内存泄露.

注意: 即使闭包里面什么都没有,闭包仍然会隐式地引用它所在作用域里的所用变量. 正因为这个隐藏的特点,闭包经常会发生不易发现的内存泄漏问题.

常见哪些情况使用闭包会造成内存泄露: