inquirer.js —— 一个用户与命令行交互的工具

写在前面：

开始通过npm init 创建package.json的时候就有大量与用户的交互(当然也可以通过参数来忽略输入)；而现在大多数工程都是通过脚手架来创建的，使用脚手架的时候最明显的就是与命令行的交互，如果想自己做一个脚手架或者在某些时候要与用户进行交互，这个时候就不得不提到inquirer.js了。

零. 介绍

由于交互的问题种类不同，inquirer为每个问题提供很多参数：

  • type：表示提问的类型，包括：input, confirm, list, rawlist, expand, checkbox, password, editor；
  • name: 存储当前问题回答的变量；
  • message：问题的描述；
  • default：默认值；
  • choices：列表选项，在某些type下可用，并且包含一个分隔符(separator)；
  • validate：对用户的回答进行校验；
  • filter：对用户的回答进行过滤处理，返回处理后的值；
  • transformer：对用户回答的显示效果进行处理(如：修改回答的字体或背景颜色)，但不会影响最终的答案的内容；
  • when：根据前面问题的回答，判断当前问题是否需要被回答；
  • pageSize：修改某些type类型下的渲染行数；
  • prefix：修改message默认前缀；
  • suffix：修改message默认后缀。

上面的属性(除transformer外)在下面都有对应使用。

一. 使用

0. 语法结构

1
2
3
4
5
6
7
8
9
const inquirer = require('inquirer');

const promptList = [
    // 具体交互内容
];

inquirer.prompt(promptList).then(answers => {
    console.log(answers); // 返回的结果
})

效果：
image.png

1. input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const promptList = [{
    type: 'input',
    message: '设置一个用户名:',
    name: 'name',
    default: "test_user" // 默认值
},{
    type: 'input',
    message: '请输入手机号:',
    name: 'phone',
    validate: function(val) {
        if(val.match(/\d{11}/g)) { // 校验位数
            return true;
        }
        return "请输入11位数字";
    }
}];

效果：
image.png

2. confirm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const promptList = [{
    type: "confirm",
    message: "是否使用监听？",
    name: "watch",
    prefix: "前缀"
},{
    type: "confirm",
    message: "是否进行文件过滤？",
    name: "filter",
    suffix: "后缀",
    when: function(answers) { // 当watch为true的时候才会提问当前问题
        return answers.watch
    }
}];

效果：
image.png

image.png

3. list

1
2
3
4
5
6
7
8
9
10
11
12
13
const promptList = [{
    type: 'list',
    message: '请选择一种水果:',
    name: 'fruit',
    choices: [
        "Apple",
        "Pear",
        "Banana"
    ],
    filter: function (val) { // 使用filter将回答变为小写
        return val.toLowerCase();
    }
}];

效果：

image.png

image.png

4. rawlist

1
2
3
4
5
6
7
8
9
10
const promptList = [{
    type: 'rawlist',
    message: '请选择一种水果:',
    name: 'fruit',
    choices: [
        "Apple",
        "Pear",
        "Banana"
    ]
}];

效果：

image.png

5. expand

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const promptList = [{
    type: "expand",
    message: "请选择一种水果：",
    name: "fruit",
    choices: [
        {
            key: "a",
            name: "Apple",
            value: "apple"
        },
        {
            key: "O",
            name: "Orange",
            value: "orange"
        },
        {
            key: "p",
            name: "Pear",
            value: "pear"
        }
    ]
}];

效果：

image.png

image.png

6. checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const promptList = [{
    type: "checkbox",
    message: "选择颜色:",
    name: "color",
    choices: [
        {
            name: "red"
        },
        new inquirer.Separator(), // 添加分隔符
        {
            name: "blur",
            checked: true // 默认选中
        },
        {
            name: "green"
        },
        new inquirer.Separator("--- 分隔符 ---"), // 自定义分隔符
        {
            name: "yellow"
        }
    ]
}];
// 或者下面这样
const promptList = [{
    type: "checkbox",
    message: "选择颜色:",
    name: "color",
    choices: [
        "red",
        "blur",
        "green",
        "yellow"
    ],
    pageSize: 2 // 设置行数
}];

效果：

image.png

image.png

7. password

1
2
3
4
5
const promptList = [{
    type: "password", // 密码为密文输入
    message: "请输入密码：",
    name: "pwd"
}];

效果：

image.png

8. editor

1
2
3
4
5
const promptList = [{
    type: "editor",
    message: "请输入备注：",
    name: "editor"
}];

效果：
image.png

image.png

写在后面：
Everything will be ok in the end, if it’s not ok, it’s not the end.

原文地址：原文链接

展开全文 >>

我为什么要写vscode代码风格统一的文章

image.png

原因还是有的，这并不是一个任务还是什么，我是webstorm的重度用户，从开始干前端一直使用webstorm，各种快捷键，各种使用方法都融汇贯通，不过最近发现一个问题，总使用盗版的也不合适，还有被人发现的风险，索性直接使用vscode，因此遇到一系列各种各样的问题，我把这些记录下来，就当是祭奠webstorm和迎接vscode的一个仪式吧～

image.png

webstorm将逐渐随风远去，接下来由vscode伴我继续前行～

展开全文 >>

vscode上关于eslint与prettier的格式化风格统一（Vue2.0+js）

通常我们使用VsCode编辑器进行软件开发的时候都会安装prettier和eslint两个插件，插件的作用是为了我们编写出更规范和一致的代码，方便我们后续的开发和维护，但是，有时候我们发现即便是同一个项目下的同学，使用这些插件的方法也是有差异的，这就造成不同的人开发出的代码规范不同，不能说谁对谁错，但这在团队合作中造成了不必要的麻烦，我们有必要遵循一种编码规范，进而避免这种情况的产生，于是我们对现有的规范和成熟的项目进行了梳理对比，总结出一套自认为还算合适的配置，希望能够在项目中帮助到其他人；

创建vue项目

我们这里使用相对规范的方式创建一个vue空项目，尽量避免已有项目对我们的干扰

1
vue create demo

默认项目会帮我们创建babel和eslint，不过我们需要一个没有eslint的环境，因此我们选择Manually select features
image.png

我们这里只保留了，Babel，至于Router、Vuex以及其他配置对于我们这里的实例没有影响，可以根据项目需要进行选择，只要保证Linter / Formatter没有勾选即可，因为我们后边还会对项目进行Eslint的初始化，这里选上会干扰我们使用。
image.png

然后是vue版本，我们使用2.x
image.png

剩下的使用默认配置按回车，然后等待项目初始化完成
image.png

esLint初始化

首先这里我们全局安装一下eslint，方便我们使用eslint工具进行初始化npm install eslint -g
image.png

然后进到项目根目录，项目初始结构是这样的，这里可以关注下依赖的包：
image.png

然后我们执行eslint --init，会让我们做一些基础配置，下边是过程中配置非默认的一些截图：
image.png
image.png
image.png

初始化过程中，他安装了一些依赖，这些是初始化项目里没有的；

1
2
3
4
5
6
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-vue": "^8.2.0",

同时，增加了.eslintrc.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:vue/essential', 'standard'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {}
}

至此，eslint的安装就结束了，安装完成以后package.json大概是这个样子：
image.png
后边对项目的改造主要是对.eslintrc.js以及安装它的依赖，以达到我们项目开发规范化的目的；

修改配置

准备好我们配置好的文件.eslintrc.js prettier.config.js settings.json

.eslintrc.js和prettier.config.js分别是eslint和prettier的配置文件；

setting.json则是vscode编辑器的配置，这里只需要把里边的配置增加到自己的settings.json配置文件里即可，不需要全部覆盖，因为settings.json还有一些我们自己的个性化配置，这里的配置主要是一些跟代码格式化相关的通用配置；

