前端进阶必备

关于本文

本文用于记载个人前端进阶之路，整理知识体系。顺便练习一下Markdown语法。

一、 HTML+CSS

1.1 HTML

HTML 属于结构层，负责描绘出内容的结构。

1.1.1 HTML 语义化

简单来说，就是合适的标签做合适的事情，这样具有以下好处：

• 便于对浏览器、搜索引擎解析;
• 便于阅读源代码的人对网站进行分开，维护和理解;
• 便于不同设备解析，盲人浏览网页；

简单来说，能用 <header>、<footer> 等 H5 新标签的就不用 <div class="header">，不要使用 <div> 来存放段落等……

1.1.2 行内元素有哪些，块级元素有哪些，空(void)元素有那些

行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

• 行内元素：a span i img input select b等

• 块级元素：div ul ol li h1~h6 p table 等

• 空元素：br hr link 等

1.1.3 常见的浏览器内核有哪些，介绍一下你对浏览器内核的理解

浏览器内核又可以分成两部分：渲染引擎和JS引擎。

• 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，
• JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。

浏览器	IE	Chrome	Firefox	Safari
内核	Trident	Blink(WebKit分支)	Gecko	WebKit

1.1.4 html5有哪些新特性

• 语义化标签: header footer nav section article aside 等
• 视频和音频：audio video
• 增强型表单：date(从一个日期选择器选择一个日期) email(包含 e-mail 地址的输入域) number(数值的输入域) range(一定范围内数字值的输入域) search(用于搜索域) tel(定义输入电话号码字段) 等
• web storage: localStorage,sessionStorage
• Canvas绘图: SVG 绘图
• 拖放API：drag

1.1.5 描述一下 cookie，sessionStorage 和 localStorage 的区别

	Cookie	session	sessionStorage	localStorage
生命周期	可设置失效时间，没有设置的话，默认是关闭浏览器后失效	存储于服务器端的数据。服务器会清理长时间不用的session	仅在当前网页会话下有效，关闭页面或浏览器后就会被清除	除非被手动清除，否则将会永久保存
存储大小	4kb	过多影响服务器会性能	可以保存5MB	可以保存5MB
Http请求	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	存储于服务器端的数据 session 存储特定用户会话所需的属性和配置信息	仅在客户端（即浏览器）中保存，不参与和服务器的通信	同sessionStorage

1.1.6 src与href的区别

区别：src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系

• <link href="style.css" rel="stylesheet/> 浏览器加载到这里的时候，html的渲染和解析不会暂停，css文件的加载是同时进行的
• <script src="script.js"></script> 当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件

1.2 CSS

CSS 属于表示层，负责如何显示有关内容。

1.2.1 CSS 盒模型

css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定。 box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：

box-sizing: content-box|border-box|inherit:

• content-box 中，整个 div的宽、高，则不包括上面元素。就是content大小。
• border-box 中，整个 div 的宽、高，包括 margin、padding、border。计算方式content + padding + border = 本身元素大小，即缩小了content大小。
• inherit中， inherit 指定box-sizing属性的值，应该从父元素继承

1.2.2 CSS 选择器

CSS 常用选择器

1. 通配符：*
2. ID 选择器：#ID
3. 类选择器：.class
4. 元素选择器：p、a 等……
5. 后代选择器：p span、div a 等……
6. 伪类选择器：a:hover 等……
7. 属性选择器：input[type="text"] 等……
8. 子元素选择器：li:firth-child、p:nth-child(1) 等……

CSS 选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

1.2.3 CSS的三个重要属性

1.position

• static ： 默认值。没有定位，元素出现在正常的流中（不脱离文档流）
• relative（相对定位）：生成相对定位的元素,相对于其正常（原先本身）位置进行定位（不脱离文档流）
• absolute（绝对定位）：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位（脱离文档流）
• fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位（脱离文档流）

推荐文章：css position

2.float

• 什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置
• 浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
• 浮动的生成：使用css属性float：left/right/none左浮动/右浮动/不浮动（默认）
• 浮动的影响：对附近的元素布局造成改变，使得布局混乱

推荐文章：css float

3.display

display的几个常用的属性值，inline ， block， inline-block

• inline（行内元素）:
  • 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
  • 不能更改元素的height，width的值，大小由内容撑开.
  • 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
• block（块级元素）:
  • 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
  • 能够改变元素的height，width的值.
  • 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

推荐文章：css display

1.2.4 CSS单位

`px`和`em`和`rem`的区别

• px: 像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的

• em的值并不是固定的，会继承父级元素的字体大小，代表倍数

