前端基礎

時間 2019-11-08

標籤前端基礎简体版

原文原文鏈接

—webpack—javascript

webpack是一個打包模塊化javascript的工具，在webpack裏一切文件皆模塊，經過loader轉換文件，經過plugin注入鉤子，最後輸出由多個模塊組合成的文件，webpack專一構建模塊化項目。php

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。css

webpack打包體積優化---插件 webpack-bundle-analyzerhtml

webpack與grunt、gulp的不一樣？前端

三者都是前端構建工具，grunt和gulp在早期比較流行，如今webpack相對來講比較主流，不過一些輕量化的任務仍是會用gulp來處理，好比單獨打包CSS文件等。vue

grunt和gulp是基於任務和流（Task、Stream）的。相似jQuery，找到一個（或一類）文件，對其作一系列鏈式操做，更新流上的數據，整條鏈式操做構成了一個任務，多個任務就構成了整個web的構建流程。java

webpack是基於入口的。webpack會自動地遞歸解析入口所須要加載的全部資源文件，而後用不一樣的Loader來處理不一樣的文件，用Plugin來擴展webpack功能。node

與webpack相似的工具還有哪些？談談你爲何最終選擇（或放棄）使用webpack？react

一樣是基於入口的打包工具還有如下幾個主流的：linux

webpack
rollup
parcel

從應用場景上來看：

webpack適用於大型複雜的前端站點構建
rollup適用於基礎庫的打包，如vue、react
parcel適用於簡單的實驗性項目，他能夠知足低門檻的快速看到效果

因爲parcel在打包過程當中給出的調試信息十分有限，因此一旦打包出錯難以調試，因此不建議複雜的項目使用parcel

有哪些常見的Loader？他們是解決什麼問題的？

file-loader：把文件輸出到一個文件夾中，在代碼中經過相對 URL 去引用輸出的文件
url-loader：和 file-loader 相似，可是能在文件很小的狀況下以 base64 的方式把文件內容注入到代碼中去
source-map-loader：加載額外的 Source Map 文件，以方便斷點調試
image-loader：加載而且壓縮圖片文件
babel-loader：把 ES6 轉換成 ES5
css-loader：加載 CSS，支持模塊化、壓縮、文件導入等特性
style-loader：把 CSS 代碼注入到 JavaScript 中，經過 DOM 操做去加載 CSS。
eslint-loader：經過 ESLint 檢查 JavaScript 代碼

有哪些常見的Plugin？他們是解決什麼問題的？

define-plugin：定義環境變量
commons-chunk-plugin：提取公共代碼
uglifyjs-webpack-plugin：經過UglifyES壓縮ES6代碼

Loader和Plugin的不一樣？

不一樣的做用

Loader直譯爲"加載器"。Webpack將一切文件視爲模塊，可是webpack原生是隻能解析js文件，若是想將其餘文件也打包的話，就會用到loader。因此Loader的做用是讓webpack擁有了加載和解析非JavaScript文件的能力。
Plugin直譯爲"插件"。Plugin能夠擴展webpack的功能，讓webpack具備更多的靈活性。在 Webpack 運行的生命週期中會廣播出許多事件，Plugin 能夠監聽這些事件，在合適的時機經過 Webpack 提供的 API 改變輸出結果。

不一樣的用法

Loader在module.rules中配置，也就是說他做爲模塊的解析規則而存在。類型爲數組，每一項都是一個Object，裏面描述了對於什麼類型的文件（test），使用什麼加載(loader)和使用的參數（options）
Plugin在plugins中單獨配置。類型爲數組，每一項是一個plugin的實例，參數都經過構造函數傳入。

webpack的構建流程是什麼?從讀取配置到輸出文件這個過程儘可能說全

Webpack 的運行流程是一個串行的過程，從啓動到結束會依次執行如下流程：

