Javascript
原型
每个构造函数(
constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针。
js使用原型链的继承方式，当查找一个对象的属性时，js会向上遍历原型链，直到找到给定的名称属性为止，如果查找到顶部(Object.prototype)仍没有，则返回undefined。当构造函数的原型对象指向另一个类型的实例，则该构造函数继承了另一个类型的原型；（
instance.constructor被重写，指向了另一个构造函数对象）每一个JavaScript对象(除了
null)都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。当原型属性用来创建原型链时，可以把任何类型赋值给它，但原子类型的赋值操作会被忽略即无效；
ps:prototype是函数才会有的属性
1
2
function Foo() {}
Foo.prototype = 1; // 无效
js为什么是单线程的？单线程的js是怎么实现异步的？
问题一：多线程的js操作同一个DOM，会造成浏览器的执行冲突（比如：一个删除，一个修改）。
问题二：通过事件循环机制（EventLoop）实现异步；
EventLoop
JS是单线程的，主线程拥有一个执行栈和执行队列。主线程自上而下依次执行代码，并判断函数是同步的还是异步的，同步的函数直接在主线程中执行，异步函数塞入执行队列。当主线程的函数执行完毕后，再将异步函数从执行队列中出栈，直到执行完毕。
macrotasks:
- setTimeout
- setInterval
- setImmediate
- requestAnimationFrame
- I/O
- UI rendering
microtasks:
- process.nextTick
- Promises
- Object.observe
- MutationObserver
==microtask的执行优先级高于macrotask==
浏览器和Node的执行顺序不一样，上述规则适用于浏览器
- https://github.com/kaola-fed/blog/issues/234
CSS
媒体查询
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<style>
@media screen and (max-width: 960px){
body{
background: #000;
}
}
@media (max-width: 960px){
body{
background: #000;
}
}
</style>
Media参数
widthheightdevice-widthdevice-heightorientationaspect-radiodevice-aspect-radiocolorcolor-indexgridresolution
两列或三列布局
- 使用flex
- float
- 左右
position:absolute,中间margin-left,margin-right
圣杯和双飞翼布局，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--
圣杯布局：
column左浮动
center宽度100%，否则会导致高度坍塌
left使用负外边距margin-left:-100%,然后使用相对定位定位到最左边
right直接使用负边距居右
-->
<header id="header">header</header>
<main id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</main>
<footer id="footer">footer</footer>
<!-- 双飞翼-->
<header id="header">header</header>
<main id="container" class="column">
<div id="center">center</div>
</main>
<aside id="left" class="column">left</aside>
<aside id="right" class="column">right</aside>
<footer id="footer"></footer>
垂直水平居中
- 水平居中
text-align:center和块级元素的margin:0 auto; - table方案，（IE8+）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.table{
display:table;
}
.cell{
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div class="table">
<div class="cell">
<img src="http://p0.qhimg.com/t01c430356016e16a2c.png" alt="" />
</div>
</div>
absolute+margin:auto方案，兼容主流的浏览器；但是需要定义父容器的高度，否则子元素绝对定位会导致父元素的坍塌。
1
2
3
4
5
6
7
8
9
10
11
.absolute-aligned {
position: relative;
min-height: 500px;
background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
margin: auto;
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
}
absolute+translate，(IE9+)，同样需要设置父元素的高度
1
2
3
4
5
6
7
8
9
10
11
.center {
background: hsl(180, 100%, 97%);
position: relative;
min-height: 500px;
}
.center img {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 30%;
}
Flexbox方案
1
2
3
4
5
6
.center {
background: hsl(240, 100%, 97%);
display: flex;
justify-content: center;
align-items: center;
}
calc方案，IE9+，更适合子元素宽高固定的情况
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 50%是父元素的中心点，减去图片宽度和高度的一半从而达到定位效果
.calc {
background-color: hsl(300, 100%, 90%);
min-height: 350px;
position: relative;
}
.calc img {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
