scrolling box

当overflow为auto,且内部元素溢出时.元素沿padding edge向被内裁剪,在单侧显示滚动条
48303328-e7d70c80-e543-11e8-8347-f1f7a8d54797.png

一般来说, 元素会从右/下侧被裁剪,具体数值取决于滚动条宽度
206580fb.png

this

Es5 关于 this 的定义如下:
ECMAScript Language Specification - ECMA-262 Edition 5.1

The this keyword evaluates to the value of the ThisBinding of the current execution context.
关键字"this"指向当前所在 execution context(执行环境)的 ThisBinding

execution context(执行环境/执行上下文)

execution context 的说明在 10.3
ECMAScript Language Specification - ECMA-262 Edition 5.1
ES5 可执行代码与执行环境

When control is transferred to ECMAScript executable code, control is entering an execution context. Active execution contexts logically form a stack. The top execution context on this logical stack is the running execution context. A new execution context is created whenever control is transferred from the executable code associated with the currently running execution context to executable code that is not associated with that execution context. The newly created execution context is pushed onto the stack and becomes the running execution context.

当控制器进入 ECMAScript executable code(可执行代码)时, 控制器会进入一个 execution context(执行环境/执行上下文).所有活动的 execution context 在逻辑上组成一个栈结构,栈顶的 execution context 叫 running execution context.当控制器从当前的 executable code(与 running execution context 相关的)转移到另一个 executable code(与 running execution context 无关的)时,会创建一个新的 execution context.然后将这个新创建的 execution context 推入栈中,使其成为新的 running execution context.

vue-cli

安装

1 安装 vue-cli

1
2
3
npm install -g @vue/cli
//or
yarn global add @vue/cli

2 安装 node-gyp 所需编译工具

安装 Visual Studio Community 2017
安装 Python2.7(node-gyp 不支持 3.x)
打开 cmd, 执行如下命令

1
2
npm config set python python2.7
npm config set msvs_version 2017

3 修改镜像地址为阿里源

1
2
3
4
5
npm config set registry https://registry.npm.taobao.org/
yarn config set registry https://registry.npm.taobao.org/

// node-sass所需
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

编译 Chromium(Windows)

2019/7/13日注:
该文章内容已过时,部分配置及环境要求发生变动. 具体过程请参阅官方的编译指南.
https://chromium.googlesource.com/chromium/src/+/master/docs/windows_build_instructions.md

系统环境 Windows 7 x64
编译版本 Chromium 69.0.3482.0

安装Visual Studio Community 2017

Visual Studio Community 的下载地址

安装时,勾选以下选项
如果已经安装了Visual Studio Community 2017, 可通过 工具 > 获取工具和功能 打开该页面

  • 工作负载
    • 使用 C++ 的桌面开发
      • 用于 x86 和 x64 的 Visual C++ ATL
      • 用于 x86 和 x64 的 Visual C++ MFC
  • 单个组件
    • SDK、库和框架
      • Windows 10 SDK (10.0.17134.0)
  • 语言包
    • 英语

注意不要更改默认的安装位置, 如果改了编译时可能会出错,提示找不到Visual Studio
C盘不够大的话可以更改下载缓存位置到其他硬盘分区

安装SDK Debugging Tools

1 安装Visual Studio后, 打开Control Panel → Programs → Programs and Features
2 右键 Windows Software Development Kit -> 点击Change
3 选择Change -> 点击 Next按钮 -> 勾选Debugging Tools For Windows -> 点击Change按钮

JavaScript 正则表达式

创建正则表达式

1
2
3
4
5
let regExp = /a+/
// or
let regExp = new RegExp('a+')
// or
let regExp = new RegExp(/a+/, 'g')

正则标志

标志 作用
g 全局匹配
y 粘滞匹配
i 忽略大小写
m 匹配多行

g标志返回多个符合正则的匹配结果

1
2
'foo bar'.match(/\w+/g)// [ 'foo', 'bar' ]
'foo bar'.match(/\w+/) // [ 'foo', index: 0, input: 'foo bar' ]

注意, 未使用g标志时,调用RegExp.exec只返回首次匹配结果

1
2
3
4
5
6
7
8
9
10
11
12
let regExp = /\w+/g
let text = 'foo bar'
console.log(regExp.exec(text)) // [ 'foo', index: 0, input: 'foo bar' ]
console.log(re.lastIndex) // 3
console.log(regExp.exec(text)) // [ 'bar', index: 4, input: 'foo bar' ]
console.log(re.lastIndex) // 7
// 对比
regExp = /\w+/
console.log(regExp.exec(text)) // [ 'foo', index: 0, input: 'foo bar' ]
console.log(re.lastIndex) // 3
console.log(regExp.exec(text)) // [ 'foo', index: 0, input: 'foo bar' ]
console.log(re.lastIndex) // 3

js事件

常用事件表