.eslintrc.js文件：

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

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/recommended', 'standard'],
  parserOptions: {
    parser: '@babel/eslint-parser',
    sourceType: 'module'
  },
  // 自定义规则，当与基础规则发生冲突时，覆盖基础规则
  // "off" 或 0 - 关闭规则;
  // "warn" 或 1 - 开启规则，使用警告级别的错误;
  // "error" 或 2 - 开启规则，使用错误级别的错误
  rules: {
    // 每行最大属性个数，如果是多行，每行最多一个属性
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 10,
        multiline: {
          max: 1
        }
      }
    ],
    // 忽略html标签自闭合 vue中html自终止标签是否写‘/’
    'vue/html-self-closing': 'off',
    // 单行html元素内容在新的一行
    'vue/singleline-html-element-content-newline': 'off',
    // 多行html元素内容在新的一行
    'vue/multiline-html-element-content-newline': 'off',
    // 关闭v-html的校验，因为我们可能会用到富文本编辑器
    'vue/no-v-html': 'off',
    // 一行内容最长有多少字符
    'max-len': ['error', { code: 200 }],
    // 函数名称或function关键字与开始参数之间允许有空格:关 默认为开 与prettier冲突
    'space-before-function-paren': ['error', 'never'],
    // 语句末尾不允许有';'：开
    semi: ['error', 'never'],
    // 不允许使用var
    'no-var': 2,
    // 是否允许promise中 reject()内无内容
    'prefer-promise-reject-errors': ['error', { allowEmptyReject: true }]
    // 不允许对象嵌套对象的大括号之间有空格 例如：{ query: { id: row.id }[这里]}
    // 某些框架下会使用下边的配置，比如elementUI-admin
    // 'object-curly-spacing': [
    //   2,
    //   'always',
    //   {
    //     objectsInObjects: false
    //   }
    // ]
  }
}

prettier.config.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
module.exports = {
  printWidth: 200, // 设置prettier单行输出（不折行）的（最大）长度

  tabWidth: 2, // 设置工具每一个水平缩进的空格数

  useTabs: false, // 使用tab（制表位）缩进而非空格

  semi: false, // 在语句末尾添加分号

  singleQuote: true, // 使用单引号而非双引号

  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号

  trailingComma: 'none', // 在任何可能的多行中输入尾逗号

  bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格

  jsxBracketSameLine: true, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）

  arrowParens: 'always', // 为单行箭头函数的参数添加圆括号，参数个数为1时可以省略圆括号

  rangeStart: 0, // 只格式化某个文件的一部分

  rangeEnd: Infinity, // 只格式化某个文件的一部分

  filepath: 'none', // 指定文件的输入路径，这将被用于解析器参照

  requirePragma: false, // (v1.7.0+) Prettier可以严格按照按照文件顶部的一些特殊的注释格式化代码，这些注释称为“require pragma”(必须杂注)

  insertPragma: false, //  (v1.8.0+) Prettier可以在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了。

  proseWrap: 'preserve' // (v1.8.2+)
}

setting.json文件部分配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 文件：文件自动保存，只要暂停输入
  "files.autoSave": "afterDelay",
  // 文件：文件保存机制：暂停输入3000毫秒即保存
  "files.autoSaveDelay": 3000,
  // 编辑器：这个属性是用来设置建议值的，就是我们在输入co时，编辑器提示我们const这个功能。推荐设置为first——即每次默认选中推荐值第一个，比如你输入co，推荐值为const和constant（按顺序），那么就会选择const。
  // 当然，也推荐设置为recentlyUsedByPrefix，即上次你选择或者输入过什么，这次就默认选中什么，比如你输入co，推荐值为const和constant（按顺序），上次你选择了constant，这次就还是默认选中cosntant
  "editor.suggestSelection": "recentlyUsedByPrefix",
  // 编辑器：保存即格式化
  // "editor.formatOnSave": true,
  // 编辑器：设置默认格式化工具 有了这个就不用每个类型的文件都设置一个格式化工具，大部分用prettier，只有特殊情况需要单独设置
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 编辑器：设置编辑器字体16号
  "editor.fontSize": 16,
  // 编辑器：保存时候的动作
  "editor.codeActionsOnSave": {
    // 保存的时候执行一次eslint校验
    "source.fixAll.eslint": true,
    // 保存的时候调整import顺序，按引入包字母顺序
    "source.organizeImports": true
  },

把这两个文件放到项目根目录，同时把setting.json的配置放到编辑器里边，入口可以参考下图
image.png

