javascript 事件机制

当我们对一个元素和他的子元素各绑定事件时候,点击元素会触发两个事件

1
2
3
<div class="box1">
<div class="box2"></div>
</box>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
box1.addEventListener(
'click',
function(e) {
console.log('click box1')
},
false
)

box2.addEventListener(
'click',
function(e) {
console.log('click box2')
},
flase
)

可以看到先触发 box2 在触发 box1, 如果想要阻止 box1 事件,添加stopPropagation阻止事件传递

1
2
3
4
5
6
7
8
box2.addEventListener(
'click',
function(e) {
e.stopPropagation()
console.log('click box2')
},
flase
)

这样就只执行了 box2 事件,相反也可以阻止 box2 事件只执行 box1

阅读更多
栈的括号匹配

栈是一种后进先出的队列(LIFO), 是一种存储数据的容器.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class Stack {
constructor() {
this.list = []
}

getSize() {
return this.list.length
}

isEmpty() {
return this.getSize() === 0
}

push(e) {
this.list.push(e)
}

pop() {
return this.list.pop()
}

top() {
if (this.getSize() === 0) {
return null
}
return this.list[this.getSize() - 1]
}
}
;(function main() {
let list = new Stack()
list.push(3)
list.push(5)
list.push(1)
console.log(`栈顶元素为: ${list.top()}`)
list.pop()
console.log(`栈顶元素为: ${list.top()}`)
})()
阅读更多
字符串匹配

朴素匹配算法

朴素匹配算法是对目标字符串和模板字符串的一一匹配。如果匹配得上,下标向右移一位, 否则清空并重新开始匹配。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const match = (target, pattern) => {
let [i, j] = [0, 0]
let [n, m] = [target.length, pattern.length]
while (i < n && j < m) {
if (target[i] == pattern[j]) {
console.log(
`匹配的元素: target[${i}]=${target[i]}, pattern[${j}]=${pattern[j]}`
)
i += 1
j += 1
} else {
console.log(
`不匹配的元素: target[${i}]=${target[i]}, pattern[${j}]=${pattern[j]}`
)
i = i - j + 1
j = 0
}
}
if (j == m) {
return i - j
}
return -1
}
;(function main() {
let target = 'abb abad abac'
let pattern = 'abac'
console.log('target', target)
console.log('pattern', pattern)
match(target, pattern)
})()
阅读更多
链表

单链表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
class Node {
constructor(data, next = null) {
this.data = data
this.next = next
}
}

class List {
constructor() {
// 初始化
this.head = null
this.length = 0
}

isEmpty() {
return this.length == 0
}

getSize() {
return this.length
}

append(e) {
/*
从head开始以为循环到尾部, 追加新的节点
如果创建pop函数也是一样
*/
if (this.head === null) {
this.head = new Node(e)
this.length += 1
} else {
let head = this.head
while (head.next !== null) {
head = head.next
}
head.next = new Node(e)
this.length += 1
}
}

reverse() {
/*
反转链表
移动head指针,指向下个节点, 并把原来节点指向上一个节点
*/
let p = null
let head = this.head
while (head !== null) {
// 把head赋值给q, 这里q和head都指向同一个Node
let q = head
// 然后head指向给了下一个节点
head = q.next
// q指向上一个节点
q.next = p
// 把当前节点指向为上一个节点
p = q
}
this.head = p
}

print() {
let idx = 0
let head = this.head
while (head !== null) {
idx += 1
console.log(`idx ${idx}, data: ${head.data}`)
head = head.next
}
}
}

;(function main() {
let list = new List()
list.append(3)
list.append(5)
list.append(1)
list.print()
list.reverse()
list.print()
})()
阅读更多
javascript 继承

继承是面向对象中的重要部分,像 java、python 等语言都是用类来继承的,而 js 的继承是通过原型链来实现的。

原型链

通过将 prototype 指向对象的实例,来实现继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function SuperType() {
this.property = true
}

SuperType.prototype.getSuperValue = function() {
return this.property
}

function SubType() {
this.subproperty = false
}

// 继承 SuperType
SubType.prototype = new SuperType()

SubType.prototype.getSubValue = function() {
return this.subproperty
}

var instance = new SubType()
console.log(instance.getSuperValue()) // true
阅读更多
css float 浮动

在网页布局中除了 position 属性以外最常用的就是 float 属性,使用 float 属性的元素会脱离标准文档流,并根据 float 属性进行左右浮动。

使用 float 属性

多个 div 元素根据文档流会呈现层级结构

当我们给 yellow 设置浮动属性以后,就脱离了文档流 red 填充原有 yellow 所占的位置

阅读更多
css 定位属性

元素的 position 属性使元素在文档布局中进行定位。

定位属性

static 属性是 position 的默认属性,另外还有 relative, absolute, fixed, inherit。定义 position 属性以后可以通过 top, left, bottom, right 控制元素在文档中的位置

static 默认定位

static 属性是 posistion 的默认属性,元素出现在文档流中 top, left, bottom, right 属性无效

relative 相对定位

relative 属性使元素相对自身进行定位, 元素不脱离文档流

阅读更多
HTTP 缓存机制

HTTP 缓存机制通过重用已获取的资源,减少网络延迟和资源等待时间来提升 Web 性能。常见的 HTTP 缓存只能存储GET响应,缓存的关键主要包裹 request method 和 URI。

缓存相关字段

HTTP中与缓存相关的头部信息

通用头部字段

字段 描述
Cache-Contrl 控制缓存行为
Progma http1.0,现代浏览器默认设置用于兼容

请求头部字段

阅读更多
css 外边距合并

问题

当两个块级元素的上外边距和下外边距发生合并为一个外边距,取值为其中的最大值,这是情况叫外边距合并margin 崩塌 折叠

什么时候发生崩塌

相邻的两个节点的外边距会合并

阅读更多
css 盒模型

CSS 盒模型

css 中使用盒模型来描述元素所占空间的内容。分别是内容区域、内边框、边框、外边框。以下是盒模型图:

CSS盒模型

阅读更多