面試筆記

promise

Promise最大的好處是在異步執行的流程中，把執行代碼和處理結果的代碼清晰地分離了：

webpack

vue等單頁面應用及其優缺點

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

Vue.js的優點

Vue.js在可讀性、可維護性和趣味性之間作到了很好的平衡。Vue.js處在React和Angular 1之間，並且若是你有仔細看Vue的指南，就會發現Vue.js從其它框架借鑑了不少設計理念。 Vue.js從React那裏借鑑了組件化、prop、單向數據流、性能、虛擬渲染，並意識到狀態管理的重要性。 Vue.js從Angular那裏借鑑了模板，並賦予了更好的語法，以及雙向數據綁定（在單個組件裏）。 從咱們團隊使用Vue.js的狀況來看，Vue.js使用起來很簡單。它不強制使用某種編譯器，因此你徹底能夠在遺留代碼裏使用Vue，並對以前亂糟糟的jQuery代碼進行改造。

vue響應式原理

把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter。在屬性被訪問和修改時通知變化。

每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。

受現代 JavaScript 的限制 (並且 Object.observe 也已經被廢棄)，Vue 不能檢測到對象屬性的添加或刪除。因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

vue 3.0 將帶來一個基於 Proxy 的 observer 實現，它能夠提供覆蓋 全範圍的響應式能力，消除了當前 Vue 2 系列中基於 Object.defineProperty 所存在的一些侷限，這些侷限包括：

對屬性的添加、刪除動做的監測； 對數組基於下標的修改、對於 .length 修改的監測； 對 Map、Set、WeakMap 和 WeakSet 的支持；

另外，新的 observer還提供了以下的一些特性：

公開的用於建立 observable 的 API：這爲小型到中型的應用提供了一種輕量級的、極其簡單的跨組件狀態管理解決方案。 默認爲惰性監測（Lazy Observation）。在 2.x版本中，任何響應式數據，無論它的大小如何都會在啓動的時候監測功能。若是數據量很大的話，在應用啓動的時候就可能形成嚴重的性能消耗。而在3.x 版本中，只有應用的初始可見部分所用到的數據會被監測，更不用說這種監測方案自己其實也是更加快的。 更精準的變更通知：舉個例子：在 2.x 系列中，經過 Vue.set 強制添加一個新的屬性，將致使全部依賴於這個對象的 watch 函數都會被執行一次；而在 3.x 中，只有依賴於這個具體屬性的 watch 函數會被通知到。

JavaScript 原型，原型鏈 ? 有什麼特色？

1. 原型對象也是普通的對象，是對象一個自帶隱式的 proto 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲 null 的話，咱們就稱之爲原型鏈
2. 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈

Ajax實現步驟和原理

獲取ajax異步對象

ajax.open(method,url); method是提交方式 有 get和post兩種 url是提交路徑

ajax.send()

ajax.onreadystatechange 包括五中狀態碼： 0—ajax異步對象建立完畢，可是還未發送 1—ajax已經調用了open()方法，可是還未調用send()方法 2—已經調用send(),可是還未到達服務器端 3—表示請求已經到達服務端，正在服務端的處理，可是還未響應返回 4—ajax已經徹底接收了服務器的響應信息，可是狀態碼未必是正確的 狀態碼有： 200：正確 404/500：錯誤 ps：a.每一個瀏覽器的0，1,2,3這四種狀態顯示的不同，可是4這個狀態碼每 個瀏覽器都有，因此咱們只須要使用4便可 b. 0.1.2.3.4是ajax中的響應碼，200/404/500是web中的狀態碼

ajax.readyState == 4

ajax.status == 200;

獲取值 ajax.requestText或者ajax.requestXML

跨域方法以及怎麼樣實現的與原理

1、使用JSONP跨域 域名,端口,協議 原理：由於經過script標籤引入的js是不受同源策略的限制的。因此咱們能夠經過script標籤引入一個js或者是一個其餘後綴形式（如php，jsp等） 的文件，此文件返回一個js函數的調用，如返回JSONP_getUsers(["paco","john","lili"])，也就是說此文件返回的結果調用了JSONP_getUsers函數， 而且把["paco","john","lili"]傳進去，這個["paco","john","lili"]是一個用戶列表。那麼若是此時咱們的頁面中有一個JSONP_getUsers函數， 那麼JSONP_getUsers就被調用到，而且傳入了用戶列表。 此時就實現了在本域獲取其餘域數據的功能，也就是跨域。