然后是我本地的完整的配置，仅供参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
  // 文件：文件自动保存，只要暂停输入
  "files.autoSave": "afterDelay",
  // 文件：文件保存机制：暂停输入3000毫秒即保存
  "files.autoSaveDelay": 3000,
  // 编辑器：这个属性是用来设置建议值的，就是我们在输入co时，编辑器提示我们const这个功能。推荐设置为first——即每次默认选中推荐值第一个，比如你输入co，推荐值为const和constant（按顺序），那么就会选择const。
  // 当然，也推荐设置为recentlyUsedByPrefix，即上次你选择或者输入过什么，这次就默认选中什么，比如你输入co，推荐值为const和constant（按顺序），上次你选择了constant，这次就还是默认选中cosntant
  "editor.suggestSelection": "recentlyUsedByPrefix",
  // 编辑器：保存即格式化
  // "editor.formatOnSave": true,
  // 编辑器：设置默认格式化工具 有了这个就不用每个类型的文件都设置一个格式化工具，大部分用prettier，只有特殊情况需要单独设置
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 编辑器：设置编辑器字体16号
  "editor.fontSize": 16,
  // 编辑器：保存时候的动作
  "editor.codeActionsOnSave": {
    // 保存的时候执行一次eslint校验
    "source.fixAll.eslint": true,
    // 保存的时候调整import顺序，按引入包字母顺序
    "source.organizeImports": true
  },
  // 编辑器：指定换行缩进空格数为2个空格
  "editor.tabSize": 2,
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "newUntitledFile",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "i18n-ally.displayLanguage": "en",
  "debug.console.fontSize": 16,
  "terminal.integrated.fontSize": 16,
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "vsicons.dontShowNewVersionMessage": true,

  // vetue的一些配置
  "vetur.useWorkspaceDependencies": true,
  "vetur.validation.template": false,
  // 忽略项目警告，比如：vetur can't find 'tsconfig.json' or 'jsconfig.json'
  "vetur.ignoreProjectWarning": true,

  "prettier.tabWidth": 2,
  "prettier.singleQuote": true,
  // 指定每行代码的最佳长度， 如果超出长度则换行。
  // 有了prettier.config.js文件则应用文件配置
  "prettier.printWidth": 200,
  "prettier.useEditorConfig": false,
  "prettier.semi": false,
  "prettier.trailingComma": "none",

  "eslint.alwaysShowStatus": true
}

有了这些配置还不够，还需要安装个依赖，否则你在使用eslint格式化的时候，会报错：
image.png

1
"@babel/eslint-parser": "^7.12.16"

安装完成以后再使用eslint的格式化可以将一些不规范的地方规范，同时与自动保存使用的prettire也不会冲突。

其他

格式化快捷键：ctrl+option+L
image.png

eslint格式化快捷键：ctrl+option+;
image.png

我本地的环境：
操作系统：MacBook Pro (15-inch, 2017)
nodejs版本：v16.9.0
npm版本：7.21.1
yarn版本：1.22.17
vue-cli版本：@vue/cli 5.0.0-rc.1

当然，我们在项目中配置了保存即格式化，实际上也能解决大部分问题，当遇到两种格式化不一样的时候，我们可以使用prettier来适配eslint，因为eslint对应的vue项目插件格式化还是比较通用的。

参考

关于eslint的配置及其说明可以看腾讯文档

eslint 中文官方文档

关于prettier的配置及其说明可以看官方文档

eslint-plugin-vue 这里是一些关于vue的格式化配置，可以通过这个文档了解vue格式化的思路

展开全文 >>

Vue3 + <script setup> + Typescript 使用手册

image.png

前言

相信看到这面文章的你对新技术一定充满好奇，并且已经对 vue3 提供的 script setup 的写法爱不释手，但目前该写法尚在完善中，所以还是有许多坑需要踩的，文档暂时也不全，本文主要列举一下 Vue3 + Vite + script setup 在 Typescript 中的使用，希望能帮你愉快的使用好它。

name 组件名字

给组件命名可以方便在 devtool 调试工具中更快定位组件

