🙋 遇到的问题

在一个新项目中，设计统一了项目中所有的字体，并提供了字体包。在项目中需要按需引入这些字体包。

首先，字体包的使用分为了以下几种情况：

1. 无特殊要求的语言使用字体A，阿拉伯语言使用字体B；


2. 加粗、中等、常规、偏细四种样式，AB两种字体分别对应使用 Bold 、 Medium 、 Regular 、 Thin 四种字体包；

所以，我现在桌面上摆着 8 个字体包：

• A-Bold.tff


• A-Medium.tff


• A-Regular.tff


• A-Thin.tff


• B-Bold.tff


• B-Medium.tff


• B-Regular.tff


• B-Thin.tff

不同语言要使用不同的字体包，不同粗细也要使用不同的字体包！

还有一个前提是，设计给的设计图都是以字体A为准，所以在 Figma 中复制出来的 CSS 代码中字体名称都是A。

刚接到这个需求时还是比较懵的，一时想不出来怎么样才能以最少的逻辑判断、最少的文件下载、最少的代码改动去实现在不同情况下自动的去选择对应的字体包。

因为要涉及到语言的判断，最先想到的还是通过 JS，然后去添加相应的类名。但这样也只能判断语言使用A或B，粗细还是解决不了。

看来还是要用 CSS 解决。

首先我将所有的8个字体先定义好：

@font-face {

    font-family: A-Bold;

    src: url('./fonts/A-Bold.ttf');

}



/* ... */



@font-face {

    font-family: B-Thin;

    src: url('./fonts/B-Thin.ttf');

}

🤲🏼 如何根据粗细程度自动选择对应字体包

有同学可能会问，为什么不直接使用 font-weight 来控制粗细而是用不同的字体包呢？

我们来看下面这个例子，我们使用同一个字体， font-weight 分别设置为900、500、100，结果我们看到的字体粗细是一样的。

对的，很多字体不支持 font-weight 所以我们需要用不同粗细的字体包。

所以，我们可以通过 @font-face 中的 font-weight 属性来设置字体的宽度：

@font-face {

    font-family: A;

    src: url('./fonts/A-Bold.ttf');

		font-weight: 600;

}

@font-face {

    font-family: A;

    src: url('./fonts/A-Medium.ttf');

		font-weight: 500;

}

@font-face {

    font-family: A;

    src: url('./fonts/A-Regular.ttf');

		font-weight: 400;

}

@font-face {

    font-family: A;

    src: url('./fonts/A-Thin.ttf');

		font-weight: 300;

}

注意，这里我们把字体名字都设为相同的，如下图所示，这样我们就成功的解决了第一个问题：不同粗细也要使用不同的字体包；

并且，如果我们只是定义而未真正使用时，不会去下载未使用的字体包，再加上字体包的缓存策略，就可以最大程度节省带宽：

🔤 如何根据不同语言自动选择字体包？

通过张鑫旭的博客找到了解决办法，使用 unicode-range 设置字符 unicode 范围，从而自定义字体包。

unicode-range 是一个 CSS 属性，用于指定字体文件所支持的 Unicode 字符范围，以便在显示文本时选择适合的字体。

它的语法如下：

@font-face {

  font-family: "Font Name";

  src: url("font.woff2") format("woff2");

  unicode-range: U+0020-007E, U+4E00-9FFF;

}

在上述例子中，unicode-range 属性指定了字体文件支持的字符范围。使用逗号分隔不同的范围，并使用 U+XXXX-XXXX 的形式表示 Unicode 字符代码的范围。

通过设置 unicode-range 属性，可以优化字体加载和页面渲染性能，只加载所需的字符范围，减少不必要的网络请求和资源占用。

通过查表得知阿拉伯语的 unicode 的范围为：U+06??, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10A60-10A7F, U+10A80-10A9F 这么几个区间。所以我们设置字体如下，因为设计以 A 字体为准，所以在 Figma 中给出的样式代码字体名均为 A，所以我们把 B 字体的字体名也设置为 A：

当使用字体的字符中命中 unicode-rang 的范围时，自动下载相应的字体包。

@font-face {

    font-family: A;

    src: url('./fonts/A-Bold.ttf');

    font-weight: 600;

}



@font-face {

    font-family: A;

    src: url('./fonts/A-Medium.ttf');

    font-weight: 500;

}



@font-face {

    font-family: A;

    src: url('./fonts/A-Regular.ttf');

    font-weight: 400;

}



@font-face {

    font-family: A;

    src: url('./fonts/A-Thin.ttf');

    font-weight: 300;

}



:root {

    --ARABIC_UNICODE_RANGE: U+06??, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10A60-10A7F, U+10A80-10A9F;

}

@font-face {

    font-family: A;

    src: url('./fonts/B-Bold.ttf');

    font-weight: 600;

    unicode-range: var(--ARABIC_UNICODE_RANGE);

}

@font-face {

    font-family: A;

    src: url('./fonts/B-Medium.ttf');

    font-weight: 500;

    unicode-range: var(--ARABIC_UNICODE_RANGE);

}

@font-face {

    font-family: A;

    src: url('./fonts/B-Regular.ttf');

    font-weight: 400;

    unicode-range: var(--ARABIC_UNICODE_RANGE);

}

@font-face {

    font-family: A;

    src: url('./fonts/B-Thin.ttf');

    font-weight: 300;

    unicode-range: var(--ARABIC_UNICODE_RANGE);

}

p {

    font-family: A;

}

总结

遇到的问题：

1. 两种字体，B 字体为阿拉伯语使用，A 字体其他语言使用。根据语言自动选择。


2. 根据字宽自动选择相应的字体包。


3. 可以直接使用 Figma 中生成的样式而不必每次手动改动。


4. 尽可能节省带宽。

我们通过 font-weight 解决了问题2，并通过 unicode-range 解决了问题1。

并且实现了按需下载相应字体包，不使用时不下载。

Figma 中的代码可以直接复制粘贴，无需任何修改即可根据语言和自宽自动使用相应字体包。

参考资料：http://www.zhangxinxu.com/wordpress/2…

背景

大家好，我是一名前端，我有一天做了一个梦，梦见前端供不应求、梦见大家看到前端就想说：卧槽这个人是前端真牛逼、梦见Javascript突破瓶颈吊打Rust、C...

然后梦醒了，是沉溺于框架、是中台的表格的增删改查、是层出不穷的无效轮子和集成、是无趣的各种小白进阶培训班、是业务形态的致命一击。最终是前端在技术圈子里不如狗的地位。

何至于此？

框架-砒霜or蜜糖？

说说框架

前段跟一个google的算法大佬聊天，他说你们前端很奇怪，现在浏览器已经非常快了，但你们非要搞这样那样的框架，然后去算这个算那个，搞些hooks虚拟dom，完全看不懂在干嘛。

也许我想他说的是对于web的性能层面是对的。

首先虚拟dom也就是中间层如果纯论性能在我看来其实是并不适合现在的时代的，它在这个时代的作用就是作为多端统一以及在真实dom操作前的数据缓冲/计算层...这可能也是这个时代出现了Svelte和Solid为代表的此类框架的原因。我倒是希望现在web前端的方向能走向Solid或Svelte这种框架的周边社区完善开发。

可是时代的潮流不会随着个人的意志改变，果然时代是分分合合吗，现在ssr为代表的next越来越火（可能有一部分vecel的商业原因），但更重要的一个原因是去改善开发人员的体验(在多端和最佳实践方面)，也就是卷颗粒度。

以next举例子：我对于next其实是这么理解的,粗颗粒度的react在csr已经进无可进了，改也不好改，那么转化一下方向把，在ssr的领域去降低粒度,就像流式渲染等。

说说人

啊真糟糕，怎么情不自禁就在说框架了，是不是发现我们前端情不自禁在开发or说某个技术的时候就会与框架挂钩。就像是面试我懂某个框架的原理、我学了几个框架诸如此类的，于是我们就从一个框架到另外个框架反反复复的在路上走、打包工具也是一样的（我真的需要这么快的打包工具吗？）。

于是我们就在框架中沉溺了，也许后面会出现一些5年vue工程师，10年react工程师，我们整日沉浸在框架之中，日复一日，用着固定的写法（其实我在说Vue,React在这方面会好一些)，做着相似的事情，技术的成长变为了我某个框架用得怎么样。

前端工程师or框架工程师

我想啊，前端的潮流很快（娱乐圈），但其实我们要明白一个道理，我用这个东西学这个东西对我有没有收益，对用户体验是不是有很大的提升，对团队开发有没有效率的进步。如果没有的话，不如搞浏览器，当然也可以学学当个PPT天才（纯褒义）或者业务、算法、其他语言等（好堕落啊现在不是PPT就是搞业务），着实没必要把绝大多数时间留着框架上，看多了就会觉得自己很牛逼，然后开摆。

毕竟我们不是框架开发工程师(也就是资源型工具人)、我们是前端开发工程师，我们是面向屏幕开发，我们是人机交互工程师，也就是现在的一个词终端工程师，如果你不能把你的应用在所有屏幕(安卓、Ios、桌面、PC、平板)跑那应该是不合格的。

业务形态