爲何script標籤引入的文件不受同源策略的限制？由於script標籤引入的文件內容是不可以被客戶端的js獲取到的， 不會影響到被引用文件的安全，因此不必使script標籤引入的文件遵循瀏覽器的同源策略。而經過ajax加載的文件內容是可以被客戶端js獲取到的， 因此ajax必須遵循同源策略，不然被引入文件的內容會泄漏或者存在其餘風險。

JSONP的缺點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求 JSONP易於實現，可是也會存在一些安全隱患，若是第三方的腳本隨意地執行，那麼它就能夠篡改頁面內容，截獲敏感數據。

2、動態建立script標籤 這種方法實際上是JSONP跨域的簡化版，JSONP只是在此基礎上加入了回調函數。

3、window.name

4、服務器代理 5、document.domain 經過修改document的domain屬性，咱們能夠在域和子域或者不一樣的子域之間通訊。同域策略認爲域和子域隸屬於不一樣的域，好比baidu.com和 youxi.baidu.com是不一樣的域，這時，咱們沒法在baidu.com下的頁面中調用youxi.baidu.com中定義的JavaScript方法。可是當咱們把它們document的domain屬性都修改成baidu.com，瀏覽器就會認爲它們處於同一個域下，那麼咱們就能夠互相獲取對方數據或者操做對方DOM了。

爲何瀏覽器會產生同源策略

之因此有同源策略 我認爲其中一個重要緣由就是對cookie的保護 cookie 中存着sessionID 。黑客一旦獲取了sessionID 而且在有效期內 就能夠登陸

axios有什麼特色

基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 node.js 中使用。

一、在瀏覽器中發送 XMLHttpRequests 請求；

二、在 node.js 中發送 http請求；

三、支持 Promise API；

四、攔截請求和響應；

五、轉換請求和響應數據；

六、自動轉換 JSON 數據；

七、客戶端支持保護安全免受 XSRF 攻擊；

Cookie的利弊以及與web storage的區別

cookie的優勢：具備極高的擴展性和可用性

經過良好的編程，控制保存在cookie中的session對象的大小。

經過加密和安全傳輸技術，減小cookie被破解的可能性。

只有在cookie中存放不敏感的數據，即便被盜取也不會有很大的損失。

控制cookie的生命期，使之不會永遠有效。這樣的話偷盜者極可能拿到的就是一個過時的cookie。

cookie的缺點：

cookie的長度和數量的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB。不然會被截掉。

安全性問題。若是cookie被人攔掉了，那我的就能夠獲取到全部session信息。加密的話也不起什麼做用。

有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務端保存一個計數器。若吧計數器保存在客戶端，則起不到什麼做用。

sessionstorage用於本地存儲一個會話(session)中的數據，這個數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。

所以sessionstorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localstorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠也不過時的。

web storage的概念和cookie類似，區別是它是爲了更大的容量存儲設計的。

cookie大小受限，而且每次都請求一個新的頁面的時候後cookie都會被髮送過去， 另外cookie還須要指定做用域，不能夠跨域調用。

cookie的做用是與服務器進行交互，做爲HTTP規範的一部分存在，而web storage僅僅是爲了在本地存儲數據而生。

localstorage和sessionstrage都具備相同的操做方法，例如setItem,getItem和removeItem等。

箭頭函數，箭頭函數的特色

箭頭函數是匿名函數。 1不能做爲構造函數，不能使用new。

2不能使用argumetns,取而代之用rest參數...解決let C = (...c) => { console.log(c); }

3不綁定this，會捕獲其定義時所在的this指向做爲本身的this。因爲在vue中自動綁定 this 上下文到實例中，所以不能使用箭頭函數來定義一個週期方法。箭頭函數的this永遠指向上下文的this，call、apply、bind也沒法改變

4箭頭函數沒有原型對象

對於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 來統一管理。

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（銷燬後） 在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

什麼是vue生命週期？

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

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

Vue組件間的參數傳遞

1.父組件與子組件傳值 父組件傳給子組件：子組件經過props方法接受數據; 子組件傳給父組件：$emit方法傳遞參數 2.非父子組件間的數據傳遞，兄弟組件傳值 eventBus，就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。

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

hash模式：在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取； 特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面

history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。

vue路由的鉤子函數

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

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

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

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

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

vuex是什麼？怎麼使用？哪一種功能場景使用它？

只用來讀取的狀態集中放在store中；

改變狀態的方式是提交mutations，這是個同步的事物；

異步邏輯應該封裝在action中。

