Skip to content

Commit 11ea4bc

Browse files
committed
add:Vue 2.x(生命周期函数)
1 parent f0e7078 commit 11ea4bc

6 files changed

+255
-65
lines changed

00-前端工具/01-Git的使用.md

+126-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,133 @@
11

22

3+
4+
5+
## 常见操作
6+
7+
### 配置用户信息
8+
9+
```
10+
git config --global user.name "smyhvae"
11+
12+
git config --global user.email "smyhvae@163.com"
13+
```
14+
15+
16+
## 分支的合并
17+
18+
19+
### 场景:基于master分支的代码,开发一个新的特性
20+
21+
如果你直接在master分支上开发这个新特性,是不好的,万一你在开发`特性1`的时候,领导突然又要叫你去开发`特性2`,就不好处理了。难道开发的两个特性都提交到master?一会儿提交特性1的commit,一会儿提交特性2的commit?这会导致commit记录很混乱。
22+
23+
所以,我给你的建议做法是:给每个特性都单独建一个的新的分支。
24+
25+
比如说,我专门给`特性1`建一个分支`feature_item_recommend`。具体做法如下:
26+
27+
(1)基于master分支,创建一个新的分支,起名为`feature_item_recommend`
28+
29+
```
30+
$ git checkout -b feature_item_recommend
31+
32+
Switched to a new branch 'feature_item_recommend'
33+
```
34+
35+
上面这行命令,相当于:
36+
37+
38+
```bash
39+
$ git branch feature_item_recommend // 创建新的分支
40+
41+
$ git checkout feature_item_recommend //切换到新的分支
42+
```
43+
44+
45+
(2)在新的分支`feature_item_recommend`上,完成开发工作,并 commit 、push。
46+
47+
(3)将分支`feature_item_recommend`上的开发进度**合并**到master分支:
48+
49+
```bash
50+
$ git checkout master //切换到master分支
51+
52+
$ git merge feature_item_recommend //将分支 feature_item_recommend 的开发进度合并到 master 分支
53+
54+
```
55+
56+
57+
合并之后,`master`分支和`feature_item_recommend`分支会指向同一个位置。
58+
59+
60+
(3)删除分支`feature_item_recommend`
61+
62+
> 既然 特性1 开发完了,也放心地提交到master了,那我们就可以将这个分支删除了。
63+
64+
```
65+
git branch -d feature_item_recommend
66+
```
67+
68+
注意,我们当前是处于`master`分支的位置,来删除`feature_item_recommend`分支。如果当前是处于`feature_item_recommend`分支,是没办法删除它自己的。
69+
70+
同理,当我转身去开发`特性2`的时候,也是采用同样的步骤。
71+
72+
73+
### 合并分支时,如果存在分叉
74+
75+
76+
20180610_1650.png
77+
78+
比如说上面这张图中,最早的时候,master分支是位于`C2`节点。我基于`C2`节点,new出一个新的分支`iss53`,我在`iss53`上提交了好几个commit。
79+
80+
现在,我准备把`iss53`上的几个commit合并到master上,此时发现,master分支已经前进到C4了。那该怎么合并呢?
81+
82+
合并的命令仍然是:
83+
84+
```bash
85+
$ git checkout master
86+
87+
$ git merge iss53
88+
```
89+
90+
**解释**
91+
92+
这次合并的实现,并不同于简单的并入方式。这一次,我的开发历史是从更早的地方开始分叉的。
93+
94+
由于当前 master 分支所指向的commit (C4)并非想要并入分支(iss53)的直接祖先,Git 不得不进行一些处理。就此例而言,Git 会用两个分支的末端(C4 和C5)和它们的共同祖先(C2)进行一次简单的三方合并计算。
95+
96+
Git 没有简单地把分支指针右移,而是对三方合并的结果作一新的快照,并自动创建一个指向它的commit(C6)(如下图所示)。我们把这个特殊的commit 称作合并提交(mergecommit),因为它的祖先不止一个。
97+
98+
值得一提的是Git 可以自己裁决哪个共同祖先才是最佳合并基础;这和CVS 或Subversion(1.5 以后的版本)不同,它们需要开发者手工指定合并基础。所以此特性让Git 的合并操作比其他系统都要简单不少。
99+
100+
20180610_1710.png
101+
102+
### 解决合并时发生的冲突
103+
104+
20180610_1740.png
105+
106+
如果 feature1和feature2修改的是同一个文件中**代码的同一个位置**,那么,把feature1合并到feature2时,就会产生冲突。这个冲突需要人工解决。步骤如下:
107+
108+
(1)手动修改文件:手动修改冲突的那个文件,决定到底要用哪个分支的代码。
109+
110+
(2)git add:解决好冲突后,输入`git status`,会提示`Unmerged paths`。这个时候,输入`git add`即可,表示:**修改冲突成功,加入暂存区**
111+
112+
(3)git commit 提交。
113+
114+
然后,我们可以继续把 feature1 分支合并到 master分支,最后删除feature1、feature2。
115+
116+
**注意**:两个分支的同一个文件的不同地方合并时,git会自动合并,不会产生冲突。
117+
118+
比如分支feture1对index.html原来的第二行之前加入了一段代码。
119+
分支feature2对index.html在原来的最后一行的后面加入了一段代码。
120+
这个时候在对两个分支合并,git不会产生冲突,因为两个分支是修改同一文件的不同位置。
121+
git自动合并成功。不管是git自动合并成功,还是在人工解决冲突下合并成功,提交之前,都要对代码进行测试。
122+
123+
3124
## 日常操作积累
4125

