前端进阶必备

时间 2019-11-26

标签前端进阶必备繁體版

原文原文链接

前言

关于本人

一个有梦有趣，眼神清澈的小小切图仔。
一个（伪）全栈，后端，前端，数据库样样精通（允许我稍微吹下水）。
前端Vue & 后端.Net&数据库 CURD。

关于本文

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

1、 HTML+CSS

1.1 HTML

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

1.1.1 HTML 语义化

简单来讲，就是合适的标签作合适的事情，这样具备如下好处：css

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

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

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

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

行内元素：a span i img input select b等vue
块级元素：div ul ol li h1~h6 p table 等html5
空元素：br hr link 等java

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

浏览器内核又能够分红两部分：渲染引擎和JS引擎。webpack

渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等，
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用于创建这个标签与外部资源之间的关系git

<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有三个属性：github

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 经常使用选择器
复制代码

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

CSS 选择器权重

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

1.2.3 CSS的三个重要属性

1.position

static ：默认值。没有定位，元素出如今正常的流中
relative（相对定位）：生成相对定位的元素,相对于其正常（原先自己）位置进行定位
absolute（绝对定位）：生成绝对定位的元素，相对于static定位之外的第一个父元素进行定位
fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位

2.float

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

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都可以产生边距效果.

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-
blockposition:absolute/fixed

工做中通常可能不会顾及这个：float 不多使用了，尽量使用 flex

1.2.6 CSS常见布局

两栏布局
三栏布局
圣杯布局
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文档
复制代码

2、浏览器和http协议

2.1 浏览器相关

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

DNS解析
TCP三次握手
发送请求，分析url，设置请求报文（头，主题）
把请求回来的html代码通过解析生成DOM树
解析css代码生成，生成样式树
结合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 协议安全

3、 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入门-阮一峰

4、 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、微信小程序

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()：关闭全部页面，打开到应用内的某个页面

6、前端工程化——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'
};
复制代码

推荐文档：官方文档

7、 Node

6.1 对Node.js的了解

推荐文章

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

8、参考资料

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

不熬夜，晚安。