当overflow为auto,且内部元素溢出时.元素沿padding edge向被内裁剪,在单侧显示滚动条

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

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.

安装

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/

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按钮

创建正则表达式

1
2
3
4
5

let regExp = /a+/
// or
let regExp = new RegExp('a+')
// or
let regExp = new RegExp(/a+/, 'g')

正则标志

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

常用事件表

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没有这种问题

函数也是对象,所有函数都是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是一门面向对象的语言(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 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