前端進階必備

前言

關於本人

• 一個有夢有趣，眼神清澈的小小切圖仔。
• 一個（僞）全棧，後端，前端，數據庫樣樣精通（允許我稍微吹下水）。
• 前端Vue & 後端.Net&數據庫 CURD。

關於本文

本文用於記載我的前端進階之路，整理知識體系。順便練習一下Markdown語法。

1、 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-
• blockposition: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文檔
複製代碼

2、 瀏覽器和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 協議安全

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等大佬的知識分享。因而乎也想整理一下本身這段時間學習的知識體系。

• dog蛋 掘金-蛋總

• jsLiang GitHub-jsLiang

• RoaMan GitHub-RoaMan

不熬夜，晚安。