purple_lumpy-CSDN博客

原创 Jest 中的 snapshot 快照测试基础

项目中经常有一些配置文件。比如export const generateConfig = () => { return { server: 'http://localhost', port: '8080' }}那测试它的测试用例可以这样写import { generateConfig } from './snapshot....

2019-09-21 17:27:42 6917

原创 Jest 中钩子函数

首先，我们来写一个类，并把它放入一个文件 counter.js 中，代码如下。class Counter { constructor () { this.number = 0 } addOne () { this.number += 1 } minusOne () { this.number -= 1 ...

2019-09-21 12:52:38 782

原创 Jest 异步代码测试要注意的点

Jest 异步代码测试中，有一些点，我们记录一下。如果要测的是回调函数，那么可以使用done 函数。官网是如下解释的：Instead of putting the test in a function with an empty argument, use a single argument calleddone. Jest will wait until thedonecall...

2019-09-21 11:52:07 1080

原创 Jest 中匹配器

有时我们希望Jest 在测试代码发生变化的时候，能够自动运行。那么我们在 jest 命令后面加上参数 --watchAll 即可。 "scripts": { "test": "jest --watchAll", "coverage": "jest --coverage" },下面，我们在math.test.js 中增加一个测试用例test('测试匹配器'...

2019-09-19 20:41:13 252

原创 Jest 简单配置

与webpack 类似，当不做配置的时候，运行webpack 命令也可以进行打包，它会遵循webpack 默认的配置进行打包操作。Jest 不做配置的时候，也是遵循它默认的配置进行打包。那么现在，我们自己来配置jest。项目目录下，使用命令npx jest --init意思是调用本项目下node_modules 下的jest然后它会询问我们几个问题，根据需要选择就好...

2019-09-19 20:40:54 1272

原创前端自动化测试框架 Jest

目前业界里比较主流的前端自动化框架有： Jasmine, Mocha, Jest.Jest 在性能、功能、易用性综合来说是比较好的。正在看的 vue-loader 源码也使用 Jest 框架进行测试。就先来学习一下Jest 的使用吧！使用Jest ，我们先来创建一个项目。（新建一个目录，进入并使用 npm init -y 初始化项目）先来安装Jest 到项目 (使用版本24.8....

2019-09-19 15:19:00 490

原创前言

下面开始记录前端测试框架。此前先填填自己写的原始单元测试脚本：先编写一个函数库文件名为math.jsfunction add (a, b) { return a + b}function minus (a, b) { return a-b}function multi (a, b) { return a * b}function devis...

2019-09-19 14:05:42 103

原创编写一个Plugin

前面我们编写了一个Loader ，这里我们试下编写一个简单的plugin。那么Loader 与 Plugin，他们有什么区别呢。我们在源代码中引入js 或其他格式文件时，我们可以通过Loader 去处理这些文件，也就是Loader 帮助我们处理模块。而Plugin 是在我们打包的时候，在某些特定时刻上插件会被调用。比如说，当打包结束希望自动生成html 文件，这时可以使用htmlWebpa...

2019-09-15 11:36:58 503

原创编写一个Loader

在前面webpack 的配置中，我们使用了许多loader， css-loader, style-loader, vue-loader, file-loader, ...下面我们来自己写一个Loader.我们先创建一个文件夹，make-loader ，接着使用 npm init -y 命令对这个文件夹进行node 项目初始化。然后我们再在项目中安装webpack 和 webpack-c...

2019-09-15 09:17:34 362

原创 webpack 打包性能优化

当我们在打包一些大的项目的时候，会发现，打包的时间非常非常的长。这时候除了等待，我们还可以思考如何提高webpack 打包效率。比如下面几个点：1. 版本更新（技术迭代）升级 webpack / node / npm / yarn 版本2. 尽可能少的模块上应用 Loader如下，我们通过设施exclude，使node_modules 中的代码，不用load...

2019-09-08 18:18:26 306 1

原创 EsLint

eslint 是代码规范的一种工具，下面我们来看看使用eslint 如何比较好地在webpack 中配置。先，我们下载eslint 到项目。npm install eslint --save-dev然后，我们可以使用命令初始化eslint 的配置文件（/.eslintrc.js）npx eslint --init按照它给我们的问题选择好选项后，就会在项目根目录下生成esli...

2019-09-08 16:16:04 164

原创 Typescript 打包配置

如果项目中使用的是Typescript，那么打包的时候，会和之前有些差异。下面，我们来看看webpack 中如何配置，来支持Typescript 。我们先使用命令 npm init 新建一个项目。然后我们在项目跟目录下新建文件webpack.config.js 与文件夹 src 。然后，我们在项目中把webpack 先下载进来：npm install webpack web...

2019-09-07 21:35:01 1739 1

原创 Library 的打包基础

当我们要打包一个Library 的时候，比如组件库或者函数库的时候，就不是像之前那样的打包方式了。这里我们就来试试Library 的打包。这里我们来做一个函数库的打包。先初始化一个项目（node 项目）初始化：新建一个文件夹，然后进入这个文件夹运行命令 npm init -y 然后就可以初始化一个node 项目啦！初始化后，会在项目跟目录下，新建一个package.json 文件...

2019-09-02 22:25:23 664

原创环境变量

我们在写webpack 的时候，之前它导出的是一个对象。使用module.exports = {...} 形式。现在我们把它改成导出一个函数，如下。module.exports = (env) => { if (env && env.production) { return // some config production class ...

2019-08-29 07:46:32 136

原创 shimming

在webpack 打包过程中，我们往往要做代码兼容或者打包过程的兼容。比如我们之前使用的babel-polyfill 。我们来讲一个例子，有一个第三方代码，如下。export function ui () { $('body').css('background', 'green')}如果在index.js 中直接引入，是使用不了的。运行时，会报错。如下index.js...

2019-08-29 07:42:36 193

原创 webpack 与浏览器缓存

我们先在项目中加入 jquery 与 lodash 库。然后在index.js 中引入并使用，如下。import _ from 'lodash'import $ from 'jquery'const dom = $('<div>')dom.html(_.join(['hello', 'world'], ' '))$('body').append(dom)然后...

2019-08-29 07:42:11 171

原创 css 文件的代码分割

之前写的都是js 代码分割，下面来看看css 代码分割。先看看webpack.config.js 如下const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin...

2019-08-27 20:36:22 529

原创打包分析，Preloading，Prefetching

打包分析，是指当我们使用webpack 对项目进行打包之后，可以使用打包分析工具，来对我们打包生成的文件进行分析，来看看打包是否合理。webpack 官方提供了它的一个分析工具的github 仓库：https://github.com/webpack/analyse下面我们就来使用一下这个分析工具，来分析一下我们打包生成的代码文件。我们要对我们打包的代码进行分析，首先要生成一个打包过程...

2019-08-26 21:46:06 394

原创 Lazy Loading 懒加载与Chunk

我们接着上文例子继续写，因为lazy loading , chunk 是之前就有遇到的。我们删除上文中src/test.js 文件。我们放开index.js 中引入并使用lodash 的注释代码，如下// syncimport _ from 'lodash'var element = document.createElement('div');element.innerHTM...

2019-08-26 10:41:21 649

原创 SplitChunksPlugin 配置参数 2

我们继续上篇，探索一下splitChunks 的配置。我们在项目的 src 下新建一个文件 test.js 导出一个很少的内容，如下。export default { name: 'Me a Test'}然后我们将入口index.js 文件改为这样：import test from './test'console.log(test.name)运行打包命令，由于...

2019-08-25 22:31:14 314

原创 SplitChunksPlugin 配置参数

上面我们使用了 webpack 中的代码分割。我们知道webpack 代码分割，底层使用了 SplitChunksPlugin 插件。那么下面，我们来写写这个插件可以进行配置的一些参数。我们上篇的代码如下。index.jsfunction getComponent () { return import('lodash').then( ({default: _}) =>...

2019-08-25 21:39:35 2222

原创 webpack Hot Module Replacement 热模块替换

我们先改一下 index.js 文件。如下。import './style.css';var button = document.createElement('button');button.innerHTML = "新增";document.body.appendChild(button);button.onclick = function() { var div = do...

2019-07-08 17:52:26 1173

原创 nvm - node版本管理

nvm 是node 的版本管理工具，可切换多个node 版本在Mac 上，只需要使用 Homebrew 下载 nvm 即可。brew install nvm使用nvm 也很简单nvm list 查看当前所有的node 版本nvm install v10.13.0 安装指定的版本nvm use --delete-prefix 10.13.0 切换到指定的版本...

2019-06-30 23:18:47 150

原创 webpack 与 code splitting 2

前面一篇，我们自己手动进行了代码分割。我们在使用 webpack 的时候，一般都会使用 code splitting。因为webpack 中有一些插件可以让我们非常容易地进行 code splitting。在 webpack4 中有一个插件：splitChunksPlugin，并且它直接与webpack 做了捆绑。不需要安装，直接可以配置使用。下面我们来实验一下。我们把index....

2019-06-27 15:47:16 265

原创 HTTP CSP

Content Security Policy (CSP)https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP它体现在：- 限制资源获取- 报告资源获取越权限制方式- default-src 限制全局- 制定资源类型（资源类型如，connect-src, img-src, manifest-src, ...

2019-06-23 12:12:40 706

原创 HTTP Redirect

Redirect 是指，当我们通过URL 访问一个资源的时候，我们可能会发现，这个资源已经不在这个URL 所指向的位置了。这个时候，服务器要告诉浏览器/客户端，要请求的资源在什么地方，然后浏览器/客户端再去重新请求那个地方，这样的话，就可以拿到资源。const http = require('http')const fs = require('fs')const zlib = requi...

2019-06-22 11:37:35 2518

原创 HTTP 数据协商

数据协商，即客户端发送给服务端一个请求的时候，客户端会申明希望拿到的数据的格式以及数据相关的一些限制，而服务端会根据这些请求中表示的想要的限制，来进行判断要返回一个怎样的数据。分类- 请求 Accept 通过 “Accept” 申明希望的数据的格式通过 “Accept-Encoding” 申明希望的数据的编码方式（主要用来限制服务端如何进行数据的压缩）通...

2019-06-22 11:17:42 184

HTTP 请求是在TCP连接上进行发送的。而TCP的连接分为：长连接，短连接。长连接：HTTP 请求发送的时候，要先去创建一个TCP连接，然后在这个TCP连接上，把HTTP 的请求发送并接受完。一次HTTP请求结束了，浏览器就会跟服务端商量是否关闭TCP 连接。如果不关闭，TCP 连接一直开着，会有一定的消耗，但如果还有请求，可以直接在这个TCP 上发送（不需要经过三次握手这样的连接的消耗）；...

2019-06-20 17:44:19 16260

原创 Cookie

cookieCookie 是服务端返回数据的时候，通过 Set-Cookie 这个 header，设置到浏览器中，并保存在浏览器中的内容。浏览器保存了这个Cookie 后，下次在同域的请求中，就会带上这个Cookie。Cookie 是键值对的形式保存的，可以设置多个。cookie 属性max-age 和 expires 设置过期时间Secure 只在 https 的时候发送...

2019-06-17 20:42:09 130

原创缓存验证 Last-Modified & Etag

上篇文章我们知道，当我们给Catch-Control 设置了 no-catch 后，每次浏览器对这个资源的请求时，都会到服务器端进行资源验证，验证完之后，如果确定这个资源可以使用缓存，浏览器才会读取本地的缓存。下面是浏览器请求数据过程中关于缓存的步骤。进行数据验证，主要是有两个Header： Last-Modified 与 Etag .Last-Modified 即上次修改时间。...

2019-06-16 18:25:35 978

原创缓存头 Cache-Control 的含义和使用

本篇我们来写一下HTTP 中的缓存，即Cache-Control 。Cache-Control 的可缓存性（指明哪些地方可以缓存返回的数据）： - public (HTTP 返回的时候在Heaher 中设置Cache-Control 的值为‘public’。它代表，这个HTTP 请求它返回的内容所经过的任何路径中，包括中间的一些HTTP 代理服务器以及发出请求的客户端浏览器，都可以进行对...

2019-06-16 17:38:17 18975 1

原创 CORS 跨域请求 - 2

前面一篇，我们通过在服务器端使用了 header 中'Access-Control-Allow-Origin' 使得跨域请求可以获取数据。那么是不是使用了这个header 就可以使得所有跨域请求都成功呢？否！下面我们就来讲一下，浏览器跨域请求的一些限制。首先，我们把之前的html 页面中ajax 请求用fetch 写一下。如下。<!DOCTYPE html>&lt...

2019-05-29 18:35:10 186

原创 CORS 跨域请求 - 1

首先我们来写两个简单的服务器：server.js 如下const http = require('http')const fs = require('fs')http.createServer(function (request, response) { console.log('request come', request.url) const html = f...

2019-05-29 13:56:14 180

原创 HTTP 客户端

我们最常用的HTTP客户端就是网页浏览器（它除了是HTTP 客户端，还有其他功能如解析网页等）了。还有一个常用的 HTTP 客户端就是 curl （Mac系统自带了）我们在终端上输入curl baidu.com就会显示下面的信息：它返回了一个meta, 而这个meta 是告诉我们要重定向到 www.baidu.com那我们再curl www.baidu.c...

2019-05-25 11:18:23 464

原创 Vue 获取div 的宽度

在template 某个元素中添加ref 属性。之前使用ref 的style.width 就可以获取得到。但今天在使用的时候突然不能获得了。尝试了下面的方式即可：在js 中获取这个 ref 的 “clientWidth” 属性const eWidth = this.$refs.echartsWrapper.clientWidth具体原因，占个坑先...

2019-05-21 14:34:11 29954 3

原创 HTTP 报文，方法，CODE

报文如下。注意一下，是在首行也就是其实行，指定了HTTP 的版本。HTTP 方法用来定义对资源的操作常用的有 GET， POST等从定义上来讲它是有各自的语义的HTTP CODE定义服务器对请求处理的结果各个区间的CODE 有各自的语义（100-199 操作要持续进行，接下来要持续做一些事情请求才能返回；200-299 操作是成功的；300-399 操...

2019-05-20 10:48:10 219

原创 URI, URL, URN

URI 其实是包含了 URL 和 URN 的统一的定义。URI - Uniform Resource Identifier / 统一资源标志符。用来唯一标识互联网上的信息资源。包含 URL，URN。URL- Uniform Resource Locator / 统一资源定位器。一个URL例子：http://user:[email protected]:80/path?query=str...

2019-05-19 09:38:43 106

原创 HTTP协议的发展历史

第一个定稿的HTTP协议 HTTP/0.9- 只有一个命令 GET- 没有HEADER等描述数据的信息- 服务器发送完毕内容，就关闭TCP连接第二个HTTP 版本 HTTP/1.0- 增加了很多命令- 增加了status code （描述服务端处理请求的状态的）和 header- 多字符集支持、多部分发送、权限、缓存等HTTP/1.1（在HTTP1.0 ...

2019-05-18 18:09:33 913

原创 HTTP请求的大概流程

当在浏览器中，输入一个 URL，HTTP请求及返回的过程时间节点如下。- 为什么先做redirect，因为浏览器很可以已经记录过这个要访问的地址以及永久跳转成的一个新地址，所以一开始浏览器需要判断，是否需要redirect 以及redirect 到哪里。- 第二步是看缓存。因为请求的资源可能已经缓存过了，如果有缓存那么直接从缓存中获取数据，否则第三步DNS解析。- DNS 解析即把域名...

2019-05-18 17:19:22 171

原创 Mac 上 npm install 报错

克隆好项目后，使用npm install ,有如下报错是permission 的问题。我们按照如下的步骤操作一下吧，哎。- 新建一个文件mkdir ~/.npm-global- 设置npm 使用新的路径npm config set prefix '~/.npm-global'- 打开或者创建～//profile ,把下面这行添加进去。export PAT...

2019-04-30 16:45:20 2400 1

空空如也

opencv（for android）怎样提取出JPEG图像的DCT系数？