• rem的值并不是固定的，始终是基于根元素 的，也代表倍数

1.2.5 BFC

BFC 就是 块级格式上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。

一定的 CSS 声明可以生成 BFC，浏览器对生成的 BFC 有一系列的渲染规则，利用这些渲染规则可以达到一定的布局效果。

为什么需要 BFC 呢？

• 它可以防止 margin 元素重叠（div 中包含 ul，而 div 与 ul 之间的垂直距离，取决于 div、ul、li 三者之间的最大外边距，这时候给 ul 一个 display:inline-block 即可解决这个问题）
• 清除内部浮动（div 中包含 ul，而 ul 采用 float:left，那么 div 将变成一长条，这时候给 div 加上规则使其变成 BFC 即可）

如何产生 BFC？

• display: inline-block
• position:absolute/fixed

工作中一般可能不会顾及这个：float 很少使用了，尽可能使用 flex

推荐文章：我对BFC的理解

1.2.6 CSS常见布局

• 两栏布局
• 三栏布局
• 圣杯布局
• flex布局

推荐文章：

• 常见布局及实现
• 阮一峰flex布局

1.2.7 重绘和回流

一句话：回流必将引起重绘，重绘不一定会引起回流。

• 当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

• 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

1.2.8 CSS3新特性

• 实现圆角border-radius，阴影box-shadow，边框图片border-image
• 对文字加特效text-shadow，强制文本换行word-wrap，线性渐变linear-gradient
• 实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
• 增加了更多的CSS选择器、多背景、rgba()
• 唯一引入的伪元素是::selection；
• 实现媒体查询@media，多栏布局flex
• 过渡transition 动画 animation

1.2.9 CSS预处理

提供了一种css的书写方式，常见的就是 SAAS文档 和 LESS文档

二、 浏览器和http协议

2.1 浏览器相关

2.1.1 从输入URL到页面加载全过程

1. DNS解析

2. TCP三次握手

3. 发送请求，分析url，设置请求报文（头，主题）

4. 把请求回来的html代码 经过解析生成DOM树

5. 解析css代码生成，生成样式树

6. 结合DOM和style树生成渲染树

推荐文章：从输入url到页面加载完成发生了什么

2.1.1 BOM常用属性对象方法

location 对象：主要存储 url 相关信息

history 对象：浏览历史信息相关

- `history.go()` // 前进或后退指定的页面数 history.go(num);
- `history.back()` // 后退一页
- `history.forward()` // 前进一页

navigator 对象：浏览器信息相关

- `navigator.userAgent`返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
- `navigator.cookieEnabled` // 返回浏览器是否支持(启用)cookie

2.2 http协议

2.2.1 http协议

Http协议的特点

• 简单快速：客户向服务器请求服务时，只需传送请求方法和路径
• 灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由 Content-Type 加以标记
• 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接 (深入-持久连接、管线化)
• 无状态：HTTP协议是无状态协议( Cookie 的出现)

2.2.2 http状态码

http状态码有那些？分别代表是什么意思 首先，我们大致区分下状态码：

• 1**开头 - 信息提示
• 2**开头 - 请求成功
• 3**开头 - 请求被重定向
• 4**开头 - 请求错误
• 5**开头 - 服务器错误

然后，常见的状态码：

• 200 OK 服务器成功处理了请求
• 301/302 Moved Permanently（重定向）请求的URL已移走
• 404 Not Found (页面丢失)未找到资源
• 403 服务器拒绝请求
• 408 （请求超时） 服务器等候请求时发生超时
• 501 Internal Server Error 服务器遇到一个错误，使其无法对请求提供服务

2.2.2 http和https协议有什么区别

http: 是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少

https: 是以安全为目标的HTTP通道，简单讲是 HTTP 的安全版，即HTTP 下加入SSL 层，HTTPS 的安全基础是 SSL ，因此加密的详细内容就需要 SSL

• http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议
• http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80 ，后者是 443
• http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全

三、 JavaScript

3.1 基础

3.1.1 JavaScript 基本数据类型

6种原始数据类型：

• Boolean: 布尔表示一个逻辑实体，可以有两个值：true 和 false
• Number: 用于表示数字类型
• String: 用于表示文本数据
• Null: Null 类型只有一个值： null,特指对象的值未设置
• Undefined: 一个没有被赋值的变量会有个默认值 undefined
• Symbol: 符号(Symbols)是ECMAScript第6版新定义的。符号类型是唯一的并且是不可修改的
• 引用类型：Object

3.1.2 数组对象有哪些常用方法

修改器方法：