害，说这个之前闲聊一下，我们可以看到一些产品诸如语雀、云凤蝶、Antd等。蚂蚁体验技术部真的把前端的地位上拉了一截，他们真的很好，可能是未来5年在国内都不会再有这么好的标志性的前端产品，可惜没有一个闭环的商业业务形态，就类似next这种，我在这里不讨论具体的一些原因和后面发生的一些事情。

进入正文，产品和业务形态决定了前端的地位，后端开发通常被认为是应用程序的基础和核心。但其实怎么说那，有的时候其实是因为国内产品思维的局限于和上文提到的沉溺于框架和搜索工具。

因为我做过不少国外的产品，有一些很有创造力和创新思维的产品会提出很多天马行空,极具艺术的产品交互效果和体验,在这类产品中其实前端的地位并不算低。

但是在国内就会有这种情况：

1. 产品不会有这种想法，他的脑子里也是一些国内的那些很普通的竞品，和数据流转逻辑。


2. 前端自己拒绝，一般来说心路历程是这样的，我先看看能不能做 => 去百度掘金搜索 => 搜不到或者框架里没有，好感觉不好做，太复杂了 => 我们换一个普通一点的效果（理由五花八门）。


3. 大家都是这么做的，那我们这个也这么做吧。

但其实我们自己作为科技触达用户的桥梁，是有能力去推动这个事情的，一个炫酷的配色、合理的交互效果、好看的页面，是可以去给产品去给设计说的，比如我自己有时候会figma或者lottie去自己画一些图和动画效果，去主动纠正设计的颜色和间距。难道产品会拒绝让产品变得更好？设计会拒绝更好看？

说白了，自己不想去做，不想去推，不会也不想学，觉得很复杂，当然如果实在没有这个土壤果断跑路。

Javascript本身的问题

Javascript吊打Rust和C估计我是这辈子都看不到了。

Javascript是解释性语言肯定没法跟一些编译语言竞天生就不行，再加上单线程即使有解决方案也就那样。这意味着前端掌握更多语言几乎是一个必要的事情，Java、Swift,Oc这些本来就会用到的不必多说，Rust和Python选一门掌握也很好。

会得越多你越强，当然我还是建议大家去当PPT天才。

前端自信

以后，大伙自信一点，别觉得前端就不如其他技术岗位，地位都是自己争取的，前端优势很大，语言统一、前端立马可见的效果、前端基建相对较小、前端宿主环境统一、Docker和容器配置相对统一等。主要是时间，有更多的时间意味着可以做更多的事学更多的东西更多的钱~。

总结

So，改变前端环境从你我做起，你卷一波我卷一波，前端的门槛就提起来了，以后面试的基本要求就是：前端要会Js、Ts、Java、Swift、混合框架、PWA，然后薪资30k起步。

在敏捷开发协作工具中, 公司会要求在关闭bug的时候必须填写一些字段.
其实每次填写的内容都一样的, 要选择bug原因, 是否选择, 填写根因等.

同事在旁边看我关闭了个bug, 看到我的表单是自动填充的, 就问我咋那么方便呢?

实现难度非常简单, 而在日常工作中非常有用, 并且有点小帅. 所以分享给大家.

用什么工具来修改你的网页

我选择的是arc浏览器的boost功能. 在网页上新建一个boost, 点击code, 选到js的tab就可以把编写的js插入到当前host的网页里运行了. 还有辅助功能zag可以帮你抓dom.

对于没有用arc浏览器的大家, 可以写一个chrome extension, 只需要使用content_scripts功能, 可以实现和arc的boost类似的功能: match网址url并且加载一段js. (其实功能是比arc多且灵活的)

修改jira页面

jira是个必须用, 且很多重复操作的网站. 我做了这些修改:

站会看板过滤器顺序调整

每天站会轮到的人的顺序和jira看板上不一致, 导致站会轮下一个人的时候得去找下一个人的位置. 只要获取一下看板过滤器, 调整一下子元素就行了.

const container = document.getElementsByClassName('aui-expander-content ghx-quick-content')[0]

container.children[6].remove()

container.children[10].remove()

container.children[6].after(container.children[2])

container.children[9].after(container.children[1])

看板过滤器多选改单选

jira看板的过滤器是多选的, 所以切换下一个人的时候必须把前一个人取消了, 这样每次都多一次操作.

我们只要给每个过滤器加一个点击事件, 把其他active的过滤器都点击一下就行了.

let child = null

container.onclick = function (e) {

  if (child) return

  child = e.target

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

    if (container.children[i].children[0] && container.children[i].children[0].classList.contains('ghx-active') && container.children[i].children[0].innerHTML !== child.innerHTML) {

      container.children[i].children[0].click()

    }

  }

  child = null

}

关闭bug的时候必须填写原因

公司有个规定, 关闭jira必须填写一些字段. 其实每次填写的内容都一样的, 自动填写可以节省非常多时间.

实现也非常简单, 定时器来寻找指定dom, 然后为这些dom附上指定的值.

const setInputValue = (id, value) => {

  if (document.getElementById(id)) {

    document.getElementById(id).value = value

  }

}



setInterval(() => {

setInputValue('resolution', 10000)

setInputValue('customfield_10903', 12502)

setInputValue('customfield_12301', `故障原因：代码错误

解决方式：修复

影响范围：界面

故障处理人：yo-cwj.com`)

}, 1000)

获取vue应用的实例来修改界面

老婆画了几套微信表情, 于是我经常登录上去看数据.

但dashboard上信息很少, 需要点到每个表情的详情中才能查看.

通过网络请求, 我看到其实在dashboard的界面, 数据已经请求到了, 于是开始我们的修改.

从dom中寻找vue实例

通过基础的vue知识, 我们知道vue实例是会挂在dom上的.

(vue作者说可以认为他是可用的, 因为vue的devtool也是依赖这个特性的, 那我们一个小脚本是更可用了)

那么哪些dom上有vue实例, 有点像个面试题, 写个简单的脚本就可以找到:

let traverse = (dom) => {

    if (dom.__vue__) {

        console.log(dom.__vue__._data)

    }

    for (let i = 0; i < dom.children.length; i++) {

        traverse(dom.children[i])

    }

}

traverse()

找到目标数据所在的dom, 正式的脚本就这样获取vue实例就可以了.

编写脚本

首先通过vue实例的_data属性获取到数据:

const list = document.querySelector('.page_mod_page_simple.page_home').__vue__.$parent.currentList;

然后把数据贴到对应的dom上:

const emotion_dom = document.querySelector('.table_wrp_emotion_list').querySelector('.table_body');

for (let i = 0; i < emotion_dom.children.length; i++) {

	emotion_dom.children[i].children[2].innerHTML += `(${list[i].SendNum} - ${list[i].DataTime})`

}

到这里脚本就写完了, 其他的vue应用其实还可以调用vue实例中的方法获取数据, 或自己获取数据放进vue实例.

解决执行环境的问题

但把这段代码放到boost中会出现拿不到dom的\_\_vue\_\_实例的问题, 因为boost和chrome extension的执行环境并不是浏览器执行环境. 可以通过创建script并执行的方式.

let script = document.createElement('script');

script.textContent = "const list = document.querySelector('.page_mod_page_simple.page_home').__vue__.$parent.currentList;" +

  "const emotion_dom = document.querySelector('.table_wrp_emotion_list').querySelector('.table_body');" +

  "for (let i = 0; i < emotion_dom.children.length; i++) {" +

  " emotion_dom.children[i].children[2].innerHTML += `(${list[i].SendNum} - ${list[i].DataTime})`" +

  "}";

setTimeout(() => {

  document.documentElement.appendChild(script);

}, 1000)

前言

很多网站会在一些按钮上面加上不同的动画效果，这些动感的效果能够更加容易的创建具有视觉吸引力的用户界面。

本文将介绍一个小巧的 JavaScript 库，它能够用非常短的时间以及简短的代码量创建我们想要的五彩纸屑效果

简单使用

我们可以通过 npm 安装或从 cdn 导入两种方式来使用这个库。

这里我采用的是导入的方式。

在你导入完成这个库之后，我们需要一个按钮

<button onclick="myClick()">button</button>

最简单的特效只需要在点击函数当中调用 confetti 函数即可

function myClick () {

	confetti()

}

细节配置参数

通过传入 options 属性，我们可以在特效上自定义很多我们需要的部分，下面是部分配置属性的作用，后面我们会挑出部分属性来展示一下效果：

根据上面的参数，你可以很容易的定义自己想要的效果，下面我们随意定义部分例子：

<body>

  <button onclick="myClick1()">左倾斜</button>

  <button onclick="myClick2()">全是黑色</button>

  <button onclick="myClick3()">数量很多多多</button>

 <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script>

  <script>

    function myClick1 () {

      confetti({

        angle: 135,

      });

    }

    function myClick2 () {

      confetti({

        colors: ['#000000']

      });

    }

    function myClick3 () {

      confetti({

        particleCount: 500,

      });

    }

  </script>



</body>

详细定义纸屑形状

在上面的配置当中我们已经可以定义纸屑的大部分配置，其中 shapes 可以用于定义纸屑的形状，官方为我们预留了三个形状 'square', 'circle', 'star' 分别对应 方形，圆形，星星，这个字段传入的是一个数组，这个数组中元素的数量，决定了这个形状在所有纸屑中的比例，比如说你要是传入了 ['square', 'circle', 'star'] 那么三种形状就都是占比三分之一。

