前端面試題，天天總結兩道，面試麻溜

時間  2019-11-16
標籤 端面 試題 天天 總結 面試 欄目 快樂工作 简体版
原文   原文鏈接

css篇

1. 1px物理像素實現

在移動端web開發中，UI設計稿中設置邊框爲1像素，前端在開發過程當中若是出現border:1px，測試會發如今某些機型上，1px會比較粗，便是較經典的移動端1px像素問題。javascript

設備像素比dpr = 設備像素 / CSS像素(某一方向上) 能夠經過window.devicePixelRatio獲取設備的dpr值。通常來講，在桌面的瀏覽器中，設備像素比（dpr）等於1，一個css像素就是表明的一個物理像素。而在移動端，大多數機型都不是爲1，其中iphone的dpr廣泛是2和3，那麼一個css像素再也不是對應一個物理像素，而是2個和3個物理像素。即咱們一般在css中設置的width：1px，對應的即是物理像素中的2px。手機機型不一樣，dpr可能不一樣。php

以iphone5爲例，iphone5的CSS像素爲320px568px，DPR是2，因此其設備像素爲640px1136pxcss

解決方案一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- initial-scale=1.0 縮放比 當爲1的時候沒用進行任何縮放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1px物理像素實現(方案一)</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 0.5rem;
            height: 0.5rem;
            border-bottom: 1px solid #000;
        }
    </style>
    <!-- 像素比 = 物理像素 / css像素 -->
</head>

<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function () {
        //像素比是什麼？針對不一樣屏幕 dpr不同
        var dpr = window.devicePixelRatio;
        console.log(dpr);
        //縮放比例
        var scale = 1 / dpr;
        //可視區域的寬度
        var width = document.documentElement.clientWidth;
        //獲取mate標籤
        var metaNode = document.querySelector('meta[name="viewport"]');
        metaNode.setAttribute('content',"width=device-width, initial-scale='+scale+'");

        //頁面中元素的寬度，高度，比例得反向乘回來
        var htmlNode = document.querySelector('html');
        htmlNode.style.fontSize = width * dpr + 'px';

    }
</script>
</html>
複製代碼

解決方案二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- initial-scale=1.0 縮放比 當爲1的時候沒用進行任何縮放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1px物理像素實現(方案二)</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            position: relative;
        }

        #box:before {
            content:'';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: #000;

        }
        @media screen and (-webkit-min-device-pixel-ratio:2) {
            #box:before {
                transform: scaleY(0.5);
            }
        }
        @media screen and (-webkit-min-device-pixel-ratio:3) {
            #box:before {
                transform: scaleY(0.333333);
            }
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function () {

    }
</script>
</html>
複製代碼

2. 元素水平居中的方法

方法一

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
複製代碼

方法二

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left:-25px;
            margin-top:-25px;
        }
    </style>
複製代碼

方法三（css3）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            position: relative;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50% , -50%);
        }
    </style>
複製代碼

方法四（flex新版本）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
        }
    </style>
複製代碼

方法五（flex老版本）

<style type="text/css">
        #wrap {
            width: 100px;
            height: 100px;
            background:grey;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
        #wrap .box {
            width: 50px;
            height: 50px;
            background:pink;
        }
    </style>
複製代碼

3.如何實現移動端rem適配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem適配</title>
    <style type="text/css">
        #wrap {
            width: 0.5rem;
            height: 0.5rem;
            background:grey;
        }
        /* html 根元素字體大小設置屏幕區域的寬度 */
    </style>
</head>

<body>
    <div id="wrap">
        <div class="box"></div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        //獲取屏幕區域的寬度
        var width = document.documentElement.clientWidth;
        //獲取html
        var htmlNode = document.querySelector('html');
        //設置字體大小
        htmlNode.style.fontSize = width + 'px';

    }
</script>
</html>
複製代碼

4.css實現兩欄佈局，左側固定寬，右側自適應的7中方法

www.cnblogs.com/wangzhenyu6…html

js篇