方法1：多写一个 script 标签

1
2
3
4
5
6
<script lang="ts">
export default { name: 'MyComponent' };
</script>
<script setup lang="ts">
// 组件内容
</script>

方法2：vue 文件命名

如：MyComponent.vue

data( ref / reactive / computed )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup lang="ts">
import { computed, reactive, ref } from '@vue/runtime-core';
type User = { name: string; password: string };

// ref
const msg = ref(''); //  会默认约束成 string 类型
const msg2 = ref<string>(''); //  可以通过范型约束类型
const user = ref({} as User); // 自定义类型强制转化 通过 user.value. 访问

// reactive
const obj = reactive({});
const user2 = reactive<User>({name: '', password: ''});
const user3 = reactive({} as User); // 自定义类型强制转化

// computed
const str3 = computed(() => ''); // 会默认约束成 string 类型
const user5 = computed<User>(() => {
  return { name: '', password: '' };
});
</script>

props

使用 defineProps 以及 as PropType 定义 typescript类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup lang="ts">
import { defineProps } from '@vue/runtime-core';
// 特别注意：接口类型需要使用 import type 否则编译出错
import type { PropType } from '@vue/runtime-core'; 
type User = { name: string; password: string };

const props = defineProps({
  str: {
    type: String as PropType<string>,
    // string 首字母小写为 typescript 对应 js 中的基础类型
    default: ''
  },
  user: {
    type: Object as PropType<User>,
    default() {
      return {};
    },
  },
});
</script>

Template Refs

1
2
3
4
<template>
    <div ref="divRef"></div>
    <div :ref="(el) => setItemRef"></div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
import { ref, useContext } from '@vue/runtime-core';

// const divRef = ref<HTMLElement>({} as HTMLElement); // 新版本已支持如下写法
const divRef = ref({} as HTMLElement);
const itemRefs = ref([] as Array<HTMLElement>);
function setItemRef(el: HTMLElement) {
  if (el) {
    itemRefs.value.push(el);
  }
}
</script>

Component 组件化

使用 Typescript 可以更好的提示组件方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- components/Dialog.vue -->
<template>...</template>
<script setup lang="ts">
import { useContext } from '@vue/runtime-core';

function open() {
  console.log('open dialog');
}
function close() {
  console.log('close dialog');
}
// 需要手动 expose 需要暴露给外部的方法
useContext().expose({
  open,
  close,
});
</script>
1
2
3
4
5
// src/components/dialog.d.ts 添加额外接口信息
export interface IDialog {
  open: Function;
  close: Function;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <Dialog ref="dialogRef"></Dialog>
</template>

<script setup lang="ts">
// @ts-ignore
import Dialog from '@/components/Dialog.vue'; // 引入组件
import type { IDialog } from '@/components/dialog'; // 引入类型信息
import { ref } from '@vue/reactivity';

const dialogRef = ref({} as IDialog); // 将组件绑定接口信息
dialogRef.value.open(); // 这样在输入dialogRef.value. 时就会提示出已暴露的方法了
</script>

image.png

总结

虽然在使用 script setup 的时候经常无迹可寻，但这种写法真的非常简洁，未来可期。希望早日完善，也希望这篇文章能够帮到路过的你~

展开全文 >>

找不到模块 “path“ 或其相对应的类型声明

使用 npm init @vitejs/app 创建项目添加别名

1
import path from “path”;

有这个错误提示：

1
2
找不到模块 ‘path’ 或其相对应的类型声明
找不到名称"__dirname"

解决方法：

1
npm install @types/node --save-dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// 1. defineConfig: 不用 jsdoc 注解也可以获取类型提示
// 2. 找不到模块“path”或其相应的类型声明 或者 找不到名称“__dirname 安装 @types/node

const resolve = (dir: string) => path.join(__dirname, dir)

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve('src'),
      'comps': resolve('src/components'),
      'apis': resolve('src/apis'),
      'views': resolve('src/views'),
      'utils': resolve('src/utils'),
      'routes': resolve('src/routes'),
      'styles': resolve('src/styles')
    }
  },
})


展开全文 >>