除了通过官方预留的形状，我们还可以通过两个函数来进行形状自定义，分别是 confetti.shapeFromPath 和 confetti.shapeFromText

confetti.shapeFromPath

这个函数可以传入一个对象，对象中存在一个 path 的 key，这个就决定了创建出来的形状长什么样子

下面的代码可以创建一个三角形的纸屑

var triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' });



confetti({

	shapes: [triangle],

});

confetti.shapeFromText

这个函数同样传入一个对象，对象存在 text 和 scalar ， text 可以传入任何文字，甚至是一些文字表情也可以使用， scalar 配合 options 的 scalar 使用，两个相差过大会导致字体变得很模糊。

下面的代码你就可以创建一个字符串纸屑

var scalar = 2;

var pineapple = confetti.shapeFromText({ text: '🍍🍍🍍', scalar });

confetti({

	shapes : [pineapple],

	scalar,

});

逻辑事件

纸屑在生成的时候，我们可以会需要一些事件，比如说在我们想要的时候清除掉屏幕上还未消失的纸屑，又或者在一次纸屑彻底消失的时候执行某些逻辑。

消除纸屑

我们可以通过调用 confetti.reset(); 来消除屏幕上的纸屑

监听纸屑消失事件

在我们调用 confetti() 的时候会返回一个 promise 对象，这个对象将会在纸屑完全消失的时候回调。

自定义纸屑产生的位置

在上面的例子当中，我们可能会发现，纸屑都只能在屏幕的正中心产生，这是因为 options 里的 origin 属性的默认值，我们可以通过一些方式来自定义这个产生的位置

动态设置 origin

我们可以通过动态的来设置这个值来做到自定义产生的位置。

在点击事件当中，我们能够拿到当前的点击对象，通过这个 event 对象以及 window 上获取到可视区域的宽高，我们不难算出当前按钮相对于左右的位置。

const windowHeight =

  window.innerHeight ||

  document.documentElement.clientHeight ||

  document.body.clientHeight;

// 获取浏览器高度

const windowWidth =

  window.innerWidth ||

  document.documentElement.clientWidth ||

  document.body.clientWidth;

// 获取浏览器宽度

const origin = {

	x: event.pageX/windowWidth,

	y: event.pageY/windowHeight,

}

// 获取比例

自定义 canvas

官方支持我们创建自定义画布的  confetti 实例，这样创建的  confetti 不会超出定义的这个画布的范围，这在某些时候可能会起到很重要的作用。

并且官方强调了，一个画布最好只和一个  confetti 实例做关联，所以说当我们创建多个  confetti 实例的时候，就也需要创建多个画布。

因为是自定义添加的画布，所以我们需要在不需要的时候手动去删除这个画布，避免产生多余的元素。

var myCanvas = document.createElement('canvas');

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

container.appendChild(myCanvas)

var myConfetti = confetti.create(myCanvas).then(()=>{

	container.removeChild(myCanvas)

});

然后设定位置的操作我这里就不多做了，只需要定义这个 canvas 的生成位置就好了。

示例代码

效果图如下

上图的组成可以分为两部分，一个为底图六边形的形成，一个为内容六边形的形成。

要生成对应的六边形，首先要获得需要绘制的六边形的中心坐标。

观察不难得出结论，以中心的六边形为基点，第二圈很明显能排6个，第三圈能排12个，以此进行类推。

这里可以以中心点为坐标原点[0,0],以[1,0], [1,1],[-1,1],[-1,0],[-1,-1],[1,-1]这种形式来表示第二圈在轴线上的六个六边形的中心点关系（这是一种形式，并非真实的坐标系坐标）。

// 第二圈时的对应圆上的坐标值

const pixiArr = [

  [1, 0],

  [1, 1],

  [-1, 1],

  [-1, 0],

  [-1, -1],

  [1, -1]

]



// 根据圈数生成对应轴线上的坐标

function generatePixiArrByWeight(weight) {

  if (weight === 2) {

    return pixiArr

  }

  const multiple = weight - 1

  const tempPixiArr = pixiArr.map((x) => {

    return [x[0] * multiple, x[1] * multiple]

  })

  return tempPixiArr

}

进一步观察，可知，第三圈时两条发散的轴中间夹了一个六边形，第四圈时两条发散的轴中间夹了两个六边形，依次类推。

六条发散轴上的六边形中心点坐标是最容易计算的，不过要计算三圈及其开外的，就得有那么一点点的数学基础，知道sin60度cos60度的意思。

const sin60 = Math.sin(Math.PI / 3)

const cos60 = Math.cos(Math.PI / 3)

有了上面的铺垫后就可以开始了，定义一个函数，传入的参数为六边形总个数和六边形的边长

// 生成六边形中心坐标

function getHexagonCoordinateArrayByTotal(total = 0, radius = 0){

    // 1、获取圈数weight

    if (total === 0) return []

  let tierList = [] // 用于存放每圈的个数

  let tierIndex = 0

  while (total > 0) {

    if (tierIndex === 0) {

      tierList.push(1)

      total = total - 1

    } else {

      let n = 6 * tierIndex

      total = total - n

      if (total < 0) {

        tierList.push(total + n)

      } else {

        tierList.push(n)

      }

    }

    tierIndex++

  }

  const weight = tierList.length

    // 2、根据圈数去获取coordinateArray坐标列表

    // getHexagonCoordinateArrayByWeight：根据圈数和边长返回对应的坐标点

    const weight = tierList.length

  let coordinateArray = []

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

    if (i + 1 === weight) {

      coordinateArray = [

        ...coordinateArray,

        ...getHexagonCoordinateArrayByWeight(i + 1, radius).slice(

          0,

          tierList[weight - 1]

        )

      ]

    } else {

      coordinateArray = [

        ...coordinateArray,

        ...getHexagonCoordinateArrayByWeight(i + 1, radius)

      ]

    }

  }



  return coordinateArray

}

有个getHexagonCoordinateArrayByWeight需要实现其，方式为

function _abs(val = 0) {

  return Math.abs(val)

}



function getHexagonCoordinateArrayByWeight(weight = 1, radius = 0) {

  if (weight === 0) return []

  if (weight === 1) return [[0, 0]]

  const addNum = weight - 2

  const addArr = generatePixiArrByWeight(weight)

  const hypotenuse = radius * sin60 * 2 // 两倍的边心距长度

  let offsetArr = []

  let offsetX

  let offsetY

  for (let i = 0; i < addArr.length; i++) {

    const t = addArr[i]

    if (t[1] !== 0) {

      offsetX = t[0] * hypotenuse * cos60

      offsetY = t[1] * hypotenuse * sin60

    } else {

      offsetX = t[0] * hypotenuse

      offsetY = 0

    }

    offsetArr.push([offsetX, offsetY])

  }

  const tempOffsetArr = JSON.parse(JSON.stringify(offsetArr))

  let resArr = new Array(6 * (weight - 1))

  let lineArr = []

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

    let lindex = i * (weight - 1)

    resArr[lindex] = tempOffsetArr[i]

    lineArr.push(lindex)

  }

  // 利用已知的六个发散轴上的中心坐标点推出剩余的中心坐标点

  if (addNum > 0) {

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

      let s = tempOffsetArr[i]

      let e = i + 1 === 6 ? tempOffsetArr[0] : tempOffsetArr[i + 1]

      let si = lineArr[i]

      let sp = addNum + 1

      let fx

      let fy

      if (i === 0) {

        fx = (s[0] - e[0]) / sp

        fy = (e[1] - s[1]) / sp

      }

      if (i === 1) {

        fx = (_abs(s[0]) + _abs(e[0])) / sp

        fy = 0



      }

      if (i === 2) {

        fx = (_abs(e[0]) - _abs(s[0])) / sp

        fy = (_abs(s[1]) - _abs(e[1])) / sp

      }

      if (i === 3) {

        fx = (_abs(s[0]) - _abs(e[0])) / sp

        fy = (_abs(e[1]) - _abs(s[1])) / sp

      }

      if (i === 4) {

        fx = (_abs(s[0]) + _abs(e[0])) / sp

        fy = 0

      }

      if (i === 5) {

        fx = _abs(s[0]) / sp

        fy = (_abs(e[1]) - _abs(s[1])) / sp

      }

      let mr = []

      for (let j = 0; j < addNum; j++) {

        if (i === 0 || i === 1) {

          mr.push([s[0] - fx * (j + 1), s[1] + fy * (j + 1)])

        }

        if (i === 2) {

          mr.push([s[0] - fx * (j + 1), s[1] - fy * (j + 1)])

        }

        if (i === 3) {

          mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])

        }

        if (i === 4) {

          mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])

        }

        if (i === 5) {

          mr.push([s[0] + fx * (j + 1), s[1] - fy * (j + 1)])

        }

      }

      mr.forEach((x, index) => {

        resArr[si + index + 1] = x

      })

    }

  }

  return resArr

}

至此，生成六边形中心坐标点的方法完成。
有了中心坐标生成方式之后，就可以使用Konva这种辅助绘图的库来进行效果绘制了。