在main.js引入store，注入。新建了一個目錄store，….. export 。

場景有：單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車

對keep-alive 的瞭解？

keep-alive是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。 在vue 2.1.0 版本以後，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大於include) 。

router的區別

router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

vue經常使用的修飾符？

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

什麼是vue的計算屬性？

在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。

好處：①使得數據處理結構清晰；

②依賴於數據，數據更新，處理結果自動更新；

③計算屬性內部this指向vm實例；

④在template調用時，直接寫計算屬性名便可；

⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據；

⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。

前端性能優化

1、代碼部署：

一、代碼的壓縮與合併

二、圖片、js、css等靜態資源使用和主站不一樣域名地址存儲，從而使得在傳輸資源時不會帶上沒必要要的cookie信息。

三、使用內容分發網絡 CDN

四、爲文件設置Last-Modified、Expires和Etag

五、使用GZIP壓縮傳送

六、權衡DNS查找次數(使用不一樣域名會增長DNS查找)

七、避免沒必要要的重定向(加"/")

2、編碼

html： 一、使用結構清晰，簡單，語義化標籤

二、避免空的src和href

三、不要在HTML中縮放圖片

css： 一、精簡css選擇器

二、把CSS放到頂部

三、避免@import方式引入樣式

四、css中使用base64圖片數據取代圖片文件，減小請求數，在線轉base64網站：tool.css-js.com/base64.html

五、使用css動畫來取代javascript動畫

六、使用字體圖標

七、使用css sprite(雪碧圖)

八、使用svg圖形

九、避免使用CSS表達式

body{ background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}

十、避免使用css濾鏡

javascript： 一、減小引用庫的個數

二、使用requirejs或seajs異步加載js

三、JS放到頁面底部引入

四、避免全局查找

五、使用原生方法

六、用switch語句代替複雜的if else語句

七、減小語句數，好比說多個變量聲明能夠寫成一句

八、使用字面量表達式來初始化數組或者對象

九、使用innerHTML取代複雜的元素注入

十、使用事件代理(事件委託)

十一、避免屢次訪問dom選擇集

十二、高頻觸發事件設置使用函數節流

1三、使用Web Storage緩存數據 ##事件的傳播分爲兩個階段: 捕獲階段、冒泡階段 ->捕獲在前，冒泡在後

捕獲階段:從外向內執行

冒泡階段:從內向外執行

檢測數據類型

typeof測具體的是什麼類型的數據 不能細分object下的正則

數組檢測某一個實例是否屬於這個類->instanceof

in:檢測某一個屬性是否屬於這個對象(attr in object)

hasOwnProperty:用來檢測某一個屬性是否爲這個對象的"私有屬性",

Object.prototype.toString.call([]);[object Array]

事件委託的原理:

利用了事件默認會進行冒泡傳播的機制,咱們給最外層的元素綁定一個方法,當裏面元素的相關行爲觸發的時候,最外面的綁定的方法也會執行,咱們能夠經過事件對象中的事件源判斷當前點擊的是哪個元素,從而進行不同的處理

對於一個容器中咱們多個元素都要綁定相關的行爲,作不一樣的處理,咱們測試後的結果發現：使用事件委託的方式處理，比一個個的單獨綁定事件，在執行和處理的速度上提高了一倍

HTTP與HTTPS的區別

超文本傳輸協議HTTP協議被用於在Web瀏覽器和網站服務器之間傳遞信息，HTTP協議以明文方式發送內容，不提供任何方式的數據加密，若是攻擊者截取了Web瀏覽器和網站服務器之間的傳輸報文，就能夠直接讀懂其中的信息，所以，HTTP協議不適合傳輸一些敏感信息，好比：信用卡號、密碼等支付信息。

  爲了解決HTTP協議的這一缺陷，須要使用另外一種協議：安全套接字層超文本傳輸協議HTTPS，爲了數據傳輸的安全，HTTPS在HTTP的基礎上加入了SSL協議，SSL依靠證書來驗證服務器的身份，併爲瀏覽器和服務器之間的通訊加密。

路由 全局鉤子

router.beforeEach((to, from, next) => {
      /* 路由發生變化修改頁面title */
      if (to.meta.title) {
          document.title = to.meta.title
      }
      console.log(to)
      console.log(from)
      next()
  })
路由 組建
beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
}
## 彈性盒子模型 上下左右劇中
.flex-container {
          display: -webkit-flex;
          display: flex;
          justify-content:space-around; /*左右劇中*/
          align-items:center; /*上下劇中*/
          flex-wrap: wrap-reverse;/*換行*/
          width: auto;
          height: 250px;
      }
複製代碼

局部刷新

將須要刷新的數據寫在activated中

LESS和Sass之間的主要區別是他們的實現方式不一樣

LESS是基於JavaScript運行,因此LESS是在客戶端處理。

Sass是基於Ruby的，是在服務器端處理的。

簡單描述下微信小程序的相關文件類型。

小程序：pages ——index：index.js(頁面邏輯) /index.wxml (頁面結構)/index.wxss (頁面樣式表) / index.json (頁面配置)

App.js   小程序邏輯

App.json  小程序公共設置

App.wxss   小程序公共樣式表

三、有哪些參數傳值的方法？

1、給HTML元素添加data-*屬性來傳遞咱們須要的值，而後經過e.currentTarget.dataset或onload的options參數獲取。但data-名稱不能有大寫字母和不能夠存放對象

2、設置id 的方法標識來傳值經過e.currentTarget.id獲取設置的id的值,而後經過設置全局對象的方式來傳遞數值

3、在navigator（那f給特）中添加參數傳值

4.全局變量

六、簡述微信小程序原理？

JavaScript：首先JavaScript的代碼是運行在微信App中的，並非運行在瀏覽器中 WXML：WXML微信本身基於XML語法開發的

WXSS 不支持全部的css

微信的架構，是數據驅動的架構模式，它的UI和數據是分離的，全部的頁面更新，都須要經過對數據的更改來實現。

小程序分爲兩個部分webview和appService。其中webview主要用來展示UI，appService有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行，經過系統層JSBridge（js不銳之）實現通訊，實現UI的渲染、事件的處理

小程序的雙向綁定和vue哪裏不同？

小程序直接this.data的屬性是不能夠同步到視圖的，必須調用：

小程序的wxss和css有哪些不同的地方？

一、wxss的圖片引入需使用外鏈地址；2、沒有Body；樣式可直接使用import導入

webview中的頁面怎麼跳回小程序中？

wx.miniProgram.navigateTo（）

小程序關聯微信公衆號如何肯定用戶的惟一性？

使用wx.getUserInfo方法withCredentials爲 true 時 可獲取encryptedData(因快死談)，裏面有 union_id（有你嗯）。後端須要進行對稱解密

四、如何實現下拉刷新？

用view代替scroll-view,設置onPullDownRefresh函數實現

使用webview直接加載要注意哪些事項？

1、必需要在小程序後臺使用管理員添加業務域名；2、h5頁面跳轉至小程序的腳本必須是1.3.1以上；3、微信分享只能夠都是小程序的主名稱了，若是要自定義分享的內容，需小程序版本在1.7.1以上；4、h5的支付不能夠是微信公衆號的appid，必須是小程序的appid，並且用戶的openid也必須是用戶和小程序的。

小程序調用後臺接口遇到哪些問題？

一、數據的大小有限制，超過範圍會直接致使整個小程序崩潰，除非重啓小程序；

二、小程序不能夠直接渲染文章內容頁這類型的html文本內容，若需顯示要借住插件，但插件渲染會致使頁面加載變慢，因此最好在後臺對文章內容的html進行過濾，後臺直接處理批量替換p標籤div標籤爲view標籤，而後其它的標籤讓插件來作，減輕前端的時間

webview的頁面怎麼跳轉到小程序導航的頁面？

若需加載新數據，則在success屬性中加入如下代碼便可：
success: function (e) {
       var page = getCurrentPages().pop();
       if (page == undefined || page == null) return;
       page.onLoad();
}
webview的頁面，則經過
 wx.miniProgram.switchTab({   miniProgram（米妮破幹木）
    url: '/pages/index/index'
 })
複製代碼

簡述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(),

wx.navigateBack(), wx.reLaunch()的區別？

wx.navigateTo()保留當前頁面，跳轉到指定頁面

wx.redirectTo()關閉當前頁面，跳轉到指定頁面

wx.switchTab()切換到tabar頁面，而且關閉全部tabbar頁面

wx.navigateBack()返回以前到頁面

wx.reLaunch()（銳浪齒）關閉全部緩存頁面

跳轉按鈕 獲取fromid

<form report-submit="true" bindsubmit="goOpenGroup">

頁面的

組件，屬性report-submit爲true時，能夠聲明爲需發模板消息，此時點擊按鈕提交表單能夠獲取formId，用於發送模板消息。或者當用戶完成支付行爲，能夠獲取prepay_id用於發送模板消息