初始化參數：從配置文件和 Shell 語句中讀取與合併參數，得出最終的參數；
開始編譯：用上一步獲得的參數初始化 Compiler 對象，加載全部配置的插件，執行對象的 run 方法開始執行編譯；
肯定入口：根據配置中的 entry 找出全部的入口文件；
編譯模塊：從入口文件出發，調用全部配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理；
完成模塊編譯：在通過第4步使用 Loader 翻譯完全部模塊後，獲得了每一個模塊被翻譯後的最終內容以及它們之間的依賴關係；
輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的 Chunk，再把每一個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是能夠修改輸出內容的最後機會；
輸出完成：在肯定好輸出內容後，根據配置肯定輸出的路徑和文件名，把文件內容寫入到文件系統。

在以上過程當中，Webpack 會在特定的時間點廣播出特定的事件，插件在監聽到感興趣的事件後會執行特定的邏輯，而且插件能夠調用 Webpack 提供的 API 改變 Webpack 的運行結果。

是否寫過Loader和Plugin？描述一下編寫loader或plugin的思路？

webpack的熱更新是如何作到的？說明其原理？

如何利用webpack來優化前端性能？（提升性能和體驗）

用webpack優化前端性能是指優化webpack的輸出結果，讓打包的最終結果在瀏覽器運行快速高效。

壓縮代碼。刪除多餘的代碼、註釋、簡化代碼的寫法等等方式。能夠利用webpack的UglifyJsPlugin和ParallelUglifyPlugin來壓縮JS文件，利用cssnano（css-loader?minimize）來壓縮css
利用CDN加速。在構建過程當中，將引用的靜態資源路徑修改成CDN上對應的路徑。能夠利用webpack對於output參數和各loader的publicPath參數來修改資源路徑
刪除死代碼（Tree Shaking）。將代碼中永遠不會走到的片斷刪除掉。能夠經過在啓動webpack時追加參數--optimize-minimize來實現
提取公共代碼。

如何提升webpack的構建速度？

多入口狀況下，使用CommonsChunkPlugin來提取公共代碼
經過externals配置來提取經常使用庫
利用DllPlugin和DllReferencePlugin預編譯資源模塊經過DllPlugin來對那些咱們引用可是絕對不會修改的npm包來進行預編譯，再經過DllReferencePlugin將預編譯的模塊加載進來。
使用Happypack 實現多線程加速編譯
使用webpack-uglify-parallel來提高uglifyPlugin的壓縮速度。原理上webpack-uglify-parallel採用了多核並行壓縮來提高壓縮速度
使用Tree-shaking和Scope Hoisting來剔除多餘代碼

怎麼配置單頁應用？怎麼配置多頁應用？

npm打包時須要注意哪些？如何利用webpack來更好的構建？

如何在vue項目中實現按需加載？

Vue UI組件庫的按需加載爲了快速開發前端項目，常常會引入現成的UI組件庫如ElementUI、iView等，可是他們的體積和他們所提供的功能同樣，是很龐大的。而一般狀況下，咱們僅僅須要少許的幾個組件就足夠了，可是咱們卻將龐大的組件庫打包到咱們的源碼中，形成了沒必要要的開銷。

不過不少組件庫已經提供了現成的解決方案，如Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import 安裝以上插件後，在.babelrc配置中或babel-loader的參數中進行設置，便可實現組件按需加載了。

單頁應用的按需加載如今不少前端項目都是經過單頁應用的方式開發的，可是隨着業務的不斷擴展，會面臨一個嚴峻的問題——首次加載的代碼量會愈來愈多，影響用戶的體驗。

經過import(*)語句來控制加載時機，webpack內置了對於import(*)的解析，會將import(*)中引入的模塊做爲一個新的入口在生成一個chunk。當代碼執行到import(*)語句時，會去加載Chunk對應生成的文件。import()會返回一個Promise對象，因此爲了讓瀏覽器支持，須要事先注入Promise polyfill

—vue—

vue-cli3安裝教程

https://www.jianshu.com/p/5d6080099fba

Vue的生命週期

beforeCreate（建立前）在數據觀測和初始化事件還未開始
created（建立後）完成數據觀測，屬性和方法的運算，初始化事件，$el屬性尚未顯示出來
beforeMount（載入前）在掛載開始以前被調用，相關的render函數首次被調用。實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時尚未掛載html到頁面上。
mounted（載入後）在el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程當中進行ajax交互。
beforeUpdate（更新前）在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後）在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。
beforeDestroy（銷燬前）在實例銷燬以前調用。實例仍然徹底可用。
destroyed（銷燬後）在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

