Mocha

Mocha 是一个功能丰富的 JavaScript 串行测试框架.支持多种运行环境,可以在 Node.js 和 浏览器 中运行.
通过 Mocha, 可以便捷的测试异步函数, 捕获错误, 生成测试报告.

官网文档

下面是针对 sum 函数创建的一个测试案例:

1
2
3
4
5
6
7
8
9
10
const sum = (a, b) => {
const num = a + b;
return parseFloat(num.toPrecision(15));
}

describe('sum 函数', () => { // 测试套件
it('0.1 + 0.2 = 0.3', () => { // 测试用例
expect(sum(0.1, 0.2)).to.equal(0.3); // 断言
})
});

HTTP 响应状态码

HTTP 响应状态码(HTTP Response Status Code) 用于表示服务器对此次 HTTP 请求的响应结果(服务器是否正常, 是否返回了数据).
其由是一个3位整数的状态码(status-code)及一个原因短语(reason-phrase)组成,状态码和原因短语间用空格隔开(例如最常见的表示请求成功的 200 OK).
1234.PNG

通常可以用 XMLHttpRequest.status 属性来获取返回的状态码.

1
2
3
4
5
6
7
8
var xml = new XMLHttpRequest();
xml.open('GET', 'https://httpstat.us/200');
xml.onreadystatechange = () => {
if (xml.readyState === 4) {
console.log(xml.status) // 200
}
}
xml.send();

fetch 的话也一样

1
fetch('https://httpstat.us/200').then(response => console.log(response.status))  // 200

status-code 的第一个数字用于区分响应的类别,一共可分为 5 大类.

  • 1xx (Informational responses) 信息提示
  • 2xx (Successful responses) 请求成功
  • 3xx (Redirects) 重定向
  • 4xx (Client errors) 客户端错误
  • 5xx (Server errors) 服务端错误

常用 POST 数据类型

Content-Type 接受 MIME类型 作为参数值.
传送数据时, 浏览器通过 Content-Type 来告诉服务器发送的数据格式是什么.
发送POST数据时, 常用的 MIME类型 有以下几种:

application/json

Content-Type: application/json 中的 application 表示 POST 数据为 "应用程序特有的格式", json 表示子类为 "JSON".

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var url = 'http://jsonplaceholder.typicode.com/posts';
var xml = new XMLHttpRequest();
xml.open('POST', url);
xml.withCredentials = true;
xml.setRequestHeader('content-type', 'application/json');
xml.onreadystatechange = () => {
if (xml.readyState === 4) {
if (xml.status >= 200 && xml.status < 300) {
console.log(xml.responseText);
}
}
};
var data = { foo: 'bar' };
xml.send(JSON.stringify(data));

3 Longest Substring Without Repeating Characters

题目

Given a string, find the length of the longest substring without repeating characters.

给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Example 1:
Input: "abcabcbb"
Output: 3
Explanation: The answer is "abc", with the length of 3.

Example 2:
Input: "bbbbb"
Output: 1
Explanation: The answer is "b", with the length of 1.

Example 3:
Input: "pwwkew"
Output: 3
Explanation: The answer is "wke", with the length of 3.
Note that the answer must be a substring, "pwke" is a subsequence and not a substring.

2 Add Two Numbers

题目

You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order and each of their nodes contain a single digit. Add the two numbers and return it as a linked list.

You may assume the two numbers do not contain any leading zero, except the number 0 itself.

1. Two Sum

题目

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example:

1
2
3
4
Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

white-space

CSS 属性 white-space 用于控制空白字符/换行符的显示方式.

属性值

捕获.PNG

normal(默认值)
将多个空白字符/换行符合并为单个空白字符(空格).
当前行放不下时会自动换行, 内容的起始/结束的位置有空白字符时,不会保留这些空白字符.

空白字符包括空格和制表符.

FunctionDeclarationInstantiation

ECMAScript® 2018 Language Specification

When an execution context is established for evaluating an ECMAScript function a new function Environment Record is created and bindings for each formal parameter are instantiated in that Environment Record.Each declaration in the function body is also instantiated.  
当为了执行函数代码而建立 execution context(执行环境) 时, 会创建一个新的 function Environment Record(函数环境记录),所有 formal parameters(形参) 都会在这个执行环境中实例化.function body(函数体)中的所有声明也会被实例化.  

If the function's formal parameters do not include any default value initializers then the body declarations are instantiated in the same Environment Record as the parameters. If default value parameter initializers exist, a second Environment Record is created for the body declarations.  
如果形参没有默认值,则在同一个环境记录中实例化 body declarations(函数体内的声明).  
如果形参有默认值,则会给 body declarations 创建一个新的环境记录.  

Formal parameters and functions are initialized as part of FunctionDeclarationInstantiation. All other bindings are initialized during evaluation of the function body.  
形参和函数会在执行内部方法 FunctionDeclarationInstantiation 时被初始化.而其它的 bindings(绑定) 要等到执行函数代码时,才会被初始化.

FunctionDeclarationInstantiation is performed as follows using arguments func and argumentsList. func is the function object for which the execution context is being established.  
FunctionDeclarationInstantiation 使用 func 和 argumentsList 作为参数,依照如下步骤执行.func 是为其建立execution context (函数 执行环境/上下文)的对象, arguments 是调用函数时传递的参数(实参列表).

在 Vue 中使用 TinyMCE

TinyMCE 是一个开源的(LGPL 授权协议)富文本编辑器.

本文的软件环境如下:

1 "@tinymce/tinymce-vue": "2.1.0"
2 "tinymce": "^5.0.7"
3 "vue": "^2.6.10"

安装

TinyMCE 官方提供了 tinymce-vue 供 Vue 用户使用.
GitHub - tinymce/tinymce-vue: Official TinyMCE Vue component

但是 tinymce-vue 默认使用的是官方的 CDN,需要到官网注册帐号,否则会有个提示.
feat: add prefer cdn url config by yugasun · Pull Request #6 · tinymce/tinymce-vue · GitHub
捕获.PNG

如果不想用官方的 CDN,可以手动载入TinyMCE.

安装依赖:

1
2
yarn add @tinymce/tinymce-vue@2.1.0
yarn add tinymce@5.0.7