1.什麼是跨域？解決跨域的方法？

跨域，指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器施加的安全限制。前端

同源策略

- ——是瀏覽器安全策略
- ——協議名、域名、端口號必須徹底一致
- 舉例：
複製代碼
http://www.123.com/index.html 調用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 調用 http://www.456.com/server.php （主域名不一樣:123/456，跨域）

http://abc.123.com/index.html 調用 http://def.123.com/server.php （子域名不一樣:abc/def，跨域）

http://www.123.com:8080/index.html 調用 http://www.123.com:8081/server.php （端口不一樣:8080/8081，跨域）

http://www.123.com/index.html 調用 https://www.123.com/server.php （協議不一樣:http/https，跨域）

請注意：localhost和127.0.0.1雖然都指向本機，但也屬於跨域。

瀏覽器執行javascript腳本時，會檢查這個腳本屬於哪一個頁面，若是不是同源頁面，就不會被執行
複製代碼

跨域

- 違背同源策略就會產生跨域
複製代碼

解決方法

- jsonp cors websocket Node中間件代理(兩次跨域) ngix反向代理...
複製代碼

1. jsonp方法

因此JSONP的原理其實就是利用引入script不限制源的特色，把處理函數名做爲參數傳入，而後返回執行語句，仔細閱讀如下代碼就能夠明白裏面的意思了。vue

補充：1) JSONP和AJAX對比java

JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）
複製代碼

2)JSONP優缺點node

SONP優勢是簡單兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具備侷限性,不安全可能會遭受XSS攻擊。
複製代碼
<script>
        //建立 script 標籤
        var script = document.createElement('script');
        //設置回調函數
        function getData(data) {
            //數據請求回來被觸發的函數
            console.log(data);
        }
        //設置script的src屬性，設置請求地址
        script.src = 'http://localhost:3000?callback = getData';
        //讓script生效
        document.body.appendChild(script);
    </script>
複製代碼

2.cors的簡單請求

CORS 須要瀏覽器和後端同時支持。IE 8 和 9 須要經過 XDomainRequest 來實現。 瀏覽器會自動進行 CORS 通訊，實現 CORS 通訊的關鍵是後端。只要後端實現了 CORS，就實現了跨域。 服務端設置 Access-Control-Allow-Origin 就能夠開啓 CORS。 該屬性表示哪些域名能夠訪問資源，若是設置通配符則表示全部網站均可以訪問資源。 雖然設置 CORS 和前端沒什麼關係，可是經過這種方式解決跨域問題的話，會在發送請求時出現兩種狀況，分別爲簡單請求和複雜請求。react

只要同時知足如下兩大條件，就屬於簡單請求jquery

條件1：使用下列方法之一：

  • GET
  • HEAD
  • POST

條件2：Content-Type 的值僅限於下列三者之一：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

請求中的任意 XMLHttpRequestUpload 對象均沒有註冊任何事件監聽器； XMLHttpRequestUpload 對象可使用 XMLHttpRequest.upload 屬性訪問。

4.websocket

Websocket是HTML5的一個持久化的協議，它實現了瀏覽器與服務器的全雙工通訊，同時也是跨域的一種解決方案。WebSocket和HTTP都是應用層協議，都基於 TCP 協議。可是 WebSocket 是一種雙向通訊協議，在創建鏈接以後，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。 同時，WebSocket 在創建鏈接時須要藉助 HTTP 協議，鏈接創建好了以後 client 與 server 之間的雙向通訊就與 HTTP 無關了。 原生WebSocket API使用起來不太方便，咱們使用 Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。

咱們先來看個例子：本地文件socket.html向 localhost:3000 發生數據和接受數據

// socket.html
<script>
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('我愛你');//向服務器發送數據
    }
    socket.onmessage = function (e) {
      console.log(e.data);//接收服務器返回的數據
    }
</script>

複製代碼
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//記得安裝ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('我不愛你')
  });
})

複製代碼

