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

不定宽元素的宽度计算

本文所讨论的中心点为: 如果"不定宽元素"内有"宽度为百分数的 img", 浏览器将如何计算容器和 img 的实际宽度.

注意:
1 除非提及,本文所有代码以 Chrome75 的效果为准.
2 本文中的"不定宽元素"是一个自造词,详见"不定宽元素"一节.
另外,本文是 stackoverflow 上这个讨论的总结,推荐直接去看原文.

举例:
有一个浮动元素(以下记为container):

1
<div class="container" style="float: left"></div>

container 中有一些图片, 当图片的 width 值为百分比时,浏览器如何计算 container 和 img 的宽度?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0;
font-size: 0;
}
</style>
</head>
<body>
<div id="container" style="position:absolute;">
<!-- #img1的宽度为300x200px -->
<img id="img1" src="https://i.imgur.com/fH2hTRa.jpg" style="width: 100%" />
<!-- #img2的宽度为200x100px -->
<img id="img2" src="https://i.imgur.com/Ed0juok.jpg" style="width: 50%" />
</div>
</body>
</html>

puppeteer入门

puppeteer 是一个 Google 出品的 Node 库,可以用它来操纵 Chrome.
puppeteer 这个单词的发音为 [ˌpʌpɪˈtɪə], 意思是"操纵木偶的人".

安装

安装 puppeteer 时会自动下载 chrome,需要有全局代理.

1
yarn add puppeteer

如果无法下载 puppeteer, 可以在根目录下新建文件 .yarnrc, 填入如下内容:

1
puppeteer_download_host "https://storage.googleapis.com.cnpmjs.org"

例子

新建 index.js, 填入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 载入puppeteer
const puppeteer = require('puppeteer');

// 打开浏览器
// launch方法返回一个Promise对象
puppeteer.launch({headless: false}).then(async browser => {
// 打开一个页面
const page = await browser.newPage();
// 打开百度
await page.goto('https://www.baidu.com');
await page.screenshot({path: 'baidu.png'});
// 关闭浏览器
// await browser.close();
});

最后,进入文件所在路径, 执行 node index.js 命令即可.

函数声明与函数表达式

偶然看到了一道题, 问如下代码中的console输出什么:

1
2
3
4
5
var a = 1;
(function a(){
a = 2;
console.log(a)}
)()

结果console输出的不是数值2,而是函数本身:

1
2
3
4
ƒ a(){
a = 2;
console.log(a)
}

(Android Chrome兼容)修复定位元素导致的地址栏上移

移动端浏览器的地址栏是可动的,用户向上滑动页面时, 地址栏也会向上移动,直到隐藏.
如果想固定地址栏,可以使用如下样式:

1
2
3
4
5
6
7
8
9
10
html {
height: 100%;
overflow: hidden;
}

body {
height: 100%;
margin: 0;
overflow-y: scroll;
}

表现

在chrome(android 73)中,上面这个办法可能会失效.
如果某个可滚动的绝对定位元素的尺寸和浏览器窗口一样大,可能会导致导航栏上移. 该bug仅能在android中复现, ios系统的chrome无此问题.