JS 篇

閉包

定義：函數(shù)內(nèi)部定義函數(shù)，內(nèi)部函數(shù)持有外部函數(shù)參數(shù)

作用

讀取函數(shù)內(nèi)部的變量
讓這些變量的值始終保持在內(nèi)存中。不會再f1調(diào)用后被自動清除。
方便調(diào)用上下文的局部變量。利于代碼封裝。

副作用：內(nèi)存管理，可能會內(nèi)存溢出

原因：f1是f2的父函數(shù)，f2被賦給了一個全局變量，f2始終存在內(nèi)存中，f2的存在依賴f1，因此f1也始終存在內(nèi)存中，不會在調(diào)用結束

內(nèi)存溢出的常見方式

遞歸調(diào)用缺乏退出條件
vue、react 中定時器和計時器未消除，習慣在生命周期銷毀階段去清空；
閉包使用過程中未及時銷毀，fn=null 來清除變量的引用；
dom 操作完成后綁定事件未銷毀；
dom 操作中的事件委托未銷毀；

參考：https://blog.csdn.net/qappleh/article/details/80337630

防抖與節(jié)流

防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行；
節(jié)流是將多次執(zhí)行變?yōu)槊扛粢欢螘r間執(zhí)行
實現(xiàn)函數(shù)節(jié)流我們主要有兩種方法：時間戳和定時器
參考：https://www.cnblogs.com/momo798/p/9177767.html

請求的取消

$ajax 取消的ajax的關鍵是調(diào)用XHR對象的.abort()方法
axios axios.CancelToken api 調(diào)用
如何自己實現(xiàn)一個ajax請求（要點：步驟、狀態(tài)、參數(shù)的處理、響應結果的處理、錯誤的處理）
參考：https://www.cnblogs.com/qing-5/p/11368009.html

WebSocket 與http

HTTP 協(xié)議通信只能由客戶端發(fā)起，通信是單向的，如果需要持續(xù)通信，常規(guī)通過輪詢的方式發(fā)起請求；效率低，占用通信；
WebSocket是雙向通信；服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發(fā)送信息

其他特點包括：

建立在 TCP 協(xié)議之上，服務器端的實現(xiàn)比較容易。
與 HTTP 協(xié)議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協(xié)議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。
數(shù)據(jù)格式比較輕量，性能開銷小，通信高效。
可以發(fā)送文本，也可以發(fā)送二進制數(shù)據(jù)。
沒有同源限制，客戶端可以與任意服務器通信。
協(xié)議標識符是ws（如果加密，則為wss），服務器網(wǎng)址就是 URL。

websocket的api與心跳機制（重要）

參考：http://www.itdecent.cn/p/5297732db7f2

flash 即將過期，有什么代替方案？

WebRTC 技術的實現(xiàn)了解一下；
- 參考： https://segmentfault.com/a/1190000005864228

Function的命名區(qū)別

    var a=function(){ console.log(1) } 與 function  a () { console.log(2)} 的區(qū)別

var a=function 函數(shù) 表達式，變量命名初始化在前，函數(shù)主體初始話在函數(shù)調(diào)用時才進行；所以必須在申明之后才能調(diào)用a()；
function a 函數(shù)申明，變量申明和函數(shù)主體初始話一開始就完成，所以可以在a 申明之前去調(diào)用；
當執(zhí)行 a();輸出的是1

JS類型判斷的方法

typeof
instanceof
Object.prototype.toString.call()
constructor 判斷（比較常用）
參考：https://www.jb51.net/article/190286.htm

Promise 的實現(xiàn)原理

參考：http://liubin.org/promises-book/

常見問題