總結：CORS支持全部類型的HTTP請求，是跨域HTTP請求的根本解決方案 JSONP只支持GET請求，JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。 無論是Node中間件代理仍是nginx反向代理，主要是經過同源策略對服務器不加限制。 平常工做中，用得比較多的跨域方案是cors和nginx反向代理

更多方法參考：juejin.im/post/5c2399…

2.什麼是閉包？

  1. 密閉的容器,相似於set,map容器，存儲數據的
  2. 閉包是一個對象，存放數據的格式：key:value

造成的條件：

  1. 函數嵌套
  2. 內部函數引用外部函數的局部變量

閉包的優勢：

  1. 延長外部函數局部變量的生命週期

閉包的缺點：

  1. 容易形成內存泄漏

注意點：

  1. 合理使用閉包
  2. 用完閉包要及時清除(銷燬)

segmentfault.com/a/119000000…

3.axios是什麼？怎麼使用？描述使用它實現登陸功能的流程？

(一).axios是什麼？

  1. axios 是基於 promise 用於瀏覽器和nodejs的一個http客戶端，主要用於向後臺發送請求的，還有就是在請求中作更多控制。
  2. 支持 promise
  3. 提供了一些併發的方法
  4. 提供攔截器
  5. 提供支持CSRF(跨域請求僞造)

(二).axios fetch ajax(jquery)區別

  1. 前二者都是支持promise的語法，後者默認是使用callback方式
  2. fetch 本質上脫離的xhr 是新的語法(有本身的特性 默認不傳cookie 不能像xhr這樣 去監聽請求的進度)

(三).怎麼使用？

<script>
    axios.get('').then(function(){
        
    }).catch(function(){
        
    })
    
    axios.post('').then(function(){
        
    }).catch(function(){
        
    })
</script>
複製代碼

(四).描述使用它實現登陸功能的流程？

3.const,var,let區別

www.cnblogs.com/zzsdream/p/…

4.new操做符原理解析

www.cnblogs.com/lvmylife/p/…

5.promise的回調機制

juejin.im/post/5b31a4…

6.阻止冒泡，說說vue中事件的阻止冒泡以及原理

caibaojian.com/javascript-…

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在 methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

爲了解決這個問題， Vue.js 爲 v-on 提供了 事件修飾符。經過由點(.)表示的指令後綴來調用修飾符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
 
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
 
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
 
<!-- 只當事件在該元素自己（好比不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
複製代碼

使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 @click.prevent.self 會阻止全部的點擊，而 @click.self.prevent 只會阻止元素上的點擊。

4.基本數據類型

js中有六種數據類型，包括五種基本數據類型（Number,String,Boolean,Undefined,Null）,和一種複雜數據類型（Object）。

5.若是判斷兩個對象是否相等

先判斷對象屬性的長度是否相等，再判斷每一個屬性的值是否相等 juejin.im/post/5c4169…

6.javascript兩個變量互換值，你瞭解多少?

blog.csdn.net/nyflxp/arti…

7.數組去重12種方法？

segmentfault.com/a/119000001…

vue/React/Angular

1.react跟vue的區別？

相同點：

  1. 都有組件化開發和Virtual DOM (提升程序的運行效率)
  2. 都支持props進行父子組件間數據通訊
  3. 都支持數據驅動試圖，不直接操做真是DOM，更新狀態數據界面就自動更新
  4. 都支持服務器端渲染
  5. 都支持natived 的方案，React的React Native, Vue 的Weex, (都支持原生的跨平臺運用)

不一樣點：

  1. 數據綁定：vue實現了數據的雙向邦定，react數據流動是單向的
  2. 組件的寫法不同，React推薦的作法是JSX,也就是把HTML和CSS所有都寫進Javascript了，即 'all in js', Vue推薦的作法是 webpack + vue-loader的單文件組件格式，即 html,css,js 寫在同一個文件
  3. state對象在React應用中不可變的，須要使用setState方法更新狀態，在vue中 state對象不是必須的，數據由data屬性在vue對象中管理
  4. virtual DOM不同，vue會跟蹤每個組件的依賴關係，不須要從新渲染整個組件樹，而對於React而言，每當應用的狀態改變時，所有組件都會從新渲染，因此react中會須要shouComponentUpdata 這個生命週期函數方法來進行控制
  5. React嚴格上只針對MVC的view層，Vue則是MVVM模式

