add file：ES5中的一些扩展

01-html/02-html标签图文详解（二）.md

@@ -339,7 +339,7 @@ dt、dd都是容器级标签，想放什么都可以。所以，现在就应该
 
 **`<table>`的属性：**
  - `border`：边框。像素为单位。
- - `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并
+ - `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条）
  - `width`：宽度。像素为单位。
  - `height`：高度。像素为单位。
  - `bordercolor`：表格的边框颜色。

03-JavaScript基础/01-JavaScript语法基础：JS简介&变量.md

@@ -26,7 +26,7 @@ JavaScript是世界上用的最多的**脚本语言**。
 
 ### JavaScript和ECMAScript的关系
 
-ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。
+ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定和发布的脚本语言规范。
 
 JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
 
@@ -111,9 +111,9 @@ JavaScript基础分为三个部分：
 
 - ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
 
-- **DOM**：操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
+- **DOM**：文档对象模型，操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
 
-- **BOM**：操作**浏览器部分功能**的API。比如让浏览器自动滚动。
+- **BOM**：浏览器对象模型，操作**浏览器部分功能**的API。比如让浏览器自动滚动。
 
 PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。
 

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

@@ -39,11 +39,9 @@ console.log(o);
 
 20180125_1834.png
 
-
 ### 方式二：利用构造函数
 
 