狀態(tài) pedding、fulfilled、rejected 什么含義
promise 內(nèi)部是如何捕獲錯誤的（catch的實現(xiàn)原理）；
finnaly 的作用是什么（實現(xiàn)原理）
resolve 與 reject 的作用是什么；
多個 promise 鏈式調(diào)用中，如何執(zhí)行( 什么情況會then,什么時候會catch )

    sendRequest('test1.html', '').then(function(data1) {
        console.log('第一次請求成功, 這是返回的數(shù)據(jù):', data1);
        return sendRequest('test2.html', data1);
    }).then(function(data2) {
        console.log('第二次請求成功, 這是返回的數(shù)據(jù):', data2);
        return sendRequest('test3.html', data2);
    }).then(function(data3) {
        console.log('第三次請求成功, 這是返回的數(shù)據(jù):', data3);
    }).catch(function(error) {
        //用catch捕捉前面的錯誤
        console.log('sorry, 請求失敗了, 這是失敗信息:', error);
    });

參考： https://www.cnblogs.com/sweet-ice/p/10582925.html
promise.race()
參考 http://www.itdecent.cn/p/af443ae22f37
promise.all()
參考： https://blog.csdn.net/weixin_36869329/article/details/82841374

async 函數(shù)

參考： https://es6.ruanyifeng.com/#docs/async

實現(xiàn)異步改為同步的方式有哪些

async await
Generator 與 yield* 實現(xiàn)
常用的callback 在異步中回調(diào)

ES6 新增特性有哪些

常見問題

var、let、const 的區(qū)別（涉及到變量提升、暫時性死區(qū)概念）
https://es6.ruanyifeng.com/#docs/let
原始數(shù)據(jù)類型和引用數(shù)據(jù)類型有哪些？
https://blog.csdn.net/yehuaner33/article/details/85179508
如何數(shù)組去重？
對象深拷貝與淺拷貝有哪些區(qū)別，及如何實現(xiàn)？
js中實現(xiàn)異步加載的方式有哪些？

https://www.zhangshengrong.com/p/noXQoplPaG/
require與import 的區(qū)別？

https://www.cnblogs.com/myfirstboke/p/10563597.html
Array 與Object 新增的方法；
Set 與Map 數(shù)據(jù)結構；
Symbol 數(shù)據(jù)結構；
Class 的基本語法

參考： https://es6.ruanyifeng.com/#docs/class
- extends 繼承的實現(xiàn)
- super()與construction(){} 的作用；
- static 關鍵字的作用；

簡述打開一個新頁面時，瀏覽器如何實現(xiàn)頁面渲染

從js腳本、dom樹、樣式表三個方面回答

對象創(chuàng)建的方式有哪些，有什么區(qū)別（對象原型鏈問題）

第一種： 字面量
var Obj1 = {name:”o1”};
var Obj2 = new Object({name:”o2”});
// var a = {} 其實是 var a = new Object() 的語法糖
// var a = [] 其實是 var a = new Array() 的語法糖
//所以上面 Obj1 與 Obj2 的申明方式等價

第二種：構造函數(shù)
var M = function (name) { this.name = name };
var Obj3 = new M(“o3”) ;

第三種：Object.create（繼承的原型對象）
var p = {name:”o4”}
var Obj4 = Object.create(p);

參考：https://blog.csdn.net/m0_37585915/article/details/80843945?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

大體積文件上傳（分片上傳的實現(xiàn)）

參考：https://blog.csdn.net/u013611548/article/details/82850467?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

敏捷開發(fā)模式（了解其概念）

參考：http://www.ruanyifeng.com/blog/2019/03/agile-development.html

CSS 篇

css 權重問題

!important>行內(nèi)樣式>id>class,偽類選擇，屬性選擇器>>標簽>繼承》通配符
link>@important

css @import 與link 引入有什么不同，哪種方式更優(yōu)？

參考鏈接：https://www.cnblogs.com/my--sunshine/p/6872224.html

less 與scss 的使用

常見問題

兩種中變量如何定義？
如何實現(xiàn)樣式的復用（混合）？

回流與重繪的概念

https://www.cnblogs.com/mdr86553/p/12048742.html

常見問題：display:none與visiable:hidden 的區(qū)別

布局

如何實現(xiàn)居中

flex布局居中；
transform + translate；
margin:0 auto;
display:table ,借助于表格定位；
calc 計算居中；
text-aligin：center；
高度與行高相同；

Css 中的BFC及消除方式