2.Redux 管理狀態的機制

對Redux的基本理解

  1. redux是一個獨立專門用於作狀態管理的JS庫，不是react插件庫
  2. 它能夠用在 react,angular,vue等項目中，但基本與react配合使用
  3. 做用：集中式管理react應用中多個組件共享的狀態和從後臺獲取的數據

Redux的工做原理

1. redux的結構 三個模塊：

  1. store (內部管理着狀態)
  2. reducers (根據老的狀態生成新的狀態)
  3. action creator (專門生成action對象的)

2.store內部管理着state狀態, react組件跟 reducers的通訊就根據store來的，store至關於橋樑，提供了兩個方法，一個讀 getState()，一個更新dispatch()。

Redux 使用擴展

  1. 使用 react-redux 簡化 redux 的編碼
  2. 使用 redux-thunk 實現 redux 的異步編程
  3. 使用 Redux DevTools 實現 chrome 中的調試

vue篇

1.說說Vue組件間通訊方式

通訊種類

  1. 父組件向子組件通訊
  2. 子組件向父組件通訊
  3. 隔代組件間通訊
  4. 兄弟組件間通訊

實現通訊方式

(一). props

  1. 經過通常 標籤 屬性實現父向子通訊
  2. 經過 *** 函數 *** 屬性實現子向父通訊
  3. 缺點： 隔代組件和兄弟組件通訊比較麻煩
  • 隔代組件得逐層傳遞
  • 兄弟組件得藉助父組件

(二). vue自定義事件

  1. vue內置實現，能夠代替函數類型的props
  • 1). 綁定監聽：<MyComp @eventName="callback"
  • 2). 觸發(分發)事件： this.$emit('eventName',data)
在父組件寫入子組件標籤時，給它綁定自定義監聽，給它指定回調函數，在子組件中分發事件，vue提供了$emit('指定時間名'，數據)，這時候數據就會從子組件傳遞給父組件
複製代碼
  1. 缺點： 只適合子向父通訊

(三). 消息訂閱與發佈

  1. 須要引入消息訂閱與發佈的實現庫，如：pubsub-js
  • 1). 訂閱消息： PubSub.subscribe('msg',(msg,data)=>{})
  • 2). 發佈消息：PubSub.publish('msg',data)
  1. 優勢： 此方式可用於任意關係組件間的通訊

(四). vuex

  1. 是什麼： vuex是vue官方提供的集中式管理vue多組件共享狀態數據的vue插件
  2. 優勢： 對組件間關係沒有限制，且相比於pubsub庫管理更集中，更方便

(五). slot

  1. 是什麼：專門用來實現父向子傳遞帶數據的標籤
  • 1). 子組件
  • 2). 父組件
  1. 注意：通訊的標籤模板是在父組件中解析好再傳遞給子組件的

2.關於vue

  1. vue是由餓了麼ued團隊開發並維護的一個漸進式js框架
  2. vue是一個mvvm的框架

3.如何使用vue去構建項目

  1. 使用vue-cli腳手架工具構建項目
  2. 也能夠直接引入vue.js進行項目的構建

4.Vue生命週期函數

vue生命週期分爲四個階段:

  1. 組件建立時（creating）
  2. 模板渲染時（mounting）
  3. 數據更新時（updating）
  4. 組件卸載時（destroying）

vue生命週期完整過程：

5.Vuex 管理狀態的機制

  1. 對Vuex基本理解
  • 1). 是什麼：Vuex是一個專爲Vue.js應用程序開發的狀態管理的vue插件
  • 2). 做用：集中式管理vue多個共享的狀態和後臺獲取數據,主要是爲了解決組件間狀態共享的問題，強調的是集中式管理，主要便於維護，便於解耦，因此不是全部的項目都適合使用vuex。
  1. Vuex的工做原理