dart 中在实例化 new 关键字可以省略不写

dart 中在实例化 new 关键字可以省略不写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Person {
  String name;
  int age;
  String sex;
  Person(this.name, this.age, this.sex);
  info() {
    print("${this.name}");
    print("${this.age}");
    print("${this.sex}");
  }
}

<!-- 这里没有省略关键字new -->
main() {
  var p = new Person('张三', 20, '女');
  p.info();
}

<!-- 这里省略了关键字new -->
main() {
  var p = Person('张三', 20, '女');
  p.info();
}

展开全文 >>

ES新提案：双问号操作符

本文主要讲Gabriel Isenberg撰写的ES提案“Nullish coalescing for JavaScript”。 它提出?? 替换||的运算符,并提供默认值。这里先把这相提案叫作双问号操作符，如果你有好的叫法，欢迎留言讨论。

1. 概述

双问号 ?? 的操作符跟 || 类似，如果给定变量值为 null 或者 undefined，刚使用双问号后的默认值，否则使用该变量值。

如下:

1
2
3
4
5
6
7
8
9
10
> undefined ?? 'default'
'default'
> null ?? 'default'
'default'
> false ?? 'default'
false
> '' ?? 'default'
''
> 0 ?? 'default'
0

2. 早期的 || 运算符号

直接来个例子来演示一下 || 运算，下面两个等式是等价的：

1
2
a || b
a ? a : b

如果 a 是 truthy 值，则返回 a, 否则返回 b。

这使得使用||指定一个默认值成为可能，如果实际值是假的，那么将使用这个默认值：

1
2
3
4
5
6
7
8
9
10
11
const result = actualValue || defaultValue;
function getTitle(fileDesc) {
  return fileDesc.title || '(Untitled)';
}
const files = [
  {path: 'index.html', title: 'Home'},
  {path: 'tmp.html'},
];
assert.deepEqual(
  files.map(f => getTitle(f)),
  ['Home', '(Untitled)']);

请注意，基本只有在实际值undefined或为null时才应使用默认值，这是有效的，因为undefined和null都是假(虚值)的：

1
2
3
4
> undefined || 'default'
'default'
> null || 'default'
'default'

遗憾的是，如果实际值是其他的虚值，也会使用默认值：

1
2
3
4
5
6
> false || 'default'
'default'
> '' || 'default'
'default'
> 0 || 'default'
'default'

因此，这个getTitle()并不总能正常工作：

1
2
3
assert.equal(
  getTitle({path: 'empty.html', title: ''}),
  '(Untitled)');

3. 使用双问号操作符来解决 || 运算的问题

?? 主要是用来解决 || 操作符号的一些问题，以下两个表达式是等价的：

1
2
a ?? b
a !== undefined && a !== null ? a : b

默认值是这样提供的：

1
2
const result = actualValue ?? defaultValue;

对于undefined和null， ??操作符的工作原理与||操作符相同

1
2
3
4
5
> undefined ?? 'default'
'default'
> null ?? 'default'
'default'

除了 undefined 和 null的其它虚值，?? 不会返回默认值。

1
2
3
4
5
6
> false ?? 'default'
false
> '' ?? 'default'
''
> 0 ?? 'default'
0

使用 ?? 来重写 getTitle():

1
2
3
function getTitle(fileDesc) {
  return fileDesc.title ?? '(Untitled)';
}

现在使用fileDesc调用它，它的.title是空字符串，仍然可以按符合咱们的预期工作：

1
2
3
assert.equal(
  getTitle({path: 'empty.html', title: ''}),
  '');

3.1 通过解构给定默认值

除了使用 ?? 给getTitle添加默认值，咱们也可以通过解构方式来给定默认值：

1
2
3
function getTitle({title = '(Untitled)'}) {
  return title;
}

3.2 使用 ?? 操作符号的实际例子

作为一个现实的例子，咱们使用??来简化下面的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function countMatches(regex, str) {
  if (!regex.global) {
    throw new Error('Regular expression must have flag /g: ' + regex);
  }
  const matchResult = str.match(regex); // null or Array
  if (matchResult === null) {
    return 0;
  } else {
    return matchResult.length;
  }
}