https://www.cnblogs.com/chen-cong/p/7862832.html

如何實現(xiàn)一個三角形？

http://caibaojian.com/css-border-triangle.html

如何實現(xiàn)響應式布局？

第三方庫的布局實現(xiàn)，如bosstrap 12列布局，element 的24列布局；
@media 實現(xiàn)不同界面設備下的布局；
如何實現(xiàn)自適應布局
- 參考：https://www.cnblogs.com/yuanziwen/p/6926561.html

vm、rem、em 、px的區(qū)別

參考：https://www.cnblogs.com/anyw3c/p/anyw3ccc.html

在vue 移動端開發(fā)過程中，如何設置字體、文字為響應式

postcss-px-to-viewport 的配置
rem 的具體使用方式；
- 參考：http://www.itdecent.cn/p/691a569f7fe1

VUE 篇

實現(xiàn)原理；

vue實現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式，通過Objct.defineProperty（）來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應監(jiān)聽回調(diào)。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

參考：https://baijiahao.baidu.com/s?id=1614572521202569483&wfr=spider&for=pc

如何實現(xiàn)數(shù)據(jù)雙向綁定，簡述原理和具體實現(xiàn)方式？

參考：https://blog.csdn.net/yun_hou/article/details/86313212

vue的生命周期及先后順序

created、watch、computed、mounted 的先后順序（具體寫案例測試）；
父子組件間 vue 的生命周期如何執(zhí)行？

如何全局注冊組件和過濾器？多個組件和過濾器如何注冊？

//全局過濾器統(tǒng)一導出
conset fuction  filter1(){} 
conset fuction  filter2(){} 
conset fuction  filter3(){} 
export {filter1,filter2,filter3}
//統(tǒng)一導入
import * as filters from '@/common/filters' 
//循環(huán)生成過濾器
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})
//統(tǒng)一導入組件同理
import * as compontents from '@/common/compontents' 
//循環(huán)生成過濾器
Object.keys(compontents).forEach(key => {
    Vue.Compontent(key, compontents[key])
})

傳參方式

父傳子：props，ref 獲取子組件實例、slot 插槽實現(xiàn)、$children 獲取所有子組件實例
子傳父：$emit 向外分發(fā)、.async 修改父組件實例，
兄弟之間（全局）：vuex 狀態(tài)管理器、$bus 中間總線方式；
路由傳參；
vue 根節(jié)點設置全局變量；
本地存儲方式實現(xiàn)數(shù)據(jù)共享；
組件組合方式 : mixins 混合語法，extends 子組件實現(xiàn)構造、provide / inject （依賴注入）（參考 element-ui）；

頁面緩存keep-alive 的實現(xiàn)

include and exclude 的作用，鉤子函數(shù) activated、deactivated 的作用；
如何實現(xiàn) a、b、c 三個頁面，a->b頁面緩存，c->b頁面不緩存；

如何實現(xiàn)組件的強制刷新功能;

v-if 設置false；在$nextTick(_=>更改狀態(tài)變?yōu)閠rue);
component 的is屬性，動態(tài)改變掛載組件名稱；
設置key值，vue通過檢查key值變化了自動刷新頁面；
調(diào)用foceUplate 的實例方法，強制刷新頁面；

vue管理平臺鑒權如何設置？

參考：https://www.cnblogs.com/zhengrunlin/p/8981017.html

菜單權限

1、常規(guī)系統(tǒng)設計分為菜單、角色、人員；
2、菜單和按鈕分配給角色;角色分配給人員；
3、用戶登錄時獲取角色對應的菜單樹和按鈕集合；通過遍歷菜單樹形成router樹；
4、調(diào)用路由addrouters api 動態(tài)添加在路由對象中；用戶菜單常規(guī)是按照路由表對應生成的；

按鈕權限

