如何做组件库的单元测试

前言

在我们开发完一个组件库的后,在做单元测试时,代码覆盖率常常被拿来作为衡量测试好坏的指标,甚至,用代码覆盖率来考核测试任务完成情况,比如,代码覆盖率必须达到80%或 90%。于是乎,测试人员费尽心思设计案例覆盖代码。用代码覆盖率来衡量,有利也有有弊。

首先,让我们先来了解一下所谓的“代码覆盖率”。我找来了所谓的定义:

代码覆盖率 = 代码的覆盖程度,一种度量方式。

关于如何开发组件库,可看这篇:

如何基于vue开发ui组件库(heaven-ui)

如何搭建一个自己的脚手架

脚手架

搭建脚手架的目的就是快速的搭建项目的基本结构并提供项目规范和约定。目前日常工作中常用的脚手架有 vue-cli、create-react-app、angular-cli 等等,都是通过简单的初始化命令,完成内容的快速构建。

其实我们也可以用git clone url来新建(复制)项目,再 low 一点的方法就是复制粘贴整个文件夹,一样也能达到初始化的目的。

脚手架的本质也是从远程下载一个模板来进行一个新项目,但是脚手架可是高级版的克隆,它主要是提供了交互式的命令让我们可以动态的更改模板,然后用一句命令就可以实现其他内置依赖的初始化,方便了多人协作,不需要将文件传来传去。

接下来我们就开始实现一个简易版的脚手架heaven-cli(可自行命名),目标是实现一个heaven init template-name project-name这样的命令,废话少说,开始进入正题吧!

pm2的基本使用

PM2

PM2 是一个带有负载均衡功能的 Node 应用进程管理器。

主要特性:

  • 内建负载均衡(使用 Node cluster 集群模块)
  • 后台运行
  • 0 秒停机重载
  • 具有 Ubuntu 和 CentOS 的启动脚本
  • 停止不稳定的进程(避免无限循环)
  • 控制台检测
  • 提供 HTTP API
  • 远程控制和实时的接口 API(Nodejs 模块,允许和 PM2 进程管理器交互)

Git提交规范保护

Git 规范

Git 作为现在最流行的分布式管理工具,基本上是每个团队的必备。

Git Commit格式校验

  • 准备commitlint/cli用于格式校验
  • 准备husky用于git提交代码时触发校验

husky

husky 是创建 git 客户端 hooks 的神器。

目前最新版本是 7.*,文档在这里(opens new window)

初始化 husky 只需要三步。首先要安装:

1
$ npm i husky --save-dev

执行下面的脚本,会初始化一个 .husky 目录:

1
$ npx husky install

初始化后,就可以添加 hook 了。

添加一个 commit-msg 钩子,并指定一个默认 shell:

1
$ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

现在在执行 git commit 之前,就会执行上面指定的 shell。

  
 git

理解js中的new

  • 新生成了一个对象
  • 链接到原型
  • 绑定 this
  • 返回新对象

在调用 new 的过程中会发生以上四件事情,我们也可以试着来自己实现一个 new

1
2
3
4
5
6
7
8
9
10
11
12
13
function create() {
// 创建一个空的对象
let obj = new Object()
// 获得构造函数
let Con = [].shift.call(arguments)
// 链接到原型
obj.__proto__ = Con.prototype
// 绑定 this,执行构造函数
let result = Con.apply(obj, arguments)
// 确保 new 出来的是个对象
return typeof result === 'object' ? result : obj
}

node版本切换工具n的使用介绍

node版本切换工具n的使用介绍

n

交互式管理 Node.js 版本

支持的平台

n在 macOS、Linux(包括适用于 Linux 的 Windows 子系统)和各种其他类 Unix 系统上均受支持。它被编写为 BASH 脚本,但不需要您使用 BASH 作为您的命令外壳。

n 在 Microsoft Windows(如 PowerShell)的本机 shell、Windows BASH 的 Git 或 Cygwin DLL 中不起作用。

搭建组件库文档

前言

在我们开发完一个组件库的时候,需要有一个组件说明文档,文档页面是最直接的获取信息的窗口。而文档页一般包含了这些信息:

  • 组件的描述
  • 组件 Demo 示例的展示、描述和源码
  • 组件的参数文档

组件说明文档是让其他人了解组件库的关键环节,包括组件库的适用范围(pc端,移动端,轻量级还是重量级),兼容浏览器的版本,设计原则和背景,以及社区生态,使用方法等。

关于如何开发组件库,可看这篇:

heaven-ui

文档生成

这里推荐 vuepress ,可以快速帮我们完成组件库文档的建设。(https://vuepress.vuejs.org/zh/guide/)

vuepress是一个文档生成工具,默认的样式和vue官方文档几乎是一致的,因为创造它的初衷就是想为vue和相关的子项目提供文档支持。它内置了 Markdown的扩展,写文档的时候就是用 markdown来写,最让人省心的是你可以直接在 Markdown 文件中使用Vue组件,意味着我们的组件库中写的一个个组件,可以直接放到文档里去用,展示组件的实际运行效果。 我的案例网站也就是通过vuepress来写的,生成静态网站后,用 gh-pages 直接部署到github上,也可以直接部署到我们自己的网站上。

vuepress更好的一点在于你可以自定义其webpack配置和主题,意味着你可以让你自己的文档站点在开发阶段有更多的功能特性的支持,同时可以把站点风格改成自己的一套主题风格。这就无需我们重头开始去做一套了,对于咱们想要快速完成组件库文档建设这一需求来说,还是挺有效的。

什么是XSS?

什么是XSS呢

跨网站指令码(英语:Cross-site scripting,通常简称为:XSS)是一种网站应用程式的安全漏洞攻击,是[代码注入]的一种。它允许恶意使用者将程式码注入到网页上,其他使用者在观看网页时就会受到影响。这类攻击通常包含了 HTML 以及使用者端脚本语言。

XSS 分为三种:反射型,存储型和 DOM-based

如何攻击

XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站。

例如通过 URL 获取某些参数

1
2
<!-- http://www.domain.com?name=<script>alert(1)</script> -->
<div>{{name}}</div>

上述 URL 输入可能会将 HTML 改为 <div><script>alert(1)</script></div> ,这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击,也可以说是 DOM-based 攻击。

也有另一种场景,比如写了一篇包含攻击代码 <script>alert(1)</script> 的文章,那么可能浏览文章的用户都会被攻击到。这种攻击类型是存储型攻击,也可以说是 DOM-based 攻击,并且这种攻击打击面更广。

什么是Event loop

img

众所周知 JS 是门非阻塞单线程语言,因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话,我们在多个线程中处理 DOM 就可能会发生问题(一个线程中新加节点,另一个线程中删除节点),当然可以引入读写锁解决这个问题。

JS 在执行的过程中会产生执行环境,这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码,会被挂起并加入到 Task(有多种 task) 队列中。一旦执行栈为空,Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行,所以本质上来说 JS 中的异步还是同步行为。

1
2
3
4
5
6
7
console.log('script start')

setTimeout(function() {
console.log('setTimeout')
}, 0)

console.log('script end')

:D 一言句子获取中...