add file：几道题目

00-前端工具/02-Atom在前端的使用.md

@@ -0,0 +1,65 @@
+
+
+## 常用插件
+
+
+- `Emmet`：快速生成HTML片段，比如输入ul>li*3可以快速生成：
+
+```html
+<ul>
+  <li></li>
+  <li></li>
+  <li></li>
+</ul>
+```
+
+[详细地址](https://atom.io/packages/emmet)，[Emmet教程](https://docs.emmet.io/cheat-sheet/)
+
+- `Snippets`：快速生成 js 代码片段（用来处理代码片段的模板输出），[详细地址](https://atom.io/packages/snippets)
+
+- `Tree View`：文件浏览器，[详细地址](https://atom.io/packages/tree-view)
+
+- `file icons`：文件识别图标，使用这个插件会让你的编辑器显示对应的图标，[详细地址](https://atom.io/packages/file-icons)
+
+- `language-javascript-jsx`：jsx语法高亮 ，[详细地址](https://atom.io/packages/language-javascript-jsx)
+
+- `language-vue`：vue语法高亮，[详细地址](https://atom.io/packages/language-vue)
+
+- `linter-eslint`：eslint插件，[详细地址](https://atom.io/packages/linter-eslint)
+
+- `vue-snippets`：vue代码片段，[详细地址](https://atom.io/packages/vue-snippets)
+
+- `pigments`：颜色显示器，[详细地址](https://atom.io/packages/pigments)
+
+- `linter-eslint`：语法检查
+
+- `Atom-Beautify`：代码格式化
+
+参考链接：<https://github.com/cucygh/JDFinance/blob/master/issue.md>
+
+## 插件无法安装的问题
+
+### 方法一：设置代理
+
+`C:\Users\smyhvae\.atom\.apm`目录下的.apmrc配置文件（没有就新建一个）,然后添加代理信息：
+
+```
+strict-ssl=false
+https-proxy=http://127.0.0.1:1080/
+http-proxy =http://127.0.0.1:1080/
+```
+
+这里的 http://127.0.0.1:1080，是我自己的 Shadowsocks 代理，你需要设置成自己的可用代理。
+然后再执行：
+
+```
+apm install --check
+```
+
+应该可以测试成功，祝好运~~
+
+参考链接：
+
+- <https://atom-china.org/t/atom/984>
+
+- <https://zhenyong.github.io/2016/08/03/starting-atom/>

07-HTML5和CSS3/06-CSS3属性详解：flex布局.md

@@ -41,7 +41,7 @@
 CSS3在布局方面做了非常大的改进，使得我们对**块级元素**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。
 
 
-20180219_2035.png
+![](http://img.smyhvae.com/20180219_2035.png)
 
 如上图所示，有几个概念需要了解一下：
 
@@ -71,8 +71,8 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
 
 - `flex-direction: row;` 设置**主轴方向**，默认是水平方向。属性值可以是：
     - `row` 水平方向（默认值）
-    - `reverse-row` 反转 
+    - `reverse-row` 反转
-    - `column` 垂直方向 
+    - `column` 垂直方向
     - `reverse-column` 反转列
 
 
@@ -354,7 +354,7 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
     - `flex-start` 从侧轴开始的方向对齐
     - `flex-end` 从侧轴结束的方向对齐
     - `baseline` 基线 默认同flex-start
-    - `center` 中间对齐 
+    - `center` 中间对齐
     - `stretch` 拉伸
 
 

10-Node.js/00-01.ES6的介绍和常用语法.md

@@ -610,7 +610,6 @@ for…of 的循环可以避免我们开拓内存空间，增加代码运行效
 
 `for ... of`既可以遍历数组，也可以遍历Map对象。
 
-代码举例：
 
 
 
@@ -751,23 +750,36 @@ console.log(fn1(1, 2));  //输出结果：3
 
 
 
-
-
-
-
-
 ### this的指向
 
 ES5中，this指向的是函数被调用的对象；而ES6的箭头函数中，this指向的是函数被定义时。
 
-
 所以说，箭头韩注重，一定要注意this的指向。
 
 
-
-
 ## 模块化
 
+**模块化的意义**：
+
+比如说，当我需要用到jQuery库时，我会把jQuery.js文件引入到我自己代码的最前面；当我需要用到vue框架时，我会把vue.js文件引入到我自己代码的最前面。
+
+可是，如果有20个这样的文件，就会产生20次http请求。这种做法的性能，肯定是不能接受的。
+
+如果把20个文件直接写在一个文件里，肯定是不方便**维护**的。可如果写成20个文件，这20个文件又不好排序。这就是一个很矛盾的事情，于是，模块化就诞生了。
+
+**模块化历程**：commonJS、AMD规范（RequireJS）、CMD规范（SeaJS）；import & export
+
+
+**export：**
+
+静态化：必须在顶部，不能使用条件语句，自动采用严格模式。（静态化有利于性能以及代码的稳定性）
+
+
+
+
+
+
+
 
 
 

10-Node.js/11-JavaScript模块化开发.md

@@ -51,7 +51,7 @@
 
 浏览器端规范：
 
-- [**AMD**](https://github.com/amdjs/amdjs-api)：是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
+- [**AMD规范**](https://github.com/amdjs/amdjs-api)：是 **[RequireJS](http://requirejs.org/)** 在推广过程中对模块化定义的规范化产出。
 
 ```
 - 异步加载模块；
@@ -61,7 +61,7 @@
 - define 定义模块：define([`require`,`foo`],function(){return});
 ```
 
-- **[CMD](https://github.com/amdjs/amdjs-api)**：是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
+- **[CMD规范](https://github.com/amdjs/amdjs-api)**：是 **[SeaJS](http://seajs.org/)** 在推广过程中对模块化定义的规范化产出。淘宝团队开发。
 
 ```
 

11-前端基础/21-面试题整理 by smyhvae.md

@@ -0,0 +1,93 @@
+
+
+
+
+## JavaScript
+
+### 存储相关：请描述以下cookie、localStorage、sessionStorage的区别。
+
+
+在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了， 就开始用后面的两个做本地存储。
+
+
+**1、cookie**：
+
+- 本身用于客户端和服务器端的通信。
+
+- 但是它有本地存储的功能，于是就被“借用”。
+
+我们可以通过`document.cookie`获取和修改cookie，获取到的其实就是一个字符串。
+
+
+cookie用于存储时的缺点：
+
+- 存储量太小，只有4kb
+
+- 所有http请求都带着，会影响获取资源的效率
+
+- api简单，需要封装才能用。`document.cookie = ...`
+
+
+
+
+
+
+
+
+
+## ES6
+
+### for each、for in、for of的区别
+
+- `foreach`用于遍历数组，是数组的一个方法。不支持 return。
+
+- `for ... in`获取的是index索引值。
+
+- `for ... of`获取的是数组里的值。
+
+
+
+
+
+## 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>
+
+
+
+
+## 浏览器输入hrl，有哪些过程
+
+- [码农翻身 | 小白科普：从输入网址到最后浏览器呈现页面内容，中间发生了什么？](https://mp.weixin.qq.com/s/3_DZKSP492uq9RfQ3eW4_A)
+
+- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
+
+
+
+
+
+## 按时间排列
+
+### 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)
+

11-前端基础/22-面试题整理.md

@@ -1,46 +0,0 @@
-
-
-
-
-## 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>
-
-
-
-
-## 浏览器输入hrl，有哪些过程
-
-- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
-
-
-
-
-## 按时间排列
-
-### 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)
-
-
-
-

11-前端基础/23-面试技巧.md

@@ -50,7 +50,7 @@
 
 - map
 
-
+- 模块化
 
 
 

12-前端进阶/01-前端的几道面试题.md

@@ -0,0 +1,275 @@
+
+
+几道面试题
+
+## 页面布局
+
+**问题**：如何实现一个三栏布局，要求两边固定宽度、中间自适应。
+
+此题可以考察的知识点：
+
+- 圣杯布局
+
+- 双飞翼布局
+
+- flex布局（css3）
+
+
+
+## 变量提升
+
+
+**问题**：说一下你对JavaScript变量提升的理解。
+
+### 定义
+
+在函数体内部，声明变量，会把该变量提升到函数体的最顶端。注意：**只提升变量声明，不赋值**。
+
+**代码1**：
+
+```javascript
+    fn();
+
+    function fn() {
+        var x = 1;
+        var y = 2;
+    }
+```
+
+
+上方代码中：
+
+（1）给fn创建函数上下文，找到fn中**所有**用var声明的变量（即x和y）；
+
+（2）将这些变量初始化为undefined；
+
+（3）将x赋值为1，将y赋值为2。
+
+
+**代码2**：
+
+
+```javascript
+    fn2();
+
+    function fn2() {
+        console.log(2);
+
+    }
+```
+
+
+上方代码中：
+
+（1）创建全局上下文，找到所有用function声明的变量，在环境中“创建”这些变量。
+
+（2）将这些变量**初始化**，并**赋值**为 `function(){ console.log(2) }`（并不是undefined）
+
+（3）开始执行代码`fn2();`
+
+**代码3**：（let的出现）
+
+```javascript
+{
+  let x = 1
+  x = 2
+}
+```
+
+
+上方代码中：
+
+（1）找到所有用 let 声明的变量，在环境中「创建」这些变量
+
+（2）开始执行代码（注意现在还没有初始化）
+
+（3）执行 x = 1，将 x 「初始化」为 1（这并不是一次赋值，如果代码是 let x，就将 x 初始化为 undefined）
+
+（4）执行 x = 2，对 x 进行「赋值」
+
+
+
+代码4：
+
+```javascript
+let x = 'global'
+{
+  console.log(x) // Uncaught ReferenceError: x is not defined
+  let x = 1
+}
+```
+
+原因有两个：
+
+- console.log(x) 中的 x 指的是下面的 x，而不是全局的 x
+
+- 执行 log 时 x 还没「初始化」，所以不能使用（也就是所谓的暂时死区）
+
+看到这里，你应该明白了 let 到底有没有提升：
+
+- let 的「创建」过程被提升了，但是初始化没有提升。
+
+- var 的「创建」和「初始化」都被提升了。
+
+- function 的「创建」「初始化」和「赋值」都被提升了。
+
+
+
+参考链接：
+
+- [我用了两个月的时间才理解 let](https://zhuanlan.zhihu.com/p/28140450)
+
+
+## this
+
+问题：下方代码的打印结果是什么？
+
+```javascript
+    function A() {
+        this.name = 'smyhvae';
+    }
+
+    A.prototype.test = function () {
+        setTimeout(function () {
+            console.log(this.name);
+        }, 1)
+    }
+
+    var a = new A();
+    a.test();
+```
+
+打印结果是window.name，但实际的结果是空的。
+
+这个神奇的特性，被用来解决跨域数据传递。（网上可以查一下iframe相关）
+
+
+
+**总结1**：this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。即：**谁调用**，指向谁。
+
+**举例**：
+
+```javascript
+    var name = '全局';
+
+    function getName() {
+        var name = '局部';
+        return this.name;
+    };
+
+    alert(getName());
+
+```
+
+上方代码的打印结果是：`全局`。
+
+分析：`getName()`这个函数其实是window调用的，所以this指向的window，因为外部有name这个变量，所以打印结果为`全局`。
+
+
+**总结2**：没有明确的当前对象时，this永远指向window。这个在setTimeout里比较常见。
+
+
+
+
+## 链式调用
+
+**问题**：如何实现类似jQuery的链式调用？
+
+答案：一直return `this`就好了。
+
+
+## Yslow和pageSpeed
+
+
+Yslow和pageSpeed你知道怎么用吗？你记得其中多少规则？
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+

21-Vue基础/00-Vue的介绍和环境配置.md

@@ -2,6 +2,14 @@
 
 - [Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统](https://coding.imooc.com/class/chapter/113.html)
 
+## MVVM模式
+
+- Model：负责数据存储
+
+- View：负责页面展示
+
+- View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
+
 ## 前端的各种框架
 
 ### Vue、React、AngularJS
@@ -58,10 +66,21 @@ Vue框架中，没有控制器。
 
 - [中文官网](https://cn.vuejs.org/)
 
-- GitHub地址：<https://github.com/vuejs/vue>
 
 - [vuejs官方论坛](https://forum.vuejs.org/)
 
+- GitHub地址：<https://github.com/vuejs/vue>
+
+
+- Vue1.0 在线文档：<http://v1-cn.vuejs.org/guide/>
+
+- Vue2.x 在线文档：<https://cn.vuejs.org/v2/guide/>
+
+- Vue1下载地址：http://v1-cn.vuejs.org/js/vue.js
+
+- Vue2下载地址：https://unpkg.com/vue@2.2.1/dist/vue.js
+
+
 
 
 

21-Vue基础/01-Vue基础语法.md

@@ -0,0 +1,301 @@
+
+
+## Vue初体验
+
+新建一个空的项目，引入vue.js文件。写如下代码：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <!--vue的版本：2.5.15-->
+    <script src="vue.js"></script>
+</head>
+<body>
+<!--这个div区域就是MVVM中的 View-->
+<div id="div1">
+    {{name}}
+</div>
+</body>
+
+<script>
+    //new出来的对象就是MVVM中的 View Module
+    var myVue = new Vue({
+        el: '#div1', //当前vue对象将接管上面的div区域
+        data: {//data就是MVVM中的 module
+            name: 'smyhvae'
+        }
+    });
+</script>
+</html>
+```
+
+
+显示效果：
+
+20180313_0955.png
+
+如果我们在控制台输入`myVue.data+='123'`，页面会**自动更新**name的值。
+
+
+## Vue的系统指令
+
+### v-on：注册事件
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <!--vue的版本：2.5.15-->
+  <script src="vue.js"></script>
+</head>
+
+<body>
+  <!--这个div区域就是MVVM中的 View-->
+  <div id="div1">
+    <!-- 给button节点绑定按钮的点击事件 -->
+    {{name}}
+    <button v-on:click="change">改变name的值</button>
+  </div>
+
+
+</body>
+
+<script>
+  //new出来的对象就是MVVM中的 View Module
+  var myVue = new Vue({
+    el: '#div1', //当前vue对象将接管上面的div区域
+    data: { //data就是MVVM中的 module
+      name: 'smyhvae'
+    },
+    methods: {
+      change: function() { //上面的button按钮的点击事件
+        this.name += '1';
+      }
+    }
+  });
+</script>
+
+</html>
+```
+
+
+上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。
+
+
+
+### 插值表达式 {{}}
+
+数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
+
+```html
+<span>Message: {{ msg }}</span>
+```
+
+Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
+无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。
+
+`{{}}`对JavaScript 表达式支持，例如：
+
+```javascript
+{{ number + 1 }}
+
+{{ ok ? 'YES' : 'NO' }}
+
+{{ name == 'smyhvae' ? 'true' : 'false' }}
+
+{{ message.split('').reverse().join('') }}
+```
+
+
+但是有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效：
+
+```html
+<!-- 这是语句，不是表达式 -->
+{{ var a = 1 }}
+
+<!-- 流控制也不会生效，请使用三元表达式 -->
+{{ if (ok) { return message } }}
+```
+
+
+### v-text
+
+v-text可以将一个变量的值渲染到指定的元素中。例如：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <!--vue的版本：2.5.15-->
+  <script src="vue.js"></script>
+</head>
+
+<body>
+  <div id="div1">
+    <span v-text="name"></span>
+  </div>
+</body>
+
+<script>
+  new Vue({
+    el: '#div1',
+    data: {
+      name: 'hello smyhvae'
+    }
+  });
+</script>
+
+</html>
+```
+
+结果：
+
+
+20180313_1645.png
+
+### v-html
+
+
+`v-text`是纯文本，而`v-html`会被解析成html元素。
+
+注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
+
+
+### v-cloak
+
+`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。
+
+
+这个指令和CSS 规则一起用的时候，可以隐藏未编译的标签直到实例准备完毕。比如说，在网络很慢的情况下，通过`v-cloak`隐藏元素，当加载完毕后，再显示出来。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <style>
+
+    /*网络很慢时，在span上加上 v-cloak和css样式控制以后，浏览器在加载时会先把span隐藏起来。
+    直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
+    [v-cloak] {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="div1">
+    <span v-cloak>{{name}}</span>
+
+  </div>
+</body>
+
+<script src="vue.js"></script>
+<script>
+  new Vue({
+    el: '#div1',
+    data: {
+      name: 'hello1 smyhvae22'
+    }
+  });
+</script>
+
+</html>
+
+```
+
+
+
+
+### v-bind
+
+`v-bind`：给html元素或者组件**动态绑定**一个或多个特性，例如动态绑定style和class。
+
+比如说：
+
+```html
+    <img v-bind:src="imageSrc">
+
+    <div v-bind:style="{ fontSize: size + 'px' }"></div>
+```
+
+
+上方代码中的`imageSrc`和`size`其实是Vue实例里面的变量。
+
+上面两行代码可以简写成：
+
+```html
+    <img :src="imageSrc">
+
+    <div :style="{ fontSize: size + 'px' }"></div>
+```
+
+**举例：**
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <style>
+  </style>
+</head>
+
+<body>
+  <div id="div1">
+    <!-- value里的值只是简单的字符串 -->
+    <input type="text" value="name">
+    <!-- 加上 v-bind 之后，value里的值是 Vue 里的变量 -->
+    <input type="text" v-bind:value="name">
+    <!-- 超链接后面的path是 Vue 里面的变量 -->
+    <a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>
+
+  </div>
+</body>
+
+<script src="vue.js"></script>
+<script>
+  new Vue({
+    el: '#div1',
+    data: {
+      name: 'smyhvae',
+      path: `2.html`
+    }
+  });
+</script>
+
+</html>
+
+```
+
+
+效果：
+
+20180313_1745.png
+
+
+
+
+
+
+
+
+
+
+
+
+
+

21-Vue基础/Vue-router路由.md

@@ -0,0 +1,6 @@
+
+
+## 前言
+
+路由：就是SPA（单页应用）的**路径管理器**。
+