• pop(): 删除数组的最后一个元素，并返回这个元素
• push()：在数组的末尾增加一个或多个元素，并返回数组的新长度
• reverse(): 颠倒数组中元素的排列顺序
• shift(): 删除数组的第一个元素，并返回这个元素
• unshift(): 在数组的开头增加一个或多个元素，并返回数组的新长度
• sort(): 对数组元素进行排序，并返回当前数组
• splice(): 在任意的位置给数组添加或删除任意个元素

访问方法：

• concat(): 返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组
• join(): 连接所有数组元素组成一个字符串
• slice(): 抽取当前数组中的一段元素组合成一个新数组
• indeOf(): 返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1
• lastIndexOf(): 返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1

迭代方法：

• forEach(): 为数组中的每个元素执行一次回调函数,最终返回 undefined
• every(): 如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false
• some(): 如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false
• filter(): 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回
• map(): 返回一个由回调函数的返回值组成的新数组

3.2 高级特性

3.2.1 闭包

简单来说，闭包就是能够读取其他函数内部变量的函数

function Person() {
    var name = 'hello'
    function say () {
        console.log(name)
    }
    return say()
}
Person() // hello

用途

最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

注意点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露

推荐文章：从闭包说起

3.2.2 原型与原型链

每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.

• 每一个构造函数都拥有一个prototype属性，这个属性指向一个对象，也就是原型对象
• 原型对象默认拥有一个constructor属性，指向指向它的那个构造函数
• 每个对象都拥有一个隐藏的属性[[prototype]]，指向它的原型对象

原型示意图

原型链示意图

3.2.3 this 及 apply,call,bind

在 JavaScript 中，研究 this 一般都是 this 的指向问题，核心就是 this 永远指向最终调用它的那个对象，除非改变 this 指向或者箭头函数那种特殊情况

function test() {
    console.log(this);
}

test() // window

var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2

// 函数调用的环境不同，所得到的结果也是不一样的

apply,call,bind作用：三者都可以改变 this 的指向

• apply 方法传入两个参数：一个是作为函数上下文的对象，另外一个是作为函数参数所组成的数组

var obj = {
    name : 'sss'
}