assert.equal(
  countMatches(/a/g, 'ababa'), 3);
assert.equal(
  countMatches(/b/g, 'ababa'), 2);
assert.equal(
  countMatches(/x/g, 'ababa'), 0);

// Flag /g is missing
assert.throws(
  () => countMatches(/a/, 'ababa'), Error);

使用 ?? 操作符号后，简化如下：

1
2
3
4
5
6
7
function countMatches(regex, str) {
  if (!regex.global) {
    throw new Error('Regular expression must have flag /g: ' + regex);
  }
  return (str.match(regex) ?? []).length;
}

3.3 双问号(??)操作符与可选链(?)

双问号(??)的提出是为了补充可选链(?)，来看看这两兄弟结合使用的场景（第A行）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const persons = [
  {
    surname: 'Zoe',
    address: {
      street: {
        name: 'Sesame Street',
        number: '123',
      },
    },
  },
  {
    surname: 'Mariner',
  },
  {
    surname: 'Carmen',
    address: {
    },
  },
];

const streetNames = persons.map(
  p => p.address?.street?.name ?? '(no name)'); // (A)
assert.deepEqual(
  streetNames, ['Sesame Street', '(no name)', '(no name)']
);

4. 兼容性

可以通过ECMAScript Next compatibility table 查看 ?? 支持情况。

展开全文 >>

设置一个npm的别名

设置jnpm

1
2
3
4
alias jnpm="npm --registry=http://registry.m.jd.com \
--cache=$HOME/.npm/.cache/jnpm \
--disturl=https://npmmirror.com/dist \
--userconfig=$HOME/.jnpmrc"

设置cnpm

1
2
3
4
alias cnpm="npm --registry=https://registry.npmmirror.com \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npmmirror.com/dist \
--userconfig=$HOME/.cnpmrc"

展开全文 >>

端到端自动化测试框架Cypress简介

总揽

当我看到Cypress的时候，有一种当初看到vue的时候的感觉：恰好是我需要的，恰好能做到我需要的所有事情，同时也是渐进式无侵入性的。

Cypress有一系列的目标：

  1. web已经升级更新了，测试也同样需要升级更新
  2. Cypress是一款能够快速、简单、稳定的测试所有运行在浏览器上的内容的端到端测试工具
  3. Cypress是一个完整的端到端测试体验框架，他不需要安装其他额外的依赖包
  4. 安装Cypress是非常简单的，没有依赖、额外下载同时不需要修改你的代码
  5. 测试你的代码而非你的耐心：Cypress是一个新的针对开发人员与QA工程师定制的标准的端到端测试框架

测试金字塔模型

image.png

UI自动化测试

UI测试的主要目的是从软件使用者的角度来检验软件的质量，而UI自动化测试则是以自动化的方式来代替人工执行测试。在测试金字塔模型中，UI层测试是各种测试中投入最大、收益最低、运行最慢的一种。

而Cypress的出现实际可以在某种程度上打破这种局面

单元测试

单元测试有这样一段描述很有意思：

image.png

单元测试的价值

image.png

Cypress简介

  • Cypress是为现代网络打造的，基于JavaScript的下一代前端测试工具。他可以对浏览器中运行的任何内容进行快速，简单和可靠的测试。
  • Cypress是自集成的，它提供了一套完整的端到端测试体验。无须借助其他外部工具，在简单安装后即可允许用户快速的创建、编写、运行、测试用例，并且针对每一步操作均支持回看。
  • 不同于其他只能测试UI层的前端测试工具，Cypress允许你编写所有类型的测试，覆盖了测试金字塔模型涉及的所有测试类型：端到端测试；集成测试；单元测试；

Cypress优点

  • 界面美观友好。
  • 支持手机模拟。
  • 测试的每一步都有对应的截图。
  • 全程都会有录屏。
  • 支持debug调试，随时暂停。
  • 自动等待ui更新，减少异步代码。

Cypress带来的改变

有了Cypress，配置测试框架不再是一件看起来非常繁琐的事情，它有你所有想要的功能：
image.png

Cypress与其他测试框架的比较

