diff --git a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md index 2759503..098dbff 100644 --- a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md +++ b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md @@ -170,6 +170,15 @@ obj:王一,王二,王三 +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) + + diff --git a/03-JavaScript基础/16-数组的常见方法.md b/03-JavaScript基础/16-数组的常见方法.md new file mode 100644 index 0000000..50f9d6e --- /dev/null +++ b/03-JavaScript基础/16-数组的常见方法.md @@ -0,0 +1,399 @@ + +## 前言 + +数组的常见方法如下： + +| 方法 | 描述 | 备注 | +|:-------------|:-------------|:-------------| +| slice() | 从数组中**提取**指定的一个或多个元素，返回结果为**新的数组**| 不会改变原数组| +| splice() | 从数组中**删除**指定的一个或多个元素，返回结果为**新的数组**| 会改变原数组| +| concat() | 连接两个或多个数组，返回结果为**新的数组**| 不会改变原数组| +| join() | 将数组转换为字符串，返回结果为**转换后的字符串**| 不会改变原数组| + + +## 数组的常见方法 + +### slice() + +`slice()`：从数组中提取指定的一个或者多个元素，返回结果为**新的数组**（不会改变原来的数组）。 + +备注：该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。 + +语法： + +```javascript + 新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); //注意：包含开始索引，不包含结束索引 +``` + +举例： + +```javascript + var arr = ["a", "b", "c", "d", "e", "f"]; + + var result1 = arr.slice(2); //从第二个值开始提取 + var result2 = arr.slice(-2); //提取最后两个元素 + var result3 = arr.slice(2, 4); //提取从第二个到第四个之间的值（不包括第四个值） + var result4 = arr.slice(4, 2); //空 + + console.log("arr:" + JSON.stringify(arr)); + console.log("result1:" + JSON.stringify(result1)); + console.log("result2:" + JSON.stringify(result2)); + console.log("result3:" + JSON.stringify(result3)); + console.log("result4:" + JSON.stringify(result4)); + +``` + +打印结果： + +```javascript + arr:["a","b","c","d","e","f"] + result1:["c","d","e","f"] + result2:["e","f"] + result3:["c","d"] + result4:[] +``` + +### splice() + +`splice()`：从数组中**删除**指定的一个或多个元素，返回结果为**新的数组**（会改变原来的数组，会将指定元素从原数组中删除）。 + +语法： + +```javascript + 新数组 = 原数组.splice(起始索引index, 需要删除的个数, 第三个参数, 第四个参数...); +``` + +上方语法中，第三个及之后的参数，表示：向原数组中添加新的元素，这些元素将会自动插入到开始位置索引的前面。 + +举例1： + +```javascript + var arr1 = ["a", "b", "c", "d", "e", "f"]; + var result1 = arr1.splice(1); //从第index为1的位置开始，删除元素 + + console.log("arr1：" + JSON.stringify(arr1)); + console.log("result1：" + JSON.stringify(result1)); + + console.log("-----------------------"); + + var arr2 = ["a", "b", "c", "d", "e", "f"]; + var result2 = arr2.splice(-2); //从第一个位置开始，删除元素 + + console.log("arr2：" + JSON.stringify(arr2)); + console.log("result2：" + JSON.stringify(result2)); + + console.log("-----------------------"); + + var arr3 = ["a", "b", "c", "d", "e", "f"]; + var result3 = arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素 + + console.log("arr3：" + JSON.stringify(arr3)); + console.log("result3：" + JSON.stringify(result3)); + + console.log("-----------------------"); +``` + +打印结果： + +```javascript +arr1：["a"] +result1：["b","c","d","e","f"] +----------------------- + +arr2：["a","b","c","d"] +result2：["e","f"] +----------------------- + +arr3：["a","e","f"] +result3：["b","c","d"] +----------------------- +``` + +举例2：（我们来看看**第三个参数**的用法） + +```javascript +var arr4 = ["a", "b", "c", "d", "e", "f"]; + +//从第index为1的位置开始删除元素,一共删除三个元素。并且在 index=1 的前面追加两个元素 +var result4 = arr4.splice(1, 3, "千古壹号", "vae"); + +console.log("arr4：" + JSON.stringify(arr4)); +console.log("result4：" + JSON.stringify(result4)); +``` + +打印结果： + +```javascript +arr4：["a","千古壹号","vae","e","f"] +result4：["b","c","d"] +``` + +### concat() + +`concat()`：连接两个或多个数组，返回结果为**新的数组**。（不会改变原数组） + +语法： + +```javascript + 新数组 = 数组1.concat(数组2, 数组3 ...); + +``` + +举例： + +```javascript + var arr1 = [1, 2, 3]; + var arr2 = ["a", "b", "c"]; + var arr3 = ["千古壹号", "vae"]; + + var result1 = arr1.concat(arr2); + + var result2 = arr2.concat(arr1, arr3); + + console.log("arr1 =" + JSON.stringify(arr1)); + console.log("arr2 =" + JSON.stringify(arr2)); + console.log("arr3 =" + JSON.stringify(arr3)); + + console.log("result1 =" + JSON.stringify(result1)); + console.log("result2 =" + JSON.stringify(result2)); +``` + +打印结果： + +```javascript +arr1 =[1,2,3] +arr2 =["a","b","c"] +arr3 =["千古壹号","vae"] + +result1 =[1,2,3,"a","b","c"] +result2 =["a","b","c",1,2,3,"千古壹号","vae"] +``` + +从打印结果中可以看到，原数组并没有被修改。 + + +### join() + +`join()`：将数组转换为字符串，返回结果为**转换后的字符串**（不会改变原来的数组）。 + +补充：`join()`方法可以指定一个**字符串**作为参数，这个字符串将会成为数组中元素的**连接符**；如果不指定连接符，则默认使用 `,` 作为连接符，此时和 `toString()的效果是一致的`。 + +语法： + +```javascript + 新的字符串 = 原数组.join(参数); // 参数选填 +``` + +代码举例： + +```javascript + var arr = ["a", "b", "c"]; + + var result1 = arr.join(); // 这里没有指定连接符，所以默认使用 , 作为连接符 + + var result2 = arr.join("-"); // 使用指定的字符串作为连接符 + + console.log(typeof arr); // 打印结果：object + console.log(typeof result1); // 打印结果：string + + console.log("arr =" + JSON.stringify(arr)); + console.log("result1 =" + JSON.stringify(result1)); + console.log("result2 =" + JSON.stringify(result2)); + +``` + +上方代码中，最后三行的打印结果是： + +```javascript +arr =["a","b","c"] +result1 =a,b,c +result2 =a-b-c +``` + +### reverse() + +`reverse()`：反转数组，返回结果为**反转后的数组**（会改变原来的数组）。 + +语法： + +``` + 反转后的数组 = 数组.reverse(); +``` + +举例： + +```javascript + var arr = ["a", "b", "c", "d", "e", "f"]; + + var result = arr.reverse(); // 将数组 arr 进行反转 + + console.log("arr =" + JSON.stringify(arr)); + console.log("result =" + JSON.stringify(result)); +``` + +打印结果： + +```javascript +arr =["f","e","d","c","b","a"] +result =["f","e","d","c","b","a"] +``` + +从打印结果可以看出，原来的数组已经被改变了。 + +## sort()方法 + +> sort()方法要好好理解。所以，我们单独用一大段来讲。 + +`sort()`：对数组的元素进行从小到大来排序（会改变原来的数组）。 + +### sort()方法举例：无参时 + +如果在使用 sort() 方法时不带参，则默认按照**Unicode编码**，从小到大进行排序。 + +**举例1**：（当数组中的元素为字符串时） + +```javascript + var arr1 = ["e", "b", "d", "a", "f", "c"]; + + var result = arr1.sort(); // 将数组 arr1 进行排序 + + console.log("arr1 =" + JSON.stringify(arr1)); + console.log("result =" + JSON.stringify(result)); +``` + +打印结果： + +```javascript + arr1 =["a","b","c","d","e","f"] + result =["a","b","c","d","e","f"] +``` + +**举例2**：（当数组中的元素为数字时） + +```javascript + var arr2 = [5, 2, 11, 3, 4, 1]; + + var result = arr2s.sort(); // 将数组 arr2 进行排序 + + console.log("arr2 =" + JSON.stringify(arr2)); + console.log("result =" + JSON.stringify(result)); +``` + +打印结果： + +```javascript + arr2 =[1,11,2,3,4,5] + result =[1,11,2,3,4,5] +``` + +上方的打印结果中，你会发现，使用 sort() 排序后，数字`11`竟然在数字`2`的前面。这是为啥呢？因为上面讲到了，`sort()`方法是按照**Unicode编码**进行排序的。 + +那如果我想让 arr2 里的数字，完全按照从小到大排序，怎么操作呢？继续往下看。 + +### sort()方法举例：带参时 + +如果在 sort()方法中带参，我们就可以**自定义**排序规则。具体做法如下： + +我们可以在sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数 + +浏览器根据回调函数的返回值来决定元素的排序：（重要） + +- 如果返回一个大于0的值，则元素会交换位置 + +- 如果返回一个小于0的值，则元素位置不变 + +- 如果返回一个0，则认为两个元素相等，则不交换位置 + +**代码举例**： + +```javascript + var arr3 = [5, 2, 11, 3, 4, 1]; + + // 自定义排序规则 + var result = arr3.sort(function(a, b) { + if (a > b) { // 如果 a 大于 b，则交换 a 和 b 的位置 + return 1; + } else if (a < b) { // 如果 a 小于 b，则位置不变 + return -1; + } else { // 如果 a 等于 b，则位置不变 + return 0; + } + }); + + console.log("arr3 =" + JSON.stringify(arr3)); + console.log("result =" + JSON.stringify(result)); + ``` + +打印结果： + +```javascript + arr3 =[1,2,3,4,5,11] + result =[1,2,3,4,5,11] +``` + +上方代码的写法太啰嗦了，其实也可以简化为如下写法： + +**代码优化**：（冒泡排序） + +```javascript + var arr3 = [5, 2, 11, 3, 4, 1]; + + // 自定义排序规则 + var result = arr3.sort(function(a, b) { + return a - b; // 升序排列 + // return b - a; // 降序排列 + }); + + console.log("arr3 =" + JSON.stringify(arr3)); + console.log("result =" + JSON.stringify(result)); +``` + +打印结果： + +```javascript + arr3 =[1,2,3,4,5,11] + result =[1,2,3,4,5,11] +``` + + +## 练习 + +### splice()练习：数组去重 + +代码实现： + +```javascript + //创建一个数组 + var arr = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5]; + + //去除数组中重复的数字 + //获取数组中的每一个元素 + for (var i = 0; i < arr.length; i++) { + //console.log(arr[i]); + /*获取当前元素后的所有元素*/ + for (var j = i + 1; j < arr.length; j++) { + //console.log("---->"+arr[j]); + //判断两个元素的值是否相等 + if (arr[i] == arr[j]) { + //如果相等则证明出现了重复的元素，则删除j对应的元素 + arr.splice(j, 1); + //当删除了当前j所在的元素以后，后边的元素会自动补位 + //此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素 + //使j自减 + j--; + } + } + } + + console.log(arr); +``` + + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) + diff --git a/03-JavaScript基础/17-数组的其他方法.md b/03-JavaScript基础/17-数组的其他方法.md new file mode 100644 index 0000000..0617cc1 --- /dev/null +++ b/03-JavaScript基础/17-数组的其他方法.md @@ -0,0 +1,389 @@ + + +## 数组Array的常用方法 + +Array有各种api接口（Application Programming Interface，应用程序编程接口），下面分别介绍。 + +（1）判断是否为数组：instanceof + +```javascript + 布尔类型值 = A instanceof B; +``` + +解释：判断A是否为B类型（instanceof 是一个关键字）。 + +在数组里，这种方法已经用的不多了，因为有下面这种方法。 + +（2）判断是否为数组：isArray() + +```javascript + 布尔类型值 = Array.isArray(被检测的值) ; +``` + +PS：属于HTML5中新增的方法。 + +（3）转换数组：toString() + +```javascript + 字符串 = 数组.toString(); +``` + +解释：把数组转换成字符串，每一项用`,`分割。 + +（4）返回数组本身：valueOf() + +```javascript + 数组本身 = 数组.valueOf(); +``` + +这个方法的意义不大。因为我们指直接写数组对象的名字，就已经是数组本身了。 + + +## 伪数组：arguments + +arguments代表的是实参。有个讲究的地方是：arguments**只在函数中使用**。 + +（1）返回函数**实参**的个数：arguments.length + +举例： + +```javascript + fn(2,4); + fn(2,4,6); + fn(2,4,6,8); + + function fn(a,b) { + console.log(arguments); + console.log(fn.length); //获取形参的个数 + console.log(arguments.length); //获取实参的个数 + + console.log("----------------"); + } +``` + +打印结果： + +![](http://img.smyhvae.com/20180125_2140.png) + +（2）返回正在执行的函数：arguments.callee + +在使用函数**递归**调用时，推荐使用arguments.callee代替函数名本身。 + +（3）之所以说arguments是伪数组，是因为：**arguments可以修改元素，但不能改变数组的长短**。举例： + +```javascript + fn(2,4); + fn(2,4,6); + fn(2,4,6,8); + + function fn(a,b) { + arguments[0] = 99; //将实参的第一个数改为99 + arguments.push(8); //此方法不通过，因为无法增加元素 + } + +``` + + + +## 数组的一些其他方法 + +### 数组的indexOf() + +获取数据的索引：indexOf()、lastIndexOf() + +- indexOf()：从前往后索引 + +- lastIndexOf() ：从后往前索引 + +```javascript + 索引值 = 数组.indexOf/lastIndexOf(数组中的元素内容); +``` + + PS：如果没找到返回-1。 + + **举例**： + +```javascript + var arr = ["a","b","c","d","e","d","c"]; + + console.log(arr.indexOf("c")); //从前往后，找"c"在哪个位置 + console.log(arr.lastIndexOf("d")); //从前往后，找"d"在哪个位置 +``` + +打印结果： + +![](http://img.smyhvae.com/20180126_1125.png) + + +**举例**：判断某个值是否在数组中 + +``` +var arr = ["29926392220", "29965620629", 28003663436", "", "28818504366"]; + +var str = [ + {name:'smyh', id: "12334"}, + + {name:'vae', id: '28818504366'} +]; + +str.filter(item => { + console.log(arr.indexOf(item.id)); +}) + +``` + + +## 数组迭代方法 + +数组迭代方法包括：every()、filter()、forEach()、map()、some() + +PS：这几个方法**不会修改原数组**。 + +语法格式： + +``` +数组/boolean/无 = 数组.every/filter/forEach/map/some( + function(element,index,arr){ + 程序和返回值； +``` + +有了这几种方法，就可以替代一些for循环了。下面依次来介绍。 + +### every()方法 + +解释：对数组中每一项运行回调函数，如果都返回true，every就返回true；如果有一项返回false，则停止遍历，此方法返回false。 + +注意：every()方法的返回值是boolean值，参数是回调函数。 + +举例： + +```javascript + var arr1 = ["千古", "宿敌", "南山忆", "素颜"]; + var bool1 = arr1.every(function (element, index, array) { + if (element.length > 2) { + return false; + } + return true; + }); + console.log(bool1); //输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false + + var arr2 = ["千古", "宿敌", "南山", "素颜"]; + var bool2 = arr2.every(function (element, index, array) { + if (element.length > 2) { + return false; + } + return true; + }); + console.log(bool2); //输出结果：true。因为每个元素的长度都是两个字符。 +``` + +### some()方法 + +解释：对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true。 + +### filter()方法 + +解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。 + +```javascript + var arr1 = ["千古", "宿敌", "南山忆", "素颜"]; + + var arr2 = arr1.filter(function (element, index, array) { + if (element.length > 2) { //arr1中的元素，如果是长度超过2个字符的，我就把它放到arr2中去 + return true; + } + return false; + }); + console.log(arr1); + console.log(arr2); + +``` + +结果： + +![](http://img.smyhvae.com/20180126_1410.png) + + + +### map()方法 + +解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回值就是这个新的数组）。 + +举例： + +```javascript + var arr1 = ["千古", "宿敌", "南山忆", "素颜"]; + + var arr2 = arr1.map(function (element, index, array) { + return element + "vae"; //给arr1中所有的元素增加字符串"vae"，放到arr2中。 + }); + + console.log(arr1); + console.log(arr2); +``` + +结果： + +![](http://img.smyhvae.com/20180126_1425.png) + +## 清空数组 + +清空数组，有以下几种方式： + +```javascript + var array = [1,2,3,4,5,6]; + + array.splice(0); //方式1：删除数组中所有项目 + array.length = 0; //方式2：length属性可以赋值，在其它语言中length是只读 + array = []; //方式3：推荐 +``` + +## 数组练习 + +### 练习1 + +**问题**：将一个字符串数组输出为`|`分割的形式，比如“千古|宿敌|素颜”。使用两种方式实现。 + +答案： + +方式1：（不推荐） + +```javascript + var arr = ["千古","宿敌","素颜"]; + var str = arr[0]; + var separator = "|"; + for(var i = 1;i< arr.length;i++) { + str += separator+arr[i]; //从第1个数组元素开始，每个元素前面加上符号"|" + } + + console.log(str); +``` + +输出结果： + +![](http://img.smyhvae.com/20180126_1336.png) + +不推荐这种方式，因为：由于字符串的不变性，str拼接过多的话，容易导致内存溢出（很多个str都堆放在栈里）。 + +方式2：（推荐。通过array数组自带的api来实现） + +```javascript + var arr = ["千古","宿敌","素颜"]; + + console.log(arr.join("|")); +``` + +结果： + +![](http://img.smyhvae.com/20180126_1339.png) + +### 练习2 + +题目：将一个字符串数组的元素的顺序进行反转，使用两种种方式实现。提示：第i个和第length-i-1个进行交换。 + +答案： + +方式1： + +```javascript + function reverse(array) { + var newArr = []; + for (var i = array.length - 1; i >= 0; i--) { + newArr[newArr.length] = array[i]; + } + return newArr; + } +``` + +方式2：（算法里比较常见的方式） + +```javascript + function reverse(array){ + for(var i=0;i**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) diff --git a/03-JavaScript进阶/07-call、apply、bind的区别.md b/04-JavaScript进阶/call、apply、bind的区别.md similarity index 100% rename from 03-JavaScript进阶/07-call、apply、bind的区别.md rename to 04-JavaScript进阶/call、apply、bind的区别.md diff --git a/03-JavaScript进阶/this.md b/04-JavaScript进阶/this.md similarity index 100% rename from 03-JavaScript进阶/this.md rename to 04-JavaScript进阶/this.md diff --git a/03-JavaScript进阶/06-作用域和闭包.md b/04-JavaScript进阶/作用域和闭包.md similarity index 100% rename from 03-JavaScript进阶/06-作用域和闭包.md rename to 04-JavaScript进阶/作用域和闭包.md diff --git a/03-JavaScript进阶/创建对象和继承.md b/04-JavaScript进阶/创建对象和继承.md similarity index 100% rename from 03-JavaScript进阶/创建对象和继承.md rename to 04-JavaScript进阶/创建对象和继承.md diff --git a/03-JavaScript进阶/浅拷贝和深拷贝.md b/04-JavaScript进阶/浅拷贝和深拷贝.md similarity index 100% rename from 03-JavaScript进阶/浅拷贝和深拷贝.md rename to 04-JavaScript进阶/浅拷贝和深拷贝.md diff --git a/04-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md b/05-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md similarity index 100% rename from 04-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md rename to 05-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md diff --git a/04-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md b/05-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md similarity index 100% rename from 04-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md rename to 05-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md diff --git a/04-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md b/05-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md similarity index 100% rename from 04-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md rename to 05-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md diff --git a/04-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md b/05-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md similarity index 100% rename from 04-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md rename to 05-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md diff --git a/04-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md b/05-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md similarity index 100% rename from 04-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md rename to 05-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md diff --git a/04-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md b/05-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md similarity index 100% rename from 04-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md rename to 05-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md diff --git a/04-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md b/05-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md similarity index 100% rename from 04-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md rename to 05-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md diff --git a/04-前端基本功：CSS和DOM练习/08-JavaScript基础：定时器.md b/05-前端基本功：CSS和DOM练习/08-JavaScript基础：定时器.md similarity index 100% rename from 04-前端基本功：CSS和DOM练习/08-JavaScript基础：定时器.md rename to 05-前端基本功：CSS和DOM练习/08-JavaScript基础：定时器.md diff --git a/04-前端基本功：JavaScript特效/01-offset家族和匀速动画(含轮播图的实现).md b/05-前端基本功：JavaScript特效/01-offset家族和匀速动画(含轮播图的实现).md similarity index 100% rename from 04-前端基本功：JavaScript特效/01-offset家族和匀速动画(含轮播图的实现).md rename to 05-前端基本功：JavaScript特效/01-offset家族和匀速动画(含轮播图的实现).md diff --git a/04-前端基本功：JavaScript特效/02-scroll家族和缓动动画.md b/05-前端基本功：JavaScript特效/02-scroll家族和缓动动画.md similarity index 100% rename from 04-前端基本功：JavaScript特效/02-scroll家族和缓动动画.md rename to 05-前端基本功：JavaScript特效/02-scroll家族和缓动动画.md diff --git a/04-前端基本功：JavaScript特效/03-client家族(可视区).md b/05-前端基本功：JavaScript特效/03-client家族(可视区).md similarity index 100% rename from 04-前端基本功：JavaScript特效/03-client家族(可视区).md rename to 05-前端基本功：JavaScript特效/03-client家族(可视区).md diff --git a/04-前端基本功：JavaScript特效/04-JS的小知识.md b/05-前端基本功：JavaScript特效/04-JS的小知识.md similarity index 100% rename from 04-前端基本功：JavaScript特效/04-JS的小知识.md rename to 05-前端基本功：JavaScript特效/04-JS的小知识.md diff --git a/05-jQuery/01-jQuery的介绍和选择器.md b/06-jQuery/01-jQuery的介绍和选择器.md similarity index 100% rename from 05-jQuery/01-jQuery的介绍和选择器.md rename to 06-jQuery/01-jQuery的介绍和选择器.md diff --git a/05-jQuery/02-jQuery动画详解.md b/06-jQuery/02-jQuery动画详解.md similarity index 100% rename from 05-jQuery/02-jQuery动画详解.md rename to 06-jQuery/02-jQuery动画详解.md diff --git a/05-jQuery/03-jQuery操作DOM.md b/06-jQuery/03-jQuery操作DOM.md similarity index 100% rename from 05-jQuery/03-jQuery操作DOM.md rename to 06-jQuery/03-jQuery操作DOM.md diff --git a/05-jQuery/04-jQuery的事件机制和其他知识.md b/06-jQuery/04-jQuery的事件机制和其他知识.md similarity index 100% rename from 05-jQuery/04-jQuery的事件机制和其他知识.md rename to 06-jQuery/04-jQuery的事件机制和其他知识.md diff --git a/05-jQuery/11-Zepto入门.md b/06-jQuery/11-Zepto入门.md similarity index 100% rename from 05-jQuery/11-Zepto入门.md rename to 06-jQuery/11-Zepto入门.md diff --git a/06-HTML5和CSS3/01-HTML5详解.md b/07-HTML5和CSS3/01-HTML5详解.md similarity index 100% rename from 06-HTML5和CSS3/01-HTML5详解.md rename to 07-HTML5和CSS3/01-HTML5详解.md diff --git a/06-HTML5和CSS3/03-CSS3选择器详解.md b/07-HTML5和CSS3/03-CSS3选择器详解.md similarity index 100% rename from 06-HTML5和CSS3/03-CSS3选择器详解.md rename to 07-HTML5和CSS3/03-CSS3选择器详解.md diff --git a/06-HTML5和CSS3/04-CSS3属性详解（一）.md b/07-HTML5和CSS3/04-CSS3属性详解（一）.md similarity index 100% rename from 06-HTML5和CSS3/04-CSS3属性详解（一）.md rename to 07-HTML5和CSS3/04-CSS3属性详解（一）.md diff --git a/06-HTML5和CSS3/05-CSS3属性详解：动画详解.md b/07-HTML5和CSS3/05-CSS3属性详解：动画详解.md similarity index 100% rename from 06-HTML5和CSS3/05-CSS3属性详解：动画详解.md rename to 07-HTML5和CSS3/05-CSS3属性详解：动画详解.md diff --git a/06-HTML5和CSS3/06-CSS3属性详解：flex布局.md b/07-HTML5和CSS3/06-CSS3属性详解：flex布局.md similarity index 100% rename from 06-HTML5和CSS3/06-CSS3属性详解：flex布局.md rename to 07-HTML5和CSS3/06-CSS3属性详解：flex布局.md diff --git a/06-HTML5和CSS3/07-CSS3属性详解：Web字体.md b/07-HTML5和CSS3/07-CSS3属性详解：Web字体.md similarity index 100% rename from 06-HTML5和CSS3/07-CSS3属性详解：Web字体.md rename to 07-HTML5和CSS3/07-CSS3属性详解：Web字体.md diff --git a/06-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md b/07-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md similarity index 100% rename from 06-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md rename to 07-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md diff --git a/06-HTML5和CSS3/09-HTML5详解（二）.md b/07-HTML5和CSS3/09-HTML5详解（二）.md similarity index 100% rename from 06-HTML5和CSS3/09-HTML5详解（二）.md rename to 07-HTML5和CSS3/09-HTML5详解（二）.md diff --git a/06-HTML5和CSS3/10-HTML5详解（三）.md b/07-HTML5和CSS3/10-HTML5详解（三）.md similarity index 100% rename from 06-HTML5和CSS3/10-HTML5详解（三）.md rename to 07-HTML5和CSS3/10-HTML5详解（三）.md diff --git a/06-HTML5和CSS3/CSS3的常见边框汇总.md b/07-HTML5和CSS3/CSS3的常见边框汇总.md similarity index 100% rename from 06-HTML5和CSS3/CSS3的常见边框汇总.md rename to 07-HTML5和CSS3/CSS3的常见边框汇总.md diff --git a/07-移动web开发/01-Bootstrap入门.md b/08-移动web开发/01-Bootstrap入门.md similarity index 100% rename from 07-移动web开发/01-Bootstrap入门.md rename to 08-移动web开发/01-Bootstrap入门.md diff --git a/07-移动web开发/02-Bootstrap使用.md b/08-移动web开发/02-Bootstrap使用.md similarity index 100% rename from 07-移动web开发/02-Bootstrap使用.md rename to 08-移动web开发/02-Bootstrap使用.md diff --git a/07-移动web开发/03-Less详解.md b/08-移动web开发/03-Less详解.md similarity index 100% rename from 07-移动web开发/03-Less详解.md rename to 08-移动web开发/03-Less详解.md diff --git a/08-Ajax/01-服务器分类及PHP入门.md b/09-Ajax/01-服务器分类及PHP入门.md similarity index 100% rename from 08-Ajax/01-服务器分类及PHP入门.md rename to 09-Ajax/01-服务器分类及PHP入门.md diff --git a/08-Ajax/02-Ajax入门和发送http请求.md b/09-Ajax/02-Ajax入门和发送http请求.md similarity index 100% rename from 08-Ajax/02-Ajax入门和发送http请求.md rename to 09-Ajax/02-Ajax入门和发送http请求.md diff --git a/08-Ajax/03-函数封装：Ajax发送http请求（get&post）.md b/09-Ajax/03-函数封装：Ajax发送http请求（get&post）.md similarity index 100% rename from 08-Ajax/03-函数封装：Ajax发送http请求（get&post）.md rename to 09-Ajax/03-函数封装：Ajax发送http请求（get&post）.md diff --git a/08-Ajax/04-同源和跨域.md b/09-Ajax/04-同源和跨域.md similarity index 100% rename from 08-Ajax/04-同源和跨域.md rename to 09-Ajax/04-同源和跨域.md diff --git a/08-Ajax/05-模板引擎.md b/09-Ajax/05-模板引擎.md similarity index 100% rename from 08-Ajax/05-模板引擎.md rename to 09-Ajax/05-模板引擎.md diff --git a/08-Ajax/1.php b/09-Ajax/1.php similarity index 100% rename from 08-Ajax/1.php rename to 09-Ajax/1.php diff --git a/09-Node.js和模块化/00-事件驱动和非阻塞机制.md b/10-Node.js和模块化/00-事件驱动和非阻塞机制.md similarity index 100% rename from 09-Node.js和模块化/00-事件驱动和非阻塞机制.md rename to 10-Node.js和模块化/00-事件驱动和非阻塞机制.md diff --git a/09-Node.js和模块化/01-Node.js入门.md b/10-Node.js和模块化/01-Node.js入门.md similarity index 100% rename from 09-Node.js和模块化/01-Node.js入门.md rename to 10-Node.js和模块化/01-Node.js入门.md diff --git a/09-Node.js和模块化/02-JavaScript模块化01：CommonJS.md b/10-Node.js和模块化/02-JavaScript模块化01：CommonJS.md similarity index 100% rename from 09-Node.js和模块化/02-JavaScript模块化01：CommonJS.md rename to 10-Node.js和模块化/02-JavaScript模块化01：CommonJS.md diff --git a/09-Node.js和模块化/02-JavaScript模块化02：AMD.md b/10-Node.js和模块化/02-JavaScript模块化02：AMD.md similarity index 100% rename from 09-Node.js和模块化/02-JavaScript模块化02：AMD.md rename to 10-Node.js和模块化/02-JavaScript模块化02：AMD.md diff --git a/09-Node.js和模块化/02-JavaScript模块化03：CMD.md b/10-Node.js和模块化/02-JavaScript模块化03：CMD.md similarity index 100% rename from 09-Node.js和模块化/02-JavaScript模块化03：CMD.md rename to 10-Node.js和模块化/02-JavaScript模块化03：CMD.md diff --git a/09-Node.js和模块化/02-JavaScript模块化04：ES6.md b/10-Node.js和模块化/02-JavaScript模块化04：ES6.md similarity index 100% rename from 09-Node.js和模块化/02-JavaScript模块化04：ES6.md rename to 10-Node.js和模块化/02-JavaScript模块化04：ES6.md diff --git a/09-Node.js和模块化/CommonJS.md b/10-Node.js和模块化/CommonJS.md similarity index 100% rename from 09-Node.js和模块化/CommonJS.md rename to 10-Node.js和模块化/CommonJS.md diff --git a/09-Node.js和模块化/ES6.md b/10-Node.js和模块化/ES6.md similarity index 100% rename from 09-Node.js和模块化/ES6.md rename to 10-Node.js和模块化/ES6.md diff --git a/09-Node.js和模块化/Node.js代码举例.md b/10-Node.js和模块化/Node.js代码举例.md similarity index 100% rename from 09-Node.js和模块化/Node.js代码举例.md rename to 10-Node.js和模块化/Node.js代码举例.md diff --git a/09-Node.js和模块化/WebSocket.md b/10-Node.js和模块化/WebSocket.md similarity index 100% rename from 09-Node.js和模块化/WebSocket.md rename to 10-Node.js和模块化/WebSocket.md diff --git a/10-ES6/01-ES5中的严格模式.md b/11-ES6/01-ES5中的严格模式.md similarity index 100% rename from 10-ES6/01-ES5中的严格模式.md rename to 11-ES6/01-ES5中的严格模式.md diff --git a/10-ES6/02-ES5中的一些扩展.md b/11-ES6/02-ES5中的一些扩展.md similarity index 100% rename from 10-ES6/02-ES5中的一些扩展.md rename to 11-ES6/02-ES5中的一些扩展.md diff --git a/10-ES6/03-ES6的介绍和环境配置.md b/11-ES6/03-ES6的介绍和环境配置.md similarity index 100% rename from 10-ES6/03-ES6的介绍和环境配置.md rename to 11-ES6/03-ES6的介绍和环境配置.md diff --git a/10-ES6/04-ES6：变量、函数扩展.md b/11-ES6/04-ES6：变量、函数扩展.md similarity index 100% rename from 10-ES6/04-ES6：变量、函数扩展.md rename to 11-ES6/04-ES6：变量、函数扩展.md diff --git a/10-ES6/05-ES6：promise、async等.md b/11-ES6/05-ES6：promise、async等.md similarity index 100% rename from 10-ES6/05-ES6：promise、async等.md rename to 11-ES6/05-ES6：promise、async等.md diff --git a/10-ES6/06-ES6：字符串、数组、对象的扩展.md b/11-ES6/06-ES6：字符串、数组、对象的扩展.md similarity index 100% rename from 10-ES6/06-ES6：字符串、数组、对象的扩展.md rename to 11-ES6/06-ES6：字符串、数组、对象的扩展.md diff --git a/21-Vue基础/00-Vue的介绍和vue-cli.md b/12-Vue基础/00-Vue的介绍和vue-cli.md similarity index 100% rename from 21-Vue基础/00-Vue的介绍和vue-cli.md rename to 12-Vue基础/00-Vue的介绍和vue-cli.md diff --git a/21-Vue基础/01-01.Vue的系统指令.md b/12-Vue基础/01-01.Vue的系统指令.md similarity index 100% rename from 21-Vue基础/01-01.Vue的系统指令.md rename to 12-Vue基础/01-01.Vue的系统指令.md diff --git a/21-Vue基础/01-02.v-on的事件修饰符.md b/12-Vue基础/01-02.v-on的事件修饰符.md similarity index 100% rename from 21-Vue基础/01-02.v-on的事件修饰符.md rename to 12-Vue基础/01-02.v-on的事件修饰符.md diff --git a/21-Vue基础/01-03.Vue的系统指令(二).md b/12-Vue基础/01-03.Vue的系统指令(二).md similarity index 100% rename from 21-Vue基础/01-03.Vue的系统指令(二).md rename to 12-Vue基础/01-03.Vue的系统指令(二).md diff --git a/21-Vue基础/01-04.Vue的举例：列表功能.md b/12-Vue基础/01-04.Vue的举例：列表功能.md similarity index 100% rename from 21-Vue基础/01-04.Vue的举例：列表功能.md rename to 12-Vue基础/01-04.Vue的举例：列表功能.md diff --git a/21-Vue基础/01-05.自定义过滤器：时间格式化举例.md b/12-Vue基础/01-05.自定义过滤器：时间格式化举例.md similarity index 100% rename from 21-Vue基础/01-05.自定义过滤器：时间格式化举例.md rename to 12-Vue基础/01-05.自定义过滤器：时间格式化举例.md diff --git a/21-Vue基础/01-06.自定义按键修饰符&自定义指令.md b/12-Vue基础/01-06.自定义按键修饰符&自定义指令.md similarity index 100% rename from 21-Vue基础/01-06.自定义按键修饰符&自定义指令.md rename to 12-Vue基础/01-06.自定义按键修饰符&自定义指令.md diff --git a/21-Vue基础/02-Vue实例的生命周期函数.md b/12-Vue基础/02-Vue实例的生命周期函数.md similarity index 100% rename from 21-Vue基础/02-Vue实例的生命周期函数.md rename to 12-Vue基础/02-Vue实例的生命周期函数.md diff --git a/21-Vue基础/03-Vue中的Ajax请求.md b/12-Vue基础/03-Vue中的Ajax请求.md similarity index 100% rename from 21-Vue基础/03-Vue中的Ajax请求.md rename to 12-Vue基础/03-Vue中的Ajax请求.md diff --git a/21-Vue基础/04-Vue动画.md b/12-Vue基础/04-Vue动画.md similarity index 100% rename from 21-Vue基础/04-Vue动画.md rename to 12-Vue基础/04-Vue动画.md diff --git a/21-Vue基础/05-Vue组件的定义和注册.md b/12-Vue基础/05-Vue组件的定义和注册.md similarity index 100% rename from 21-Vue基础/05-Vue组件的定义和注册.md rename to 12-Vue基础/05-Vue组件的定义和注册.md diff --git a/21-Vue基础/06-Vue组件之间的传值.md b/12-Vue基础/06-Vue组件之间的传值.md similarity index 100% rename from 21-Vue基础/06-Vue组件之间的传值.md rename to 12-Vue基础/06-Vue组件之间的传值.md diff --git a/21-Vue基础/07-Vue-router路由.md b/12-Vue基础/07-Vue-router路由.md similarity index 100% rename from 21-Vue基础/07-Vue-router路由.md rename to 12-Vue基础/07-Vue-router路由.md diff --git a/21-Vue基础/Vue-router路由.md b/12-Vue基础/Vue-router路由.md similarity index 100% rename from 21-Vue基础/Vue-router路由.md rename to 12-Vue基础/Vue-router路由.md diff --git a/21-Vue基础/Vue开发积累.md b/12-Vue基础/Vue开发积累.md similarity index 100% rename from 21-Vue基础/Vue开发积累.md rename to 12-Vue基础/Vue开发积累.md diff --git a/21-Vue基础/Vue组件.md b/12-Vue基础/Vue组件.md similarity index 100% rename from 21-Vue基础/Vue组件.md rename to 12-Vue基础/Vue组件.md diff --git a/18-前端面试/00-准备.md b/13-前端面试/00-准备.md similarity index 100% rename from 18-前端面试/00-准备.md rename to 13-前端面试/00-准备.md diff --git a/18-前端面试/01-页面布局.md b/13-前端面试/01-页面布局.md similarity index 100% rename from 18-前端面试/01-页面布局.md rename to 13-前端面试/01-页面布局.md diff --git a/18-前端面试/02-CSS盒模型及BFC.md b/13-前端面试/02-CSS盒模型及BFC.md similarity index 100% rename from 18-前端面试/02-CSS盒模型及BFC.md rename to 13-前端面试/02-CSS盒模型及BFC.md diff --git a/18-前端面试/03-DOM事件的总结.md b/13-前端面试/03-DOM事件的总结.md similarity index 100% rename from 18-前端面试/03-DOM事件的总结.md rename to 13-前端面试/03-DOM事件的总结.md diff --git a/18-前端面试/04-HTTP协议.md b/13-前端面试/04-HTTP协议.md similarity index 100% rename from 18-前端面试/04-HTTP协议.md rename to 13-前端面试/04-HTTP协议.md diff --git a/18-前端面试/05-01.创建对象和原型链.md b/13-前端面试/05-01.创建对象和原型链.md similarity index 100% rename from 18-前端面试/05-01.创建对象和原型链.md rename to 13-前端面试/05-01.创建对象和原型链.md diff --git a/18-前端面试/05-02.面向对象：类的定义和继承的几种方式.md b/13-前端面试/05-02.面向对象：类的定义和继承的几种方式.md similarity index 100% rename from 18-前端面试/05-02.面向对象：类的定义和继承的几种方式.md rename to 13-前端面试/05-02.面向对象：类的定义和继承的几种方式.md diff --git a/18-前端面试/06-跨域通信类.md b/13-前端面试/06-跨域通信类.md similarity index 100% rename from 18-前端面试/06-跨域通信类.md rename to 13-前端面试/06-跨域通信类.md diff --git a/18-前端面试/07-安全问题：CSRF和XSS.md b/13-前端面试/07-安全问题：CSRF和XSS.md similarity index 100% rename from 18-前端面试/07-安全问题：CSRF和XSS.md rename to 13-前端面试/07-安全问题：CSRF和XSS.md diff --git a/18-前端面试/08-算法问题.md b/13-前端面试/08-算法问题.md similarity index 100% rename from 18-前端面试/08-算法问题.md rename to 13-前端面试/08-算法问题.md diff --git a/18-前端面试/09-01.浏览器渲染机制.md b/13-前端面试/09-01.浏览器渲染机制.md similarity index 100% rename from 18-前端面试/09-01.浏览器渲染机制.md rename to 13-前端面试/09-01.浏览器渲染机制.md diff --git a/18-前端面试/09-02.js运行机制：异步和单线程.md b/13-前端面试/09-02.js运行机制：异步和单线程.md similarity index 100% rename from 18-前端面试/09-02.js运行机制：异步和单线程.md rename to 13-前端面试/09-02.js运行机制：异步和单线程.md diff --git a/18-前端面试/10-01.页面性能优化.md b/13-前端面试/10-01.页面性能优化.md similarity index 100% rename from 18-前端面试/10-01.页面性能优化.md rename to 13-前端面试/10-01.页面性能优化.md diff --git a/18-前端面试/10-02.前端错误监控.md b/13-前端面试/10-02.前端错误监控.md similarity index 100% rename from 18-前端面试/10-02.前端错误监控.md rename to 13-前端面试/10-02.前端错误监控.md diff --git a/18-前端面试/11-00.JavaScript高级面试：前言.md b/13-前端面试/11-00.JavaScript高级面试：前言.md similarity index 100% rename from 18-前端面试/11-00.JavaScript高级面试：前言.md rename to 13-前端面试/11-00.JavaScript高级面试：前言.md diff --git a/18-前端面试/11-01.ES6：模块化的使用和编译环境.md b/13-前端面试/11-01.ES6：模块化的使用和编译环境.md similarity index 100% rename from 18-前端面试/11-01.ES6：模块化的使用和编译环境.md rename to 13-前端面试/11-01.ES6：模块化的使用和编译环境.md diff --git a/18-前端面试/11-02.ES6.md b/13-前端面试/11-02.ES6.md similarity index 100% rename from 18-前端面试/11-02.ES6.md rename to 13-前端面试/11-02.ES6.md diff --git a/18-前端面试/15-虚拟DOM.md b/13-前端面试/15-虚拟DOM.md similarity index 100% rename from 18-前端面试/15-虚拟DOM.md rename to 13-前端面试/15-虚拟DOM.md diff --git a/18-前端面试/16-01.MVVM.md b/13-前端面试/16-01.MVVM.md similarity index 100% rename from 18-前端面试/16-01.MVVM.md rename to 13-前端面试/16-01.MVVM.md diff --git a/18-前端面试/21-面试题整理 by smyhvae.md b/13-前端面试/21-面试题整理 by smyhvae.md similarity index 100% rename from 18-前端面试/21-面试题整理 by smyhvae.md rename to 13-前端面试/21-面试题整理 by smyhvae.md diff --git a/18-前端面试/22-网友面经.md b/13-前端面试/22-网友面经.md similarity index 100% rename from 18-前端面试/22-网友面经.md rename to 13-前端面试/22-网友面经.md diff --git a/18-前端面试/23-面试技巧 by smyhvae.md b/13-前端面试/23-面试技巧 by smyhvae.md similarity index 100% rename from 18-前端面试/23-面试技巧 by smyhvae.md rename to 13-前端面试/23-面试技巧 by smyhvae.md diff --git a/18-前端面试/z-web安全.md b/13-前端面试/z-web安全.md similarity index 100% rename from 18-前端面试/z-web安全.md rename to 13-前端面试/z-web安全.md diff --git a/18-前端面试/z-其他.md b/13-前端面试/z-其他.md similarity index 100% rename from 18-前端面试/z-其他.md rename to 13-前端面试/z-其他.md diff --git a/18-前端面试/z-推荐文章.md b/13-前端面试/z-推荐文章.md similarity index 100% rename from 18-前端面试/z-推荐文章.md rename to 13-前端面试/z-推荐文章.md diff --git a/18-前端面试/z-计算机网络.md b/13-前端面试/z-计算机网络.md similarity index 100% rename from 18-前端面试/z-计算机网络.md rename to 13-前端面试/z-计算机网络.md diff --git a/19-面试题积累/01-我的面试经历 by smyhvae.md b/14-面试题积累/01-我的面试经历 by smyhvae.md similarity index 100% rename from 19-面试题积累/01-我的面试经历 by smyhvae.md rename to 14-面试题积累/01-我的面试经历 by smyhvae.md diff --git a/19-面试题积累/02-HTML和CSS相关.md b/14-面试题积累/02-HTML和CSS相关.md similarity index 100% rename from 19-面试题积累/02-HTML和CSS相关.md rename to 14-面试题积累/02-HTML和CSS相关.md diff --git a/19-面试题积累/03-JS相关.md b/14-面试题积累/03-JS相关.md similarity index 100% rename from 19-面试题积累/03-JS相关.md rename to 14-面试题积累/03-JS相关.md diff --git a/19-面试题积累/03-http.md b/14-面试题积累/03-http.md similarity index 100% rename from 19-面试题积累/03-http.md rename to 14-面试题积累/03-http.md diff --git a/19-面试题积累/04-变量提升的题目.md b/14-面试题积累/04-变量提升的题目.md similarity index 100% rename from 19-面试题积累/04-变量提升的题目.md rename to 14-面试题积累/04-变量提升的题目.md diff --git a/19-面试题积累/05-BAT爱考的JS面试题.md b/14-面试题积累/05-BAT爱考的JS面试题.md similarity index 100% rename from 19-面试题积累/05-BAT爱考的JS面试题.md rename to 14-面试题积累/05-BAT爱考的JS面试题.md diff --git a/19-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md b/14-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md similarity index 100% rename from 19-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md rename to 14-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md diff --git a/19-面试题积累/函数.md b/14-面试题积累/函数.md similarity index 100% rename from 19-面试题积累/函数.md rename to 14-面试题积累/函数.md diff --git a/19-面试题积累/异步.md b/14-面试题积累/异步.md similarity index 100% rename from 19-面试题积累/异步.md rename to 14-面试题积累/异步.md diff --git a/19-面试题积累/清单.md b/14-面试题积累/清单.md similarity index 100% rename from 19-面试题积累/清单.md rename to 14-面试题积累/清单.md diff --git a/19-面试题积累/面经链接推荐.md b/14-面试题积累/面经链接推荐.md similarity index 100% rename from 19-面试题积累/面经链接推荐.md rename to 14-面试题积累/面经链接推荐.md diff --git a/17-前端进阶/01-前端的几道题目.md b/15-前端进阶/01-前端的几道题目.md similarity index 100% rename from 17-前端进阶/01-前端的几道题目.md rename to 15-前端进阶/01-前端的几道题目.md diff --git a/17-前端进阶/04-前端监控技术.md b/15-前端进阶/04-前端监控技术.md similarity index 100% rename from 17-前端进阶/04-前端监控技术.md rename to 15-前端进阶/04-前端监控技术.md diff --git a/17-前端进阶/09-lazyload&防抖动和节流阀.md b/15-前端进阶/09-lazyload&防抖动和节流阀.md similarity index 100% rename from 17-前端进阶/09-lazyload&防抖动和节流阀.md rename to 15-前端进阶/09-lazyload&防抖动和节流阀.md diff --git a/20-前端综合/2018年-前端日记.md b/16-前端综合/2018年-前端日记.md similarity index 100% rename from 20-前端综合/2018年-前端日记.md rename to 16-前端综合/2018年-前端日记.md diff --git a/20-前端综合/2019年Web前端自学路线.md b/16-前端综合/2019年Web前端自学路线.md similarity index 100% rename from 20-前端综合/2019年Web前端自学路线.md rename to 16-前端综合/2019年Web前端自学路线.md diff --git a/16-前端基础/UserAgent.md b/16-前端综合/UserAgent.md similarity index 100% rename from 16-前端基础/UserAgent.md rename to 16-前端综合/UserAgent.md diff --git a/16-前端基础/ajax相关.md b/16-前端综合/ajax相关.md similarity index 100% rename from 16-前端基础/ajax相关.md rename to 16-前端综合/ajax相关.md diff --git a/16-前端基础/css开发相关.md b/16-前端综合/css开发相关.md similarity index 100% rename from 16-前端基础/css开发相关.md rename to 16-前端综合/css开发相关.md diff --git a/16-前端基础/html相关.md b/16-前端综合/html相关.md similarity index 100% rename from 16-前端基础/html相关.md rename to 16-前端综合/html相关.md diff --git a/16-前端基础/json字符串的解析和遍历.md b/16-前端综合/json字符串的解析和遍历.md similarity index 100% rename from 16-前端基础/json字符串的解析和遍历.md rename to 16-前端综合/json字符串的解析和遍历.md diff --git a/16-前端基础/json相关.md b/16-前端综合/json相关.md similarity index 100% rename from 16-前端基础/json相关.md rename to 16-前端综合/json相关.md diff --git a/20-前端综合/前端中的一些概念.md b/16-前端综合/前端中的一些概念.md similarity index 100% rename from 20-前端综合/前端中的一些概念.md rename to 16-前端综合/前端中的一些概念.md diff --git a/20-前端综合/前端开发积累.md b/16-前端综合/前端开发积累.md similarity index 100% rename from 20-前端综合/前端开发积累.md rename to 16-前端综合/前端开发积累.md diff --git a/20-前端综合/微信群好友分享整理.md b/16-前端综合/微信群好友分享整理.md similarity index 100% rename from 20-前端综合/微信群好友分享整理.md rename to 16-前端综合/微信群好友分享整理.md diff --git a/20-前端综合/网友对本项目提的建议.md b/16-前端综合/网友对本项目提的建议.md similarity index 100% rename from 20-前端综合/网友对本项目提的建议.md rename to 16-前端综合/网友对本项目提的建议.md diff --git a/23-推荐连接/01-推荐网站.md b/17-推荐连接/01-推荐网站.md similarity index 100% rename from 23-推荐连接/01-推荐网站.md rename to 17-推荐连接/01-推荐网站.md diff --git a/23-推荐连接/02-推荐文章.md b/17-推荐连接/02-推荐文章.md similarity index 100% rename from 23-推荐连接/02-推荐文章.md rename to 17-推荐连接/02-推荐文章.md diff --git a/23-推荐连接/推荐链接-互联网相关.md b/17-推荐连接/推荐链接-互联网相关.md similarity index 100% rename from 23-推荐连接/推荐链接-互联网相关.md rename to 17-推荐连接/推荐链接-互联网相关.md diff --git a/22-前端工程化/01-Webpack.md b/22-前端工程化/01-Webpack.md deleted file mode 100644 index 89af88d..0000000 --- a/22-前端工程化/01-Webpack.md +++ /dev/null @@ -1,128 +0,0 @@ - - - -## 关于 Webpack - -### 什么是 Webpack - -- Webpack是一个模块打包器(bundler)。 - -- 在 Webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 - -- 它将根据模块的依赖关系进行静态分析，生成对应的静态资源。 - -Webpack有四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。 - - -### 配置文件(默认) - -webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象。 - -我们将在这个文件中，配置上面所描述的四个部分。 - - -### Loader - -- Webpack 本身只能加载JS/JSON模块（模块即文件），如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载 - -- Loader 本身也是运行在 node.js 环境中的 JavaScript 模块（JS库） - -- 它本身是一个函数，接受源文件作为参数，返回转换的结果 - -- loader 一般以`xxx-loader`的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。 - - -### 插件（plugins） - - -插件件可以完成一些loader不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。 - -下面列举几个常见的插件： - -- CleanWebpackPlugin: 自动清除指定文件夹资源 - -- HtmlWebpackPlugin: 自动生成HTML文件并 - -- UglifyJSPlugin: 压缩js文件 - -官网所列出的插件： - - -### 相关链接 - -- Webpack官网： - -- 中文文档： - -- GitHub地址： - - -## 初始化项目 - -（1）在工程目录下，新建文件`package.json`。内容如下： - -```json -{ - "name": "webpackdemo", - "version": "1.0.0" -} -``` - - -（2）安装 Webpack： - -```bash -# 全局安装 -npm install webpack -g - -# 局部安装 -npm install webpack --save-dev -``` - -为什么要先全局安装，再局部安装呢？这是考虑到兼容性的问题。比如说，当前项目要求 Webpack 版本是3.10.0，那我就必须要在局部进行安装。命令如下： - -```bash -# 局部安装 Webpack 的 3.10.0版本 -npm i webpack@^3.10.0 --save-dev -``` - - - - - - - - - - - -### 文本的开发环境 - - - - - - -## Webpack4 的升级说明 - -如果Webpack要更新到4，会导致其他的内容也会变化： - -- 版本变化：loader、plugin也要相应升级。 - -- 配置变化：增加了 module 的配置项，用来区分开发环境和生产环境。 - -- 插件变化：比如，webpack 3中的`CommonsChunkPlugin`在4中取消了，而是通过...去配置。 - - -参考链接： - -- [webpack4升级指北](https://www.imooc.com/article/23555) - - - - - - - - - diff --git a/22-前端工程化/01-项目介绍.md b/22-前端工程化/01-项目介绍.md deleted file mode 100644 index 19f6227..0000000 --- a/22-前端工程化/01-项目介绍.md +++ /dev/null @@ -1,299 +0,0 @@ - - -## 前言 - - - ->印象最深的就是模块化设计，自适应方案，SPA设计的讲解以及webpack如何自己构建的方法和思想。 - - -> 自适应方案设计和CSS模块化绝对是特色内容。 - -### 组件化的现状 - -- 组件化缺乏**方法论**。组件化没有严格的定义。虽然大家都在用框架，但什么情况下定义一个组件，什么情况下不定义一个组件，缺乏方法论。 - -- 组件化的**设计**不合理。组件划分过细，组件数量很庞大；组件数量少，导致项目的**抽象设计和复用性设计**达不到理想的效果。 - -- 组件化的**战斗力**体现不足。我们开发的目的是：让开发的敏捷度更高、开发效率更高、复用性设计、业务开发的组合能力更强，给团队带来更大的战斗力。如果组件化的设计不合理，就... - - - -### 本项目特色 - -- 组件化的思维方式及项目设计 - -- **组件化和模块化**不仅仅是 js，也包括 css。 - -- 如何将项目作出两点，面试又如何表现 - -- 学会独立构建一个项目，做到独当一面 - - -### 本项目内容 - -- 业务开发流程回顾 - -- 技术选型分析 - - -- 工程构件安装 - -- 项目设计及原理分析 - -### 开发模块 - -- 首页开发 - -- 理财开发 - -- 白条开发 - -- 众筹开发 - -- 专题页开发（活动专题） - -- 构建工具 - - - -### 项目收益 - -- 掌握CSS模块化技术及模块化设计 - -- 组件化的概念并不陌生，如何在一个复杂的项目中把组件化设计的灵活才重要 - -- 学习项目和vue的相关用法 - -- 学习前端项目的自动化构建 - - -## 项目的开发环境及版本 - -> 前端行业里，最常用的技术栈是：HTML5/CSS3 + ES6 + vue/react + Webpack + Sass。 - - -### 运行环境 - -1、**nodejs**：Node 8.9.1。建议使用 nvm 管理 Node版本。 - -- nvm 的windows版： - -- nvm 的 mac 版： - -2、 **Git**。 - -Git简易基础： - -3、**chrome**：v62+ - -4、**Webpack** 3.10.0。 - -- Webpack中文文档： - - -### 构建环境 - -1、**Webpack 3.10.0** - -2、**npm scripts** - -- 利用`npm`做任务管理： - -3、**babel**。`babel`是ES6必备的工具之一。 - -- - -- [文章 | ES6和Babel你不知道的事儿](http://www.imooc.com/article/21866) - - -### 编辑器 - -1、Atom。 - -2、**ESLint**。代码的质量和规范检查的工具。 - -- - - -在Atom中可以安装如下插件： - -- `linter-eslint`：语法检查 - -- `Atom Beautify`：代码格式化 - - -- `Emmet`：快速完成html的输入 - -- `Snippets`快速生成 js 代码片段。 - - - -### 相关基础知识 - - -1、ES6。 - -- - -2、Sass。 - -- - -3、Vue.js - -- - - -## 业务开发流程 - -业务开发流程包括以下四个方面。 - -### 技术选型 - -**1、构建工具**： - -构建工具包含；gulp、grunt、webpack、fis、prepack、rollup。 - - -gulp、grunt、webpack三者的区别： - -- gulp或grunt：本质是做任务的**分配和管理**。webpack：本质是做**编译和打包**。 - -- gulp或grunt编译的时候，其实还是调用的Webpack。 - -- grunt比gulp问世要早。现在基本是用的gulp，因为gulp是做流处理，不会频繁的写文件和读文件。 - -`fis`：是百度内部推荐的构建的集成方案。 - -`prepack`： facebook的代码优化方案。有一些局限性，可以关注后续的动作。 - -`rollup`：和prepack类似。但是现在webpack中也加入了rollup的功能。 - - -**为什么要用构建工具**：资源压缩、静态资源替换、模块化处理、编译处理。（如果人工来做这些事情，会很繁琐，显然要用构建工具） - -**本项目用什么构建工具：**用`Webpack`做编译打包，用`npm scripts`做任务管理（可以对比下gulp）。 - - - - -2、**MVVM框架选择**： - -如果大家都是后端出身的，可以考虑用Angular。 - -看框架的作者维护的热度。如果框架本身有问题，首先需要他们来维护。 - -看业务是能达到业务和性能的要求。 - - - - - -**3、模块化设计** - -CSS模块化设计： - -![](http://img.smyhvae.com/20180308_1101.png) - - -比如，两个按钮，都用了一个className。比如，代码怎么复用。 - -JS模块化设计： - -![](http://img.smyhvae.com/20180308_1106.png) - - -比如： - -- `common.js`放账号登录的信息，这个是整个公司所有的大项目**通用**的。 - -- `layout.js`：抽象出来的布局。给子类 page1 和 page2用。 - - - - - -**4、自适应方案设计**： - - -20180308_1110.png - -如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。 - - - - - -**5、代码维护及复用性设计的思考**： - -- 需求变更 - -- 产品迭代 - -- bug定位 - -- 新功能开发 - - -### 业务开发 - - -### 测试验证 - -### 发布上线 - - - -## 工程构建安装 - - -### 下载工程文件 - -项目地址： - - -### 安装调试 - -（1）在node环境下，安装项目所依赖的package： - -``` - cd JDFinance - - npm install -``` - -如果安装的很慢，可以使用淘宝的镜像。 - -（2）切换到setup分支： - -``` - git checkout setup -``` - - -本项目所有的模块（setup、home等模块）都用分支管理。 - - -（3）启动服务： - -```bash - npm start -``` - -目的是：通过浏览器访问当前的页面。效果如下： - -![](http://img.smyhvae.com/20180308_1145.png) - - - - - - - - - - - - - diff --git a/22-前端工程化/02-项目设计与原理分析.md b/22-前端工程化/02-项目设计与原理分析.md deleted file mode 100644 index c137c91..0000000 --- a/22-前端工程化/02-项目设计与原理分析.md +++ /dev/null @@ -1,287 +0,0 @@ - - -## 项目设计与原理分析 - -包括以下内容： - - -- CSS模块化设计 - -- JS组件设计 - -- 自适应方案 - -- SPA设计 - -- 构建设计 - -- 上线指导 - -### 面试相关 - -模块化设计的关键词：**封装、继承**；把**通用**的模块**先抽象，后具体**，达到**复用**。【面试记住】 - -比如，**panel、按钮、轮播图**、列表等等，都可以提取为**抽象**的组件，复用。 - - -本文先讲CSS模块化设计。 - -## CSS模块化设计 - -1、**设计原则**： - -- 可**复用**、能**继承**、要完整。 - -- 周期性迭代 - - -2、**设计方法**： - -- 先整体后部分，再颗粒化。 - - -![](http://img.smyhvae.com/20180308_1603.png) - -上图中，整体指的是“布局”。 - - -- **先抽象再具体**。【重要】 - - - -20180308_1615.png -![](http://img.smyhvae.com/20180308_1603.png) - -上图中，先看整体的布局，有哪些版块；具体的版块中，有横向列表、纵向列表；最后再是功能。 - -比如，**panel、按钮、轮播图**等等，都可以提取为**抽象**的组件，复用。 - - - - - - -**总结：** - - -![](http://img.smyhvae.com/20180308_1620.png) - -三个模块： - -- `reset.css`：不同的浏览器有默认的样式，我们要去掉。 - -- `layout.css`：布局层面。属于抽象部分。 - -- `element.css`：功能层面（比如列表、按钮） - - - -如果你想给两个组件，采用相同的名称，但是样式不同，这个时候就要用到 module。 - -通过 global和scope的方式，我们就实现了模块的**复用、继承、私有化**。 - - - -## JS组件设计 - - -1、**设计原则**： - -- **a、高内聚低耦合**。 - -高内聚：模块功能的专一性高，独立性强。低耦合：是模块之间的联系尽量少，尽量简单。 - -高内聚：尽量让组件的功能受控于组件本身，而不是依赖于其他的组件。 - -低耦合：两个模块相同的功能，提取成一个公共的**抽象组件**，但这两个模块没有任何耦合的关系。 - - -- b、周期性迭代 - -需要不断迭代，才能知道什么样的组件最符合自己的业务场景。 - - - -2、**设计方法**： - -- 先整体后部分再颗粒化。 - - -写抽象的组件，然后继承抽象的组件，达到颗粒化。 - - -- 尽可能的抽象。 - - - - -## 自适应方案设计 - -如何用一套代码，让一份设计稿，在不同的浏览器上有相同的体验。 - - -### 单位的基本概念 - - -- **`px`**：是`pixel`（像素）的缩写，是相对单位。px = **CSS像素** = **逻辑像素**。 - -- **`dpi`**：dot per inch，没英寸有多少个点。代表的是屏幕的细腻程度。计算方式：勾股定理。 - -常见的dpi： - -![](http://img.smyhvae.com/20180308_1755.png) - - -- **`ppi`**： Pixel per inch，每英寸的像素数。当用于描述显示器设备时ppi与dpi是同一个概念 。 - -换算公式：px=dp*(dpi/160)。 - -- **`dip`**：逻辑像素。简称是`dp`。 - - -- **设备像素（物理像素）：**单位是`pt`，是绝对单位。1pt = 1/72(inch)。inch即英寸，而1英寸等于2.54厘米。 - -比如苹果的Retina视网膜显示屏，一个px需要两个物理像素来表示： - -![](http://img.smyhvae.com/20180308_1753.png) - -说白了，普通的显示器上，一个px对应的是硬件上的真实像素；但是在Retina屏上，比例是1:2（1个逻辑像素 需要 4个物理像素 来表示）。由此得出了**设备像素比**： - -- 设备像素比(dpr)：公式为1px = (dpr)^2 * 1dp。 - - - -推荐链接： - -- [CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport](https://github.com/jawil/blog/issues/21) - - - -### viewport 视口 - -做过移动端的都知道这一行： - -```html - -``` - -解释：声明当前网页在移动端浏览器中展示的相关设置。我们在做移动 web 开发时，就用上面这行代码设置 viewport。 - -视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示。 - - -需要注意的是： - -- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980； -- 此属性为移动端页面视口设置，上方代码设置的值，表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）。 - -属性解释： - -- width:设置viewport的宽度。 -- initial-scale：初始化缩放比例。 -- minimum-scale:最小缩放比例。 -- maximum-scale:最大缩放比例。 -- user-scalable:是否允许用户手动缩放（值可以写成yes/no，也可以写成1/0） - - -PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就没有意义了。二者是矛盾的。 - -**viewport分为三类：** - - -![](http://img.smyhvae.com/20180308_1825.png) - -- layout viewport：可以理解成页面区域 - -- visual viewport：浏览器的可视区域 - -- ideal viewport：完美适配。（1）不需要用户缩放和横向滚动条；（2）显示的文字的大小是否合适。不同设备拥有不同的ideal viewport。如，所有iphone的ideal viewport宽度都是320px，而安卓设备比较复杂，可以在网站上查。 - -如果让 `layout viewport = ideal viewport`，我们就做到了完美适配。 - - -### 设置字体大小：em和rem - -- em：相对于父元素的比例。 - -- rem：css3中的属性，相对于根元素``的 比例。浏览器默认的字号16px。 - -参考链接： - - -### 工作原理 - -> 面试如果问怎么做自适应，就回答这两点。 - -（1）利用`viewport`和设备像素比，调整基准像素。 - -（2）利用`px2rem`自动转换css单位。我们需要将移动端的字体，从 px转换为 rem。 - - -## SAP设计 - - -### 设计意义 - -- 前后端分离：前端专注于业务、视图（交互）；后端专注于服务、数据。 - -- 减轻服务器压力：十几个页面，只用请求一次。 - -- 增强用户体验 - -- 缺点：SEO有一些弱势。补充知识点：[Prerender预渲染优化SEO](http://codingfishman.github.io/2016/05/06/prerender%E9%A2%84%E6%B8%B2%E6%9F%93%E4%BC%98%E5%8C%96SEO/)。 - - -### 工作原理 - -1、方式一：**History API**（HTML5中新增的）。很优雅，但对浏览器有要求。 - - -![](http://img.smyhvae.com/20180308_1925.png) - -必要条件： - -（1）要执行打开的操作。 - -（2）要有历史记录的操作单。 - -- pushState：创建历史记录。 - -- onpopstate：监听前进、后退的事件。 - - -2、方式二：Hash。不是很优雅，但是兼容性好。 - - -![](http://img.smyhvae.com/20180308_1926.png) - - -## 构建工具的安装和配置 - -![](http://img.smyhvae.com/20180308_1945.png) - - -- `Webpack`：安装、配置。 - -- `babel`：将ES6转为ES5。 - -- `dev-server`：页面的更新、渲染和服务。 - -另外还有`npm scripts`，这个比较简单，这里就不提了。 - - - - - - - - - - - - - - - - - diff --git a/22-前端工程化/03-京东金融的首页.md b/22-前端工程化/03-京东金融的首页.md deleted file mode 100644 index 4a8d287..0000000 --- a/22-前端工程化/03-京东金融的首页.md +++ /dev/null @@ -1,69 +0,0 @@ - - -## 需求分析 - -京东金融首页的需求分析如下： - -- 头部 - -- 轮播图 - -- 新手特权 - -- 极速借贷 - -- 理财精选 - -- 新品推荐 - -- 生活服务 - -- 在线客服 - -- 公司介绍 - -- 导航条 - -![](http://img.smyhvae.com/20180308_1953.png) - - -目前，大多数设计稿的尺寸是iPhone5：320*568。 - -拿到设计稿后，要先做架构。 - - -### 组件化设计 - - -### 按钮 - -俺就可以设计成抽象的组件。 - -我们要先给它一个**默认**类名，然后**允许传递进来一个自定义**的类名，这样就实现**继承**了；让自定义的类名去**覆盖**默认的样式，就实现了**复用**。 - -### panel - - -### 轮播图 - -Vue有一些常用的组件，可以直接拿来用，比如`vue-awesome-swiper`。链接： - - -定义一个抽象的轮播图，然后把轮播图的图片和跳转的url作为参数传递。 - - -### css module - -这个组件有一个类名，另外一个组件可能还有个同名的，为了防止冲突，可以使用命名空间。 - - -### 第三方的自适应解决方案 - -hotcss： - - - - - - - diff --git a/22-前端工程化/08-上线指导.md b/22-前端工程化/08-上线指导.md deleted file mode 100644 index fb7924e..0000000 --- a/22-前端工程化/08-上线指导.md +++ /dev/null @@ -1,107 +0,0 @@ - - -## 前言 - -上线指导包括： - -- **生产构建**：合并、抽取、压缩、调试。 - - -- **发布部署**：提交、部署、开启gzip压缩、更新CDN。 - -下面来讲一下。 - -## 生产构建 - -生产构建包括： - -- 合并：style、js - -- 抽取：样式要从javaSCript中抽取出来 - -- 压缩：JS、CSS都要压缩。 - -- 调试：开启SourceMap。 - -下面分别讲一下。 - -### 1&2：合并和抽取 - -我们发现，首页引入了很多`