前言： 最近接到的一个需求十分有意思，设计整体实现了前端仿微信扫一扫的功能。整理了一下思路，做一个分享。

tips: 如果想要实现完整扫一扫的功能，你需要掌握一些前置知识，这次我们先讲如何实现拍照并且保存的功能。

一. window.navigator

1. 
   

   你想调取手机的摄像头，首先你得先检验当前设备是否有摄像设备，window 身上自带了一个 navigator 属性，这个对象有一个叫做 mediaDevices 的属性是我们即将用到的。

   
   


2. 
   

   于是我们就可以先设计一个叫做 checkCamera 的函数，用来在页面刚开始加载的时候执行。。
   
   
   

   
   


3. 
   

   我们先看一下这个对象有哪些方法，你也许会看到下面的场景，会发现这个属性身上只有一个值为 null 的 ondevicechange 属性，不要怕，真正要用的方法其实在它的原型身上。
   

   
   


4. 
   

   让我们点开它的原型属性，注意下面这两个方法，这是我们本章节的主角。
   
   

   
   


5. 
   

   我们到这一步只是需要判断当前设备是否有摄像头，我们先调取 enumerateDevices 函数来查看当前媒体设备是否存在。它的返回值是一个 promise 类型，我们直接用 async 和 await 来简化一下代码。
   
   
   从上图可以看出，我的电脑有两个音频设备和一个视频设备，那么我们就可以放下进行下一步了。

   
   

二. 获取摄像头

1. 
   

   接下来就需要用到上面提到的第二个函数，navigator.getUserMedia。这个函数接收一个对象作为参数，这个对象可以预设一些值，来作为我们请求摄像头的一些参数。

   
   


2. 
   

   这里我们的重点是 facingMode 这个属性，因为我们扫一扫一般都是后置摄像头
   
   当你执行了这个函数以后，你会看到浏览器有如下提示：
   
   
   

   
   


3. 
   

   于是你高兴的点击了允许，却发现页面没有任何变化。
   
   
   

   
   


4. 
   

   这里你需要知道，这个函数只是返回了一个媒体流信息给你，你可以这样简单理解刚刚我们干了什么，首先浏览器向手机申请我想用一下摄像头可以吗？在得到了你本人的确认以后，手机将摄像头的数据线递给了浏览器，：“诺，给你。”

   
   


5. 
   

   但浏览器现在仅仅拿到了一根数据线，然而浏览器不知道需要将这个摄像头渲染到哪里，它不可能自动帮你接上这根线，你需要自己找地方接上这根数据线。

   
   


6. 
   

   这里不卖关子，我们需要请到我们的 Video 标签。我没听错吧？那个播放视频的 video 标签？没错，就是原生的 video 标签。

   
   


7. 
   

   这里创建一个 video 标签，然后打上 ref 来获取这个元素。
   
   

   
   


8. 
   

   这里的关键点在于将流数据赋值给 video 标签的 srcObject 属性。就好像你拿到了数据线，插到了显示器上。
   
   (tips: 这里需要特别注意，不是 video.src 而是 video.srcObject 请务必注意)
   
   

   
   


9. 
   

   现在你应该会看到摄像头已经在屏幕上展示了，这里是我用电脑前置摄像头录制的一段视频做成了gif。(脉动请给我打钱，哼)
   

   
   

三. 截取当前画面

1. 
   

   这里我随手写了一个按钮当作拍摄键，接下来我们将实现点击这个按钮截取当前画面。
   
   

   
   


2. 
   

   这里你需要知道一个前提，虽然我们现在看到的视频是连贯的，但其实在浏览器渲染的时候，它其实是一帧一帧渲染的。就像宫崎骏有些动漫一样，是一张一张手写画。

   
   


3. 
   

   让我们打开 Performance 标签卡，记录一下打开掘金首页的过程，可以看到浏览器的整个渲染过程其实也是一帧一帧拼接到一起，才完成了整个页面的渲染。
   
   

   
   


4. 
   

   知道了这个前提，那么举一反三，我们就可以明白，虽然我们现在已经打开了摄像头，看到的视频好像是在连贯展示，但其实它也是一帧一帧拼到一起的。那现在我们要做的事情就非常明了，当我按下按钮的时候，想办法将 video 标签当前的画面保存下来。

   
   


5. 
   

   这里不是特别容易想到，我就直接说答案了，在这个场景，我们需要用到 canvas 的一些能力。不要害怕，我目前对 canvas 的使用也不是特别熟练，今天也不会用到特别复杂的功能。

   
   


6. 
   

   首先创建一个空白的 canvas 元素，元素的宽高设置为和 video 标签一致。
   
   

   
   


7. 
   

   接下来是重点： 我们需要用到 canvas 的 getContext 方法，先别着急头晕，这里你只需要知道，它接受一个字符串 "2d" 作为参数就行了，它会把这个画布的上下文返回给你。
   （ tips 如果这里还不清楚上下文的概念，也不用担心，这里你就简单理解为把这个 canvas 这个元素加工了一下，帮你在它身上添加了一些新的方法而已。)
   

   
   


8. 
   

   在这个 ctx 对象身上，我们只需要用到一个 drawImage 方法即可，不需要关心其它属性。
   
   

   
   


9. 
   

   感觉参数有点多？没关系，我们再精简一下，我们只需要考虑第二个用法，也就是5参数的写法。(sx,sy 是做裁切用到的，本文用不到，感兴趣可以自行了解。)
   
   

   
   


10. 
    

    这里先简单解释一下 dx 和 dy 是什么意思。在 canvas 里也存在一个看不见的坐标系，起点也是左上角。设想你想在一个 HTML 的 body 元素里写一个距离左边距离 100px 距离顶部 100px的画面，是不是得写 margin-left:100px margin-top:100px 这样的代码？没错，这里的 dy 和 dx 也是同样的道理。
    
    

    
    


11. 
    

    我们再看 dwidth，和 dheight，从这个名字你就能才出来，肯定和我们将要在画笔里画画的元素的宽度和高度有关，是的，你猜的没错，它就好像你设置一个 div 元素的高度和宽度一样，代表着你将在画布上画的截图的宽高属性。

    
    


12. 
    

    现在只剩下第一个参数还没解释，这里直接说答案，我们可以直接将 video 标签填进去，ctx 会自动将当前 video 标签的这一帧画面填写进去。现在按钮的代码应该是这个样子。

    
    

    function shoot() {
    
      if (!videoEl.value || !wrapper.value) return;
    
      const canvas = document.createElement("canvas");
    
      canvas.width = videoEl.value.videoWidth;
    
      canvas.height = videoEl.value.videoHeight;
    
      //拿到 canvas 上下文对象
    
      const ctx = canvas.getContext("2d");
    
          ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);
    
      wrapper.value.appendChild(canvas);//将 canvas 投到页面上
    
    }
    
    

    
    


13. 
    

    测试一下效果。
    
    

    
    

四. 源码

<script lang="ts" setup>

import { ref, onMounted } from "vue";



const wrapper = ref<HTMLDivElement>();

const videoEl = ref<HTMLVideoElement>();



async function checkCamera() {

  const navigator = window.navigator.mediaDevices;

  const devices = await navigator.enumerateDevices();

  if (devices) {

    const stream = await navigator.getUserMedia({

      audio: false,

      video: {

        width: 300,

        height: 300,

        // facingMode: { exact: "environment" }, //强制后置摄像头

        facingMode: "user", //前置摄像头

      },

    });

    if (!videoEl.value) return;



    videoEl.value.srcObject = stream;

    videoEl.value.play();

  }

}



function shoot() {

  if (!videoEl.value || !wrapper.value) return;

  const canvas = document.createElement("canvas");

  canvas.width = videoEl.value.videoWidth;

  canvas.height = videoEl.value.videoHeight;

  //拿到 canvas 上下文对象

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

  ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);

  wrapper.value.appendChild(canvas);

}



onMounted(() => {

  checkCamera();

});

</script>

<template>

  <div ref="wrapper" class="w-full h-full bg-red flex flex-col items-center">

    <video ref="videoEl" />

    <div

      @click="shoot"

      class="w-100px leading-100px text-center bg-black text-30px"

    >

      拍摄

    </div>

  </div>

</template>

五. 总结

实现拍照的整体思路其实很简单，仅仅需要了解到视频其实也是一帧一帧画面构成的，而 canvas 恰好有捕捉当前帧的能力。

预告：在下一篇会讲解如何实现扫一扫的功能，需要用到插件，感兴趣的同学可以先预习一下功课。🎁二维码扫码插件

趁热打铁🧭:前端实现微信扫一扫的思路

前言： 在有了获取手机摄像头权限并且记录当前画面的前置知识以后，我们现在已经可以进行下一步实现一个仿微信扫一扫的功能了。

tips: 如果你是直接看的本文，对如何打开摄像头拍照这个功能还不太熟悉，请移步 🎁前端如何打开摄像头拍照。这是你阅读本篇的必需前置知识。

一. 效果预览

这里先简单放一下整体界面效果，接下来带大家一步一步分析其中的功能如何实现。

本篇将重点讲解多张二维码识别的处理场景。

二. 简单了解二维码

1. 
   

   现在流行使用的二维码是 qrcode，其中 qr 两个字母其实就是 quick response 的缩写，简单来说就是快速响应的意思。三个角用来定位，黑点表示二进制的1，白色点代表0。（这里感兴趣可以自行了解) 它的本质其实就是将一个地址链接利用某种约定好的规则隐藏到一个图片当中，
   
   

   
   


2. 
   

   我们可以利用 chrome 自带的创建当前网站二维码的功能快速体验一下。
   

   
   


3. 
   

   你可以用手机自带的二维码扫码软件扫一下这个二维码，它将会将你引导到我掘金的个人主页。
   
   

   
   


4. 
   

   细心的你可能会发现二维码下面已经给你提示了你准备保存的链接地址，现在你观察一下浏览器地址栏是否正对应下面这个地址呢？
   

   
   

三. 实现扫码本地图片功能

1. 
   

   我们不需要深入了解这个二维码的转换规则，我们可以直接选用现有的插件即可完成识别功能。 这里我们选用 antfu 大佬的轮子。这里我们不过多介绍，你只需要它可以识别出图片中的二维码即可。如果感兴趣，这是具体仓库地址 qr-sanner-wechat。

   
   


2. 
   

   首先安装 npm i qr-scanner-wechat。

   
   


3. 
   

   它的使用方法也十分简单，这个依赖导出了一个方法，我们直接引入这个方法即 import { scan } from 'qr-scanner-wechat。

   
   


4. 
   

   这个函数可以接收一个 image 元素或者 canvas 元素作为参数，并且返回一个 promise 类型的值。

   
   


5. 
   

   我们先来测试最简单的，传入一个 image 元素，利用 input 标签的 type=file 属性，就可以从本地选择图片，比较基础的知识，不过多赘述，代码如下。

   
   

   function getImageFromLocal(e: Event) {
   
     const inputEl = e.target as HTMLInputElement;
   
     if (!inputEl) return;
   
     console.log("inputEl.files", inputEl.files);
   
   }
   
   
   
   
   
   

   
   

   然后我们可以通过 input 元素绑定的 onChange 回调中拿到 input 元素身上的 files 属性，就可以获取到刚刚我们选择的文件信息。
   
   

   
   


6. 
   

   但是目前这个数据对象我们还无法使用，需要借助 URL.createObjectUrl 方法来创建一个普通的 url 地址。
   
   

   
   


7. 
   

   当拿到这个 url 地址以后该如何使用呢？🤔
   

   
   


8. 
   

   一个熟悉的老朋友，有请 img 标签出场，👏，我们只需要将 img 标签的 src 替换成刚刚保存的 url 地址即可。
   
   
   
   现在整体效果应该是这样的：
   
   

   
   


9. 
   

   有了 img 元素，我们直接将这个元素赋值给 qr-scanner-wechat 插件提供的 scan 函数即可。
   
   
   

   
   


10. 
    

    我们来测试一下整体流程。
    
    
    

    
    


11. 
    

    可以看到，scan 函数返回了一个对象，这个对象身上有两个十分重要的属性。一个叫做 rect (rectangle 长方形的单词缩写)，这个属性描述了这个插件在什么位置扫描到了二维码，另外一个属性就是 text，也就是这个图片上隐藏的字符串地址。
    
    

    
    


12. 
    

    这里我们再讲解一下 rect 属性，因为后面的功能需要你对这个属性有比较清晰的理解。我们对比一个现实世界的例子。当你掏出手机扫描二维码的时候，往往并不会正好对准一个二维码的图片，或者会遇到一个图片中存在两个二维码的情况，如下图：
    
    

    
    


13. 
    

    这个 qr-scanner 插件会帮你把二维码所在整张图片的相对位置告诉你，因为这个插件每次调用 scan 函数只会返回一次结果。并不是说图片上有两个二维码，它的识别结果就会有两个，所以说这个 qr-scanner 插件的识别效果也并不是百分之一百准确的。

    
    

四. 理清思路

1. 
   

   说了这么多，那么这个 rect 我们该如何利用起来呢？别着急，我们先理清思路再动手写代码，到了目前这一步会出现两种情况。
   
   

   
   


2. 
   

   第一种是图片压根就没有二维码，这个简单，提示用户重新放置图片即可。

   
   


3. 
   

   关键点就在于第二张情况，当图片上扫码到存在一个二维码后，我们该如何判断是否存在第二个或多个维码呢？
   
   

   
   


4. 
   

   我们看一下微信的实现效果，当只有一张二维码的时候，它会直接跳转，当有多个二维码的时候，它会将整个页面暂停，并且提示用户有两张二维码，请点击选择一个进行跳转。
   
   

   
   


5. 
   

   但是我们上面提到了，scan 函数每次只会扫描一次图片，返回一个识别结果，它并不能准确知道图片上到底有几个二维码。那放到现实生活我们会怎么做呢？
   

   
   


6. 
   

   举个例子，假如我们现在掏出手机扫一扫的功能，现在给你的图片上有两个二维码，但是我明确的知道我就想扫第二个，你会怎么做？
   
   

   
   


7. 
   

   这不是很简单的道理吗？我拿手挡住第一个二维码不就可以了吗？
   
   

   
   


8. 
   

   那么利用同样的思路，我们可以再扫描到一张二维码的时候，想办法把当前识别到的这个二维码位置给遮挡住，然后将被遮挡后的照片传递给 scan 函数再次扫描。

   
   


9. 
   

   那么整个过程就是，我们首先将完整的照片传给 scan，然后 scan 觉得第一张二维码比较帅，就先识别了它。(tips: 这里需要提醒一下，scan 有时候会觉得第二张二维码比较帅，那我就识别第二张二维码，要注意的它的顺序性是随机的)
   
   

   
   


10. 
    

    然后我们想办法盖上遮挡物，然后将这个图片传给 scan，让它再次确认是否有第二个二维码。
    
    

    
    


11. 
    

    在哪覆盖？还记不记 rect 属性保留有这个二维码的位置信息？现在的问题就转变为如何覆盖了？

    
    


12. 
    

    这里需要用到 canvas 元素的一丢丢基础知识，这是 mdn canvas 基础知识的介绍，十分简单的就画出了一个绿色长方体。
    
    
    
    ctx.filleRect可以接收四个参数，分别是相对于画布起始轴的 x 和 y 的距离。
    
    简单来讲就可以理解为每一个 canvas 就相当于一个独立的 HTML 文件，也有自己的独立坐标系系统，x，y 就相当于 margin，至于后面两个参数，其实就代表着你要画的长方形的宽度和高度。
    

    
    

13.那这不巧了吗，scan 的返回值 rect 恰好就有这几个值。

14. 话不多说，马上开始实践。⛽️

五. 处理存在多张二维码的图片

1. 
   

   注意： 以下内容我统一选用从本地照片上传作为演示，从摄像头获取图片是同样的道理，详细介绍请移步 🎁前端如何打开摄像头拍照。在下面的讲解过程，我会默认你已经阅读了前置知识。

   
   


2. 
   

   这里我就继续沿用之前提到的图片，我将他们拼接到了一张图片上。
   
   

   
   


3. 
   

   下面应该是你目前从本地选择二维码图片识别的代码。
   

   
   

   async function getImageFromLocal(e: Event) {
   
     const inputEl = e.target as HTMLInputElement;
   
     if (!inputEl) return;
   
     if (!inputEl.files?.length) return;
   
     const image = inputEl.files[0];
   
     const url = URL.createObjectURL(image);
   
     src.value = url;
   
     const result = await scan(imgEl.value!);
   
     console.log("result", result);
   
   }
   
   

   
   


4. 
   

   接下来我们需要先创建一个 canvas 来将当前的照片拷贝到画布上，然后准备利用得到的 rect 信息在这个 canvas 元素上绘画。
   
   

   
   


5. 
   

   为了方便展示，我调用 appendChildren 方法将这个 canvas 元素打印到了界面上。
   
   

   
   


6. 
   

   然后用 result 中 rect 的坐标和宽度信息，去调用我们提到的 canvas 的 fillStyle fillRect 方法。
   
   
   
   下面是目前实现的效果:
   
   

   
   


7. 
   

   注意：scan 函数不仅仅可以接受 imgElment 作为扫描的参数，它还可以接受 canvas 元素作为扫描的参数。聪明的你看到这里，或许已经猜到我们下一步准备做什么了。

   
   


8. 
   

   那么此时我们就可以将这个已经被黑色涂鸦覆盖过的 canvas 进行二次扫描。(暂时不要考虑代码的优雅性，这里只是更清晰的说明我们在干什么，之后我们会封装几个方法，然后整理一下代码)
   
   
   
   让我们再看一下效果:
   
   

   
   


9. 
   

   通过多次重复上面的操作，就可以将图片上所有的二维码都尽量识别出来。
   
   
   
   现在实现的效果:
   
   
   
   同时图片上相对应的识别内容也全都被正确的被获取到了。
   
   

   
   


10. 
    

    此时我们创建一个 Map 来保存这些数据。Map 的 key 就是 text ，对应的 value 就是 rect 坐标信息。
    
    
    
    

    
    

六. 弹出可以点击的小蓝块