function func(firstName, lastName){
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.apply(obj, ['A', 'B']);    // A sss B

• call 方法第一个参数也是作为函数上下文的对象，但是后面传入的是一个参数列表，而不是单个数组

var obj = {
    name: 'sss'
}

function func(firstName, lastName) {
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.call(obj, 'C', 'D');       // C sss D

• bind 接受的参数有两部分，第一个参数是是作为函数上下文的对象，第二部分参数是个列表，可以接受多个参数

var obj = {
    name: 'sss'
}

function func() {
    console.log(this.name);
}

var func1 = func.bind(null, 'xixi');
func1();

3.2.4 浅拷贝与深拷贝

浅拷贝

• Array.prototype.slice()
• Array.prototype.concat()
• Object.assign
• 拓展操作符...
• ...

深拷贝

• 实现深拷贝的方式是利用 JSON 对象中的 parse 和 stringify

推荐文章：JavaScript中的浅拷贝与深拷贝

3.2.5 对JS引擎执行机制的理解（Event Loop）

JavaScript 是单线程语言

JavaScript 的 Event Loop 是 JS 的执行机制, 也就是事件循环

console.log(1)
    
setTimeout(function(){
    console.log(2)
},0)

console.log(3)

// 1 3 2

JavaScript 将任务分为同步任务和异步任务，执行机制就是先执行同步任务，将同步任务加入到主线程，遇到异步任务就先加入到 event table ，当所有的同步任务执行完毕，如果有可执行的异步任务，再将其加入到主线程中执行

setTimeout(function(){console.log(1);},0);
new Promise(function(resolve){
     console.log(2);
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log(3)
 });
 
 console.log(4);
 
 // 2 4 3 1

在异步任务中，定时器也属于特殊的存在。有人将其称之为 宏任务、微任务，定时器就属于宏任务的范畴。

推荐文章： 这一次，彻底弄懂 JavaScript 执行机制

3.3 ES6

3.3.1 ES6新增的特性

ES6新增的特性

• 声明变量的方式 let const
• 变量解构赋值
• 字符串新增方法 includes() startsWith() endsWith() 等
• 数组新增方法 Array.from() Array.of() entries() keys() values() 等
• 对象简洁写法以及新增方法 Object.is() Object.assign() entries() keys() values()等
• 箭头函数、rest 参数、函数参数默认值等
• 新的数据结构： Set 和 Map
• Proxy
• Promise对象
• async函数 await命令
• Class类
• Module 体系 模块的加载和输出方式

3.3.2 箭头函数有什么特点

ES6 允许使用“箭头”（=>）定义函数

var f = v => v;

// 等同于
var f = function (v) {
  return v;
}

3.3.3 Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大.所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果 --ES6入门-阮一峰

四、 Vue

4.1: MVVM

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互时双向的，因此 View 数据会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

• ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作 DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

• M - Model。Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。

• V - View。View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来。 VM - ViewModel。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。

4.2 生命周期

请大致讲下 Vue 的生命周期？

• 创建前/后：在 beforeCreated 阶段，Vue 实例的挂载元素 $el 和数据对象 data 以及事件还未初始化。在 created 阶段，Vue 实例的数据对象 data 以及方法的运算有了，$el 还没有。
• 载入前/后：在 beforeMount 阶段，render 函数首次被调用，Vue 实例的 $el 和 data 都初始化了，但还是挂载在虚拟的 DOM 节点上。在 mounted 阶段，Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互。
• 更新前/后：在数据更新之前调用，即发生在虚拟 DOM 重新渲染和打补丁之前，调用 beforeUpdate。在虚拟 DOM 重新渲染和打补丁之后，会触发 updated 方法。
• 销毁前/后：在执行实例销毁之前调用 beforeDestory，此时实例仍然可以调用。在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 Vue 实例已经解除了事件监听以及和 DOM 的绑定，但是 DOM 结构依然存在。

什么是 Vue 生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过程，称之为 Vue 的生命周期。

Vue 有几个生命周期，它们的作用主要是什么？

8 个，创建前/创建后、挂载前/挂载后、更新前/更新后、销毁前/销毁后。Vue 生命周期的作用是方便我们通过它的生命周期，在业务代码中更好地操作数据，实现相关功能。

第一次页面加载会触发 Vue 哪几个钩子？

会触发 4 个生命钩子：创建前/创建后、挂载前/挂载后

DOM 渲染在哪个周期就已经完成？

在 beforeMounted 时它执行了 render 函数，对 $el 和 data 进行了初始化，但此时还是挂载到虚拟的 DOM 节点，然后它在 mounted 时就完成了 DOM 渲染，这时候我们一般还进行 Ajax 交互。

五、 微信小程序

5.1 微信小程序的相关文件类型

微信小程序项目结构主要有四个文件类型

• WXML（WeiXin MarkupLanguage）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件
• WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
• js 逻辑处理，网络请求
• json 小程序设置，如页面注册，页面标题及tabBar

主要文件

• app.json 必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的 window 背景色，配置导航条样式，配置默认标题
• app.js 必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量
• app.wxss 可选

5.2 小程序的双向绑定和vue哪里不一样

小程序直接 this.data 的属性是不可以同步到视图的，必须调用：

this.setData({
    // 这里设置
})

5.3 小程序页面间有哪些传递数据的方法

使用全局变量实现数据传递 在 app.js 文件中定义全局变量 globalData， 将需要存储的信息存放在里面

// app.js

App({
     // 全局变量
  globalData: {
    userInfo: null
  }
})

使用的时候，直接使用 getApp() 拿到存储的信息

使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化

//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})


// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

需要注意的问题：

• wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面
• onLoad 只执行一次

5.4 小程序的生命周期函数

• onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
• onShow() 页面显示/切入前台时触发
• onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
• onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
• onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

5.5 如何实现下拉刷新

首先在全局 config 中的 window 配置 enablePullDownRefresh 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法 请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新

5.6 bindtap和catchtap的区别是什么

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分

不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

5.7 . 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

• wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
• wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
• wx.switchTab()：跳转到 abBar页面，并关闭其他所有非 tabBar 页面
• wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages() 获取当前的页面栈，决定需要返回几层
• wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

六、 前端工程化——WebPack

6.1 对WebPack的了解

入口(entry)

- 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始

- 可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）

module.exports = {
  entry: './path/to/my/entry/file.js'
};

输出(output)

• output 属性告诉 webpack 在哪里输出它所创建的 bundles ，以及如何命名这些文件，默认值为 ./dist

loader

• loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）

插件(plugins)

• loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量

模式

• 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

推荐文档：官方文档

七、 Node

6.1 对Node.js的了解

推荐文章

• Node.js - 廖雪峰的官方网站

八、 参考资料

在进军前端的路上，路遇蛋总，jsLiang等大佬的知识分享。于是乎也想整理一下自己这段时间学习的知识体系。

• dog蛋 掘金-蛋总

• jsLiang GitHub-jsLiang

• RoaMan GitHub-RoaMan

不熬夜，晚安。