6.說出4個vue當中的指令和它的用法

  1. v-if 條件渲染指令，表明存在銷燬
  2. v-bind 綁定指令，用來綁定屬性（簡寫方式是：）
  3. v-on 監聽事情指令（簡寫是@）
  4. v-for 循環指令

7.導航鉤子有哪些？他們有哪些參數？

  1. 導航鉤子其實就是路由的生命週期（vue-router）
  2. 主要分爲 全局 和 局部
  3. 全局鉤子函數
  • 1). beforeEach: 路由切換開始調用
  • 2). afterEach: 在路由切換離開時調用
  1. 局部到單個路由
  • 1). beforeEnter
  1. 組件的鉤子函數
  • 1). beforeRouterEnter
  • 2). beforeRouterUpdate
  • 3). beforeRouterLeave
  1. 參數
  • 1). to:即將進入的目標對象
  • 2). from:當前導航要離開對象
  • 3). next: 是一個函數 調用 resolve 執行一下

8.v-model是什麼？Vue中標籤怎麼綁定事件？

  1. vue中利用v-model來進行表單數據的雙向綁定
  2. v-bind 綁定一個value的屬性
  3. 利用v-on 把當前的元素綁定到一個事件上
<div id="demo">
    <input v-model="inputValue" />
    <p>{{inputValue}}</p>
    
    <input v-bind:value="inputValue2" v-on:input="inputValue2 = $event.target.value" />
</div>
<script>
    var vm = new Vue({
        el:"#demo",
        data:{
            inputValue:'',
            inputValue2:''
        }
    })
</script>
複製代碼

9.路由懶加載

理解：路由懶加載 也叫延遲加載，即在你須要的時候加載

如何使用：使用到了vue中的異步組件，配合webpack的代碼分離，只須要本身返回一個permise函數，resolve中只包含你想要用的那個xxx.vue文件就能夠了。

//在router文件的index.js中進行懶加載
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Detail from '@/components/Detail'

function resolveView(view){
    return ()=> import(/*webpack chunk name*/`@/components/${view}.vue`)
}

export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component: resolveView('HelloWorld')
        },
        {
            path:'/detail',
            name:'Detail',
            component: resolveView('Detail')
        },
    ]
})
複製代碼

10.Vue-loader 解釋一下

(一).什麼是vue-loader?

  • vue-loader 就是一個加載器，能把.vue組件轉化成Javascript模塊

(二).爲何咱們要轉譯這個vue組件

  • 能夠動態的渲染一些數據
  • 對三個標籤都作了優化，script中能夠直接使用es6 style 也默承認以使用sass,而且 還提供了做用域的選擇
  • 另外開發階段，還提供了熱加載

11.用過插槽碼？用的具名插槽仍是匿名插槽呢？

含義：

  1. vue中的插槽 是一個很是好用的東西，slot 說白了就是一個佔位
  2. 在vue當中 插槽包含三種 一種是默認插槽（匿名插槽），一種是具名插槽，一種是做用域插槽
  • 1). 匿名插槽 ：就是沒有名字的，只要默認的 都填到這裏
  • 2). 具名插槽 ：指的是具備名字的
  • 3). 做用域插槽 ： 指只做用域當前的slot

舉例：

//子組件about.vue
<template>
    <div>
        <h2>關於插槽</h2>
        <slot name="header"></slot>                 /*具名插槽*/
        <slot></slot>                               /*匿名插槽*/
        <slot name="footer" say="hello"></slot>     /*say='hello'傳遞的參數*/
    </div>
</template>
<script>
    export default {
        name:'about'
    }
</script>

複製代碼
//父組件：helloWorld.vue
<template>
    <div>
        <About>
            <h2>這是HelloWorld組件的內容</h2>
            <div slot="footer" slot-scope="aaa">
                {{aaa}}這是底部
            </div>
            <div></div>
            <div slot="header" slot-scope="aaa">
                {{aaa}}這是頭部
            </div>
        </About>
    </div>
</template>
<script>
import About from '@/componts/About';
export defalut {
    name:'HelloWorld',
    components：{
        About
    }
}
</script>

複製代碼
  • 打印結果：

12.說說你對vue虛擬DOM的理解

(一).什麼是虛擬dom

  • 說白了 就是以js對象的形式 去添加dom元素
  • 本質上是優化了diff算法
  • 採用了 新舊dom的對比 獲取你差別的dom，一次性更新到 你真實的dom上
  • 虛擬dom自己也有本身的缺陷，他更適合批量修改dom
  • 儘可能不要跨層級修改dom
  • 設置key 能夠最大的利用節點

13.如何理解Vue的MVVM模式

(一). mvvm 和 mvc 之間的區別

  1. mvc 指的是model view controller
  2. mvvm指的是model view viewModel
  3. 而vue專一於view 和 viewModel 的框架

(二). mvc流程

  • 用戶輸入數據(view) =>給到控制器(controller)=>控制器判斷能夠把數去傳遞給model => model傳遞完數據會再給到view
  • 有時候用戶把數據(view)傳遞給控制期(controller),controller會判斷 這個數據不須要通過數據庫請求，就能夠把數據直接返回給view
  • view 不須要業務處理，只須要數據請求，view 也能夠直接像model請求

(三). mvvm流程

14.Vue中keep-alive的做用

(一).什麼是keep-alive

  • 說白了 它能讓不活動的組件 "活着"
  • 它提供了 include 和 exclude 兩個屬性 容許組件有條件的緩存

(二).實現的原理

  • 其實就是在created的時候將須要的緩存的vnode節點 放到 cache 中，在render的時候 根據name進行取出

(三).怎麼使用它

  • 在路由的meta中添加 keepAlive 屬性
  • 跟 router-view 配合使用的
// router/index.js
export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component:resolveView('HelloWorld'),
            meta:{
                keepAlive:true
            }
        }
    ]
})
複製代碼
// App.vue
<template>
    <div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
    </div>
</template>
複製代碼
  • $route.meta.keepAlive 根據頁面的不一樣狀況來緩存

項目中遇到的問題

1.swiper插件從後臺獲取數據沒問題，css代碼啥的也沒有問題，可是圖片不動，應該怎麼解決？

（一）主要緣由:是 swipter 提早初始化了，而這個時候 數據 尚未徹底出來。

（二）解決方法：

  1. 從vue入手：
vue中專門提供了一個方法 nextTick() 用於解決dom的前後執行問題
複製代碼
  1. 從swiper入手(observer屬性,observeParents屬性)：
var myswiper = new Swiper('.swiper-container',{
    autoplay:true,
    loop:true,
    observer:true,      //swiper跟子元素髮生變化時，自動初始化
    observeParents:true     //swiper跟父元素髮生變化時，自動初始化
})
複製代碼

2.vuejs項目性能優化(打包dist文件過大)

www.jianshu.com/p/41075f1f5…

3.vue項目中遇到的問題

www.bbsmax.com/A/kmzLPblGz…

node篇

1.對於前端來講爲何要學node?

  • 如今前端在寫代碼的時候並非像原生那樣，是把前端代碼看成一個工程來寫，而工程要創建在node之上，由於咱們在工程裏面，好比vue,react代碼 實際上這些代碼根本沒法在瀏覽器上運行，咱們得經過 webpack 這樣的工具來編譯轉換，轉換成能在瀏覽器上運行的代碼，而 webpack 是經過 node 來實現的，因此學node主要是理解前端工程化的東西，否則 就不知道npm 是什麼，wepack的底層是什麼，因此遇到工程化比較深的時候就理解不了了
  • 因此node 前端該學，可是學的主要目的不是爲了寫後端，主要爲了瞭解前端的工程化

2.Node如何作版本升級？爲何要使用nvm?