1. 
   

   有了坐标信息和位置信息，并且我们的 canvas 和 img 元素的坐标轴系统是一一对应的，那么我们就可以写一个函数来遍历这个 resultMap，然后根据位置信息在 img 元素所在的 div 上打印出我们想要的样式。

   
   


2. 
   

   首先在 img 元素外面包一层 div，打上 ref 叫做 imgWrapper 。因为之后我们要用它当作小蓝块的定位元素，所以先设置 position:relative。
   
   

   
   


3. 
   

   绘画代码如下，都是基础的方法，不再过多赘述。

   
   

   //多个二维码时添加动态小蓝点
   
   function draw() {
   
     resultMap.forEach((rect, link) => {
   
   if (!imgWrapper.value) return;
   
   const dom = document.createElement("div");
   
   const { x, y, width, height } = rect;
   
   const _x = (x || 0) + width / 2 - 20;
   
   const _y = (y || 0) + height / 2 - 20;
   
   dom.className = "blue-chunk";
   
   dom.style.width = "40px";
   
   dom.style.height = "40px";
   
   dom.style.background = "#2ec1cc";
   
   dom.style.position = "absolute";
   
   dom.style.zIndex = "9999999";
   
   dom.style.top = _y + "px";
   
   dom.style.left = _x + "px";
   
   dom.style.color = "#fff";
   
   dom.style.textAlign = "center";
   
   dom.style.borderRadius = "100px";
   
   dom.style.borderBlockColor = "#fff";
   
   dom.style.borderColor = "unset";
   
   dom.style.borderRightStyle = "solid";
   
   dom.style.borderWidth = "3px";
   
   dom.style.animation = "scale-animation 2s infinite";
   
   dom.addEventListener("click", () => {
   
     console.log(link);
   
   });
   
   imgWrapper.value.appendChild(dom);
   
     });
   
   }
   
   

   
   


4. 
   

   然后再 for 循环以后开始绘画小蓝块。
   
   

   
   


5. 
   

   让我们预览一下现在的效果:
   
   

   
   


6. 
   

   让我们测试一下相对应的点击事件
   
   

   
   

七. 源码

八.总结

本篇文章的关键点就是讲解了我在实现处理多张二维码的场景时的思路，利用 canvas 遮挡识别过的二维码这个思路是pbk-bin大佬最先想到的，在实现这个需求以后还是很感叹这个思路的巧妙。👏

再次特别感谢pbk-bin🎁～

如果文章对你有帮助，不妨赠人玫瑰，手有余香，预计将会在下篇更新较为完整的微信扫一扫界面和功能。

前段时间看了实习生的新项目，发现他启动不了项目，因为node版本太低，我让他去用nvm来管理node的版本，然后看到他切换版本的时候是这样的，先用nvm下载安装目标的node版本，然后在把安装好的node版本替换掉原先的node路径下的node_modules，而不是用命令行进行版本切换，才发现原来他使用nvm来切换node版本虽然显示切换成功，但全局的node版本一直是不变的，所以才用文件覆盖的方式强制进行解决，对于这个问题进行解决并且梳理

可以直接跳到第四步查看解决方案

1️⃣ 安装nvm

where nvm

找不到nvm路径的朋友可以用这个命令来找到nvm的安装路径，默认的安装路径都是差不多的

2️⃣ 查看目前node版本

可以看到目前的版本是node V16.14.2

3️⃣ nvm安装目标node版本

nvm的主要作用就是用来切换node的版本，为什么要切换node的版本，就是因为你的当前node版本和你要启动的项目不兼容，有两种可能，要么是你的项目太旧，你的node版本相对来说比较高，需要用到向下兼容；另外一种可能就是你项目用到的node比较新，你需要进行升级

先安装需要安装的目标版本，用isntall来安装你需要的对应node版本

回到你的nvm安装路径，就可以看到你已经安装的各种版本的node文件夹

当然也可以用命令行

nvm list

4️⃣ nvm切换到目标node版本

切换到目标node版本使用nvm use

nvm use

查看目前nvm安装了哪些版本 然后use来进行切换

到切换的时候发现了问题，这里无论怎么切换，node的版本依然不会变

可以看到我用的use来切换到15的版本，但是再次查看nvm的node历史版本，可以看到还是位于16.14.2的node版本，明明就是这么顺利的问题，出了一个让人摸不到头脑的事情

5️⃣寻找问题

既然nvm切换版本已经成功，那么为什么node版本不会变，有没有可能根本改的不是同一个node，或者是存在两个node，直到我打开环境变量一看，为啥会存在两个node的路径，可能的原因就是之前的node版本没有删除，node -v一直输出的是安装前的node

原来已经安装了一个node的，全局的node指向的node路径和nvm切换node的路径是不一样的

nvm切换的node是基于他文件夹中的nodejs

点进去看你会发现他也是有一个node.exe的程序的，所以问题是已经找到的了，目前系统上出现了两个node，并且nvm切换的node版本并不是全局的node，因为环境变量已经指向了旧的node，他的版本不会改变，那么nvm去怎么切换都是没有用的

6️⃣解决方案

看了网上的一些解决方案都是要在nvm中新建两个文件夹的方式来解决，但是其实直接把nodejs删除也是一个很直接的办法，先通过where node找到当前的node的安装目录，直接进行删除

最后是通过把另外一个目录的node进行删除，重新看一下node的安装路径，也就是重新执行一下 where node

可以看到在nvm配置正确的情况下是能直接指向nvm下的node的

最后重新切换一下node的版本，也就是上文的操作

PS

我指的手动切换是nvm下载node版本之后手动去替换node_modules，原来大家觉得用nvm use也是手动替换（确实是我的问题），经过评论区广大jym指正，可以尝试一下volta这个工具来进行切换版本，真正做到不用手动替换，后续我会亲自去体验一下并且发文，感谢评论区小伙伴

🙏 感谢您花时间阅读这篇文章！如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

题目

给定两个数组，判断两数组内容是否相等。

• 不使用排序


• 不考虑元素位置

例：

[1, 2, 3] 和 [1, 3, 2] // true

[1, 2, 3] 和 [1, 2, 4] // false

思考几秒：有了😀😀

1. 直接遍历✍

• 直接遍历第一个数组，并判断是否存在于在第二个数组中


• 求差集, 如果差集数组有长度，也说明两数组不等（个人感觉比上面的麻烦就不举例了）

const arr1 =  ["apple", "banana", 1]

const arr2 =  ["apple", 1, "banana"]



function fn(arr1, arr2) {

  // Arrary.some: 有一项不满足 返回false

  // Arrary.indexOf: 查到返回下标，查不到返回 -1

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => arr2.indexOf(item)===-1)

}



fn(arr1,arr2) // true

• 细心的小伙伴就会发现：NaN 会有问题

const arr1 =  ["apple", "banana", NaN]

const arr2 =  ["apple", NaN, "banana"]



function fn(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => arr2.indexOf(item)===-1)

}



fn(arr1,arr2) // false

Arrary.prototype.indexOf() 是使用的严格相等算法 => NaN值永远不相等

Array.prototype.includes() 是使用的零值相等算法 => NaN值视作相等

• 严格相等算法: 与 === 运算符使用的算法相同


• 零值相等不作为 JavaScript API 公开， -0和0 视作相等，NaN值视作相等，具体参考mdn文档:

• 使用includes

const arr1 =  ["apple", "banana", NaN]

const arr2 =  ["apple", NaN, "banana"]



function fn(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }

  return !arr1.some(item => !arr2.includes(item))

}



fn(arr1,arr2) // true

使用includes 确实可以判断NaN了，如果数组元素有重复呢？

// 重复的元素都是banana

const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "banana", "cherry"];

// 或者

// 一个重复的元素是banana， 一个是apple

const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "apple", "cherry"];

由上可知：这种行不通，接下来看看是否能从给数组元素添加标识入手

2. 把重复元素标识编号✍

这个简单：数组 元素重复 转换成val1, val2

function areArraysContentEqual(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }



  // 重复数组元素 加1、2、3

  const countArr1 = updateArray(arr1)

  const countArr2 = updateArray(arr2)



  /**

   * 

   * @param {*} arr 数组 元素重复 转换成val1, val2

   * @returns 

   */

  function updateArray(arr) {

    const countMap = new Map();

    const updatedArr = [];



    for (const item of arr) {

      if (!countMap.has(item)) {

        // 如果元素是第一次出现，直接添加到结果数组

        countMap.set(item, 0);

        updatedArr.push(item);

      } else {

        // 如果元素已经出现过，添加带有编号的新元素到结果数组

        const count = countMap.get(item) + 1;

        countMap.set(item, count);

        updatedArr.push(`${item}${count}`);

      }

    }

    return updatedArr;

  }

  const flag = countArr1.some(item => !countArr2.includes(item))

  return !flag

}



const array1 = ["apple", "banana", "cherry", "banana"];

const array2 = ["banana", "apple", "banana", "cherry"];



areArraysContentEqual(array1, array2) // true



// 其实这种存在漏洞的

const array3 = ["apple", "banana", "cherry", "banana", 1, '1', '1' ];

const array4 = ["banana", "apple", "banana", "cherry", '1', 1, 1];

// 应该是false

areArraysContentEqual(array3, array4) // true

因为把判断的 转为了字符串 updatedArr.push(${item}${count}) 所以出问题了

3. 统计元素次数(最终方案)✍

function areArraysContentEqual(arr1, arr2) {

  if (arr1.length !== arr2.length) {

    return false;

  }



  // 创建计数对象，用于记录每个元素在数组中的出现次数

  const countMap1 = count(arr1)

  const countMap2 = count(arr2)



  // 统计数组中的元素出现次数

  function count(arr = []) {

    const resMap = new Map();

    for (const item of arr) {

      resMap.set(item, (resMap.get(item) || 0) + 1);

    }

    return resMap

  }

  // 检查计数对象是否相等

  for (const [key, count] of countMap1) {

    if (countMap2.get(key) !== count) {

      return false;

    }

  }



  return true;

}



const array1 = ["apple", "banana", "cherry", "banana", 1, '1', '11', 11];

const array2 = ["banana", "apple", "banana", "cherry", '1', 1, '11', 11];



areArraysContentEqual(array1, array2) // true

注意事项

这个题需要注意：

• 先判断长度，长度不等 必然不等


• 元素可重复


• 边界情况考虑
  
  
  
  • '1' 和 1 (Object的key是字符串， Map的key没有限制)
  
  
  • NaN
  
  
  • null undefined
  
  
  
  

结语：

如果本文对你有收获，麻烦动动发财的小手，点点关注、点点赞！！！👻👻👻

因为收藏===会了

如果有不对、更好的方式实现、可以优化的地方欢迎在评论区指出，谢谢👾👾👾

变量

变量概述

数据类型

运算符

算数运算符

递增递减运算符

比较运算符

逻辑运算符

赋值运算符

运算符优先级

选择结构

流程控制（顺序，分支，循环）

小结

数组

函数

函数基本概念

arguments

函数声明方式

JavaScript作用域

预解析

sum(1)(2,3)(4,5,6) js的链式调用

function sum(){

let arr = Array.prototype.slice.call(arguments);

fn = function(){

    let arr1 = Array.prototype.slice.call(arguements)

    return sum.apply(null,arr.concat(arr1))

}

//`reduce()` 方法将数组缩减为单个值。

//`reduce()` 方法为数组的每个值（从左到右）执行提供的函数。

//函数的返回值存储在累加器中（结果/总计）。

//注释：对没有值的数组元素，不执行 `reduce()` 方法。

//注释：`reduce()` 方法不会改变原始数组。

   fn.toString = function(){

       return arr.reduce((value,n)=>{

           return value+n

       })

   }

   return fn

}

//柯里化的高级实现

function curry(func){

    return curried(...args){

        if(args.length >= func.length){

            return func.apply(this,args);

        }else{

            return function(...args2){

                return curried.apply(this,args.concat(args2))

            }

        }

    }

}

面试点

sum(1)(2)(3)怎么实现

面试的时候，面试官让我讲一个这个怎么实现
当时想到的是嵌套闭包，调用返回值，进行累加

//这个是我在其他文章上看到的代码

function sum(a){

    function add(b){

        a =a+b

        return add;

    }

    add.toString = function(){

    return a;

    }    

    return sum;

    

查询了一下，涉及到了一个知识点，函数柯里化

//正常的函数

function sum(a,b){

    var sum = 0;

    sum = a+ b;

    console.log(sum);

}



//柯里化函数

function curry(a){

    return function(b){

        console.log(a+b)

    }

}

const sum = curry(1);

// 这个过程分为三步

// step1：

// addCurry(1)

// 返回下面的函数

// ƒ (arg) {

// 	return judge(1, arg);

// }

// step2：

// addCurry(1)(2)

// 返回下面的函数

// ƒ (arg) {

// 	return judge(1,2, arg);

// }

// step3：

// addCurry(1)(2)(3)

// 返回并执行下面的函数

// return fn(1,2,3);

// 最终得到结果6

函数柯里化

把接收多个参数的函数变换成接受一个单一参数的函数，并且但会接收余下的采纳数并且返回结果的新函数的技术。eg:它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)

参数复用

用于正则表达式的检验

//记录思路

    柯里化检验函数curry 

    const check = curry(); 

    生成工具化函数，进行验证

    const checkphone = check(/'正则表达式'/)

    检验电话号码

    checkphone('122333232');

延迟计算

返回的函数都不会立即执行，而是等待调用（开发者调用）

动态生成函数

比如说，在dom结点中每每绑定一次事件，都需要对环境进行判断，再去绑定这个事件；将这个过程进行柯里化，在使用前进行一次判断

const addEvent = (function() {

	if (window.addEventListener) {

		return function(ele) {

			return function(type) {

				return function(fn) {

					return function(capture) {

						ele.addEventListener(type, (e) => fn.call(ele, e), capture);

					}

				}

			}

		}

	} else if (window.attachEvent) {

		return function(ele) {

			return function(type) {

				return function(fn) {

					return function(capture) {

						ele.addEventListener(type, (e) => fn.call(ele, e), capture);

					}

				}

			}

		}

	}

})();



// 调用

addEvent(document.getElementById('app'))('click')((e) => {console.log('click function has been call:', e);})(false);



// 分步骤调用会更加清晰

const ele = document.getElementById('app');

// get environment

const environment = addEvent(ele)

// bind event

environment('click')((e) => {console.log(e)})(false);

//来自于[一文搞懂Javascript中的函数柯里化（currying） - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/120735088)

柯里化函数后虽然代码比较冗长，但是它的适用性增加了

柯里化封装

eg : sum(1,2,3...)

    //函数柯里化封装（这个封装可以直接复制走使用）

    function curry(fn, args) {

            var length = fn.length;

            var args = args || [];

            return function () {

                newArgs = args.concat(Array.prototype.slice.call(arguments));

                if (newArgs.length < length) {

                    return curry.call(this, fn, newArgs);

                } else {

                    return fn.apply(this, newArgs);

                }

            }

        }

        

        //需要被柯里化的函数

        function multiFn(a, b, c) {

            return a * b * c;

        }

        

        //multi是柯里化之后的函数

        var multi = curry(multiFn);

        console.log(multi(2)(3)(4));

        console.log(multi(2, 3, 4));

        console.log(multi(2)(3, 4));

        console.log(multi(2, 3)(4));

        //转载自[Javascript高级篇之函数柯里化 - 掘金 (juejin.cn)](https://juejin.cn/post/7111902909796712455)

Function.prototype

四个方法：apply，bind，call，toString

Function.prototype.bind()

定义

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。（MDN）

const module = {

  x: 42,

  getX: function () {

    return this.x;

  },

};



const unboundGetX = module.getX;

console.log(unboundGetX()); // The function gets invoked at the global scope

// Expected output: undefined



const boundGetX = unboundGetX.bind(module);

console.log(boundGetX());

// Expected output: 42

Function.prototype.apply()

function 的实例的apply（）方法会以给定的this值和作为数组（或类数组对象）提供arguments调用该函数

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

// Expected output: 7

const min = Math.min.apply(null, numbers);

console.log(min);

// Expected output: 2

语法

apply(thisArg) apply(thisArg, argsArray)

参数

//argsArray --- 用于指定调用func时的参数，或者如果不需要向函数提供参数，则为null或undefined



//thisArg --- 调用func 时提供的this值，如果函数不处于严格对象，则null 和undefined 会被替换成全局对象，原始值会被转换成对象

返回值

使用指定的this值和参数调用函数的结果

Function.prototype.call()

Function 实例的 call() 方法会以给定的 this 值和逐个提供的参数调用该函数

//示例

function Product(name, price) {

  this.name = name;

  this.price = price;

}



function Food(name, price) {

  Product.call(this, name, price);

  this.category = 'food';

}



console.log(new Food('cheese', 5).name);

// Expected output: "cheese"

//语法

call(thisArg)

call(thisArg, arg1)

call(thisArg, arg1, arg2)

call(thisArg, arg1, arg2, /* …, */ argN)

Function.prototype.toString()

Function 实例的 toString() 方法返回一个表示该函数源码的字符串。

function sum(a, b) {

  return a + b;

}



console.log(sum.toString());

// Expected output: "function sum(a, b) {

//                     return a + b;

//                   }"



console.log(Math.abs.toString());

// Expected output: "function abs() { [native code] }"

放一个JavaScript的链接

转载自：http://www.cnblogs.com/wangdan0915…

:is()

你是否曾经写过下方这样冗余的CSS选择器:

.active a,

.active button,

.active label {

  color: steelblue;

}

其实上面这段代码可以这样写：

.active :is(a, button, label) {

  color: steelblue;

}

看~是不是简洁了很多！

是的，你可以使用 :is() 对选择器的任何部分进行分组，例如，你可以对如下代码：

.section h2,

.aside h2,

.nav h2 {

  color: steelblue;

}

进行转换：

:is(.section, .aside, .nav) h2 {

  color: steelblue;

}

但是 :is() 不仅对父选择器和子选择器有用，它也可以选择多个相邻的选择器，比如:

button:is(:focus, :hover, :active) {

  color: steelblue;

}



button:is(.active, .pressed) {

  color: lightsteelblue;

}

上述代码等价于：

button:focus, button:hover, button:active {

  color: steelblue;

}



button.active, button.pressed {

  color: lightsteelblue;

}

