webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add：whistle拦截https请求

Browse Source
This commit is contained in:
qianguyihao 2018-04-26 22:36:33 +08:00
parent aff9908fe1
commit d1a24fe404
9 changed files with 63 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
00-前端工具/whistle网络抓包.md
View File

@ -6,6 +6,21 @@
注意，要保证手机和电脑在同一个网络下。
## 捕获和拦截https请求
whistle安装证书后，可以拦截 https 请求。但是，我现在又不想拦截https请求了，该怎么卸载证书呢？
我发现，证书无法卸载，正确的操作是：
![](http://img.smyhvae.com/20180426_1621.png)
上图中，把红框部分，去掉勾选，就不捕获https了。谢谢azh童鞋。
参考链接：
- [Android 手机如何设置http代理？](https://www.zhihu.com/question/21474174)

8
03-JavaScript基础/06-对象、作用域和this.md
View File

@ -41,7 +41,7 @@
打印结果：
20180314_2109.png
![](http://img.smyhvae.com/20180314_2109.png)
**函数和方法的区别：**
@ -104,7 +104,7 @@
打印结果：
20180314_2125.png
![](http://img.smyhvae.com/20180314_2125.png)
## 作用域 Scope【重要】
@ -154,7 +154,7 @@
程序会报错：
20180314_2136.png
![](http://img.smyhvae.com/20180314_2136.png)
**函数的声明提前：**
@ -168,7 +168,7 @@
所以说，下面的例子，会报错：
20180314_2145.png
![](http://img.smyhvae.com/20180314_2145.png)
### 函数作用域

6
03-JavaScript基础/07-对象的创建、构造函数和原型.md
View File

@ -37,7 +37,7 @@ console.log(o);
控制台输出：
20180125_1834.png
![](http://img.smyhvae.com/20180125_1834.png)
### 方式二：利用构造函数
@ -64,7 +64,7 @@ console.log(o);
打印结果：
20180125_1350.png
![](http://img.smyhvae.com/20180125_1350.png)
### 方式三：工厂模式
@ -199,7 +199,7 @@ json 采用 `for...in...`进行遍历，和数组的遍历方式不同。如下
打印结果：
20180203_1518.png
![](http://img.smyhvae.com/20180203_1518.png)
## 类和对象

69
03-JavaScript基础/09-内置对象.md
View File

@ -6,8 +6,7 @@
**javascript的内置对象**：
20180201_2330.jpg
![](http://img.smyhvae.com/20180201_2330.png)
## 内置对象：Date
@ -66,7 +65,7 @@ Date对象 有如下方法：
打印结果举例：
20180202_1056.png
![](http://img.smyhvae.com/20180202_1056.png)
### 返回距离1970/01/01毫秒数
@ -84,7 +83,7 @@ Date对象 有如下方法：
打印结果：
20180202_1100.png
![](http://img.smyhvae.com/20180202_1100.png)
### 举例：模拟日历
@ -138,7 +137,7 @@ Date对象 有如下方法：
实现效果：
20180202_1110.png
![](http://img.smyhvae.com/20180202_1110.png)
### 举例：发布会倒计时
@ -210,7 +209,7 @@ Date对象 有如下方法：
实现效果：
20180202_1130.gif
![](http://img.smyhvae.com/20180202_1130.gif)
## 内置对象String
@ -242,7 +241,6 @@ Date对象 有如下方法：
```javascript
var strObj = new String("smyhvae");
strObj.aaa = 123;
@ -253,7 +251,7 @@ Date对象 有如下方法：
打印结果：
20180202_1351.png
![](http://img.smyhvae.com/20180202_1351.png)
```
@ -305,7 +303,7 @@ Date对象 有如下方法：
打印结果：
20180202_1401.png
![](http://img.smyhvae.com/20180202_1401.png)
上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。
@ -384,7 +382,7 @@ Date对象 有如下方法：
打印结果：
20180202_1420.png
![](http://img.smyhvae.com/20180202_1420.png)
### concat：字符串的链接
@ -451,7 +449,7 @@ Date对象 有如下方法：
打印结果：
20180202_1455.png
![](http://img.smyhvae.com/20180202_1455.png)
2、**replace()**：替换。
@ -481,7 +479,7 @@ Date对象 有如下方法：
打印结果：
20180202_1503.png
![](http://img.smyhvae.com/20180202_1503.png)
### 大小写转换
@ -529,7 +527,7 @@ Date对象 有如下方法：
console.log(str.bold())
```
20180202_1536.png
![](http://img.smyhvae.com/20180202_1536.png)
## 字符串练习
@ -598,7 +596,7 @@ Date对象 有如下方法：
打印结果：
20180202_1540.png
![](http://img.smyhvae.com/20180202_1540.png)
## 内置对象 Math
@ -628,7 +626,7 @@ Date对象 有如下方法：
console.log(Math.random()); //随机数 0-1
```
20180202_1601.png
![](http://img.smyhvae.com/20180202_1601.png)
@ -660,46 +658,7 @@ URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码，以便发
打印结果：
20180202_1432.png
![](http://img.smyhvae.com/20180202_1432.png)

46
03-JavaScript基础/14-原型链.md
View File

@ -44,17 +44,12 @@
当new之后，this会先变成一个空对象，然后通过`this.name = name`来赋值。
### 构造函数的扩展
20180306_1633.png
![](http://img.smyhvae.com/20180306_1633.png)
上图中发现，数组、对象、函数也有构造函数，它们的构造函数是Array、Object、funtion。实际开发中，都推荐前面的书写方式。
## 原型规则
原型规则是学习原型链的基础。原型规则有五条，下面来讲解。
@ -65,43 +60,38 @@
举例：
20180306_1651.png
![](http://img.smyhvae.com/20180306_1651.png)
### 规则2
所有的**引用类型**（数组、对象、函数），都有一个`_proto_`属性，属性值是一个**普通的对象**。`_proto_`的含义是隐式原型。
20180306_1656.png
![](http://img.smyhvae.com/20180306_1656.png)
其实，规则2是规则1的特例，只不过，js语法帮我们自动加了 规则2。
### 规则三
所有的**函数**（不包括数组、对象），都有一个`protype`属性，属性值是一个**普通的对象**。`protype`的含义是**显式原型**。（实例没有这个属性）
20180306_1659.png
![](http://img.smyhvae.com/20180306_1659.png)
### 规则四
所有的**引用类型**（数组、对象、函数），`_proto_`属性指向它的**构造函数**的`protype`值。
20180306_1701.png
![](http://img.smyhvae.com/20180306_1701.png)
总结：以上四条，要先理解清楚，然后再来看下面的第五条。
### 规则五
当试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的`_proto_`中寻找（即它的构造函数的`protype`）。
`举例代码1`：
```javascript
//创建方法
function Foo(name) {
@ -125,7 +115,6 @@
上方代码中，虽然 alertName 不是 fn 自身的属性，但是会从它的构造函数的`protype`里面找。
**扩展：**遍历循环对象自身的属性
我们知道，`for ... in`循环可以遍历对象。针对上面的那个fn对象，它自身有两个属性：`name`、`printName`，另外从原型中找到了第三个属性`alertName`。现在，如果我们对fn进行遍历，能遍历到两个属性还是三个属性呢？
@ -142,7 +131,6 @@
```
## 原型链
还是拿上面的``举例代码1``举例，如果此时在最后面加一行代码：
@ -161,8 +149,6 @@
对象 instanceof 构造函数
```
`instanceof`的作用：用于判断**引用类型**属于哪个**构造函数**。
例1：判断一个变量是否为数组： `变量 instanceof Array`
@ -189,13 +175,12 @@
原型链如下：（重要）
20180306_1853.png
![](http://img.smyhvae.com/20180306_1853.png)
注意，Object这个构造方法的显式原型是null，这是一个特例。
## 常见题目
- 如何准确判断一个变量时数组类型
@ -206,7 +191,6 @@
- zepto(或其他框架)源码中如何使用原型链
下面分别讲解。
### 题目一：如何准确判断一个变量时数组类型
@ -222,24 +206,20 @@
上方代码表明，只能通过 instanceof 来判断是否为数组。而 typeof 的打印结果是 object。
### 题目二：写一个原型链继承的例子
来看个基础的代码：
20180306_1931.png
![](http://img.smyhvae.com/20180306_1931.png)
上面这个例子是基础，但是，在回答面试官的问题时，不要写上面的例子。要写成下面这个例子：（更贴近实战）
**举例：**写一个封装DOM查询的例子
> 这个例子有点像 jQuery 操作DOM节点。
表示这个例子，略难。
### 题目三：描述 new 一个对象的过程
（1）创建一个新对象
@ -251,19 +231,7 @@
（4）返回this
参考链接：
- [原型、原型链、继承模式](https://my.oschina.net/u/2600761/blog/1524617)
```javascript
```

11
20-前端综合/2018年-前端日记.md
View File

@ -3,11 +3,17 @@
### 2018-04-25
- userAgent相关：[判断微信内置浏览器的UserAgent](http://www.cnblogs.com/7z7chn/p/5370352.html)
### 2018-04-26
**前端相关**：
- 流程图制作工具：[ProcessOn](https://www.processon.com/)
- api方法的浏览器兼容性问题，可以在这个网站上看：<https://caniuse.com/>
@ -23,4 +29,9 @@
- promise的实现，关键词：Promises/A、Promises/B、[bluebird](https://github.com/petkaantonov/bluebird)
**综合**：
- whistle安装证书后，可以拦截 https 请求。但是，我现在又不想拦截了，该怎么卸载证书呢？
-

79
21-Vue基础/01-02.Vue的举例：列表功能.md
View File

@ -80,7 +80,7 @@
上方代码运行的效果：
20180401_1517.png
![](http://img.smyhvae.com/20180401_1517.png)
### 步骤 2：无数据时，增加提示
@ -97,7 +97,7 @@
代码解释：`colspan="4"`指的是让当前这个`<td>`横跨4个单元格的位置。如下：
20180401_1535.png
![](http://img.smyhvae.com/20180401_1535.png)
### 步骤 3：item的添加
@ -427,78 +427,3 @@ js部分：

4
21-Vue基础/01-03.过滤器.md
View File

@ -18,8 +18,6 @@ Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些
文档地址：<http://v1-cn.vuejs.org/guide/custom-filter.html>
### 自定义私有过滤器
**私有过滤器**：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。
@ -79,7 +77,7 @@ Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些
运行结果：
20180405_2038.png
![](http://img.smyhvae.com/20180405_2038.png)
第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器是起到了作用的。

13
21-Vue基础/02-Vue中的Ajax请求.md
View File

@ -28,8 +28,7 @@
现规定，获取品牌数据的 api 接口说明如下：
20180422_2140.png
![](http://img.smyhvae.com/20180422_2140.png)
```html
@ -134,11 +133,11 @@
运行的结果如下：
20180422_2152.png
![](http://img.smyhvae.com/20180422_2152.png)
如果我直接在浏览器中输入请求的url，获取的json数据如下：（这种方式获取的是相同的数据）
20180422_2150.png
![](http://img.smyhvae.com/20180422_2150.png)
### post请求
@ -163,7 +162,7 @@
现规定，添加品牌数据的 api 接口说明如下：
20180422_1720.png
![](http://img.smyhvae.com/20180422_1720.png)
代码如下：（在上一段代码的基础之上，添加代码）
@ -424,7 +423,7 @@
### jsonp
20180420_2250.png
![](http://img.smyhvae.com/20180420_2250.png)
```javascript
// 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：
@ -439,7 +438,7 @@
请求结果：
20180420_2256.png
![](http://img.smyhvae.com/20180420_2256.png)