(一). 爲何有的時候咱們要對node的版本進行升級

  1. 什麼狀況下須要把 node v8.0 升級到 node v11.0 ?
  • 新的語法可能在老的版本里面不支持
  • (新版本的node比老版本的node的打包效率要高不少) vue-cli 須要 node版本>8.1.0 ,其實是由於底層的webpack,當咱們的項目很複雜的時候，打包的文件特別特別多，打包速度就會很是的慢，webpack 如今已經升級到了4.0了，webpack比較依賴於新的node的api,從而提升它的打包效率
  1. 如何升級node版本？(須要 nvm 的支持)

(二).nvm是什麼？

  1. 它容許你在你的電腦上安裝不一樣的node的版本，你能夠自由的進行切換
npm install nvm     //安裝nvm
nvm ls              //查看安裝版本
nvm install v11.0.3 //安裝新的版本
nvm use v.11.0.3    //使用某個版本
複製代碼

模塊化的差別,AMD,CDM,COMMONJS,ESMONDULE

AMD含義

  • AMD 是依賴前置, 好比angular.js

區別

1. AMD,CDM 沒有什麼差別

2. COMMONJS 能夠理解爲是 CMD 的一個具體實現，在耦合性上會強一點, 模塊的引入是運行時的引入的機制，是動態的引入，能夠放在if else 中去引用。

if (true) {
    const path =  require('path');
} else {
    const path = require('fs');
}
複製代碼

3. ESMONDULE:es這種模塊化的引入是要放在最前面，而且不能放在任何邏輯裏面，是靜態的引入，你要引入什麼 是一開始就決定好的。

  • 靜態引入的好處：能夠作代碼的預分析，webpack 裏面會有一個 依賴託普，只有你的代碼是一個import 的語法引入的時候，才能靜態的去幫你分析項目的一個依賴結構，幫助你快速打包，若是你不是import這種語法的話，要想用webpack是不可能的
//錯 不能這樣寫
if (true) {
    import a from 'a';
} else {
    import b from 'b';
}
複製代碼

http篇

1.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

一、用戶打開URL連接（域名）

二、瀏覽器查詢的URL的DNS地址（IP地址）

三、DNS服務器查詢到IP以後返回給瀏覽器

四、瀏覽器根據返回的IP地址向web服務器發起請求

5 、web服務器接收請求並處理，以後返回相應的數據（HTML、css、js等信息）給瀏覽器

六、瀏覽器接收到返回的數據以後便開始解析數據過程以下：
   a：解析HTML -- 語法分析

   B：構建DOM樹

   C：解析CSS文件

   d：佈局DOM節點

   瀏覽器在此過程當中還會遇到一些引用的圖片，此時還會繼續向服務器發出請求，但不會發生阻塞，而是繼續往下執行代碼;固然還有可能會遇到的JavaScript的標籤並執行，此時若是須要發出請求的話，瀏覽器會發生阻塞，知道請求，解析，執行完了以後纔會繼續往下執行代碼;（緣由是瀏覽器防止JS腳本中出現修改DOM的狀況致使須要從新佈局DOM節點）

   e：繪製DOM節點（解析到HTML的結束符）---完成

   f：迴流，簡單來講該步驟的執行是因爲dom節點受到了js或者是css的影響致使頁面發生重繪。
複製代碼

www.cnblogs.com/dinghuihua/…

2.HTTP常見狀態碼

下面是常見的HTTP狀態碼：

200 - 請求成功
301 - 資源（網頁等）被永久轉移到其它URL
404 - 請求的資源（網頁等）不存在
500 - 內部服務器錯誤
複製代碼

www.runoob.com/http/http-s…

3.客戶端發送一個HTTP請求到服務器的請求消息包括如下格式

請求行（request line）、請求頭部（header）、空行和請求數據

4.HTTP響應也由四個部分組成

狀態行、消息報頭、空行和響應正文

其餘篇

1.token 存在cookie裏，過時怎麼處理？

  • 過時直接跳到登錄頁面中去。

2.工程上的按需加載？

  • 原理是支持require.ensure語法
  • 或者
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程