-
 ```javascript
         //利用构造函数自定义对象
         var stu1 = new Student("smyh");
@@ -69,7 +67,6 @@ console.log(o);
 20180125_1350.png
 
 
-
 ### 方式三：工厂模式
 
 通过该方法可以大批量的创建对象。
@@ -102,11 +99,9 @@ console.log(o);
 
 使用工厂方法创建的对象，使用的构造函数都是Object。所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象。
 
-
 ## 构造函数
 
 
-
 ### new和this
 
 **this：**

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

@@ -37,8 +37,7 @@
 
 以上四种写法的打印结果是：
 
-20180202_1040.png
+![](http://img.smyhvae.com/20180202_1040.png)
-
 
 ### Date对象的方法：获取日期和时间
 

03-JavaScript进阶/07-call、apply、bind的区别.md

@@ -52,7 +52,7 @@ JS提供的绝大多数函数以及我们自己创建的所有函数，都可以
 ### call()和apply()的区别
 
 
-call()和apply()方法都可以将实参在对象之后依次传递，但是apply()方法需要将实参封装到一个**数组**中统一传递。
+call()和apply()方法都可以将实参在对象之后依次传递，但是apply()方法需要将实参封装到一个**数组**中统一传递（即使只有实参只有一个，也要放到数组中）。
 
 比如针对下面这样的代码：
 
@@ -90,7 +90,7 @@ call()和apply()方法都可以将实参在对象之后依次传递，但是appl
 看到区别了吗，call后面的实参与say方法中是一一对应的，而apply传实参时，要封装成一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
 
 
-## call()和apply()的作用
+### call()和apply()的作用
 
 - 改变this的指向
 
@@ -100,13 +100,14 @@ call()和apply()方法都可以将实参在对象之后依次传递，但是appl
 
 ## bind()
 
-call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。
+- 都能改变this的指向
 
-bind与call和apply的不同点在于：call或apply会自动执行对应的函数，bind不会执行对应的函数。
+- call()/apply()是**立即调用函数**
 
-推荐链接：
+- bind()是将函数返回，因此后面还需要加`()`才能调用。
+
+bind()传参的方式和call()一样。
 
--
 
 
 参考链接：

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

@@ -1,15 +1,52 @@
 
 
-## 严格模式
 
-- 针对脚本文件：将`use strict`放在脚本文件的第一行，则整个脚本文件将以严格模式运行。
+## ES的几个重要版本
 
+- ES5 : 09年发布。
+
+- ES6(ES2015) : 2015年发布，也称为ECMA2015。
+
+- ES7(ES2016) : 2016年发布，也称为ECMA2016  (变化不大)。
+
+
+## 严格模式的理解
+
+### 概念
+
+
+**理解**：除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。
+
+顾名思义，这种模式使得Javascript在更严格的语法条件下运行。
+
+**目的**：
+
+- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
+
+- 消除代码运行的一些不安全之处，为代码的安全运行保驾护航
+
+- 为未来新版本的Javascript做好铺垫
+
+### 使用
+
+- 针对整个脚本文件：将`use strict`放在脚本文件的第一行，则整个脚本文件将以严格模式运行。
 
 - 针对单个函数：将`use strict`放在函数体的第一行，则整个函数以严格模式运行。
 
+PS：如果浏览器不支持，则这句话只解析为一条简单的语句, 没有任何副作用。
 
 脚本文件的变通写法：因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中。
 
+### 语法和行为改变
+
+- 必须用var声明变量
+
+- 禁止自定义的函数中的this指向window
+
+- 创建eval作用域
+
+- 对象不能有重名的属性
+
 
 ## 严格模式和普通模式的区别
 
@@ -18,17 +55,7 @@
 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。
 
 
-
+### 2、禁止this关键字指向全局对象：
-### 2、禁止使用with语句
-
-因为with语句无法在编译时就确定，属性到底归属哪个对象。
-
-
-
-### 3、创设eval作用域
-
-
-### 4、禁止this关键字指向全局对象：
 
 ```javascript
         var foo = function () {
@@ -39,9 +66,15 @@
 ```
 上方代码中，普通模式打印的是window。严格模式下打印的是undefined。
 
+### 3、创设eval作用域
 
 
 
+### 2、禁止使用with语句
+
+因为with语句无法在编译时就确定，属性到底归属哪个对象。
+
+
 
 ### 构造函数必须通过new实例化对象
 
@@ -74,9 +107,21 @@
 
 普通模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
 
+
 普通模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，多个重名的参数属于语法错误。
 
 
+比如下面这样的代码：
+
+```javascript
+	var obj = {
+		username: 'smyh';
+		username: 'vae'
+	}
+```
+
+上面的代码，在严格模式下属于语法错误，因为有重名的属性。
+
 ### 函数必须声明在顶层
 
 
@@ -87,8 +132,14 @@
 为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。
 
 
-
 ## 总结
 
 至少要能答出四五条。
 
+
+参考链接：
+
+- [阮一峰 | Javascript 严格模式详解](http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html)
+
+
+

10-ES6/02-ES5中的一些扩展.md

@@ -0,0 +1,297 @@
+
+
+## JSON 对象
+
+1、js对象(数组) --> json对象(数组)：
+
+```javascript
+	JSON.stringify(obj/arr)
+```
+
+2、json对象(数组) --> js对象(数组)：
+
+
+```javascript
+	JSON.parse(json)
+```
+
+
+上面这两个方法是ES5中提供的。
+
+我们要记住，我们通常说的“json字符串”，只有两种：**json对象、json数组**。
+
+`typeof json字符串`的返回结果是string。
+
+## Object的扩展
+
+ES5给Object扩展了一些静态方法，常用的有2个，我们接下来讲解。
+
+
+### 方法一
+
+```javascript
+	Object.create(prototype, [descriptors])
+```
+
+作用: 以指定对象为原型，创建新的对象。同时，第二个参数可以为为新的对象添加新的属性，并对此属性进行描述。
+
+**举例1**：（没有第二个参数时）
+
+```javascript
+    var obj1 = {username: 'smyhvae', age: 26};
+    var obj2 = {address:'shenzhen'};
+
+    obj2 = Object.create(obj1);
+    console.log(obj2);
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180401_2150.png)
+
+我们发现，obj1成为了obj2的原型。
+
+**举例2**：（有第二个参数时）
+
+第二个参数可以给新的对象添加新的属性。我们修改上面的代码，尝试给obj2添加新属性`sex`：
+
+```javascript
+    var obj1 = {username: 'smyhvae', age: 26};
+    var obj2 = {address: 'shenzhen'};
+
+    obj2 = Object.create(obj1, {
+        sex: {//给obj2添加新的属性`sex`。注意，这一行的冒号不要漏掉
+            value: '男',  //通过value关键字设置sex的属性值
+            writable: false,
+            configurable: true,
+            enumerable: true
+        }
+    });
+
+    console.log(obj2);
+
+```
+
+上方代码中，我们通过第5行的sex给obj2设置了一个新的属性`sex`，但是要通过`value`来设置属性值（第6行）。
+
+设置完属性值后，这个属性值默认是不可修改的，要通过`writable`来设置。总而言是，这几个关键字的解释如下：
+
+- `value`：设置属性值。
+
+- `writable`：标识当前属性值是否可修改。如果不写的话，默认为false，不可修改。
+
+- `configurable`：标识当前属性是否可以被删除。默认为false，不可删除。
+
+- `enumerable`：标识当前属性是否能用 for in 枚举。 默认为false，不可。
+
+### 方法二
+
+> 这个方法有点难理解。
+
+
+```javascript
+	Object.defineProperties(object, descriptors)
+```
+
+**作用**：为指定对象定义扩展多个属性。
+
+代码举例：
+
+
+```javascript
+    var obj2 = {
+        firstName : 'smyh',
+        lastName : 'vae'
+    };
+    Object.defineProperties(obj2, {
+        fullName : {
+            get : function () {
+                return this.firstName + '-' + this.lastName
+            },
+            set : function (data) {  //监听扩展属性，当扩展属性发生变化的时候自动调用，自动调用后将变化的值作为实参注入到set函数
+                var names = data.split('-');
+                this.firstName = names[0];
+                this.lastName = names[1];
+            }
+        }
+    });
+    console.log(obj2.fullName);
+    obj2.firstName = 'tim';
+    obj2.lastName = 'duncan';
+    console.log(obj2.fullName);
+    obj2.fullName = 'kobe-bryant';
+    console.log(obj2.fullName);
+```
+
+- get ：用来获取当前属性值的回调函数
+
+- set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
+
+存取器属性：setter,getter一个用来存值，一个用来取值。
+
+## Object的扩展（二）
+
+obj对象本身就自带了两个方法。格式如下：
+
+
+```javascript
+get 属性名(){} 用来得到当前属性值的回调函数
+
+set 属性名(){} 用来监视当前属性值变化的回调函数
+
+```
+
+举例如下：
+
+
+
+```javascript
+    var obj = {
+        firstName : 'kobe',
+        lastName : 'bryant',
+        get fullName(){
+            return this.firstName + ' ' + this.lastName
+        },
+        set fullName(data){
+            var names = data.split(' ');
+            this.firstName = names[0];
+            this.lastName = names[1];
+        }
+    };
+    console.log(obj.fullName);
+    obj.fullName = 'curry stephen';
+    console.log(obj.fullName);
+```
+
+
+## 数组的扩展
+
+> 下面讲的这几个方法，都是给数组的实例用的。
+
+**方法1**：
+
+
+```javascript
+	Array.prototype.indexOf(value)
+```
+
+作用：获取值在数组中的第一个下标。
+
+**方法2**：
+
+
+```javascript
+	Array.prototype.lastIndexOf(value)
+```
+
+作用：获取值在数组中的最后一个下标。
+
+举例：
+
+```javascript
+    var arr = [1, 3, 6, 2, 5, 6];
+    console.log(arr.indexOf(6));//2
+    console.log(arr.lastIndexOf(6));//5
+```
+
+**方法3**：遍历数组
+
+
+```javascript
+	Array.prototype.forEach(function(item, index){})
+```
+
+举例：
+
+```javascript
+    var arr = [1, 3, 6, 2, 5, 6];
+
+    arr.forEach(function (item, index) {
+        console.log(item, index);
+    });
+
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180402_0929.png)
+
+**方法4**：
+
+```javascript
+	Array.prototype.map(function(item, index){})
+```
+
+作用：遍历数组返回一个新的数组，返回的是**加工之后**的新数组。
+
+比如说，有一个已知的数组arr1，我要求让arr1中的每个素加10，这里就可以用到map方法。举例：
+
+```javascript
+    var arr1 = [1, 3, 6, 2, 5, 6];
+
+    var arr2 = arr1.map(function (item, index) {
+        return item + 10;  //让arr1中的每个元素加10
+
+    })
+    console.log(arr2);
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180402_0938.png)
+
+**方法5**：
+
+
+```javascript
+	Array.prototype.filter(function(item, index){})
+```
+
+
+作用：遍历过滤出一个新的子数组，返回条件为true的值。
+
+举例：让找出数组arr1中大于4的元素，返回一个新的数组。代码如下：
+
+
+```javascript
+    var arr1 = [1, 3, 6, 2, 5, 6];
+
+    var arr2 = arr1.filter(function (item, index) {
+        return item > 4; //将arr1中大于4的元素返回
+    })
+    console.log(arr2);
+
+```
+
+
+打印结果：
+
+![](http://img.smyhvae.com/20180402_0951.png)
+
+## 函数function的扩展：bind()
+
+> ES5中新增了`bind()`函数来改变this的指向。
+
+
+```javascript
+	Function.prototype.bind(obj)
+```
+
+作用：将函数内的this绑定为obj, 并将函数返回。
+
+**面试题**: call()、apply()和bind()的区别：
+
+- 都能改变this的指向
+
+- call()/apply()是**立即调用函数**
+
+- bind()：绑定完this后，不会立即调用当前函数，而是**将函数返回**，因此后面还需要再加`()`才能调用。
+
+PS：bind()传参的方式和call()一样。
+
+**分析**：
+
+为什么ES5中要加入bind()方法来改变this的指向呢？因为bind()不会立即调用当前函数。
+
+bind()通常使用在回调函数中，因为回调函数并不会立即调用。如果你希望在回调函数中改变this，不妨使用bind()。
+

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

@@ -1,2 +1,342 @@
+
+
+## 列表功能举例
+
+### 步骤 1：列表功能
+
+代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <style>
+        .table {
+            width: 800px;
+            margin: 20px auto;
+            border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/
+        }
+
+        .table th {
+            background: #0094ff;
+            color: white;
+            font-size: 16px;
+            border: 1px solid black;
+            padding: 5px;
+
+        }
+
+        .table tr td {
+            text-align: center;
+            font-size: 16px;
+            padding: 5px;
+            border: 1px solid black;
+        }
+    </style>
+
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+<div id="app">
+
+    <table class="table">
+        <th>编号</th>
+        <th>名称</th>
+        <th>创建时间</th>
+        <th>操作</th>
+        <tr v-for="item in list">
+            <td>{{item.id}}</td>
+            <td>{{item.name}}</td>
+            <td>{{item.ctime}}</td>
+            <td><a href="#">删除</a></td>
+        </tr>
+    </table>
+</div>
+
+</body>
+
+<script>
+    var vm = new Vue({
+        el: '#app',
+        data: {
+            list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}]
+        }
+    })
+
+</script>
+
+</html>
+```
+
+**代码分析**：数据是存放在data的list中的，将data中的数据通过`v-for`遍历给表格。
+
+
+上方代码运行的效果：
+
+20180401_1517.png
+
+
+### 步骤 2：无数据时，增加提示
+
+如果list中没有数据，那么表格中就会只显示表头`<th>`，这样显然不太好看。
+
+为此，我们需要增加一个`v-if`判断：当数据为空时，显示提示。如下：
+
+```html
+			<tr v-show="list.length == 0">
+				<td colspan="4">列表无数据</td>
+			</tr>
+```
+
+代码解释：`colspan="4"`指的是让当前这个`<td>`横跨4个单元格的位置。如下：
+
+20180401_1535.png
+
+### 步骤 3：item的添加
+
+具体实现步骤如下：
+
+（1）用户填写的数据单独存放在data属性里，并采用`v-module`进行双向绑定。
+
+（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。
+
+（3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。
+
+
+
+代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <style>
+        .table {
+            width: 800px;
+            margin: 20px auto;
+            border-collapse: collapse; /*这一行，不能少：表格的两边框合并为一条*/
+        }
+
+        .table th {
+            background: #0094ff;
+            color: white;
+            font-size: 16px;
+            border: 1px solid black;
+            padding: 5px;
+        }
+
+        .table tr td {
+            text-align: center;
+            font-size: 16px;
+            padding: 5px;
+            border: 1px solid black;
+        }
+
+        .form {
+            width: 800px;
+            margin: 20px auto;
+        }
+
+        .form button {
+            margin-left: 10px;
+        }
+    </style>
+
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+<div id="app">
+
+    <div class="form">
+
+        编号：<input type="text" v-model="formData.id">
+        名称：<input type="text" v-model="formData.name">
+
+        <button v-on:click="addData">添加</button>
+    </div>
+
+    <table class="table">
+        <th>编号</th>
+        <th>名称</th>
+        <th>创建时间</th>
+        <th>操作</th>
+        <tr v-show="list.length == 0">
+            <td colspan="4">列表无数据</td>
+        </tr>
+        <tr v-for="item in list">
+            <td>{{item.id}}</td>
+            <td>{{item.name}}</td>
+            <td>{{item.ctime}}</td>
+            <td><a href="#">删除</a></td>
+        </tr>
+    </table>
+</div>
+
+</body>
+
+<script>
+    var vm = new Vue({
+        el: '#app',
+        data: {
+            list: [{id: 1, name: '奔驰', ctime: new Date}, {id: 2, name: '大众', ctime: new Date}],
+            //用户添加的数据
+            formData: {
+                id: 0,
+                name: ""
+            }
+        },
+
+        methods: {
+            addData: function () {
+                //将数据追加到list中
+                var p = {id: this.formData.id, name: this.formData.name, ctime: new Date()};
+                this.list.push(p);
+
+                //清空页面上的文本框中的数据
+                this.formData.id = 0;
+                this.formData.name = '';
+            }
+        }
+    });
+
+</script>
+
+</html>
+
+```
+
+
+### 步骤 4：item的删除
+
+html部分：
+
+```html
+            <!--绑定delete事件，根据括号里的参数进行删除-->
+            <td><a href="#" v-on:click="delData(item.id)">删除</a></td>
+```
+
+
+js部分：
+
+```javascript
+            delData: function (id) {
+                // 0 提醒用户是否要删除数据
+                if (!confirm('是否要删除数据?')) {
+                    //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
+                    return;
+                }
+
+                // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
+                var index = this.list.findIndex(function (item) {
+                    return item.id == id
+                });
+
+                // 2.0 调用方法：list.splice(待删除的索引, 删除的元素个数)
+                this.list.splice(index, 1);
+            }
+```
+
+
+代码解释：`find()`和`findIndex()`是ES6中为数组新增的函数。详细解释如下：
+
+```javascript
+    // 根据id得到下标
+
+    // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
+    var index = this.list.findIndex(function(item){
+    //根据item中的id属性来判断这个item是否是上面id中对应的数据，
+    //如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
+    return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
+    });
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+