1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.demo {
    perspective: 2px; 
    padding: 0; 
    height: 600px; 
    height: calc(100vh - 300px); 
    overflow: auto;
}

.box {
    height: 1280px;
    transform-style: preserve-3d;
    position: relative;
}

.iphone {
    position: absolute; left: 50%;
    transform: translate3D(-50%, -120px, -4px) scale(3);
}
	
	
.smile, .flower, .music, .pdf { 
    /* 略... */ 
}

1
2
3
4
5
6
7
8
9

<div class="demo">
    <div class="box">
        <img src="mobile_1_iphone.jpg" class="iphone">
        <i class="smile"></i>
        <i class="flower"></i>
        <i class="music"></i>
        <i class="pdf"></i>
    </div>
</div>

3D视角示意图

当我们在屏幕前面2个单位(perspective: 2px; )的地方，看屏幕后面4个单位(transform: translate3D(-50%, -120px, -4px) scale(3);)的元素，肉眼所见的画面大小只有实际的1/3，即所谓的近大远小。此时scale(3)让内容放大到原来3倍，正好在平面上看上去好像是原来大小。

虽然肉眼所见体积似乎是1:1，但是，滚动时候的位移变化还是1:3。网页中的3D就是模拟真实世界的3D效果，因此，也会有这种视差体验。

一、工厂模式

1
2
3
4
5
6
7
8
9
10

function createBlog(name, url) {
    let obj = new Object();
    obj.name = name;
    obj.url = url;
    obj.sayUrl= function() {
        alert(this.url);
    }
    return obj;
}
var blog1 = createBlog('wuyuchang', 'http://www.jb51.net/');

二、构造函数模式

1
2
3
4
5
6
7
8
9

function Blog(name, url) {
    this.name = name;
    this.url = url;
    this.alertUrl = function() {
        alert(this.url);
    }
}

let blog = new Blog('wuyuchang', 'http://www.jb51.net/');

三、原型模式

1
2
3
4
5
6
7
8
9
10
11

function Blog() {}

Blog.prototype.name = 'wuyuchang';

Blog.prototype.url = 'http://tools.jb51.net/';

Blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4'];

Blog.prototype.alertInfo = function() {
    alert(this.name + this.url + this.friend);
}

单体模式提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一变量进行访问。单体模式的优点是：

• 可以用来划分命名空间，减少全局变量的数量

• 使用单体模式可以使代码组织的更为一致，使代码容易阅读和维护

• 可以被实例化，且实例化一次

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

// 单体模式
var CreateDiv = function(html) {
    this.html = html;
    this.init();
}


CreateDiv.prototype.init = function() {
    var div = document.createElement("div");
    div.innerHTML = this.html;
    document.body.appendChild(div);
};


// 代理实现单体模式
var ProxyMode = (function() {
    var instance;
    return function(html) {
        if (!instance) {
            instance = new CreateDiv("我来测试下");
        }
        return instance;
    }
})();


var a = new ProxyMode("aaa");
var b = new ProxyMode("bbb");

想要理解BFC与IFC，首先要理解另外两个概念：Box 和 FC（即 formatting context）

一、Box

一个页面是由很多个 Box 组成的，元素的类型和 display 属性决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context。

• Block level的box会参与形成BFC，比如display值为block，list-item，table的元素。
• Inline level的box会参与形成IFC，比如display值为inline，inline-table，inline-block的元素。

二、FC（Formatting Context）

它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 常见的Formatting Context 有：

• Block Formatting Context（BFC | 块级格式化上下文）
• Inline Formatting Context（IFC |行内格式化上下文）

三、IFC布局规则

• 在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部
• 水平方向上的 margin，border 和 padding在框之间得到保留
• 框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐
• 包含那些框的长方形区域，会形成一行，叫做行框

四、BFC布局规则

• 内部的Box会一个接一个地垂直放置
• 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动子元素也参与计算

五、形成一个BFC

下列方式会创建块格式化上下文：

• 根元素或包含根元素的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、`table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table`）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 strict 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 `column-count为1`）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

