refactor: 目录结构调整

2020-04-19 18:24:43 +08:00
parent 8e979bff7d
commit 6fbb5659e4
106 changed files with 27 additions and 18 deletions
--- a/13-前端面试/02-面试题积累/ES6.md
+++ b/13-前端面试/02-面试题积累/ES6.md
@@ -0,0 +1,39 @@
+
+
+## Class和普通构造函数有何区别
+
+> 我们经常会用ES6中的Class来代替JS中的构造函数做开发。
+
+
+- Class 在语法上更加贴合面向对象的写法
+
+-  Class 实现继承更加易读、易理解
+
+
+
+- 更易于写 java 等后端语言的使用
+
+
+- 本质还是语法糖，使用 prototype
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/ES6：模块化的使用和编译环境.md
+++ b/13-前端面试/02-面试题积累/ES6：模块化的使用和编译环境.md
@@ -0,0 +1,86 @@
+
+
+## 前言
+
+
+### ES6的主要内容
+
+- 模块化的使用和编译环境
+
+- Class与JS构造函数的区别
+
+- Promise的用法
+
+- ES6其他常用功能
+
+本文来讲“模块化的使用和编译环境”。
+
+### 面试常见问题
+
+- ES6 模块化如何使用，开发环境如何打包
+
+- Class 和普通构造函数有何区别
+
+- Promise 的基本使用和原理
+
+- 总结一下 ES6 其他常用功能
+
+
+### ES6的现状
+
+- 开发环境已经普及使用
+
+- 浏览器环境却支持不好（需要开发环境编译）
+
+- 内容很多，重点了解常用语法
+
+- 面试：开发环境的使用 + 重点语法的掌握
+
+
+##  模块化的基本语法
+
+
+（1）util1.js：
+
+```javascript
+export default var a = 100;
+
+export function foo {
+  console.log('util1-foo');
+}
+```
+
+`export default`命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出。
+
+有了默认输出之后，其他模块加载该模块时，import命令可以为该匿名变量/函数，起**任意的名字**。
+
+上面的代码中，默认输出是一个变量。当然，我们也可以换成**默认输出一个匿名函数**：
+
+```javascript
+export default function() {
+  console.log('util1-function');
+}
+```
+
+
+（2）util2.js：
+
+```javascript
+
+export var myUtil2 = 'this is util2';
+
+export function fn1() {
+  console.log('util2-fn1');
+}
+
+export function fn2() {
+  console.log('util2-fn2');
+}
+```
+
+
+上方代码中，我把一个变量和两个函数作为了导出。
+
+
+（3）index.js：
+
--- a/13-前端面试/02-面试题积累/JS相关.md
+++ b/13-前端面试/02-面试题积累/JS相关.md
@@ -0,0 +1,361 @@
+
+
+## JS 有哪些数据类型
+
+- 基本数据类型：string number bool undefined null
+
+- 引用数据类型：object、symbol。
+
+另外，object 包括：数组、函数、正则、日期等对象。NaN属于number类型。
+
+注意，数据类型里，没有数组。因为数组属于object（一旦说数组、函数、正则、日期、NaN是数据类型，直接0分）。
+
+
+
+## Promise 怎么使用
+
+then：
+
+```javascript
+	$.ajax(...).then(成功函数, 失败函数)
+```
+
+
+
+链式 then：
+
+```javascript
+ 	$.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2)
+```
+
+
+如何自己生成 Promise 对象：
+
+```javascript
+	function xxx(){
+      return new Promise(function(resolve, reject){
+          setTimeout(()=>{
+              resolve() 或者 reject()
+          },3000)
+      })
+  }
+  xxx().then(...)
+```
+
+
+## ajax手写
+
+
+
+
+```javascript
+	let xhr = new XMLHttpRequest();
+	 xhr.open('POST', '/xxxx');
+	 xhr.onreadystatechange = function(){
+	     if(xhr.readyState === 4 && xhr.status === 200){
+	         console.log(xhr.responseText)
+	     }
+	 }
+	 xhr.send('a=1&b=2');
+
+```
+
+
+## 闭包是什么
+
+
+
+
+
+
+```javascript
+    function fn1() {
+      var a = 2
+
+      function fn2() {
+        a++
+        console.log(a)
+      }
+      return fn2;
+    }
+
+    var f = fn1();   //执行外部函数fn1，返回的是内部函数fn2
+    f() // 3       //执行fn2
+    f() // 4       //再次执行fn2
+    console.log(a); // 会报错：a is not defined
+
+```
+
+
+参考链接：
+
+- [JS 中的闭包是什么？](https://zhuanlan.zhihu.com/p/22486908)
+
+
+## 这段代码里的 this 是什么？
+
+1、fn() 里面的 this 就是 window
+
+2、fn() 是 strict mode，this 就是 undefined
+
+3、a.b.c.fn() 里面的 this 就是 a.b.c
+
+4、new F() 里面的 this 就是新生成的实例
+
+5、() => console.log(this) ，这个this指的是外面的 this。
+
+参考链接：
+
+- [this 的值到底是什么？](https://zhuanlan.zhihu.com/p/23804247)
+
+##  什么是立即执行函数？作用是？
+
+
+立即执行函数：
+
+（1）声明一个匿名函数，（2）马上调用这个匿名函数。如下：
+
+```javascript
+		(function(a, b) {
+			var name;  //声明一个局部变量
+			console.log("a = " + a);
+			console.log("b = " + b);
+		})(123, 456);
+```
+
+
+**作用：**创建一个独立的作用域，防止污染全局变量。
+
+因为我们只能通过函数的形式声明一个局部变量。当有了ES6之后，我们可以通过let来定义一个局部变量：
+
+
+```javascript
+	 {
+	     let  name
+	 }
+```
+
+上面这段代码，就相当于立即执行函数。有了let，立即执行函数就毫无意义。
+
+
+参考链接：
+
+## ES6 新特性
+
+
+## async/await 语法了解吗？目的是什么？
+
+目的：把异步代码写成同步代码的形式。
+
+
+我们知道，promise是这样写的：
+
+
+```javascript
+    let promise = new Promise((resolve, reject) => {
+        //进来之后，状态为pending
+        console.log('111');  //这一行代码是同步的
+        //开始执行异步操作（这里开始，写异步的代码，比如ajax请求 or 开启定时器）
+        if (异步的ajax请求成功) {
+            console.log('333');
+            resolve();//如果请求成功了，请写resolve()，此时，promise的状态会被自动修改为fullfilled
+        } else {
+            reject();//如果请求失败了，请写reject()，此时，promise的状态会被自动修改为rejected
+        }
+    })
+    console.log('222');
+
+    //调用promise的then()
+    promise.then(() => {
+            //如果promise的状态为fullfilled，则执行这里的代码
+            console.log('成功了');
+        }
+        , () => {
+            //如果promise的状态为rejected，则执行这里的代码
+            console.log('失败了');
+
+        }
+    )
+```
+
+有了await之后，可以直接替换掉then。如下：
+
+
+```javascript
+ function returnPromise(){
+     return new Promise( function(resolve, reject){
+         setTimeout(()=>{
+             resolve('success')
+         },3000)
+     })
+ }
+
+ returnPromise().then((result)=>{
+     result === 'success'
+ })
+
+ var result = await returnPromise()
+ result === 'success'
+
+```
+
+## 如何实现深拷贝
+
+### 方式一：JSON 来深拷贝
+
+```javascript
+    var a = {...};
+    var b = JSON.parse(JSON.stringify(a)); //先将对象转成json字符串，然后再转成对象
+```
+
+缺点：JSON 不支持函数、引用、undefined、RegExp、Date……
+
+
+### 方式二：递归拷贝
+
+
+```javascript
+	 function clone(object){
+	     var object2
+	     if(! (object instanceof Object) ){
+	         return object
+	     }else if(object instanceof Array){
+	         object2 = []
+	     }else if(object instanceof Function){
+	         object2 = eval(object.toString())
+	     }else if(object instanceof Object){
+	         object2 = {}
+	     }
+	     你也可以把 Array Function Object 都当做 Object 来看待，参考 https://juejin.im/post/587dab348d6d810058d87a0a
+	     for(let key in object){
+	         object2[key] = clone(object[key])
+	     }
+	     return object2
+	 }
+
+```
+
+## 如何实现数组去重
+
+### 方式1：计数排序的逻辑（只能针对正整数）
+
+
+
+
+```javascript
+ var a = [4,2,5,6,3,4,5]
+ var hashTab = {}
+ for(let i=0; i<a.length;i++){
+     if(a[i] in hashTab){
+         // 什么也不做
+     }else{
+         hashTab[ a[i] ] = true
+     }
+ }
+ //hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}
+ console.log(Object.keys(hashTab)) // ['4','2','5','6','3']
+
+```
+
+### 方式二：set
+
+
+```javascript
+	Array.from(new Set(a));
+```
+
+
+###方式三
+
+
+## 如何用正则实现 string.trim()
+
+```javascript
+    function trim(string) {
+        return string.replace(/^\s+|\s+$/g, '')
+    }
+```
+
+## JS 原型是什么？
+
+
+
+参考链接：
+
+
+- [什么是 JS 原型链？](https://zhuanlan.zhihu.com/p/23090041)
+
+
+
+## ES 6 中的 class 了解吗？
+
+
+参考链接：
+
+- <https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes>
+
+
+## 如何实现继承
+
+- 构造函数
+
+- 原型链
+
+- extends
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
--- a/13-前端面试/02-面试题积累/JavaScript高级面试：前言.md
+++ b/13-前端面试/02-面试题积累/JavaScript高级面试：前言.md
@@ -0,0 +1,61 @@
+
+
+## 前言
+
+
+一、基础知识：
+
+- ES 6常用语法：class 、module、Promise等
+
+- 原型高级应用：结合 jQuery 和 zepto 源码
+
+- 异步全面讲解：从原理到 jQuery 再到 Promise
+
+二、框架原理：
+
+- 虚拟DOM：存在价值、如何使用、diff算法
+
+- MVVM  vue：MVVM、vue响应式、模板解析、渲染
+
+- 组件化 React：组件化、JSX、vdom、setState
+
+三、混合开发：
+
+- hybrid
+
+- H5
+
+- 前端客户端通讯
+
+
+内容优势
+
+- 面试官爱问“源码”、“实现”。
+
+- 介绍常用框架实现原理
+
+- 介绍hybrid原理和应用
+
+
+
+
+## ES6
+
+
+- 模块化的使用和编译环境
+
+- Class与JS构造函数的区别
+
+- Promise的用法
+
+- ES6其他常用功能
+
+## 异步
+
+
+- 什么是单线程，和异步有什么关系
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/MVVM.md
+++ b/13-前端面试/02-面试题积累/MVVM.md
@@ -0,0 +1,94 @@
+
+
+## 前言
+
+MVVM的常见问题：
+
+- 如何理解MVVM
+
+- 如何实现MVVM
+
+- 是否解读过Vue的源码
+
+
+题目：
+
+- 说一下使用 jQuery 和使用框架的区别
+
+
+- 说一下对 MVVM 的理解
+
+
+- vue 中如何实现响应式
+
+
+- vue 中如何解析模板
+
+- vue 的整个实现流程
+
+
+
+## 说一下使用 jQuery 和使用框架的区别
+
+
+
+
+## MVVM / Vue
+
+
+## MVVM模式
+
+- Model：负责数据存储
+
+- View：负责页面展示
+
+- View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
+
+数据驱动视图，只关心数据变化，DOM操作被封装。
+
+### MVVM / Vue的三要素
+
+- **响应式**：vue 如何监听到 data 的每个属性变化？
+
+- **模板引擎**：vue 的模板如何被解析，指令如何处理？
+
+
+- **渲染**：vue 的模板如何被渲染成 html ？以及渲染过程
+
+
+
+### 什么是虚拟 DOM
+
+传统的web开发，是利用 jQuery操作DOM，这是非常耗资源的。
+
+我们可以在 JS 的内存里构建类似于DOM的对象，去拼装数据，拼装完整后，把数据整体解析，一次性插入到html里去。这就形成了虚拟 DOM。
+
+
+Vue1.0没有虚拟DOM，Vue2.0改成了基于虚拟DOM。
+
+
+### 如何理解MVC
+
+C指的是Controller。控制器能够控制视图的变化，也能控制数据的变化。
+
+单项通信。一般情况下是：view 发出命令给控制器，控制器处理业务逻辑后控制 Model，Model再去改 view。
+
+
+## hybrid
+
+### 使用场景
+
+不是所有的场景都适合用 hybrid：
+
+- 使用原生应用：体验要求极致，变化不频繁（如头条的首页）
+
+- 使用 hybrid：体验要求高，变化频繁（如新闻详情页）
+
+- 使用H5：体验无要求、不常用（比举报、反馈等）
+
+
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/http.md
+++ b/13-前端面试/02-面试题积累/http.md
@@ -0,0 +1,65 @@
+
+
+## HTTP 状态码知道哪些？
+
+301 和 302 的区别：
+
+- 301 永久重定向，浏览器会记住（有缓存）
+
+- 302 临时重定向（无缓存）
+
+
+## HTTP 缓存怎么做？
+
+强缓存：
+
+- **`Expires`**或**`Cache-Control`**
+
+协商缓存：
+
+- 第一对：`Last-Modified`、`If-Modified-Since`
+
+- 第二对：`ETag`、`If-None-Match`
+
+
+## Cookie 是什么？Session 是什么？
+
+### Cookie
+
+- HTTP响应通过 Set-Cookie 设置 Cookie
+
+- 浏览器访问指定域名是必须带上 Cookie 作为 Request Header
+
+- Cookie 一般用来记录用户信息
+
+### Session
+
+- Session 是服务器端的内存（数据）
+
+- session 一般通过在 Cookie 里记录 SessionID 实现
+
+- SessionID 一般是随机数
+
+
+## LocalStorage 和 Cookie 的区别是什么？
+
+- Cookie 会随请求被发到服务器上，而 LocalStorage 不会
+
+- Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右
+
+## GET 和 POST 的区别是什么？
+
+GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
+
+
+需要注意的是，web 中的 get/post 只是 http 中的 get/post 的子集。http 中的 get 与 post 只是单纯的名字上的区别，get 请求的数据也可以放在 request body 中，只是浏览器没有实现它，但是 get 并不只是在 web 中使用
+
+
+参考链接：
+
+- <http://www.cnblogs.com/zichi/p/5229108.html>
+
+- <https://zhuanlan.zhihu.com/p/22536382>
+
+
+
--- a/13-前端面试/02-面试题积累/z-web安全.md
+++ b/13-前端面试/02-面试题积累/z-web安全.md
@@ -0,0 +1,7 @@
+
+
+
+
+## 前言
+
+攻击的原理也许你能讲出来，主要是想知道如何发现这个网站的漏洞，毕竟大部分的网站都已经把用户输入的内容各种花式过滤了
--- a/13-前端面试/02-面试题积累/z-其他.md
+++ b/13-前端面试/02-面试题积累/z-其他.md
@@ -0,0 +1,6 @@
+
+
+## 前端基础
+
+### 闭包和作用域，面试喜欢问。
+
--- a/13-前端面试/02-面试题积累/z-推荐文章.md
+++ b/13-前端面试/02-面试题积累/z-推荐文章.md
@@ -0,0 +1,21 @@
+
+
+## 征服JavaScript面试系列 | 众城翻译
+
+
+- [征服 JavaScript 面试：什么是闭包？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-closure)
+
+- [征服 JavaScript 面试：什么是函数组合](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-function-composition)
+
+- [征服JavaScript面试系列：类继承和原型继承的区别](http://www.zcfy.cc/article/master-the-javascript-interview-what-s-the-difference-between-class-amp-prototypal-inheritance-2185.html)
+
+- [征服 JavaScript 面试：什么是纯函数](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-pure-function-2186.html)
+
+- [征服 JavaScript 面试: 什么是函数式编程？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-functional-programming-2221.html)
+
+- [征服 JavaScript 面试: 什么是 Promise？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-promise)
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/z-计算机网络.md
+++ b/13-前端面试/02-面试题积累/z-计算机网络.md
@@ -0,0 +1,4 @@
+
+
+- [HTTP最强资料大全](https://github.com/semlinker/awesome-http)
+
--- a/13-前端面试/02-面试题积累/函数.md
+++ b/13-前端面试/02-面试题积累/函数.md
@@ -0,0 +1,16 @@
+
+
+```
+    var arr = [1, 2, 3];
+
+    fun(arr);
+    console.log(arr);
+
+    function fun(a) {
+        a = [];
+
+    }
+```
+
+上方代码的打印结果是：[1,2,3]
+
--- a/13-前端面试/02-面试题积累/变量提升的题目.md
+++ b/13-前端面试/02-面试题积累/变量提升的题目.md
@@ -0,0 +1,360 @@
+
+
+## 变量提升
+
+先说三句总结性的话：
+
+- let 的「创建」过程被提升了，但是初始化没有提升。
+
+- var 的「创建」和「初始化」都被提升了。
+
+- function 的「创建」「初始化」和「赋值」都被提升了。
+
+### 变量提升的规律
+
+在进入一个执行上下文后，先把 var 和 function 声明的变量前置，再去顺序执行代码。
+
+PS：作用域分为全局作用域和函数作用域，用var声明的变量，只在自己所在的所用域有效。
+
+我们举例来看看下面的代码。
+
+**代码 1：**
+
+```javascript
+    console.log(fn);
+    var fn = 1;
+
+    function fn() {
+    }
+
+    console.log(fn);
+```
+
+
+相当于：
+
+```javascript
+    var fn = undefined;
+
+    function fn() {
+    }
+
+    console.log(fn);
+    fn = 1;
+    console.log(fn);
+```
+
+
+打印结果：
+
+![](http://img.smyhvae.com/20180321_1810.png)
+
+**代码 2：**
+
+```javascript
+    console.log(i);
+    for (var i = 0; i < 3; i++) {
+        console.log(i)
+    }
+```
+
+相当于：
+
+```javascript
+    var i = undefined;
+
+    console.log(i);
+    for (i = 0; i < 3; i++) {
+        console.log(i);
+    }
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180321_1817.png)
+
+
+
+**代码 3：**
+
+```javascript
+    var a = 1;
+
+    function fn() {
+        a = 2;
+        console.log(a)
+        var a = 3;
+        console.log(a)
+    }
+
+    fn();
+    console.log(a);
+```
+
+相当于：
+
+```javascript
+    var a = undefined;
+
+    function fn() {
+        var a
+
+        a = 2
+        console.log(a)
+        a = 3
+        console.log(a)
+    };
+
+    a = 1;
+    fn();
+    console.log(a);
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180321_1827.png)
+
+参考链接：<https://github.com/jirengu/javascript-tutorial>
+
+
+### 声明时的重名问题
+
+假设`a`被声明为变量，紧接着`a`又被声明为函数，原则是：声明会被覆盖（先来后到，就近原则）。
+
+PS：
+
+- 如果`a`已经有值，再用 var 声明是无效的。
+
+- 如果`a`已经有值，紧接着又被赋值，则**赋值会被覆盖**。
+
+
+举例1：
+
+```javascript
+    var fn;  //fn被声明为变量
+    function fn() {// fn被声明为function，就近原则
+
+    }
+
+    console.log(fn); //打印结果：function fn(){}
+
+```
+
+举例2：
+
+```javascript
+    function fn() {}  //fn被声明为function，且此时fn已经被赋值，这个值就是function的对象
+
+    var fn;   //fn已经在上一行被声明且已经有值， 再 var 无效，并不会重置为 undefined
+
+    console.log(fn)  //打印结果：function fn(){}
+```
+
+
+既然再var无效，但是再function，是有效的：
+
+
+```javascript
+    function fn() {}  //fn被声明为function，且此时fn已经有值，这个值就是function的对象
+
+    function fn() {   //此时fn被重复赋值，会覆盖上一行的值
+        console.log('smyhvae');
+    }
+    console.log(fn)
+
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180321_1845.png)
+
+### 函数作用域中的变量提升（两点提醒）
+
+
+**提醒1：**
+
+在函数作用域也有声明提前的特性：
+
+- 使用var关键字声明的变量，是在函数作用域内有效，而且会在函数中所有的代码执行之前被声明
+
+- 函数声明也会在函数中所有的代码执行之前执行
+
+
+因此，在函数中，没有var声明的变量都会成为**全局变量**，而且并不会提前声明。
+
+举例1：
+
+```javascript
+        var a = 1;
+
+        function foo() {
+            console.log(a);
+            a = 2;     // 此处的a相当于window.a
+        }
+
+        foo();
+        console.log(a);   //打印结果是2
+
+```
+
+上方代码中，foo()的打印结果是`1`。如果去掉第一行代码，打印结果是`Uncaught ReferenceError: a is not defined`
+
+
+**提醒2：**定义形参就相当于在函数作用域中声明了变量。
+
+```
+
+        function fun6(e) {
+            console.log(e);
+        }
+
+        fun6();  //打印结果为 undefined
+        fun6(123);//打印结果为123
+```
+
+
+
+### 其他题目
+
+**20180321面试题：**
+
+```javascript
+    var a = 1;
+    if (a > 0) {
+        console.log(a);
+        var a = 2;
+    }
+    console.log(a);
+
+```
+
+打印结果：
+
+```
+1
+
+2
+```
+
+上方代码中，不存在块级作用域的概念。if语句中用var定义的变量，让然是全局变量。
+
+顺便延伸一下，用let定义的变量，是在块级作用域内有效。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/异步.md
+++ b/13-前端面试/02-面试题积累/异步.md
@@ -0,0 +1,35 @@
+
+
+## 面试题
+
+### 20180321面试题
+
+```javascript
+    console.log(1);
+
+    setTimeout(function () {
+        console.log(2);
+    }, 1000);
+
+    setTimeout(function () {
+        console.log(3);
+    }, 0);
+
+    console.log(4);
+```
+
+
+
+### 20180321面试题
+
+```javascript
+    var arr = [1, 2, 3];
+    for (var i = 0; i < arr.length; i++) {
+        setTimeout(function () {
+            console.log(i);
+        }, 0);
+    }
+```
+
+打印结果：3，3，3
+
--- a/13-前端面试/02-面试题积累/我的面试经历
+++ b/13-前端面试/02-面试题积累/我的面试经历
@@ -0,0 +1,213 @@
+
+
+
+## 20180323
+
+### 什么是闭包，闭包有什么作用。
+
+### ES6的新特性有哪些。
+
+作用域、函数扩展（扩展运算符、默认参数、箭头函数）、异步promise、模块化。
+
+### 追问：const常量有什么作用？确定不能修改吗？修改之后会报错吗？你有没有试过？
+
+当时我的答案是斩钉截铁地说不能改，其实我说错了。后来查了一下，准确答案是：
+
+- 如果是值类型，值不可变
+
+- 如果是引用类型，地址不可变
+
+所以说，虽然我不能修改引用类型的指向，但是我可以修改引用类型里的属性值。
+
+
+参考链接：<https://segmentfault.com/q/1010000012836140?sort=created>
+
+
+### 追问：const的原理是什么？
+
+
+面试官问：如果你定义了const，什么是常量？是它的值还是引用？比如说，我定义了一个const 的array，那我能往里面插入数据吗？
+
+
+
+
+### 箭头函数和匿名函数有什么区别吗？
+
+箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
+
+普通函数的this指向是动态作用域；箭头函数的this指向是依据词法作用域。
+
+
+参考链接：<https://zhuanlan.zhihu.com/p/25093389>
+
+
+### 可以讲一下promise的状态吗？
+
+
+
+
+### 追问：如果我写setTimeout（0），再写一个promise，哪个先执行？
+
+我回答错了。
+
+正确答案是：任务队列可以有多个，promise的任务队列，优先级更高。具体答案还需要再仔细看看。
+
+
+### http有了解吗？
+
+
+- 可以讲一下它的握手过程吗？
+
+- http的缓存有了解吗？
+
+- get和post区别
+
+
+### 做过CDN吗？
+
+答得不具体。
+
+百度百科的解释是：其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
+
+
+### Vue相关
+
+- vue的双向绑定怎么实现的？我是说怎么实现？
+
+我当时是回答MVVM模式。其实还需要答出Object.defineProperty( )的细节，以及虚拟DOM。
+
+
+- Vue里还有什么呢？
+
+数据驱动、组件化。
+
+
+### 事件绑定：onClick和addEventListener的区别
+
+
+
+### 说一下DOM里的事件冒泡
+
+
+### 用Webpack做过哪些功能？
+
+### 追问：ES6转成ES5，改动代码，发现页面自动刷新。你说一下整个流程。
+
+问的是webpack 自动刷新的流程。我没回答好。
+
+
+### 追问：既然webpack可以用来配置服务器，如果我要联调，怎么办？
+
+问：启动了webpack，就可以直接连接到后端吗？
+
+
+### 说一下跨域
+
+
+### gzip压缩有了解吗
+
+### 你做过什么项目？说一下？
+
+答：我做过电商网站。
+
+追问：遇到过什么问题吗？
+
+答：我遇到了性能的问题。
+
+追问：那你说一下性能的问题
+
+我就答出了性能相关的五大点。
+
+
+
+### node和express有了解吗？
+
+### 追问requireJS，是异步的吗？
+
+是异步的。
+
+
+
+### Vue你是怎么用的？是把所有的代码都写在一个页面里的吗
+
+答：我是模块化写的。
+
+问：怎么分类？
+
+
+追问：vuex的的作用
+
+
+
+### 移动端的触摸事件了解吗？
+
+- touchstart touchmove touchend touchcancel（touchcancel当触点由于某些原因被中断时触发）
+
+- 模拟 swipe 事件：记录两次 touchmove 的位置差，如果后一次在前一次的右边，说明向右滑了。
+
+### 移动端的浏览器和电脑浏览器的 touch事件，有区别吗？
+
+
+我说我没了解过。
+
+追问：移动端默认会有0.2秒的延迟。
+
+我后来查了一下：
+
+点击延迟：是指移动端浏览器在 touchend 和 click 之间存在 300ms ～ 350ms 的延迟。
+
+
+为了判断用户是否是进行双击操作。因为移动端双击是放大文字的手势操作。
+
+主要是从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击（double tap）操作。
+
+解决方法：
+
+- 将click事件换成touch end事件
+
+- FastClick：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。
+
+事件发生顺序：在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。
+
+
+### 如何自定义事件
+
+自定义事件的代码如下：
+
+
+```javascript
+    var myEvent = new Event('clickTest');
+    element.addEventListener('clickTest', function () {
+        console.log('smyhvae');
+    });
+
+	//元素注册事件
+    element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
+
+```
+
+
+
+
+
+### 说一下状态码
+
+### 手机端的web开发，怎么和原生做交互？
+
+
+问：比如web网页，想调用手机的拍照功能，怎么做？再比如怎么分享到朋友圈？
+
+
+
+### vue的生命周期，有了解吗
+
+create和mount有什么区别吗
+
+什么时候执行update
+
+
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/清单.md
+++ b/13-前端面试/02-面试题积累/清单.md
@@ -0,0 +1,21 @@
+01.md
+
+
+
+### CommonJS、RequireJS(AMD) SeaJS（CMD）区别
+
+
+
+
+### Webpack 打包
+
+
+### WebSocket
+
+
+### ES6
+
+会 ES6 是应该的部分，不算加分项。
+
+
+
--- a/13-前端面试/02-面试题积累/网友面经.md
+++ b/13-前端面试/02-面试题积累/网友面经.md
@@ -0,0 +1,42 @@
+
+
+
+### 2018-03-08
+
+- [jawil | 一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22)
+
+
+此博主的博客签名：
+
+20180308_1703.png
+
+
+- [2017我遇到的前端面试题](https://blog.dunizb.com//2017/09/08/interview-questions-2017/)
+
+作者整理的这些题目，很多是来自面试跳槽的视频。非常推荐。
+
+作者说，性能优化和ES6，是必问的。
+
+
+
+- [2018年web前端经典面试题及答案](https://www.cnblogs.com/wdlhao/p/8290436.html)
+
+写得很长啊。
+
+
+### 2018-03-11
+
+- [2017年BAT面试题大全集](http://www.bijishequ.com/detail/421600?p=)
+
+- [bat前端面试内容记录](https://www.jianshu.com/p/d94d5290328c)
+
+
+
+### 2018-03-18
+
+- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
+
+- [笔记补充：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/07/06/interview-answers.html)
+
+
+
--- a/13-前端面试/02-面试题积累/虚拟DOM.md
+++ b/13-前端面试/02-面试题积累/虚拟DOM.md
@@ -0,0 +1,56 @@
+
+
+## 前言
+
+
+
+vdom 是 vue 和 React 的**核心**，先讲哪个都绕不开它。
+
+vdom 比较独立，使用也比较简单。
+
+如果面试问到 vue 和 React 和实现，免不了问 vdom：
+
+- vdom 是什么？为何会存在 vdom？
+
+- vdom 的如何应用，核心 API 是什么
+
+- 介绍一下 diff 算法
+
+
+## 什么是 vdom
+
+
+### 什么是 vdom
+
+DOM操作是昂贵的。
+
+步骤一：用JS对象模拟DOM树
+
+步骤二：比较两棵虚拟DOM树的差异
+
+步骤三：把差异应用到真正的DOM树上
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/面经链接推荐.md
+++ b/13-前端面试/02-面试题积累/面经链接推荐.md
@@ -0,0 +1,63 @@
+
+### 2018-01-25
+
+
+
+- [有时在面试时，我都替候选人着急——候选人完全可以在面试前准备](https://www.cnblogs.com/JavaArchitect/p/8353578.html)
+
+### 2018-01-26
+
+- [转眼人到中年：前端老程序员无法忘怀的一次百度电话面试](https://www.cnblogs.com/chyingp/p/a-telephone-interview-long-age.html)
+
+八年前的面经，咋记得这么清楚？
+
+
+### 2018-01-27
+
+- [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html)
+
+
+### 2018-02-04
+
+- [2018秋招前端总结](https://www.cnblogs.com/Mr-stockings/archive/2018/02/02/8407295.html)
+
+
+
+
+### 2018-02-25
+
+- [前端开发面试题(CSS)](http://www.bijishequ.com/detail/379621)
+
+- [超过20家的前端面试题](https://www.jianshu.com/p/8b68f4df749e)
+
+
+- [来聊聊前端工程师的面试套路](https://baijiahao.baidu.com/s?id=1570338146494165&wfr=spider&for=pc)
+
+- [我的前端进阶之路（面试题）](https://www.cnblogs.com/libin-1/p/6864344.html)
+
+这几个链接里讲到了 less。听说面试爱问 less 和 Sass的区别。
+
+
+
+
+
+### 2018-03-02
+
+- [记录前端的面试日常(持续更新)](https://www.cnblogs.com/fangdongdemao/p/8492563.html)
+
+
+
+### 2018-03-06
+
+- [我遇到的前端面试题2017](https://segmentfault.com/a/1190000011091907)
+
+
+里面有很多面试跳槽里的内容。
+
+
+
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/面试技巧
+++ b/13-前端面试/02-面试题积累/面试技巧
@@ -0,0 +1,70 @@
+
+
+
+## 写简历的注意事项
+
+- 最多可以写“深入了解”，但不要写“精通”。
+
+
+## 遇到不知道的问题，该怎么回答
+
+- 这块儿我没了解过，准备回去看一下。
+
+- 这块儿我没研究过，您有没有好的资料，我可以补充一下细节。
+
+- 写不出详细的代码，但是知道思路。
+
+
+
+## 项目经历
+
+
+- 面试要体现项目的设计思路、方案设计等
+
+
+
+## 模块化思维
+
+
+
+
+（1）模块化设计的关键词：**封装、继承**；把**通用**的模块**先抽象，后具体**，达到**复用**。【面试记住】
+
+比如，**panel、按钮、轮播图**、列表等等，都可以提取为**抽象**的组件，复用。
+
+（2）页面有哪几个模块
+
+（3）每个模块分成不同的文件，然后在index页面中import。
+
+
+
+
+
+## ES6新特性
+
+- let、const
+
+- 函数扩展：参数默认值、箭头函数、扩展运算符`...`
+
+- for ... of 循环
+
+- map
+
+- 模块化
+
+
+
+##  薪资
+
+面试官；"你要求多少薪资？"
+
+我：“能给个范围吗？”
+
+
+
+
+
+
+
+
+
--- a/13-前端面试/02-面试题积累/面试题整理
+++ b/13-前端面试/02-面试题积累/面试题整理
@@ -0,0 +1,149 @@
+
+
+
+
+
+
+## JavaScript
+
+### 存储相关：请描述以下cookie、localStorage、sessionStorage的区别
+
+
+> 在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了， 就开始用后面的两个做本地存储。
+
+
+**1、cookie**：
+
+- 本身用于客户端和服务器端的通信。
+
+- 但是它有本地存储的功能，于是就被“借用”。
+
+我们可以通过`document.cookie`获取和修改cookie，获取到的其实就是一个字符串。
+
+
+cookie用于存储时的缺点：
+
+- 存储量太小，只有4kb
+
+- 所有http请求都带着，会影响获取资源的效率
+
+- api简单，需要封装才能用。`document.cookie = ...`
+
+
+
+## HTML5
+
+### HTML5新增了哪些内容或API？使用过哪些？
+
+新元素：
+
+- `<section>`、`<footer>` 和 `<header>`等
+
+
+新的api：
+
+- 网络存储: sessionStorage 和 localStorage
+
+
+
+参考链接：
+
+- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
+
+
+## CSS
+
+### 如何让一个div元素隐藏？你能想到的方式有几种？
+
+-
+
+
+
+## ES6
+
+### for each、for in、for of的区别
+
+- `foreach`用于遍历数组，是数组的一个方法。不支持 return。
+
+- `for ... in`获取对象里属性的键。
+
+- `for ... of`获取对象里属性的值。
+
+
+
+## 网络相关
+
+### 浏览器输入url到显示内容，有哪些过程
+
+
+（1）浏览器解析url。包括：协议、域名、端口号、资源路径、参数查询
+
+（2）DNS解析
+
+（3）TCP握手
+
+（4）HTTP请求
+
+（5）服务器处理请求
+
+（6）浏览器渲染：DOM tree、CSS rule tree、render tree。
+
+（7）display
+
+
+参考链接：
+
+
+- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
+
+- [what-happens-when-zh_CN](https://github.com/skyline75489/what-happens-when-zh_CN)
+
+
+- [码农翻身 | 小白科普：从输入网址到最后浏览器呈现页面内容，中间发生了什么？](https://mp.weixin.qq.com/s/3_DZKSP492uq9RfQ3eW4_A)
+
+- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
+
+
+
+
+
+
+
+
+## GitHub
+
+- [荐]面试题和答案：<https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers>
+
+
+- 面试题和答案：<https://github.com/qiu-deqing/FE-interview>
+
+有个题是，浏览器输入url，有哪些过程
+
+- [讲到了Cookie和session](https://github.com/WarpPrism/Blog/issues/5)
+
+- 这个也很全：<https://github.com/gnipbao/Front-end-Interview-questions>
+
+- <https://github.com/giscafer/front-end-manual/issues/3>
+
+
+
+
+
+
+
+
+
+## 按时间排列
+
+### 2018-03-11
+
+
+- web前端面试题汇总：<https://www.jianshu.com/p/2f7eb1ad7174>
+
+- 2017前端面试题及答案总结：<https://yeaseonzhang.github.io/2017/09/17/2017%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E5%8F%8A%E7%AD%94%E6%A1%88%E6%80%BB%E7%BB%93/>
+
+
+### 2018-03-12-今日头条面试题
+
+- [ 今日头条一面笔试面试题！！！！！完整](http://blog.csdn.net/github_35924246/article/details/75675901)
+
				`@@ -0,0 +1,4 @@`


				`- [HTTP最强资料大全](https://github.com/semlinker/awesome-http)`