1.什麼是vue生命週期？

答： Vue 實例從建立到銷燬的過程，就是生命週期。從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。

2.vue生命週期的做用是什麼？

答：它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

3.vue生命週期總共有幾個階段？

答：它能夠總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後。

4.第一次頁面加載會觸發哪幾個鉤子？

答：會觸發下面這幾個beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在哪一個週期中就已經完成？

答：DOM 渲染在 mounted 中就已經完成了。

Vue實現數據雙向綁定的原理：Object.defineProperty（）

vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定將MVVM做爲數據綁定的入口，整合Observer，Compile和Watcher三者，經過Observer來監聽本身的model的數據變化，經過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通訊橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變動雙向綁定效果。

js實現簡單的雙向綁定

<body>

</div>

</body>

var obj = {}

Object.defineProperty(obj, 'txt', {

get: function () {

return obj

set: function (newValue) {

document.getElementById('txt').value = newValue

document.getElementById('show').innerHTML = newValue

}

})

document.addEventListener('keyup', function (e) {

obj.txt = e.target.value

})

</script>

Vue組件間的參數傳遞

1.父組件與子組件傳值
父組件傳給子組件：子組件經過props方法接受數據;
子組件傳給父組件：$emit方法傳遞參數
2.非父子組件間的數據傳遞，兄弟組件傳值
eventBus，就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。（雖然也有很多人推薦直接用VUEX，具體來講看需求咯。技術只是手段，目的達到纔是王道。）

Vue的路由實現：hash模式和 history模式

hash模式：在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取；
特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號以前的內容會被包含在請求中，如 http://www.xxx.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。

history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。
history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如 http://www.xxx.com/items/id。後端若是缺乏對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裏如此描述：「不過這種模式要玩好，還須要後臺配置支持……因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。」

vue路由的鉤子函數

首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能。

beforeEach主要有3個參數to，from，next：

to：route即將進入的目標路由對象，

from：route當前導航正要離開的路由

next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉。

一句話就能回答的面試題

1.css只在當前組件起做用
答：在style標籤中寫入scoped便可例如：<style scoped></style>

2.v-if 和 v-show 區別
答：v-if按照條件是否渲染，v-show是display的block或none；

3.$route和$router的區別
答：$route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

4.vue.js的兩個核心是什麼？
答：數據驅動、組件系統

5.vue幾種經常使用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue經常使用的修飾符？
答：.prevent: 提交事件再也不重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素自己而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用

7.v-on 能夠綁定多個方法嗎？
答：能夠

8.vue中 key 值的做用？
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key的做用主要是爲了高效的更新虛擬DOM。

9.什麼是vue的計算屬性？
答：在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。好處：①使得數據處理結構清晰；②依賴於數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名便可；⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據；⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。

10.vue等單頁面應用及其優缺點
答：優勢：Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕須要自行實現前進、後退。

react

react 生命週期函數

初始化階段：

getDefaultProps:獲取實例的默認屬性
getInitialState:獲取每一個實例的初始化狀態
componentWillMount：組件即將被裝載、渲染到頁面上
render:組件在這裏生成虛擬的 DOM 節點
componentDidMount:組件真正在被裝載以後

運行中狀態：

componentWillReceiveProps:組件將要接收到屬性的時候調用
shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（能夠返回 false，接收數據後不更新，阻止 render 調用，後面的函數不會被繼續執行了）
componentWillUpdate:組件即將更新不能修改屬性和狀態
render:組件從新描繪
componentDidUpdate:組件已經更新

銷燬階段：

componentWillUnmount:組件即將銷燬

angular

js性能優化

儘可能減小HTTP請求次數

減小DNS查詢

使用CDN

使用GET來完成AJAX請求

最小化DOM的操做次數

節流防抖

打包優化，項目優化等

使用插件查看項目全部包及體積大小

抽離項目中公共依賴的、不常變更的、體積較大的包

將一個較大的業務代碼文件，拆成多個較小的文件，異步加載（或者優化業務代碼

使用CDN引入資源

dllPlugin爲了提升打包效率，每每將第三庫與業務邏輯代碼分開打包，由於第三方庫每每不須要常常打包更新

webpack 按需打包加載：https://github.com/eyasliu/blog/issues/8

webpack打包bundle.js體積大小優化：https://github.com/youngwind/blog/issues/65

MVC MVVM MVP

對於MVVM的理解？

MVVM 是 Model-View-ViewModel 的縮寫。
Model表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。
View 表明UI 組件，它負責將數據模型轉化成UI 展示出來。
ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，鏈接Model和View。
在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的，所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。
ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

mvc

Model-View-Controller（模型-視圖-控制器）:用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯彙集到一個部件裏面，在改進和個性化定製界面及用戶交互的同時，不須要從新編寫業務邏輯.它強制性的使應用程序的輸入、處理和輸出分開。最典型的MVC就是JSP +servlet+javabean的模式。

MVP

Model-View-Presenter:是從經典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負責邏輯的處理，Model提供數據，View負責顯示。做爲一種新的模式，MVP與MVC有着一個重大的區別：在MVP中View並不直接使用Model，它們之間的通訊是經過Presenter (MVC中的Controller)來進行的，全部的交互都發生在Presenter內部，而在MVC中View會從直接Model中讀取數據而不是經過 Controller。

MVVM

Model-View-ViewModel:和MVC模式同樣，主要目的是分離視圖（View）和模型（Model）；在概念上是真正將頁面與數據邏輯分離的模式，在開發方式上，它是真正將前臺代碼開發者（JS+HTML）與後臺代碼開發者分離的模式（asp,asp.net,php,jsp）。

1. 低耦合。視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。
2. 可重用性。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。
3. 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xaml代碼。
4. 可測試。界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。

typescript

TypeScript 是 JavaScript 的一個超集，主要提供了類型系統和對 ES6 的支持，它由 Microsoft 開發

https://ts.xcatliu.com/introduction/what-is-typescript

爲何選擇 TypeScript

TypeScript 增長了代碼的可讀性和可維護性

類型系統其實是最好的文檔，大部分的函數看看類型的定義就能夠知道如何使用了
能夠在編譯階段就發現大部分錯誤，這總比在運行時候出錯好
加強了編輯器和 IDE 的功能，包括代碼補全、接口提示、跳轉到定義、重構等

TypeScript 很是包容

TypeScript 是 JavaScript 的超集，.js 文件能夠直接重命名爲 .ts 便可
即便不顯式的定義類型，也可以自動作出類型推論
能夠定義從簡單到複雜的幾乎一切類型
即便 TypeScript 編譯報錯，也能夠生成 JavaScript 文件
兼容第三方庫，即便第三方庫不是用 TypeScript 寫的，也能夠編寫單獨的類型文件供 TypeScript 讀取

TypeScript 擁有活躍的社區

大部分第三方庫都有提供給 TypeScript 的類型定義文件
Google 開發的 Angular2 就是使用 TypeScript 編寫的
TypeScript 擁抱了 ES6 規範，也支持部分 ESNext 草案的規範

TypeScript 的缺點

任何事物都是有兩面性的，我認爲 TypeScript 的弊端在於：

有必定的學習成本，須要理解接口（Interfaces）、泛型（Generics）、類（Classes）、枚舉類型（Enums）等前端工程師可能不是很熟悉的概念
短時間可能會增長一些開發成本，畢竟要多寫一些類型的定義，不過對於一個須要長期維護的項目，TypeScript 可以減小其維護成本
集成到構建流程須要一些工做量
可能和一些庫結合的不是很完美

less，sass，postcss

它們都是css預處理器。css預處理器的概念：CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲CSS增長一些編程的特性，無需考慮瀏覽器的兼容性問題。好比說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。都屬於css預處理器。

其中比較優秀的： Sass、LESS，Stylus

nodejs

linux，nginx、sql

web.gl，three.js

Koa2， node

內存泄漏常見狀況

指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。

一、意外的全局變量

js中若是不用var聲明變量,該變量將被視爲window對象(全局對象)的屬性,也就是全局變量.

function foo(arg) {

bar = "this is a hidden global variable";

}

// 上面的函數等價於

function foo(arg) {

window.bar = "this is an explicit global variable";

}

因此,你調用完了函數之後,變量仍然存在,致使泄漏.

若是不注意this的話,還可能會這麼漏:

function foo() {

this.variable = "potential accidental global";

}

// 沒有對象調用foo, 也沒有給它綁定this, 因此this是window

foo();

你能夠經過加上’use strict’啓用嚴格模式來避免這類問題, 嚴格模式會組織你建立意外的全局變量.

二、被遺忘的定時器或者回調

三、沒有清理的DOM元素引用

四、閉包引發的內存泄露

怎樣避免內存泄露

1）減小沒必要要的全局變量，或者生命週期較長的對象，及時對無用的數據進行垃圾回收；

2）注意程序邏輯，避免「死循環」之類的；

3）避免建立過多的對象原則：不用了的東西要及時歸還。

ssr

SSR：服務器渲染

一、利用SEO（搜索引擎）

二、頁面渲染時間短

三、服務器壓力過大

unit單元測試和e2e端到端測試的區別

一.unit測試

站在程序員的角度測試
unit測試是把代碼當作是一個個的組件。從而實現每個組件的單獨測試，測試內容主要是組件內每個函數的返回結果是否是和指望值同樣。
例如：

const compare = (a,b) => a>b?a:b

對這個函數進行測試

expect(compare(1,2)).to.equal(2) //ok

expect(compare(2,1)).to.equal(1) //ok

測試完成

而代碼覆蓋率是指代碼中每個函數的每一中狀況的測試狀況，上述測試的代碼覆蓋率是100%

const compare = (a,b) => a>b?a:b

對這個函數進行測試

expect(compare(2,1)).to.equal(1) //ok

測試完成

這樣代碼覆蓋率是50%，由於else狀況沒有測試到

二.e2e測試

站在用戶角度的測試
e2e測試是把咱們的程序堪稱是一個黑盒子，我不懂你內部是怎麼實現的，我只負責打開瀏覽器，把測試內容在頁面上輸入一遍，看是否是我想要獲得的結果。

二者的存在都是頗有意義的。
unit測試是程序員寫好本身的邏輯後能夠很容易的測試本身的邏輯返回的是否是都正確。
e2e代碼是測試全部的需求是否是均可以正確的完成，並且最終要的是在代碼重構，js改動不少以後，須要對需求進行測試的時候測試代碼是不須要改變的，你也不用擔憂在重構後不能達到客戶的需求。

小程序

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。內部主要是微信本身定義的一套組件
WXSS (WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式
js 邏輯處理，網絡請求
json 小程序設置，如頁面註冊，頁面標題及tabBar

Promise 對象

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最先提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。

apply和call

apply:方法能劫持另一個對象的方法，繼承另一個對象的屬性.

Function.apply(obj,args)方法能接收兩個參數

obj：這個對象將代替Function類裏this對象

args：這個是數組，它將做爲參數傳給Function（args-->arguments）

call:和apply的意思同樣,只不過是參數列表不同.

Function.call(obj,[param1[,param2[,…[,paramN]]]])

obj：這個對象將代替Function類裏this對象

params：這個是一個參數列表

arguments

它是JS的一個內置對象，常被人們所忽略，但實際上確很重要，JS不像JAVA是顯示傳遞參數，JS傳的是形參，能夠傳也能夠不傳，若方法裏沒有寫參數卻傳入了參數，該如何拿到參數呢，答案就是arguments了，在一些插件裏一般這樣使用。

prototype、__proto__與constructor

prototype：是函數的一個屬性，可共享，同時在建立實例中減小內存佔用

import和require

mport和require都是被模塊化所使用。

遵循規範

require 是 AMD規範引入方式

import是es6的一個語法標準，若是要兼容瀏覽器的話必須轉化成es5的語法

調用時間

require是運行時調用，因此require理論上能夠運用在代碼的任何地方，require能夠理解爲一個全局方法

import是編譯時調用，因此必須放在文件開頭

本質

require是賦值過程，其實require的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量

import是解構過程，可是目前全部的引擎都尚未實現import，咱們在node中使用babel支持ES6，也僅僅是將ES6轉碼爲ES5再執行，import語法會被轉碼爲require

語法

require / exports ：遵循 CommonJS/AMD，只能在運行時肯定模塊的依賴關係及輸入/輸出的變量，沒法進行靜態優化。

用法只有如下三種簡單的寫法：

const fs = require('fs')

exports.fs = fs

module.exports = fs

import / export：遵循 ES6 規範，支持編譯時靜態分析，便於JS引入宏和類型檢驗。動態綁定。

寫法就比較多種多樣：

import fs from 'fs'

import {default as fs} from 'fs'

import * as fs from 'fs'

import {readFile} from 'fs'

import {readFile as read} from 'fs'

import fs, {readFile} from 'fs'

export default fs

export const fs

export function readFile

export {readFile, read}

export * from 'fs'

egg，ThinkJs

爲何虛擬 dom 會提升性能

虛擬 dom 至關於在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法避免了沒有必要的 dom 操做，從而提升性能。

用 JavaScript 對象結構表示 DOM 樹的結構；而後用這個樹構建一個真正的 DOM 樹，插到文檔當中當狀態變動的時候，從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較，記錄兩棵樹差別把 2 所記錄的差別應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了

Http協議面試題

1、說一下什麼是Http協議？

對器客戶端和服務器端之間數據傳輸的格式規範，格式簡稱爲「超文本傳輸協議」。

2、什麼是Http協議無狀態協議？怎麼解決Http協議無狀態協議？（曾經去某創業公司問到）

無狀態協議對於事務處理沒有記憶能力。缺乏狀態意味着若是後續處理須要前面的信息
無狀態協議解決辦法：經過一、Cookie 二、經過Session會話保存。

3、說一下Http協議中302狀態(阿里常常問)

http協議中，返回狀態碼302表示重定向。
這種狀況下，服務器返回的頭部信息中會包含一個 Location 字段，內容是重定向到的url。

4、Http協議有什麼組成？

請求報文包含三部分：

請求行：包含請求方法、URI、HTTP版本信息
請求首部字段
請求內容實體

響應報文包含三部分：

狀態行：包含HTTP版本、狀態碼、狀態碼的緣由短語
響應首部字段
響應內容實體

說一下網絡傳輸的過程

5、Http協議中有那些請求方式？

GET：用於請求訪問已經被URI（統一資源標識符）識別的資源，能夠經過URL傳參給服務器
POST：用於傳輸信息給服務器，主要功能與GET方法相似，但通常推薦使用POST方式。
PUT：傳輸文件，報文主體中包含文件內容，保存到對應URI位置。
HEAD：得到報文首部，與GET方法相似，只是不返回報文主體，通常用於驗證URI是否有效。
DELETE：刪除文件，與PUT方法相反，刪除對應URI位置的文件。
OPTIONS：查詢相應URI支持的HTTP方法。

6、Http協議中Http1.0與1.1區別？

在http1.0中，當創建鏈接後，客戶端發送一個請求，服務器端返回一個信息後就關閉鏈接，當瀏覽器下次請求的時候又要創建鏈接，顯然這種不斷創建鏈接的方式，會形成不少問題。
在http1.1中，引入了持續鏈接的概念，經過這種鏈接，瀏覽器能夠創建一個鏈接以後，發送請求並獲得返回信息，而後繼續發送請求再次等到返回信息，也就是說客戶端能夠連續發送多個請求，而不用等待每個響應的到來。

7、get與post請求區別？（初級程序員必備問題）

區別一：

get重點在從服務器上獲取資源。
post重點在向服務器發送數據。

區別二：

get傳輸數據是經過URL請求，以field（字段）= value的形式，置於URL後，並用"?"鏈接，多個請求數據間用"&"鏈接，如http://127.0.0.1/Test/login.action?name=admin&password=admin，這個過程用戶是可見的。
post傳輸數據經過Http的post機制，將字段與對應值封存在請求實體中發送給服務器，這個過程對用戶是不可見的。

區別三：