From 150b066daa48e76ebb79c2a2f0dfc33338d0e46c Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 2 Apr 2018 10:21:27 +0800 Subject: [PATCH] =?UTF-8?q?add=20file=EF=BC=9AES5=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=89=A9=E5=B1=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-html/02-html标签图文详解（二）.md | 2 +- .../01-JavaScript语法基础：JS简介&变量.md | 6 +- .../07-对象的创建、构造函数和原型.md | 5 - 03-JavaScript基础/09-内置对象.md | 3 +- .../07-call、apply、bind的区别.md | 13 +- .../严格模式.md => 10-ES6/01-ES5的严格模式.md | 79 +++- 10-ES6/02-ES5中的一些扩展.md | 297 +++++++++++++++ ...和常用语法.md => 03-ES6的介绍和常用语法.md} | 0 ...2-ES6的常用语法.md => 04-ES6的常用语法.md} | 0 21-Vue基础/02-Vue的举例：列表功能.md | 340 ++++++++++++++++++ 10 files changed, 714 insertions(+), 31 deletions(-) rename 03-JavaScript进阶/严格模式.md => 10-ES6/01-ES5的严格模式.md (62%) create mode 100644 10-ES6/02-ES5中的一些扩展.md rename 10-ES6/{01-ES6的介绍和常用语法.md => 03-ES6的介绍和常用语法.md} (100%) rename 10-ES6/{02-ES6的常用语法.md => 04-ES6的常用语法.md} (100%) diff --git a/01-html/02-html标签图文详解（二）.md b/01-html/02-html标签图文详解（二）.md index 99d5314..b33892e 100644 --- a/01-html/02-html标签图文详解（二）.md +++ b/01-html/02-html标签图文详解（二）.md @@ -339,7 +339,7 @@ dt、dd都是容器级标签，想放什么都可以。所以，现在就应该 **``的属性：** - `border`：边框。像素为单位。 - - `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并 + - `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条） - `width`：宽度。像素为单位。 - `height`：高度。像素为单位。 - `bordercolor`：表格的边框颜色。 diff --git a/03-JavaScript基础/01-JavaScript语法基础：JS简介&变量.md b/03-JavaScript基础/01-JavaScript语法基础：JS简介&变量.md index bf511a3..77069ff 100644 --- a/03-JavaScript基础/01-JavaScript语法基础：JS简介&变量.md +++ b/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都是机械重复劳动。 diff --git a/03-JavaScript基础/07-对象的创建、构造函数和原型.md b/03-JavaScript基础/07-对象的创建、构造函数和原型.md index 524f208..a8b0c20 100644 --- a/03-JavaScript基础/07-对象的创建、构造函数和原型.md +++ b/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：** diff --git a/03-JavaScript基础/09-内置对象.md b/03-JavaScript基础/09-内置对象.md index 7628b06..9b942c3 100644 --- a/03-JavaScript基础/09-内置对象.md +++ b/03-JavaScript基础/09-内置对象.md @@ -37,8 +37,7 @@ 以上四种写法的打印结果是： -20180202_1040.png - +![](http://img.smyhvae.com/20180202_1040.png) ### Date对象的方法：获取日期和时间 diff --git a/03-JavaScript进阶/07-call、apply、bind的区别.md b/03-JavaScript进阶/07-call、apply、bind的区别.md index fa31908..7417d5b 100644 --- a/03-JavaScript进阶/07-call、apply、bind的区别.md +++ b/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()一样。 -- 参考链接： diff --git a/03-JavaScript进阶/严格模式.md b/10-ES6/01-ES5的严格模式.md similarity index 62% rename from 03-JavaScript进阶/严格模式.md rename to 10-ES6/01-ES5的严格模式.md index 81d7b4d..b781fb5 100644 --- a/03-JavaScript进阶/严格模式.md +++ b/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、禁止使用with语句 - -因为with语句无法在编译时就确定，属性到底归属哪个对象。 - - - -### 3、创设eval作用域 - - -### 4、禁止this关键字指向全局对象： +### 2、禁止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) + + + diff --git a/10-ES6/02-ES5中的一些扩展.md b/10-ES6/02-ES5中的一些扩展.md new file mode 100644 index 0000000..49c3019 --- /dev/null +++ b/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()。 + diff --git a/10-ES6/01-ES6的介绍和常用语法.md b/10-ES6/03-ES6的介绍和常用语法.md similarity index 100% rename from 10-ES6/01-ES6的介绍和常用语法.md rename to 10-ES6/03-ES6的介绍和常用语法.md diff --git a/10-ES6/02-ES6的常用语法.md b/10-ES6/04-ES6的常用语法.md similarity index 100% rename from 10-ES6/02-ES6的常用语法.md rename to 10-ES6/04-ES6的常用语法.md diff --git a/21-Vue基础/02-Vue的举例：列表功能.md b/21-Vue基础/02-Vue的举例：列表功能.md index 139597f..a7d233d 100644 --- a/21-Vue基础/02-Vue的举例：列表功能.md +++ b/21-Vue基础/02-Vue的举例：列表功能.md @@ -1,2 +1,342 @@ + + +## 列表功能举例 + +### 步骤 1：列表功能 + +代码如下： + +```html + + + + + + + + Document + + + + + + + +
+ +
+ + + + + + + + + + +
编号名称创建时间操作
{{item.id}}{{item.name}}{{item.ctime}}删除
+ + + + + + + +``` + +**代码分析**：数据是存放在data的list中的，将data中的数据通过`v-for`遍历给表格。 + + +上方代码运行的效果： + +20180401_1517.png + + +### 步骤 2：无数据时，增加提示 + +如果list中没有数据，那么表格中就会只显示表头``，这样显然不太好看。 + +为此，我们需要增加一个`v-if`判断：当数据为空时，显示提示。如下： + +```html + + 列表无数据 + +``` + +代码解释：`colspan="4"`指的是让当前这个``横跨4个单元格的位置。如下： + +20180401_1535.png + +### 步骤 3：item的添加 + +具体实现步骤如下： + +（1）用户填写的数据单独存放在data属性里，并采用`v-module`进行双向绑定。 + +（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。 + +（3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。 + + + +代码如下： + +```html + + + + + + + + Document + + + + + + + +
+ +
+ + 编号： + 名称： + + +
+ + + + + + + + + + + + + + + +
编号名称创建时间操作
列表无数据
{{item.id}}{{item.name}}{{item.ctime}}删除
+
+ + + + + + + +``` + + +### 步骤 4：item的删除 + +html部分： + +```html + + 删除 +``` + + +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返回到外面接受 + }); +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +