前端總結(jié)

閉包以及應(yīng)用場景

  • 作用域
    • 作用域決定了代碼區(qū)塊中變量、函數(shù)、對象和其他資源的可見性
    • 全局作用域、函數(shù)作用域和塊級作用域
      • let 和 const 聲明的變量不會提升到代碼塊頂部。
      • 在同一作用域內(nèi)，禁止重復(fù)聲明
      • for 循環(huán)中，設(shè)置循環(huán)變量那部分是一個父作用域，而循環(huán)體內(nèi)部是一個單獨(dú)的子作用域。由于var不能定義塊級作用域，在循環(huán)體或者循環(huán)內(nèi)部，使用 var 定義變量，在循環(huán)外部可以訪問到變量
  • 作用域鏈
    • 父級作用域是在定義的時候就確定的，不是執(zhí)行時確定
    • 當(dāng)前作用域不存在的變量稱為自由變量，會沿著作用域鏈尋找
  • 閉包概念
    • JavaScript 語言特有的 "鏈?zhǔn)阶饔糜? 結(jié)構(gòu)，子對象會一級一級地向上尋找所有父對象的變量。所以父對象的所有變量，對子對象都是可見的，反之則不成立。
    • 閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)，就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁
  • 用途：
    • 外部函數(shù)讀取函數(shù)內(nèi)部的變量
    • 讓變量的值始終保存在內(nèi)存中
  • 注意點(diǎn)：
    • 由于使用閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題。解決方法是在退出函數(shù)之前，將不使用的局部變量全部刪除
    • 閉包會在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。不要隨便使用父函數(shù)對象調(diào)用屬性的方式改變內(nèi)部變量的值。

面試題目：

Excuse me？這個前端面試在搞事！

function a() {
  for (var i = 0; i < 8; i++) {
    setTimeout(function() {
      console.log(i, 1000 * i)
    },
    1000 * i)
  }
}
// 結(jié)果：每隔一秒打印 8,8000，共打印8次

function b() {
  for (var i = 0; i < 8; i++) { (function() {
      setTimeout(function() {
        console.log(i, 1000 * i)
      },
      1000 * i)
    })();
  }
}
// 結(jié)果：每隔一秒打印 8,8000，共打印8次

function c() {
  for (var i = 0; i < 8; i++) {
    setTimeout((function(i) {
      console.log(i, 1000 * i)
    })(i), 1000 * i)
  }
}
// 結(jié)果：沒有延遲，一次打印全部。自執(zhí)行函數(shù)，傳入變量參數(shù)。閉包。
> 0, 0
> 1, 1000
> 2, 2000
> 3, 3000
> 4, 4000
> 5, 5000
> 6, 6000
> 7, 7000

function d(){
    for (let i = 0; i < 8; i++) {
    setTimeout(function() {
      console.log(i, 1000 * i)
    },
    1000 * i)
  }
}
// 結(jié)果：每隔一秒，打印一次結(jié)果。使用塊級作用域。閉包。
> 0, 0
> 1, 1000
> 2, 2000
> 3, 3000
> 4, 4000
> 5, 5000
> 6, 6000
> 7, 7000

function f() {
  for (var i = 0; i < 8; i++) { 
    (function(i) {
      setTimeout(function() {
        console.log(i, 1000 * i);
      },
      i * 1000);
    })(i);
  }
}　
// 結(jié)果：每隔一秒，打印一次結(jié)果。閉包。
> 0, 0
> 1, 1000
> 2, 2000
> 3, 3000
> 4, 4000
> 5, 5000
> 6, 6000
> 7, 7000

function test() {
  for (var i = 0; i < 8; i++) {
   (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
 }
}
// 結(jié)果：每個一秒，打印一次結(jié)果。結(jié)果都是8,8000

this的指向

  • this 要在執(zhí)行時才能確認(rèn)值，定義時無法確認(rèn)
  • 箭頭函數(shù)this指向： 箭頭函數(shù)沒有自己的this，看其外層是否有函數(shù)
    • 如果有，外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this
    • 如果沒有，則this就是window
      this指向

面試題目

this指向和閉包結(jié)合的問題

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　console.log(object.getNameFunc()());
// 結(jié)果： The Window

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　console.log(object.getNameFunc()());
// 結(jié)果：My Object

Vue中的什么情況下this指向Vue實(shí)例

  • 所有的生命周期鉤子自動綁定 this 上下文到實(shí)例中，因此你可以訪問數(shù)據(jù)，對屬性和方法進(jìn)行運(yùn)算。

判斷瀏覽器和系統(tǒng)的信息

使用 navigator 對象

輸入網(wǎng)址到加載完頁面的過程

  • 加載一個資源的過程
    • 瀏覽器根據(jù) DNS 服務(wù)器取得域名的 IP 地址
    • 向這個 IP 的機(jī)器發(fā)送http 請求
    • 服務(wù)器收到、處理并返回 http 請求
    • 瀏覽器得到返回內(nèi)容
  • 瀏覽器渲染頁面的過程
    • 根據(jù) HTML 機(jī)構(gòu)生成 DOM Tree；根據(jù) CSS 生成 CSSOM
    • 將 DOM 和 CSSOM 整合形成 RenderTree，根據(jù) RenderTree 開始渲染和展示
    • 遇到 script 時，會執(zhí)行并阻塞渲染

Vue的渲染過程

  • new Vue，執(zhí)行初始化
  • 掛載 $mount 方法，通過自定義 Render 方法、template模板、el 等生成 Render 函數(shù)
  • Vue會遍歷傳入實(shí)例的data選項(xiàng)，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。每個組件實(shí)例都對應(yīng)一個 watcher 實(shí)例，它會在組件渲染的過程中把 "接觸" 過的數(shù)據(jù)屬性記錄為依賴。通過 Watcher 監(jiān)聽數(shù)據(jù)變化。響應(yīng)式開始監(jiān)聽。
  • 當(dāng)依賴項(xiàng)的 setter 觸發(fā)時，會通知watcher，Render 函數(shù)執(zhí)行，生成 VNode 對象
  • 通過 patch 方法，對比新舊 VNode 對象，通過 DOM Diff 算法，添加、刪除、修改真正的 DOM 元素

Cookie、Session、LocalStorage、SessionStorage的區(qū)別

  • cookie 和 session 都是用來跟蹤瀏覽器用戶身份的會話方式。cookie存儲在瀏覽器端，session 存儲在服務(wù)器端
  • 功能：cookie 本身用于客戶端和服務(wù)器端通信，它有本地存儲的功能，于是也被當(dāng)做存儲使用。LocalStorage 是 HTML5 中專門為存儲設(shè)計(jì)
  • 容量：cookie 存儲量太小，最大容量 4kB; LocalStorage 最大容量為 5M
  • HTTP請求：所有的http請求，都會攜帶cookie ，會影響獲取資源的效率

同源策略和跨域解決方案

  • 同源策略：
    • 目的是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
    • "同源" 指的是"三個相同"：協(xié)議相同、域名相同、端口相同。
    • 非同源，瀏覽器端會限制三種行為：
      • Cookie、LocalStorage、IndexDB 無法讀取
      • DOM 無法獲得
      • Ajax 請求不能發(fā)送
  • 跨域：協(xié)議、域名、端口，有一個不同就算跨域
  • 解決方案：
    • JSONP
      • 利用 script 標(biāo)簽沒有跨域限制的漏洞，動態(tài)插入 script 標(biāo)簽，實(shí)現(xiàn)跨域獲取數(shù)據(jù)，JSONP 請求一定需要對方的服務(wù)器做支持才可以
      • JSONP 僅支持 get 方法，具有局限性。不安全，可能會遭受 XSS 攻擊
    • CORS 跨域方式，服務(wù)器端設(shè)置HTTP消息頭。需要瀏覽器和服務(wù)器同時支持， IE 瀏覽器不能低于 IE10。整個 CORS 通信過程，都是瀏覽器自動完成，不需要用戶參與。瀏覽器一旦發(fā)現(xiàn) Ajax 請求跨源，就會自動添加一下附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
    • nginx 反向代理實(shí)現(xiàn)跨域；node 請求轉(zhuǎn)發(fā)實(shí)現(xiàn)跨域

正則表達(dá)式

  • 普通文本字符
  • 元字符
    • 匹配一個字符：匹配行的起始 ^；匹配行的結(jié)束 $；匹配任意一個字符 .；匹配若干字符之一的字符組 [...]；匹配一個未列出的字符的排除型字符組 [^...]
    • 多選結(jié)構(gòu)：每個多選結(jié)構(gòu)自身都可以是完整的正則表達(dá)式，都可以匹配任意長度的文本；匹配任意子表達(dá)式 |；| 配合 ()可以限制子表達(dá)式的界限
    • 量詞：作用與之前緊鄰的元素，包括單個元素或使用 () 限制起來 的元素
      • ? ：0次或者1次
      • +：1次或者多次
      • *：任意多次或者0次
      • {a, b}：[a, b] 次
    • 轉(zhuǎn)義： \，匹配的某個字符就是元字符，則需要進(jìn)行轉(zhuǎn)義

px、em、rem

  • px 像素是相對長度單位，相對于顯示器屏幕分辨率而言
  • em 是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸。如果當(dāng)前未對文本的字體尺寸進(jìn)行設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸
  • rem ：root em 是 CSS3 中新增的一個相對單位。相對的是HTML根元素

CSS3新增的特性

  • 選擇器：偽類選擇器 :first-child、:last-child、:nth-child(n)等
  • 動畫效果：Transitions、Transforms、Animation
  • 邊框：圓角邊框、邊框陰影、邊框圖片
  • 顏色：RGBA、漸變顏色
  • 文本：文本溢出、文本陰影

Vue項(xiàng)目部署

使用webpack構(gòu)建工具，npm script腳本將項(xiàng)目打包成資源文件，部署到 nginx 服務(wù)器上

MVVM

Vue 是 MVVM 架構(gòu)，ViewModel 是 Model 和 View 之間的一個橋，相當(dāng)于一個連接器，內(nèi)部實(shí)現(xiàn)事件監(jiān)聽和雙向數(shù)據(jù)綁定

Vue的生命周期

所有的聲明周期鉤子自動綁定 this 上下文到實(shí)例中，因此你可以訪問數(shù)據(jù)，對屬性和方法進(jìn)行運(yùn)算

  • beforeCreate：在實(shí)例初始化之后，數(shù)據(jù)觀測(data observer)和event/watcher事件配置之前被調(diào)用
  • created：在實(shí)例創(chuàng)建完成后被立即調(diào)用。已完成：數(shù)據(jù)觀測、屬性和方法的運(yùn)算、watch/event事件回調(diào)。掛載階段還沒開始，$el屬性目前尚不可用
  • beforeMount：在掛載開始之前被調(diào)用：相關(guān)的reader函數(shù)首次被調(diào)用
  • mounted：實(shí)例被掛載后調(diào)用，這時的el 被新創(chuàng)建的 vm.$el替換了。mounted不會保證所有的子組件也都一起被掛載。確保整個視圖都渲染完畢，可以在mounted內(nèi)部使用vm.$nextTick
  • beforeUpdate：數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前。
  • updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子。updated 不會保證所有的子組件也都一起被重繪。相關(guān)操作放在updated鉤子中調(diào)用vm.$nextTick的回調(diào)函數(shù)中。也可以用計(jì)算屬性和watcher代替
  • beforeDestory：實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用
  • destoryed：實(shí)例銷毀后調(diào)用。該鉤子被調(diào)用后，對應(yīng)Vue實(shí)例的所有指令都被解綁，所有的事件監(jiān)聽被移除，所有的子實(shí)例也都被銷毀
  • activated：被 keep-alive 緩存的組件激活時調(diào)用
  • deactivated：被 keep-alive 緩存的組件停用時調(diào)用

Vue中組件通信：父組件 -> 子組件、子組件 -> 父組件、兄弟組件

  • 父組件通過Prop形式傳遞值給子組件。單向傳遞
  • 子組件通過emit事件傳遞數(shù)據(jù)給父組件
  • 兄弟組件通信使用vuex

介紹Vuex、使用場景、弊端和如何解決

  • Vuex 是狀態(tài)管理模式，采用集中式存儲管理應(yīng)用的所有組件狀態(tài)，每個應(yīng)用僅僅包含一個 store 實(shí)例
  • state：驅(qū)動應(yīng)用的數(shù)據(jù)源
  • Getter ：看做是 store 的計(jì)算屬性，getter的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴發(fā)生了改變才會被重新計(jì)算。 Getter 接受 state 作為其第一個參數(shù)。接受getters作為第二個參數(shù)。可以讓getter返回一個函數(shù)，來實(shí)現(xiàn)給getter傳參，此種形式，不會緩存結(jié)果
  • Mutation：更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation，Mutation必須是同步函數(shù) 。每個mutation都有一個字符串的事件類型type和一個回調(diào)函數(shù)handler。handler就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，第一個參數(shù)是 state，第二個參數(shù)是 payload 載荷，載荷應(yīng)該是一個對象，不能直接調(diào)用handler，提交突變commit，實(shí)現(xiàn)更改數(shù)據(jù)源。
    • Mutation 需遵守 Vue 的響應(yīng)規(guī)則
      • 最好提前在你的store中初始化好所有的所需屬性
      • 需要在對象上添加新屬性時：
        • 使用 Vue.set(obj, 'newProp', 123)
        • 以新對象替換老對象
          • 對象擴(kuò)展運(yùn)算符：state.obj = {...state.obj, newProp:123}
          • 使用Object.assign()方法
  • Action：Action提交的是 mutation，而不是直接變更狀態(tài)；Action 可以包含任意異步狀態(tài)。Action 函數(shù)第一個與 store 實(shí)例具有相同方法和屬性的context對象，可以使用參數(shù)結(jié)構(gòu)來簡化代碼；可以附加第二個參數(shù)payload。
    • 可以在組件中使用 this.$store.dispatch('xxx')分發(fā)action
    • 使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用，需要現(xiàn)在根節(jié)點(diǎn)注入 store

封裝一個組件的思路

  • 組件要實(shí)現(xiàn)什么功能
  • 組件需要由外部提供哪些數(shù)據(jù)
  • 組件需要向外部反饋什么信息

盒模型

  • margin外邊距、padding內(nèi)邊距、border邊框、content內(nèi)容
  • 標(biāo)準(zhǔn)盒模型：width = content
  • IE8及以下 非標(biāo)準(zhǔn)盒模型 ：windth = content + padding + border
  • box-sizing:border-box;

CSS定位

  • static 文檔常規(guī)流
  • relative 相對文檔流原位置進(jìn)行定位，原位置留下空白
  • absolute 移出正常文檔流，不為元素預(yù)留空間，相對于最近的一個非 static 定位祖先元素定位
  • fixed 移出正常文檔流，不為元素預(yù)留空間，相對于屏幕視口 viewport 定位

浮動布局、清除浮動

  • 浮動會脫離正常的文檔布局流，形成環(huán)繞的效果
  • 清除浮動：
    • clear: both
    • 浮動的父元素添加：overflow:hidden; zoom:1;
    • 使用 :after 偽類，浮動的父元素添加： 
        .content:after{
     content:".";
     display:block;
     height:0;
     visibility:hidden;
     clear:both;
   }
 .content{zoom:1;}

for...in、for...of、foreach、map有哪些區(qū)別

  • for...in：遍歷所有可枚舉屬性，包括原型上的屬性和方法，遍歷拿到索引或者對象屬性，return false 可以結(jié)束遍歷
  • for...of：遍歷，但不包含原型鏈上的，遍歷拿到值，return false 可以結(jié)束遍歷
  • forEach：接受一個回調(diào)函數(shù)，進(jìn)行遍歷，不能主動結(jié)束遍歷
  • map：遍歷，返回一個新數(shù)組

Vue和JQuery有哪些區(qū)別

  • Vue是MVVM架構(gòu)，數(shù)據(jù) 和 視圖的分離，解耦
  • 以 數(shù)據(jù) 驅(qū)動視圖，只關(guān)心數(shù)據(jù)變化， DOM 操作被封裝

ES6

  • 塊級作用域 let const
  • 模板字符串
  • 函數(shù)參數(shù)的默認(rèn)值、rest語法
  • 箭頭函數(shù)
  • 對象中，鍵值重名，可簡寫
  • 解構(gòu)賦值
  • 擴(kuò)展運(yùn)算符
  • 模塊化：import 導(dǎo)入模塊；export導(dǎo)出模塊
  • 異步解決方案：Promise、Async/await
  • class、extends、super

class語法糖

class Demo{}; 
var demo = new Demo()
// 結(jié)果
typeof   Demo   // "function"
Demo === Demo.prototype.constructor  // true
demo.__proto__ === Demo.prototype // true
  • class 是普通構(gòu)造函數(shù)的語法糖，符合JS原型和原型鏈的規(guī)則
  • extends 實(shí)現(xiàn)原型鏈更方便

深拷貝、淺拷貝以及算法，什么時候用

淺拷貝與深拷貝

  • 深拷貝和淺拷貝是針對Object和Array這樣的引用數(shù)據(jù)類型
  • 淺拷貝只復(fù)制指向某個對象的指針，而不復(fù)制對象本身，新舊對象還是共享同一塊內(nèi)存
  • 深拷貝會另外創(chuàng)造一個一模一樣的對象，新對象和原對象不共享內(nèi)存，修改新對象不會改到原對象
  • 淺拷貝的實(shí)現(xiàn)方式
    • Object.assign()：可以把任意多個源對象自身的可枚舉屬性拷貝給目標(biāo)對象，然后返回目標(biāo)對象，拷貝的是對象的屬性的引用，而不是對象本身。當(dāng)object是一層的時候，是深拷貝
    • Array.prototype.concat() 函數(shù) 和 Array.prototype.slice() 函數(shù)，兩個函數(shù)都不會修改原數(shù)組，只會返回一個淺復(fù)制來了原數(shù)組中的元素的一個新數(shù)組
  • 深拷貝的實(shí)現(xiàn)方式
    • JSON.parse(JSON.stringify())：用 JSON.stringify 將對象轉(zhuǎn)成 JSON 字符串，再用 JSON.parse() 把字符串解析成對象，對象會開辟新的棧，實(shí)現(xiàn)深拷貝。不能處理函數(shù)。
    • 手寫遞歸遍歷實(shí)現(xiàn)：遍歷對象、數(shù)組直到里邊都是基本數(shù)據(jù)類型，然后再去復(fù)制，就是深度拷貝
    • 函數(shù)庫：lodash中個的_.cloneDeep()

引用數(shù)據(jù)類型和基本類型數(shù)據(jù)

  • 基本數(shù)據(jù)類型：Undefined、Null、Boolean、Number、String、Symbol表示獨(dú)一無二的值
  • 引用類型，統(tǒng)稱為Object對象：對象、數(shù)組、函數(shù)
  • 區(qū)別：
    • 存儲位置：基本數(shù)據(jù)類型值存儲在棧中；引用類型指針存儲在棧中，對象內(nèi)容存儲在堆中
    • 參數(shù)傳遞：基本數(shù)據(jù)類型傳遞值的副本，值的改變，互不影響；引用數(shù)據(jù)類型傳遞指針，修改對象，相互影響

判斷js類型，優(yōu)缺點(diǎn)

  • typeof：null、數(shù)組和對象的typeof均是object
  • instanceof：null instanceof Null // 報(bào)錯； undefined instanceof undefined // 報(bào)錯
  • Object.prototype.toString.call()：最準(zhǔn)確的判斷方式，Object.prototype.toString.call('') // [object String]

Promise對象

  • 基本含義
    • Promise 就是一個容器，里面保存著某個未來才會結(jié)束的事件的結(jié)果
    • 對象的狀態(tài)不受外界影響。pending進(jìn)行中、fulfillled已成功、rejected已失敗，只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果，pending --> fulfilled、pending --> rejected
  • 基本用法
    • promise對象是一個構(gòu)造函數(shù)，用來生成 promise 實(shí)例。接受一個函數(shù)作為參數(shù)，該函數(shù)的兩個參數(shù)分別是 resolve 和 reject。這兩個函數(shù)有 JavaScript 引擎提供，不用自己部署。
      • resolve 函數(shù)的作用是將pending狀態(tài)變?yōu)?code>resolved狀態(tài)，并將異步操作的結(jié)果，作為參數(shù)傳遞出去。如果返回的是另一個Promise，則當(dāng)前Promise狀態(tài)被返回的Promise托管
      • reject 函數(shù)的作用是將pending狀態(tài)變?yōu)?code>rejected狀態(tài)，在異步操作失敗時調(diào)用，并將異步操作報(bào)出的錯誤，作為參數(shù)傳遞出去，通常是一個 Error 實(shí)例。Promise對象的錯誤具有"冒泡"性質(zhì)，會一直向后傳遞，直到被捕獲為止；如果沒有使用catch方法指定錯誤處理的回調(diào)函數(shù)，Promise對象拋出的錯誤不會傳遞到外層代碼
  • finally方法：不管Promise最后狀態(tài)如何，都會執(zhí)行的操作

async/await

  • async 函數(shù)返回一個Promise對象
  • 當(dāng)異步函數(shù)執(zhí)行的時候，一旦遇到await命令，就會等待返回結(jié)果，得到await后面的異步操作完成，再接著執(zhí)行函數(shù)體后面的語句
  • async 函數(shù)內(nèi)部拋出錯誤，會導(dǎo)致返回的Promise對象變?yōu)閞eject狀態(tài)，拋出的錯誤對象會被catch回調(diào)函數(shù)接收到
  • await 命令后面是一個Promise對象，返回該對象的結(jié)果
  • 任何一個await語句后面的Promise對象變?yōu)閞eject狀態(tài)，那么整個async函數(shù)都會中斷執(zhí)行。如果希望前一個異步的狀態(tài)不會影響后面的異步操作，可以使用try...catch塊或者catch方法
  • 多個await命令后面的異步操作，如果不存在繼發(fā)關(guān)系，最好讓他們同時觸發(fā)
    • await Promise.all([...])
    • const ap = p1(); const bp = p2(); const a = await ap; const b = await bp;

擴(kuò)展運(yùn)算符，mapActions使用擴(kuò)展運(yùn)算符

  • 擴(kuò)展運(yùn)算符是三個點(diǎn)(...)，它好比 rest 參數(shù)的逆運(yùn)算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列
  • Vuex中的mapActions是一個函數(shù)，返回的是一個可遍歷的Mapper對象，混入到局部的methods中

Vue Router 傳遞參數(shù)

  • 在根實(shí)例中注入路由，在任何組件內(nèi)可通過this.$router訪問路由器，通過 this.$route 訪問當(dāng)前路由，this.$route.params路徑參數(shù)對象,this.$route.queryURl的查詢對象
  • 導(dǎo)航
    • 聲明式導(dǎo)航：router-link組件，傳入 to 屬性指定鏈接
    • 編程式導(dǎo)航：this.$router，push 向 history 棧添加一個新紀(jì)錄；replace 替換當(dāng)前的 history 記錄；go 前進(jìn)或后退幾步
  • 路由出口：router-view 組件
  • 導(dǎo)航守衛(wèi)
    • 全局守衛(wèi)：
      • 全局前置守衛(wèi)：router.beforeEach((to, from, next) => {...})，當(dāng)一個導(dǎo)航觸發(fā)時調(diào)用
      • 全局解析守衛(wèi) ：router.beforeResolve，在導(dǎo)航被確認(rèn)之前，在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，被調(diào)用
      • 全局后置鉤子：router.afterEach，路由被確認(rèn)，沒有next回調(diào)
    • 路由獨(dú)享的守衛(wèi)：可以在路由配置上直接定義 beforeEnter 守衛(wèi)
    • 組件內(nèi)的守衛(wèi) ：
      • beforeRouteEnter：不能獲取實(shí)例的this。但是可以通過傳一個回調(diào)給 next 來訪問組件實(shí)例
      • beforeRouteUpdate：可以訪問組件實(shí)例this，路由改變但組件被復(fù)用是調(diào)用
      • beforeRouteLeave：可以訪問組件實(shí)例this，導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用。
    • 導(dǎo)航解析流程
      1、導(dǎo)航被觸發(fā)
      2、在失活的組件里調(diào)用離開守衛(wèi)beforeRouteLeave
      3、調(diào)用全局的beforeEach守衛(wèi)
      4、在重用的組件里調(diào)用 beforeRouteUpdate守衛(wèi)
      5、在路由配置里調(diào)用 beforeEnter 守衛(wèi)
      6、解析異步路由
      7、在被激活的組件里調(diào)用 beforeRouteEnter 守衛(wèi)
      8、調(diào)用全局的 beforeResolve 守衛(wèi)
      9、導(dǎo)航被確認(rèn)
      10、調(diào)用全局的 afterEach 守衛(wèi)
      11、觸發(fā)DOM更新
      12、用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)
  • 路由組件傳參
    • 導(dǎo)航可以添加params和 query 參數(shù)
    • 使用 props 方式解耦，對于包含命名視圖的路由，需要為每個路由添加 props 選項(xiàng)
  • 路由元信息：meta對象，一個路由匹配到的所有路由記錄會暴露為$route對象的 $route.matched數(shù)組，遍歷數(shù)組來實(shí)現(xiàn)檢查路由定義的 meta 字段

flex布局

  • 采用Flex布局的元素，成為 Flex 容器；容器默認(rèn)存在兩根軸，水平的主軸和垂直的交叉軸，項(xiàng)目默認(rèn)沿主軸排列
  • 容器的屬性：
    • flex-direction：主軸的方向即項(xiàng)目的排列方向
    • flex-wrap：項(xiàng)目如何換行
    • justify-content：項(xiàng)目在主軸上的對齊方式
    • align-items：項(xiàng)目在交叉軸上如何對齊
  • 項(xiàng)目的屬性：
    • order：定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0
    • flex-grow：定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大；
    • flex-shrink：定義項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小
    • flex：<flex-grow><flex-shrink><flex-basis>縮寫

單頁面應(yīng)用和SEO

  • SSR
  • Nuxt.js
  • 靜態(tài)頁面等方式

原型規(guī)則

  • 所有引用類型（數(shù)組、對象、函數(shù)）都具有對象特性，即可以自由擴(kuò)展屬性
  • 所有引用類型都有一個隱式原型（__proto__）屬性，屬性值是一個普通的對象
  • 所有的函數(shù)都有一個顯式原型（prototype）屬性，屬性值也是一個普通的對象
  • 所有的引用類型__proto__屬性值是指向它的構(gòu)造函數(shù)的prototype屬性值。構(gòu)造函數(shù)的prototype都有一個construtor屬性，屬性值等于構(gòu)造函數(shù)本身
  • 當(dāng)試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么就會去它的__proto__（構(gòu)造函數(shù)的prototype）中尋找

JS模塊化

  • AMD規(guī)范：流行的require.js庫
    • 自動引入全局 define定義 函數(shù)
    • 自動引入全局require引入函數(shù)，require只能引入define定義的函數(shù)
    • 依賴JS會異步加載
  • CommonJS規(guī)范：NodeJS模塊化規(guī)范
    • module.exports 輸出模塊
    • require 加載模塊
    • 同步加載
  • ES6模塊化
    • export 命令用于規(guī)定模塊對的對外結(jié)構(gòu)
    • export default 命令為模塊指定默認(rèn)輸出
    • import 命令用于輸入其他模塊提供的功能
  • CommonJS和ES6模塊循環(huán)加載處理的區(qū)別

36、項(xiàng)目性能優(yōu)化
37、Android和IOS端前端兼容性問題
38、項(xiàng)目難點(diǎn)
39、Vue適合做pc端網(wǎng)站么？優(yōu)缺點(diǎn)
41、前后端分離如何渲染頁面及數(shù)據(jù)
7、XSS攻擊
9、WebGL
14、排序算法
43、有沒有關(guān)注最新的es特性
44、最近讀的一本書，有什么感想
45、webpack的深入配置
46、Vue的雙向數(shù)據(jù)綁定和微信小程序的雙向數(shù)據(jù)綁定有什么異同
24、原生JS
28、高階函數(shù)
29、map函數(shù)
30、封裝一個V-model組件
31、Vue源碼，講解其中熟悉的一塊
32、JsBrage使用及原理
33、學(xué)習(xí)渠道，及博客等平臺關(guān)注的人學(xué)到了什么

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前端開發(fā)面試題 面試題目： 根據(jù)你的等級和職位的變化，入門級到專家級，廣度和深度都會有所增加。 題目類型： 理論知...
    怡寶丶閱讀 2,695評論 0贊 7
  • ## 經(jīng)典bug:1.模板引擎的渲染## 難點(diǎn):### 0.vue總結(jié)#### 指令:```jsVue.direc...
    x_ng閱讀 336評論 0贊 0
  • PNG 有PNG8和truecolor PNG PNG8類似GIF顏色上限為256，文件小，支持alpha透明度，...
    hudaren閱讀 1,858評論 0贊 0
  • 面試題一：https://github.com/jimuyouyou/node-interview-questio...
    R_X閱讀 1,779評論 0贊 5
  • 1.清除盒模型的浮動方式 way 1: 最后追加元素, 設(shè)置 clear:both; way 2: 偽元素清除 d...
    Hyb_7818閱讀 865評論 0贊 0

友情鏈接更多精彩內(nèi)容