观察者模式，定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。事实上，只要你曾经在DOM节点上绑定过事件函数，那么你就曾经使用过观察者模式了

1
2
3

document.body.addEventListener('click', function () {
    alert(2);
});

但是这只是对观察者模式最简单的使用，在很多场景下我们经常会实现一些自定义事件来满足我们的需求。

1
2
3
4

举个例子：
你去一家公司应聘，谈了一顿下来，hr跟你说:"好了，你回去等通知吧！"。
这个时候，把自己的手机号留给hr，然后等他给你打电话。
那么这个时候，hr就相当于一个发布者，而你就是一个订阅者啦！

那么一个简单的观察者模式应该怎么实现呢？

1. 要指定一个发布者；
2. 给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者；
3. 最后发布消息的时候，发布者会遍历这个缓存列表，依次触发订阅者回调函数；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var event = {}; //发布者（hr）
event.clietList = []; //发布者的缓存列表（应聘者列表）

event.listen = function(fn) { //增加订阅者函数
    this.clietList.push(fn);
};

event.trigger = function() { //发布消息函数
    for (var i = 0; i < this.clietList.length; i++) {
        var fn = this.clietList[i];
        fn.apply(this, arguments);
    }
};

event.listen(function(time) { //某人订阅了这个消息
    console.log('正式上班时间：' + time);
});

event.trigger('2016/10', yes); //发布消息
//输出 正式上班时间:2016/10

一、Promise.all()

1

const p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定，分成两种情况 :

• 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

• 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

三、Promise.race()

1

const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数

1
2
3
4
5
6
7
8

const p = Promise.race([
    fetch('/resource-that-may-take-a-while'),
    new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error('request timeout')), 5000)
    })
]);

p.then(console.log).catch(console.error);

如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

1.不要写不需要的样式定义

• 减少CSS文件的长度，以便浏览。
• 明确你的CSS类需要做什么，而不是定义一堆已经产生的垃圾。

2.将CSS看作可重用组件

定义可重用的CSS和组件以供自己使用，则可以减少很多复杂性，重用类的作用：

• 确保你的设计风格在不同的页面之间保持一致
• 提高编写CSS效率

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

.hide {
    display: none;
}

.text-center {
    text-align: center;
}

.padding-0 {
    padding: 0;
}

.padding-xxs {
    padding: 5px;
}

.padding-xs {
    padding: 10px;
}

.padding-sm {
    padding: 20px;
}

.padding-md {
    padding: 30px;
}

.padding-lg {
    padding: 40px;
}

.padding-xl {
    padding: 50px;
}

.padding-xxl {
    padding: 60px;
}

对象属性

一、name属性

name属性主要用于描述网页，与之对应的属性值为content

content中的内容是对name填入类型的具体描述，便于搜索引擎查找以及分类信息

meta标签中name属性语法格式是：

1

<meta name="参数" content="具体的描述">

A. keywords(关键字)

说明：用于告诉搜索引擎，你网页的关键字

1

<meta name="keywords" content="Lxxyx,博客，文科生，前端">

B. description(网站内容的描述)

说明：用于告诉搜索引擎，你网站的主要内容。

1

<meta name="description" content="文科生，热爱前端与编程。目前大二，这是我的前端博客">

C. viewport(移动端的窗口)

说明：这个属性常用于设计移动端网页

1

<meta name="viewport" content="width=device-width, initial-scale=1">

一、变量的声明

声明变量的时候，变量名前面要加两根连词线--，变量名大小写敏感

1
2
3
4

body {
    --foo: #7F583F;
    --bar: #F7EFD2;
}

上面代码中，body选择器里面声明了两个变量：--foo和--bar。它们与正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做”CSS 自定义属性”（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。

各种值都可以放入 CSS 变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

:root {
    --main-color: #4d4e53;
    
    --main-bg: rgb(255, 255, 255);
    
    --logo-border-color: rebeccapurple;
    
    --header-height: 68px;
    
    --content-padding: 10px 20px;
    
    --base-line-height: 1.428571429;
    
    --transition-duration: .35s;
    
    --external-link: "external link";
    
    --margin-top: calc(2vh + 20px);
}