通常后臺返回的按鈕是存在于菜單樹下的；需要單獨遍歷成一個按鈕權限code集合；
通過自定義指令的形式來控制按鈕節(jié)點的生成與刪除
import Vue from 'vue';
import store from '@/vuex/store';
//權限按鈕指令
Vue.directive('has', {
    inserted: function(el, binding) {
        if(!store.state.permissionButton[binding.value]){
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
})
//使用 add 權限碼判斷
<el-button v-has="'add'">新增<el-button/>

Token 的使用

一種前后臺權限驗證手段；通常在請求的header中進行添加；
當缺少或者過期后，請求會返回401狀態(tài)碼；需要重新獲取token或者重新登錄；
***特殊業(yè)務***
token過期后跳轉(zhuǎn)至登錄，重新授權獲取登錄和再回跳至之前過期頁面

//asios Response響應攔截
switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}//保持頁面地址
                    })
            }
//登錄
methods:{
    login(){
        let redirect=decodeURIComponent(this.$router.query.redirect);
        if(redirect){
            this.$router.push(redirect);
            return 
        }
        this.$router.push('/login')
    }
}

Vue 語法忽略盲區(qū)（vue、vue-router、vuex、vue-cli、webpack）

watch 與computed 的區(qū)別?

watch 如何實現(xiàn)對對象的監(jiān)聽？
watch 中deep:true 的作用是什么？（案例測試）
watch 中immediate :true 的作用是什么？（案例測試）

如何在methods 中使用filter的方法？

參考：https://blog.csdn.net/qq_35430000/article/details/92795438

修飾符有哪些？

.async 修飾符的作用及實現(xiàn)原理；

指令有哪些以及如何實現(xiàn)自定義指令?

參考：https://cn.vuejs.org/v2/guide/custom-directive.html

on-clock 的使用方式；

<transition> 的使用

參考：https://cn.vuejs.org/v2/api/#transition

虛擬dom createElement（）與JSX 寫法；

參考：https://cn.vuejs.org/v2/guide/render-function.html

vue-router 的使用

全局路由和組件路由分別有哪些？
命名路由的使用
- 參考：https://www.cnblogs.com/qdhxhz/p/9011797.html
如何實現(xiàn)組件的按需加載？

簡述 vuex 的構成及各部分功能（state、action、getter、mutation、module、plugins（很少用到））

vuex 提供的Map方法有哪些？
vuex 在常規(guī)業(yè)務中處理哪些數(shù)據(jù)？
- 登錄信息、baseCode（碼表）、路由信息、菜單信息等全局狀態(tài)；
如何實現(xiàn)數(shù)據(jù)的持久化（頁面刷新，如何保持store倉庫數(shù)據(jù)不變）？
- 利用localstorge 或者session 在瀏覽器中做緩存；
- 借助于vuex-persist 控件，實現(xiàn)store持久化；
- 參考：https://www.cnblogs.com/wang-sai-sai/p/11076833.html

你還了解哪些狀態(tài)管理的解決方案

早期的flux;
react中官方推薦使用 redux；
vuex中官方推薦使用 vuex；
mobx，mobx-vue與mobx-react（mobx-*在react中使用較多,推薦深入學習下）；
Rematch（很少用到）
++自行百度搜索查看原理++

solt 語法的具體實現(xiàn) ？

vue-router 前置鉤子函數(shù)中next（）有哪些用法？

簡述webpack 的實現(xiàn)原理（基本構成、流程概括）？

參考：http://www.itdecent.cn/p/8dd5885bfb66

webpack 中plugin與loader 的區(qū)別？

參考：https://www.cnblogs.com/tangjiao/p/10429645.html

vue 中v-for 在遍歷數(shù)組和對象時，循環(huán)參數(shù)（item、index、value、name、index）代表什么？

//data 
object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
 items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
//循環(huán)數(shù)組
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>    
//循環(huán)對象
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

v-for 中添加key的作用是什么？

為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素；
參考：https://cn.vuejs.org/v2/api/#key

v-if 與v-show 的區(qū)別及在哪些情況下使用？

參考：http://www.itdecent.cn/p/7af8554d8f08

$set( )、$ nextTick( ) 的作用是什么？

vue3 與 vue2 相比有哪些改動？