名称 触发
load 页面(包括CSS样式 图片 JS等资源)完全加载后触发(window可用)
DOMContentLoaded HTML文档被加载后触发,无需等待图片 js CSS资源加载(window和document可用)
beforeunload 窗口被关闭/刷新(可阻止)
unload 文档被卸载后(window)
abort 图像/视频/音频加载被中断
error 文档/图像加载错误
resize 调整窗口大小(window)
scroll 页面滚动(window)
可用document.documentElement.scrollTop获取滚动距离
focusin 获得焦点(冒泡)
focus 获得焦点(不冒泡)
focusout 失去焦点(冒泡)
blur 失去焦点(不冒泡)
mouseover 鼠标移动到元素上(冒泡)
mouseenter 鼠标移动到元素上(不冒泡)
mouseout 鼠标移出元素(冒泡)
mouseleave 鼠标移出元素(不冒泡)
mousedown 鼠标键按下
mouseup 鼠标键松开
click 鼠标单击
dblclick 鼠标双击
mousemove 鼠标移动
contextmenu 调出上下文菜单(鼠标单击右键)
mousewheel 鼠标滚轮滚动(非标准事件)
keydown 键盘任意键被按下/按住
keypress 键盘字符键被按下/按住
keyup 键盘任意键被松开
input 用于input/textarea元素,用户输入时触发
change 元素值发生变化(例如select更改选项,input输入框输入)
submit 提交按钮被点击
reset 重置按钮被点击
copy 用户复制内容
haschange URL参数(#号后的内容)变化时触发(window可用)

JavaScript Number

Number parseInt parseFloat

这三种方法都可以将值转为数字,但处理方式各不相同

Number

Number(value)

  • value 任意值,如果无法转为数字,则返回NaN

如果传入对象,会先调用对象的valueOf方法.如果valueOf的返回值不是基本类型,再调用对象的toString方法

1
2
3
4
5
6
7
var o = {};
o.valueOf = function(){return 11};
console.log( Number(o) ) // 11

var o1 = {};
o1.toString = function(){return 11};
console.log( Number(o1) );

注 一元加操作符的转换方式和Number相同

parseInt

接受字符串,返回整数
parseInt(string, radix)

  • string 字符串,如果传入参数不是字符串(包括数字),则先使用toString将其转为字符串.
  • radix 参数string的基数,接受以下数值:
    • 0或未指定: 0x开头字符串以16进制解析,其他字符串以10进制解析
    • 2~36: 将字符串以2~36进制解析
1
2
3
4
5
6
parseInt('0x11') // 17
parseInt('0X11') // 17
parseInt('11',2) // 3
parseInt('11', 16) // 17
// 第二个参数传入0/2~36之外的数值会返回NaN
parseInt('11', 1) // NaN

如果string的第一个非空格字符"不是正/负号或数字",则返回NaN

1
parseInt('.11') // NaN

parseInt不支持科学计数法,会将"Infinity"和"e表示法"当作普通字符处理

1
2
3
4
5
6
7
8
9
parseInt('Infinity') // NaN
parseInt(0.0000001) // 1
// 实际运行过程
// 先调用toString方法转为字符串.
// 0.0000001小数点后有6个以上的0,因此自动转为科学计数法格式
var s = (0.0000001).toString(); // "1e-7"
// parseInt不支持科学计数法,e及后边的数字被自动忽略了,因此返回1
parseInt(s); // 1
// Number和ParseFloat没有这种问题

JavaScipt function

函数也是对象,所有函数都是Function的实例.

1
2
a.constructor === Function // true
Function.__proto__

创建函数

有两种方法创建函数,函数声明和函数表达式

  • 函数声明
1
2
3
4
function say(word) {
console.log(word);
}
say('hi');
  • 函数表达式
1
2
3
4
var say = function(word) {
console.log(word);
}
say('hi');

JavaScript 对象

JavaScript是一门面向对象的语言(Object Oriented,简称OO)
什么是对象?对象是一组无序属性的集合

在JavaScript中,一切都是对象?不对,除了6类基本类型外都是对象
Js有两大数据类型,基本类型和引用类型
基本类型是保存在栈内存中的简单数据,有String Number Boolean null undefined Symbol,按值访问
引用类型是保存在堆内存中的对象,有Object Array Function Date等,按引用访问

基本类型不是对象,那为什么他们有属性?
调用基本类型的属性时,会临时创建一个对象,调用对象属性,然后销毁对象.下次调用属性时,再创建一个新的对象

1
2
3
4
5
6
var str = 'lalala';
str.valueOf();
// 相当于
var temp = new String(str);
temp.valueOf(); // "lalala"
temp = null;

因此不能给基本类型添加属性.完成操作后,新创建的对象被销毁了

1
2
var str.t = 1;
str.t // undefined

注 typeof对null返回"object"是个bug
参考

1
typeof null // "object"

gulp 4.0

前端自动化工具

参考

gulp getting started
gulp api
gulp 入门指南

安装

1
2
3
4
5
6
// 安装gulp-cli
npm install --global gulp-cli
// 创建package.js.会提示输入项目信息,可直接按回车跳过.
npm init
// 安装gulp
npm install --save-dev gulp@next

注:
本文安装的gulp版本为4.0
目前(2018/1)
使用 npm install --save-dev gulp 命令安装的gulp版本为3.9
而 npm install --save-dev gulp@next (多了@next)命令安装的gulp版本为4.0
相较于gulp3,gulp4的语法有一些改动
如果想查看版本信息,可用gulp -v查询

1
2
3
>gulp -v
[14:37:58] CLI version 2.0.0
[14:37:58] Local version 4.0.0

测试是否安装成功
在项目根目录下新建gulpfile.js文件,填入以下内容

1
2
3
4
5
6
7
var gulp = require('gulp');

gulp.task('default', defaultTask);
function defaultTask(done) {
// place code for your default task here
done();
}

然后打开cmd,在项目根目录运行命令

1
gulp

如果出现下列提示,则安装成功

1
2
3
Using gulpfile ~/my-project/gulpfile.js
[11:15:51] Starting 'default'...
[11:15:51] Finished 'default' after 103 μs