博客

单元测试基础

• 没有单元测试，开发者会倾向于不变动代码，导致代码腐化
• 加快开发速度
• 测试是重构的唯一保障
  Read more »

什么是 Nightwatch

Nightwatch 是一个可以为 Web 应用和网站提供自动端对端测试的框架。它由 Node.js 编写而成并且使用 W3C WebDriver API （以前是Selenium WebDriver）与不同的浏览器互动。

Nightwatch 是一个完整的测试解决方案旨在简化编写测试的过程以及设置持续集成和持续部署。Nightwatch 还可以用作为 Node.js 应用编写单元测试和集成测试。

browserslist

在package.json中有一个browserslis配置项是用来配置该工程的目标浏览器范围。

使用@vue/cli初始化的工程该配置项默认为['> 1%','last 2 versions'],在工程路径下执行npx browserslist可以列出该配置支持的浏览器列表。

同时这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

Why

因为要在公司电脑上使用公司的gitlab同时还需要使用自己的github，所以需要根据项目区分commit时的账户。

原文地址：I created the exact same app in React and Vue. Here are the differences.

工作中在用Vue，所以我对它有很扎实的理解。我以前就很好奇，篱笆另一边的草是什么样子的，这里说的草就是React。

我读过React的文档，也看过一些教学视频。他们是不错，但是我真的想知道的是React和Vue到底有多不同。这里说的‘不同’，不是说他们都在用虚拟Dom或者他们渲染页面的方式。我以为会有一个人愿意花点时间去解释代码层面的不同，所以我没少花时间去找这么一篇描写React和Vue哪里不同的文章，好让我对他们直接的不同之处有更深入的理解。

测试工具库

Vue Test Utils

断言库

需求是什么

需要实现一个图片放大缩小的功能，按住ctrl键滚动鼠标滚轮实现放大缩小，且以鼠标指针为中心实现放大缩小

Cloc简介

Cloc是一款使用Perl语言开发的开源代码统计工具，支持多平台使用、多语言识别，能够计算指定目标文件或文件夹中的文件数（files）、空白行数（blank）、注释行数（comment）和代码行数（code）。

使用Vuex实现undo

在最近的一个项目里需要在一个基于canvas进行标注的页面实现用户的撤销操作，刚开始查资料，有介绍可以使用immutable.js来实现。

什么是immutable.js

immutable.js就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。

最近的工作中有一个项目需要使用canvas对图片上的物体进行标注，标注直接使用牛津大学的一个插件，它的基本原理就是根据图片尺寸绘制一个相同大小的canvas图层覆盖在图片上，通过用户使用鼠标点击canvas图层获取坐标位置来调用canvas方法画出图形。插件已经把常见图形的方法封装好了，但是也需要改写一部分。

什么是canvas

首先，canvas是一个html标签<canvas>,它和<img>标签很类似，但是不同之处在于，老一些的浏览器不知者这个新标签。canvas只有height和width两个属性，并且不设置的话会被浏览器赋予一个默认值，除此之外还有一个id属性，注意，height和width不可以使用css来设置，会导致图像变形。