原理及api的變化兩方面闡述
- Object.defineProperty -----> Proxy;
- Data 、Method、 LifeCycle、 Computed、 Components
- 參數(shù)：http://www.itdecent.cn/p/b1fb5d549fcd

Vue element-ui 鍵盤回車事件表單自動提交造成頁面刷新問題（使用element-ui 有沒實際的經(jīng)驗）

參考：https://weiku.co/article/297/

項目搭建做哪些工作？（結合實際來說）

需求了解、原型圖、設計圖；
vue-cli改造（環(huán)境配置、常用css、js等腳本文件編寫）；
請求封裝、路由設置、組件封裝、服務部署（打包構建）；

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

前端面試概要（Vue開發(fā)）

前端面試概要（Vue開發(fā)）

JS 篇

閉包

內(nèi)存溢出的常見方式

防抖與節(jié)流

請求的取消

WebSocket 與http

websocket的api與心跳機制（重要）

flash 即將過期，有什么代替方案？

Function的命名區(qū)別

JS類型判斷的方法

Promise 的實現(xiàn)原理

async 函數(shù)

實現(xiàn)異步改為同步的方式有哪些

ES6 新增特性有哪些

簡述打開一個新頁面時，瀏覽器如何實現(xiàn)頁面渲染

HTTP 三次握手簡述

https 為什么是安全的（http與https對比著說）？

JS 繼承與原型、原型鏈

this指向問題

對象創(chuàng)建的方式有哪些，有什么區(qū)別（對象原型鏈問題）

大體積文件上傳（分片上傳的實現(xiàn)）

敏捷開發(fā)模式（了解其概念）

CSS 篇

css 權重問題

css @import 與link 引入有什么不同，哪種方式更優(yōu)？

less 與scss 的使用

回流與重繪的概念

布局

VUE 篇

實現(xiàn)原理；

傳參方式

頁面緩存keep-alive 的實現(xiàn)

如何實現(xiàn)組件的強制刷新功能;

vue管理平臺鑒權如何設置？

Vue 語法忽略盲區(qū)（vue、vue-router、vuex、vue-cli、webpack）

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端面試概要（Vue開發(fā)）

JS 篇

閉包

內(nèi)存溢出的常見方式

防抖與節(jié)流

請求的取消

WebSocket 與http

websocket的api與 心跳機制（重要）

flash 即將過期，有什么代替方案？

Function的命名區(qū)別

JS類型判斷的方法

Promise 的實現(xiàn)原理

async 函數(shù)

實現(xiàn)異步改為同步的方式有哪些

ES6 新增特性有哪些

簡述打開一個新頁面時，瀏覽器如何實現(xiàn)頁面渲染

HTTP 三次握手簡述

https 為什么是安全的（http與https對比著說）？

JS 繼承與原型、原型鏈

this指向問題

對象創(chuàng)建的方式有哪些，有什么區(qū)別（對象原型鏈問題）

大體積文件上傳（分片上傳的實現(xiàn)）

敏捷開發(fā)模式（了解其概念）

CSS 篇

css 權重問題

css @import 與link 引入有什么不同，哪種方式更優(yōu)？

less 與scss 的使用

回流與重繪的概念

布局

VUE 篇

實現(xiàn)原理；

傳參方式

頁面緩存keep-alive 的實現(xiàn)

如何實現(xiàn)組件的強制刷新功能;

vue管理平臺鑒權如何設置？

Vue 語法忽略盲區(qū)（vue、vue-router、vuex、vue-cli、webpack）

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

websocket的api與心跳機制（重要）

flash 即將過期，有什么代替方案？

簡述打開一個新頁面時，瀏覽器如何實現(xiàn)頁面渲染

https 為什么是安全的（http與https對比著說）？

JS 繼承與原型、原型鏈

對象創(chuàng)建的方式有哪些，有什么區(qū)別（對象原型鏈問題）

css @import 與link 引入有什么不同，哪種方式更優(yōu)？

實現(xiàn)原理；

vue管理平臺鑒權如何設置？

Vue 語法忽略盲區(qū)（vue、vue-router、vuex、vue-cli、webpack）