:where()

:where() 是一个与 :is() 非常相似的伪类，也值得注意。它们看起来非常相似:

:where(.section, .aside, .nav) h2 {

  color: steelblue;

}

但区别在于 :where 的权重为 0，而:is() 总是会采用列表中最特高的选择器的权重。例如，你知道下面的 CSS 代码中的按钮是什么颜色吗?

:is(html) button {

  color: red;

}



:where(html) button {

  color: blue;

}

在上面的例子中，虽然以 :where() 开头的块在以 :is() 开头的块下面，但 :is() 块具有更高的权重。

:has()

一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。

:has() 的一个示例是不显示下划线的情况下包含图像或视频的链接:

a { text-decoration: underline }



/* 链接有下划线，除非它们包含图像或视频 */

a:has(img, video) {

  text-decoration: none;

}

现在，如果默认情况下我们的 a 标记有下划线文本，但其中有图像或视频，则任何匹配的锚元素的下划线将被删除。

你也可以结合 :is() 使用：

:is(a, button):has(img, video) {

  text-decoration: none;

}

我们还需要预处理器吗?

现在你可能会说“SCSS可以做到这一点!，你甚至可能更喜欢它的语法:

.active {

  button, label, a {

    color: steelblue;

  }

}

说的没错，这很优雅。但是，CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。

CSS 变量也是 CSS 本身的另一个不可思议的补充，它回避了一个问题：就是什么时候或者多久你真的需要预处理程序:

.active :is(a, button, label) {

  --color: steelblue;

  color: var(--steelblue);

}

这并不是说预处理器没有它们的用例和优点。

但我认为在某个时间点上，它们确实是处理任何重要CSS的强制要求，而现在情况不再如此了。

惊喜

我想说的是，CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。他们正在积极地在3种可能的语法之间进行选择:

/* 1 */

article {

  font-family: avenir;

  & aside {

    font-size: 1rem;

  }

}



/* 2 */

article {

  font-family: avenir;

} {

  aside {

    font-size: 1rem;

  }

}



/* 3 */

@nest article {

  & {

    font-family: avenir;

  }

  aside {

    font-size: 1rem;

  }

}

你最喜欢哪一个?

庆幸的是，第 1 种已经被官方采纳！所以我们可能很快就会看到一个非常像 scss 的嵌套语法。

浏览器支持

目前所有主流浏览器都支持 :is() 和 :where() 伪类:

但是，需要注意，我们在这里提到的 :has() 伪类没有相同级别的支持，所以使用 :has() 时要小心:

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

大家设想一下，如果有一个超级大的表单页面，用户好不容易填完了，然后点击提交，这个时候请求接口居然返回401，然后跳转到登录页。。。那用户心里肯定是一万个草泥马~~~

所以项目里实现token无感知刷新是很有必要的~

这几天在项目中实践了一套token无感知刷新的方案，其实也有看了一下网上那些解决方案，也知道这类的方案已经烂大街了，但是感觉不太符合我想要的效果，主要体现在以下几个方面：

• 逻辑都写拦截器里，耦合性高，不太好


• 接口重试的机制做的不太好


• 接口并发时的逻辑处理做的不太好

我为什么不想要让这套逻辑耦合在拦截器里呢？一方面是因为，我想要写一套代码，在很多的项目里面可以用，把代码侵入性降到最低

另一方面，因为我觉得token无感知刷新涉及到了接口重发，我理解是接口维度的，不应该把这套逻辑放在响应拦截器里去做。。我理解重发之后就是一个独立的新接口请求了，不想让两个独立的接口请求相互有交集~

所以我还是决定自己写一套方案，并分享给大家，希望大家可以提提意见啥的，共同进步~

温馨提示：需要有一些Promise基础

思路

其实大体思路是一样的，只不过实现可能有差别~就是需要有两个 token

• accessToken：普通 token，时效短


• refreshToken：刷新 token，时效长

accessToken用来充当接口请求的令牌，当accessToken过期时效的时候，会使用refreshToken去请求后端，重新获取一个有效的accessToken，然后让接口重新发起请求，从而达到用户无感知 token 刷新的效果

具体分为几步：

• 1、登录时，拿到accessToken和refreshToken，并存起来


• 2、请求接口时，带着accessToken去请求


• 3、如果accessToken过期失效了，后端会返回401


• 4、401时，前端会使用refreshToken去请求后端再给一个有效的accessToken


• 5、重新拿到有效的accessToken后，将刚刚的请求重新发起


• 6、重复1/2/3/4/5

有人会问：那如果refreshToken也过期了呢？

好问题，如果refreshToken也过期了，那就真的过期了，就只能乖乖跳转到登录页了~

Nodejs 模拟 token

为了方便给大家演示，我用 express 模拟了后端的 token 缓存与获取，代码如下图（文末有完整代码）由于这里只是演示作用，所以我设置了

• accessToken：10秒失效


• refreshToken：30秒失效

前端模拟请求

先创建一个constants.ts来储存一些常量（文末有完整源码)

接着我们需要对axios进行简单封装，并且模拟：

• 模拟登录之后获取双 token 并存储


• 模拟10s后accessToken失效了


• 模拟30s后refreshToken失效了

理想状态下，用户无感知的话，那么控制台应该会打印

test-1

test-2

test-3

test-4

打印test-1、test-2比较好理解

打印test-3、test-4是因为虽然accessToken失效了，但我用refreshToken去重新获取有效的accessToken，然后重新发起3、4的请求，所以会照常打印test-3、test-4

不会打印test-5、test-6是因为此时refreshToken已经过期了，所以这个时候双token都过期了，任何请求都不会成功了~

但是我们看到现状是，只打印了test-1、test-2

不急，我们接下来就实现token无感知刷新这个功能~

实现

我的期望是封装一个class，这个类提供了以下几个功能：

• 1、能带着refreshToken去获取新accessToken


• 2、不跟axios的拦截器耦合


• 3、当获取到新accessToken时，可以重新发起刚刚失败了的请求，无缝衔接，达到无感知的效果


• 4、当有多个请求并发时，要做好拦截，不要让多次去获取accessToken

针对这几点我做了以下这些事情：

• 1、类提供一个方法，可以发起请求，带着refreshToken去获取新accessToken


• 2、提供一个wrapper高阶函数，对每一个请求进行额外处理


• 3/4、维护一个promise，这个promise只有在请求到新accessToken时才会fulfilled

并且这个类还需要支持配置化，能传入以下参数：

• baseUrl：基础url


• url：请求新accessToken的url


• getRefreshToken：获取refreshToken的函数


• unauthorizedCode：无权限的状态码，默认 401


• onSuccess：获取新accessToken成功后的回调


• onError：获取新accessToken失败后的回调

以下是代码（文末有完整源码）

使用示例如下

最后实现了最终效果，打印出了这四个文本

完整代码

constants.ts

// constants.ts



// localStorage 存储的 key

export const LOCAL_ACCESS_KEY = 'access_token';

export const LOCAL_REFRESH_KEY = 'refresh_token';



// 请求的baseUrl

export const BASE_URL = 'http://localhost:8888';

// 路径

export const LOGIN_URL = '/login';

export const TEST_URL = '/test';

export const FETCH_TOKEN_URL = '/token';

retry.ts

// retry.ts



import { Axios } from 'axios';



export class AxiosRetry {

  // 维护一个promise

  private fetchNewTokenPromise: Promise<any> | null = null;



  // 一些必须的配置

  private baseUrl: string;

  private url: string;

  private getRefreshToken: () => string | null;

  private unauthorizedCode: string | number;

  private onSuccess: (res: any) => any;

  private onError: () => any;



  constructor({

    baseUrl,

    url,

    getRefreshToken,

    unauthorizedCode = 401,

    onSuccess,

    onError,

  }: {

    baseUrl: string;

    url: string;

    getRefreshToken: () => string | null;

    unauthorizedCode?: number | string;

    onSuccess: (res: any) => any;

    onError: () => any;

  }) {

    this.baseUrl = baseUrl;

    this.url = url;

    this.getRefreshToken = getRefreshToken;

    this.unauthorizedCode = unauthorizedCode;

    this.onSuccess = onSuccess;

    this.onError = onError;

  }



  requestWrapper<T>(request: () => Promise<T>): Promise<T> {

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

      // 先把请求函数保存下来

      const requestFn = request;

      return request()

        .then(resolve)

        .catch(err => {

          if (err?.status === this.unauthorizedCode && !(err?.config?.url === this.url)) {

            if (!this.fetchNewTokenPromise) {

              this.fetchNewTokenPromise = this.fetchNewToken();

            }

            this.fetchNewTokenPromise

              .then(() => {

                // 获取token成功后，重新执行请求

                requestFn().then(resolve).catch(reject);

              })

              .finally(() => {

                // 置空

                this.fetchNewTokenPromise = null;

              });

          } else {

            reject(err);

          }

        });

    });

  }



  // 获取token的函数

  fetchNewToken() {

    return new Axios({

      baseURL: this.baseUrl,

    })

      .get(this.url, {

        headers: {

          Authorization: this.getRefreshToken(),

        },

      })

      .then(this.onSuccess)

      .catch(() => {

        this.onError();

        return Promise.reject();

      });

  }

}