5126

6127
### 修改已经commit的备注信息
7128

8129

9130

10-
11131
### `branch1`的某个`commit1`合并到`branch2`当中
12132

13133
切换到branch2中,然后执行如下命令:
@@ -19,6 +139,9 @@ git cherry-pick commit1
19139

20140

21141

142+
## 推荐书籍
143+
144+
- 《pro.git中文版》
22145

23146

24147

@@ -30,3 +153,5 @@ git cherry-pick commit1
30153
- [聊下git pull --rebase](https://www.cnblogs.com/wangiqngpei557/p/6056624.html)
31154

32155

156+
157+

10-ES6/01-ES5中的严格模式.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,14 @@ PS:如果浏览器不支持,则这句话只解析为一条简单的语句,
5050

5151
## 严格模式和普通模式的区别
5252

53-
### 1、全局变量显式声明
53+
> 下面列举几条严格模式的内容。
54+
55+
### 全局变量显式声明
5456

5557
在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式声明。
5658

5759

58-
### 2、禁止this关键字指向全局对象:
60+
### 禁止this关键字指向全局对象:
5961

6062
```javascript
6163
var foo = function () {
@@ -66,16 +68,15 @@ PS:如果浏览器不支持,则这句话只解析为一条简单的语句,
6668
```
6769
上方代码中,普通模式打印的是window。严格模式下打印的是undefined。
6870

69-
### 3、创设eval作用域
71+
### 创设eval作用域
7072

7173

7274

73-
### 2、禁止使用with语句
75+
### 禁止使用with语句
7476

7577
因为with语句无法在编译时就确定,属性到底归属哪个对象。
7678

7779

78-
7980
### 构造函数必须通过new实例化对象
8081

8182
构造函数必须通过new实例化对象,否则报错。因为this为undefined,此时无法设置属性。
@@ -94,12 +95,12 @@ PS:如果浏览器不支持,则这句话只解析为一条简单的语句,
9495
上方代码中,如果在严格模式下,则会报错。
9596

9697

97-
### 5、为了让代码更安全,禁止函数内部遍历调用栈
98+
### 为了让代码更安全,禁止函数内部遍历调用栈
9899

99-
### 6、严格模式下无法删除变量
100+
### 严格模式下无法删除变量
100101

101102

102-
### 7~10 属性相关
103+
### 属性相关
103104

104105
普通模式下,对一个对象的只读属性进行赋值,不会报错,只会默默地失败。严格模式下,将报错。
105106

10-ES6/04-ES6:变量、函数扩展.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -527,7 +527,7 @@ console.log(fn1(1, 2)); //输出结果:3
527527

528528
如果我把第一个参数改一下,改成:
529529

530-
20180312_2017.png
530+
![](http://img.smyhvae.com/20180312_2017.png)
531531

532532
此时打印结果是:`vae smyh`
533533

10-ES6/05-ES6:promise、async等.md

+5-15
Original file line numberDiff line numberDiff line change
@@ -209,12 +209,9 @@ Symbol是函数,但并不是构造函数。创建一个Symbol数据类型:
209209
console.log(mySymbol); //打印结果:Symbol()
210210
```
211211

212-
213212
打印结果:
214213

215-
20180317_1134.png
216-
217-
214+
![](http://img.smyhvae.com/20180317_1134.png)
218215

219216
下面来讲一下Symbol的使用。
220217

@@ -234,10 +231,9 @@ Symbol是函数,但并不是构造函数。创建一个Symbol数据类型:
234231
console.log(obj);
235232
```
236233

237-
238234
上面的代码中,我们尝试给obj添加一个Symbol类型的属性值,但是添加的时候,不能采用`.`这个符号,而是应该用`属性选择器`的方式。打印结果:
239235

240-
20180317_1145.png
236+
![](http://img.smyhvae.com/20180317_1134.png)
241237

242238
现在我们用for in尝试对上面的obj进行遍历:
243239

@@ -261,11 +257,10 @@ Symbol是函数,但并不是构造函数。创建一个Symbol数据类型:
261257

262258
打印结果:
263259

264-
20180317_1817.png
260+
![](http://img.smyhvae.com/20180317_1134.png)
265261

266262
从打印结果中可以看到:for in、for of 遍历时不会遍历Symbol属性。
267263

268-
269264
### 创建Symbol属性值时,传参作为标识
270265

271266
如果我通过 Symbol()函数创建了两个值,这两个值是不一样的:
@@ -279,7 +274,7 @@ Symbol是函数,但并不是构造函数。创建一个Symbol数据类型:
279274
console.log(mySymbol2); //打印结果:Symbol()
280275
```
281276

282-
20180317_1733.png
277+
![](http://img.smyhvae.com/20180317_1134.png)
283278

284279
上面代码中,倒数第三行的打印结果也就表明了,二者的值确实是不相等的。
285280

@@ -288,7 +283,6 @@ Symbol是函数,但并不是构造函数。创建一个Symbol数据类型:
288283
既然Symbol()是函数,函数就可以传入参数,我们可以通过参数的不同来作为**标识**。比如:
289284

290285

291-
292286
```javascript
293287
//在括号里加入参数,来标识不同的Symbol
294288
let mySymbol1 = Symbol('one');
@@ -302,21 +296,18 @@ Symbol是函数,但并不是构造函数。创建一个Symbol数据类型:
302296

303297
打印结果:
304298

305-
20180317_1739.png
299+
![](http://img.smyhvae.com/20180317_1134.png)
306300

307301
### 定义常量
308302

309303
Symbol 可以用来定义常量:
310304

311305

312-
313-
314306
```javascript
315307
const MY_NAME = Symbol('my_name');
316308
```
317309

318310

319-
320311
### 内置的 Symbol 值
321312

322313
除了定义自己使用的 Symbol 值以外,ES6 还提供了 11 个内置的 Symbol 值,指向语言内部使用的方法。
@@ -326,7 +317,6 @@ Symbol 可以用来定义常量:
326317
对象的`Symbol.iterator`属性,指向该对象的默认遍历器方法。
327318

328319

329-
330320
## async函数(异步函数)
331321

332322
### 概述

10-ES6/06-ES6:字符串、数组、对象的扩展.md

+6-13
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ ES6中的字符串扩展,用得少,而且逻辑相对简单。如下:
3535

3636
打印结果:
3737

38-
20180402_1050.png
38+
![](http://img.smyhvae.com/20180402_1050.png)
3939

4040
## 数值的扩展
4141

@@ -115,11 +115,11 @@ ES6中的字符串扩展,用得少,而且逻辑相对简单。如下:
115115

116116
上面的布局中,有三个button标签,我们通过`getElementsByTagName`获取到的`btnArray`实际上是**伪数组**,并不是真实的数组:
117117

118-
20180402_1116.png
118+
![](http://img.smyhvae.com/20180402_1116.png)
119119

120120
既然`btnArray`是伪数组,它就不能使用数组的一般方法,否则会报错:
121121

122-
20180402_1121.png
122+
![](http://img.smyhvae.com/20180402_1121.png)
123123

124124
解决办法:采用`Array.from`方法将`btnArray`这个伪数组转换为真数组即可:
125125

@@ -129,7 +129,7 @@ ES6中的字符串扩展,用得少,而且逻辑相对简单。如下:
129129

130130
然后就可以使用数组的一般方法了:
131131

132-
20180402_1125.png
132+
![](http://img.smyhvae.com/20180402_1125.png)
133133

134134
### 扩展2
135135

@@ -259,7 +259,7 @@ ES6中的字符串扩展,用得少,而且逻辑相对简单。如下:
259259

260260
打印结果:
261261

262-
20180404_2240.png
262+
![](http://img.smyhvae.com/20180404_2240.png)
263263

264264
上图显示,成功将obj1和obj2的属性复制给了obj3。
265265

@@ -280,7 +280,7 @@ ES6中的字符串扩展,用得少,而且逻辑相对简单。如下:
280280

281281
打印结果:
282282

283-
20180404_2251.png
283+
![](http://img.smyhvae.com/20180404_2251.png)
284284

285285
上方代码中,obj2本身是没有属性的,但是通过`__proto__`属性和obj1产生关联,于是就可以获得obj1里的属性。
286286

@@ -307,13 +307,6 @@ ES6中的字符串扩展,用得少,而且逻辑相对简单。如下:
307307

308308

309309

310-
311-
312-
313-
314-
315-
316-
317310

318311

319312

0 commit comments

Comments
 (0)