From d1a24fe404a149858b964ebda6d638ac67a48ca8 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 26 Apr 2018 22:36:33 +0800 Subject: [PATCH] =?UTF-8?q?add=EF=BC=9Awhistle=E6=8B=A6=E6=88=AAhttps?= =?UTF-8?q?=E8=AF=B7=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/whistle网络抓包.md | 15 ++++ 03-JavaScript基础/06-对象、作用域和this.md | 8 +- .../07-对象的创建、构造函数和原型.md | 6 +- 03-JavaScript基础/09-内置对象.md | 69 ++++------------ 03-JavaScript基础/14-原型链.md | 46 ++--------- 20-前端综合/2018年-前端日记.md | 11 +++ 21-Vue基础/01-02.Vue的举例：列表功能.md | 79 +------------------ 21-Vue基础/01-03.过滤器.md | 4 +- 21-Vue基础/02-Vue中的Ajax请求.md | 13 ++- 9 files changed, 63 insertions(+), 188 deletions(-) diff --git a/00-前端工具/whistle网络抓包.md b/00-前端工具/whistle网络抓包.md index bda0282..a985bff 100644 --- a/00-前端工具/whistle网络抓包.md +++ b/00-前端工具/whistle网络抓包.md @@ -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) diff --git a/03-JavaScript基础/06-对象、作用域和this.md b/03-JavaScript基础/06-对象、作用域和this.md index 202ac26..ef82627 100644 --- a/03-JavaScript基础/06-对象、作用域和this.md +++ b/03-JavaScript基础/06-对象、作用域和this.md @@ -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) ### 函数作用域 diff --git a/03-JavaScript基础/07-对象的创建、构造函数和原型.md b/03-JavaScript基础/07-对象的创建、构造函数和原型.md index a8b0c20..1e1f43a 100644 --- a/03-JavaScript基础/07-对象的创建、构造函数和原型.md +++ b/03-JavaScript基础/07-对象的创建、构造函数和原型.md @@ -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) ## 类和对象 diff --git a/03-JavaScript基础/09-内置对象.md b/03-JavaScript基础/09-内置对象.md index 9b942c3..0907712 100644 --- a/03-JavaScript基础/09-内置对象.md +++ b/03-JavaScript基础/09-内置对象.md @@ -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) diff --git a/03-JavaScript基础/14-原型链.md b/03-JavaScript基础/14-原型链.md index a7baefe..21a82d1 100644 --- a/03-JavaScript基础/14-原型链.md +++ b/03-JavaScript基础/14-原型链.md @@ -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 - -``` \ No newline at end of file diff --git a/20-前端综合/2018年-前端日记.md b/20-前端综合/2018年-前端日记.md index c1b7bf6..f977e7a 100644 --- a/20-前端综合/2018年-前端日记.md +++ b/20-前端综合/2018年-前端日记.md @@ -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方法的浏览器兼容性问题，可以在这个网站上看： @@ -23,4 +29,9 @@ - promise的实现，关键词：Promises/A、Promises/B、[bluebird](https://github.com/petkaantonov/bluebird) +**综合**： + +- whistle安装证书后，可以拦截 https 请求。但是，我现在又不想拦截了，该怎么卸载证书呢？ + +- diff --git a/21-Vue基础/01-02.Vue的举例：列表功能.md b/21-Vue基础/01-02.Vue的举例：列表功能.md index 1531d06..df5bbfc 100644 --- a/21-Vue基础/01-02.Vue的举例：列表功能.md +++ b/21-Vue基础/01-02.Vue的举例：列表功能.md @@ -80,7 +80,7 @@ 上方代码运行的效果： -20180401_1517.png +![](http://img.smyhvae.com/20180401_1517.png) ### 步骤 2：无数据时，增加提示 @@ -97,7 +97,7 @@ 代码解释：`colspan="4"`指的是让当前这个``横跨4个单元格的位置。如下： -20180401_1535.png +![](http://img.smyhvae.com/20180401_1535.png) ### 步骤 3：item的添加 @@ -427,78 +427,3 @@ js部分： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/21-Vue基础/01-03.过滤器.md b/21-Vue基础/01-03.过滤器.md index 532c7c8..913ba66 100644 --- a/21-Vue基础/01-03.过滤器.md +++ b/21-Vue基础/01-03.过滤器.md @@ -18,8 +18,6 @@ Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些 文档地址： - - ### 自定义私有过滤器 **私有过滤器**：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。 @@ -79,7 +77,7 @@ Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些 运行结果： -20180405_2038.png +![](http://img.smyhvae.com/20180405_2038.png) 第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器是起到了作用的。 diff --git a/21-Vue基础/02-Vue中的Ajax请求.md b/21-Vue基础/02-Vue中的Ajax请求.md index 590502e..80ba621 100644 --- a/21-Vue基础/02-Vue中的Ajax请求.md +++ b/21-Vue基础/02-Vue中的Ajax请求.md @@ -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)