对比维度 Cypress Selenium/WebDriver
框架完备 是 否（仅是Library）
开箱即用 是 否（无法直接工作）
自带断言库 是 否（需自行添加）
自带Mock 是 否（需自行添加）
自带测试运行器（Test Runner） 是 否（需自行添加）
对比维度 Cypress Karma
框架完备 是 否（仅是Test Runner）
开箱即用 是 否（无法直接工作）
自带断言库 是 否（无法直接工作）
自带Mock 是 否（无法直接工作）
自带测试运行器（Test Runner） 是 否（无法直接工作）
对比维度 Cypress Nightwatch
框架完备 是 是
开箱即用 是 是（安装，配置繁琐）
底层框架 自主研发，运行快 基于WebDriver，运行慢
适用范围 UI,API,UnitTest均支持 仅用于UI测试
脚本易维护 是 否（难以维护）
回放测试执行情况 是 否
多浏览器支持 支持 支持
对比维度 Cypress Protractor
框架完备 是 是
开箱即用 是 是
底层框架 自主研发，运行快 基于WebdriverJS，运行慢
单元测试框架 底层使用Mocha，不可替换 默认使用Jasmine，允许替换
适用范围 多种语言开发的程序均可进行测试 主要应用于Angular的程序
回放测试执行情况 是 否
多浏览器支持 支持 支持
对比维度 Cypress TestCafe
框架完备 是 是
开箱即用 是 是
底层框架 自主研发，运行快 自主研发，通过Proxy Server工作
测试用例组织便捷度 基于Mocha，组织、编写简单 测试用例写法异于常规（fixture），学习成本高
自带测试运行器 是 是（也仅仅是TestRunner）
回放测试执行情况 是 否
多浏览器支持 支持 支持
测试运行 测试运行在浏览器中 测试运行在Node.js中，便于设置和清除数据库fixtures
对比维度 Cypress Puppeteer
框架完备 是 是
是否有IDE 是 否
适用范围 e2e的完美解决方案 主要用于爬虫和开展快速测试
自带断言库 是 否
回放测试执行情况 是 否
多浏览器支持 支持 支持

Cypress的局限

长期权衡

  • 不建议使用Cypress用于网络爬虫，性能测试之目的。
  • Cypress永远不会支持多标签测试。
  • Cypress不支持同时打开两个及以上的浏览器。
  • 每个Cypress测试用例应遵守同源策略

短期折中

  • 目前浏览器支持Chrome，Firefox，Microsoft Edge和Electron
  • 不支持测试移动端应用
  • 针对iframe的支持有限
  • 不能在window.fetch上使用cy.route()
  • 没有影子DOM支持。

Cypress作为一款优秀的开源软件，其提供的多个免费功能已经能够满足绝大多数团队和个人的需求。

安装Cypress

1
npm install cypress --save-dev

or

1
yarn add cypress --dev

then

1
npx cypress open

image.png

Cypress元素定位

image.png

Cypress页面元素基本操作方式

image.png

Cypress常见操作

image.png

cypress可操作事件

image.png

Cypress上传文件或图片

Cypress的文件或图片上传可以使用这个插件，使用起来还是很方便的：https://github.com/abramenal/cypress-file-upload

image.png

image.png

使用Cypress界面获取要选择的元素

Cypress界面获取元素方式与控制台定位元素方式很像：
image.png

使用Cypress录制测试脚本

通过使用Cypress的界面，可以方便的创建测试用例和录制测试脚本，但实际上我们的场景可能会比较复杂，这时候录制的脚本可能达不到我们的需求，因此这里了解即可，实际情况更多还是需要手动去写一些代码。

Vue项目中单元测试-组件测试

在vue项目中使用组件测试可以查看 @cypress/vue 这个插件以及官方文档。

总结

cypress给我们前端开发工程师一个非常友好的方式进行端到端的测试，测试用例使用javascript编写，对于前端开发来说还是非常友好的，这里介绍了cypress的一些功能，实际上上手也并不复杂，同时官网相关的视频资源也很丰富，希望感兴趣的同学能够动手尝试。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

生活，需要终身学习和不断成长