面試隨筆

tcp是面向鏈接的，udp是不須要鏈接的。

什麼是模塊化開發，在作項目的時候爲何要作代碼封裝，舉例說明下平時本身怎麼用的。

我的理解，模塊化開發，是根據功能的不一樣，逐個進行開發，模塊之間不能形成直接影響，進行模塊化開發的優勢是便於後期維護
爲何要作代碼封裝？能夠提升代碼的複用性，減小代碼冗餘
我平時作代碼封裝，主要用在網絡請求的封裝等

介紹下大家的項目開發流程是怎麼樣的？你主要負責什麼？

咱們項目開發流程就是產品經理先跟客戶進行溝通，拿到具體的需求，而後產品經理再根據需求出原型設計稿，而後咱們前端與後端進行接口對接商量接口數據的結構，而後咱們再根據UI設計師的設計做業面，而後頁面作好以後在內網測試服務器上給接口，而後嗯修改bug，而後上線，最後再交付項目，而後我主要作的就是寫頁面功能的實現。

display：none和visibility：hidden區別？

display：none指的是元素徹底不陳列出來，不佔據空間，涉及到了DOM結構，故產生重排和重繪
visibility：hidden指的是元素不可見但存在，保留空間，不影響結構，故只產生重繪，但不可觸發綁定事件

什麼是裝飾器語法？

裝飾器語法是用於拓展原來函數功能的一種函數，目的是在不改變原函數名(或類名)的狀況下，給函數增長新的功能。這個函數的特殊之處在於它的返回值也是一個函數，這個函數是內嵌「原「」函數的函數。

遞歸

什麼是MVC？它和MVVM有什麼區別？

MVC是Model-View- Controller的簡寫。即模型-視圖-控制器。
MVVM即Model-View-ViewModel的簡寫。即模型-視圖-視圖模型。
MVVM即Model-View-ViewModel的簡寫。即模型-視圖-視圖模型。模型（Model）指的是後端傳遞的數據。視圖(View)指的是所看到的頁面。視圖模型(ViewModel)是mvvm模式的核心，它是鏈接view和model的橋樑。它有兩個方向：一是將模型（Model）轉化成視圖(View)，即將後端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。二是將視圖(View)轉化成模型(Model)，即將所看到的頁面轉化成後端的數據。實現的方式是：DOM 事件監聽。這兩個方向都實現的，咱們稱之爲數據的雙向綁定。

MVC是Model-View- Controller的簡寫。即模型-視圖-控制器。M和V指的意思和MVVM中的M和V意思同樣。C即Controller指的是頁面業務邏輯。使用MVC的目的就是將M和V的代碼分離。MVC是單向通訊。也就是View跟Model，必須經過Controller來承上啓下。MVC和MVVM的區別並非VM徹底取代了C，只是在MVC的基礎上增長了一層VM，只不過是弱化了C的概念，ViewModel存在目的在於抽離Controller中展現的業務邏輯，而不是替代Controller，其它視圖操做業務等仍是應該放在Controller中實現。也就是說MVVM實現的是業務邏輯組件的重用，使開發更高效，結構更清晰，增長代碼的複用性。

作移動端開發有沒有遇到不兼容的問題?如何解決？(https://yq.aliyun.com/article...

1. 同等比例的圖片在PC機上很清楚,可是手機上很模糊
   使用2倍的背景圖來代替img標籤

   background:url(../images/icon/all.png) no-repeat center center;
      -webkit-background-size:50px 50px;
      background-size: 50px 50px;
      display:inline-block; 
      width:100%; 
      height:50px

2. 防止手機中網頁放大和縮小
   設置meta標籤中的viewport;

   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

3. 浮動子元素撐開父元素盒子高度

   解決方法以下：

   1.父元素設置爲 overflow: hidden;

   2.父元素設置爲 display: inline-block;等

如何解決移動端滾動條卡頓問題？

安卓或者ios
-webkit-overflow-scrolling: auto; / 當手指從觸摸屏上移開，滾動會當即中止 */
-webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開，會保持一段時間的滾動 ，繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文。

描述下fetch 和 ajax 的區別？

1. jQuery ajax

傳統 Ajax 指XMLHttpRequest（XHR），最先出現的發送後端請求技術，隸屬於原始js中，核心使用XMLHttpRequest對象，多個請求之間若是有前後關係的話，就會出現回調地獄。
JQuery ajax 是對原生XHR的封裝，除此之外還增添了對JSONP的支持。通過多年的更新維護，真的已是很是的方便了，優勢無需多言；
若是是硬要舉出幾個缺點，那可能只有：
1.自己是針對MVC的編程,不符合如今前端MVVM的浪潮
2.基於原生的XHR開發，XHR自己的架構不清晰。
3.JQuery整個項目太大，單純使用ajax卻要引入整個JQuery很是的不合理（採起個性化打包的方案又不能享受CDN服務）
4.不符合關注分離（Separation of Concerns）的原則
5.配置和調用方式很是混亂，並且基於事件的異步模型不友好。

1. Axios

Vue2.0以後，尤雨溪推薦你們用axios替換JQuery ajax，想必讓axios進入了不少人的目光中。
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範，
它自己具備如下特徵：
1.從瀏覽器中建立 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些併發請求的接口（重要，方便了不少的操做）
5.從 node.js 建立 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據

防止CSRF:就是讓你的每一個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，後臺就能夠輕鬆辨別出這個請求是不是用戶在假冒網站上的誤導輸入，從而採起正確的策略。

1. fetch

fetch號稱是AJAX的替代品，是在ES6出現的，使用了ES6中的promise對象。Fetch是基於promise設計的。Fetch的代碼結構比起ajax簡單多了，參數有點像jQuery ajax。可是，必定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。
fetch的優勢：

1. 符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裏
2. 更好更方便的寫法。

坦白說，上面的理由對我來講徹底沒有什麼說服力，由於不論是Jquery仍是Axios都已經幫咱們把xhr封裝的足夠好，使用起來也足夠方便，爲何咱們還要花費大力氣去學習fetch？

我認爲fetch的優點主要優點就是：

1. 語法簡潔，更加語義化
2. 基於標準 Promise 實現，支持 async/await
3. 同構方便
4. 更加底層，提供的API豐富（request, response）
5. 脫離了XHR，是ES規範裏新的實現方式

在使用fetch的時候，也遇到了很多問題：
fetch是一個低層次的API，能夠把它考慮成原生的XHR，因此使用起來並非那麼舒服，須要進行封裝。
例如：

1. fetch只對網絡請求報錯，對400，500都當作成功的請求，服務器返回 400，500 錯誤碼時並不會 reject，只有網絡錯誤這些致使請求不能完成時，fetch 纔會被 reject。
2. fetch默認不會帶cookie，須要添加配置項： fetch(url, {credentials: 'include'})
3. fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行，形成了流量的浪費
4. fetch沒有辦法原生監測請求的進度，而XHR能夠

數組的方法

slice()方法

格式:數組.slice(start,end)
    功能:能夠基於當前數組獲取指定區域的元素包含start,不包含end,即[start,end)。
    返回值：生成新的數組，原數組不發生變化。

splice()方法

格式：數組.splice(start,length,數據1,數據2...)
    功能：增長，刪除，修改
    參數：start指開始截取的位置
          lenght截取的元素長度
          從第三個參數開始：在start位置，插入的元素
        
    返回值：截取元素組成的數組

join()方法

格式：數組.join(字符串)
    功能：將數組中的元素,用傳入的拼接符，拼接成一個字符串。
    返回值：拼接好的字符串。

reverse()方法

格式：數組.reverse()
    功能：逆序

sort()方法

格式：數組.sort() 默認從小到大排序，按照字符串進行排序的。
    參數：一個函數，該函數表示怎麼進行排序的。

ECMAscript 5新增的數組方法：

indexOf()

格式：數組.indexOf(item,start)
    參數：item是數組任意元素
          start是指數組下標
    功能：在數組中查找第一次出現item元素下標,從start開始查找。
    返回值：-1表示沒有查找到的元素下標
            >=0表示查找到的元素下標

數組遍歷：

for
    for...in 
    forEach

數組.forEach(function(item,index,array){

item是數組任意元素
    index是指數組下標
    array數組自己

})

數組.map(function(item,index,array){

//遍歷要作的事情

})

數組.filter(function(item,index,array){ //過濾

//過濾的條件

})

數組.some(function(item,index,array){ //查找數組的是否有符合條件的元素，若是有返回true，沒有返回false。

//只找到符合條件的元素，後面的循環都中止了。

})

數組.every(function(){//查找數組的元素是否都符合條件，是返回true，不然返回false.

//

})

數組.reduce(function(prev,next,index,array){

prev 第一次是下標爲0的元素。
    第二次是上一次return的值。
    
next 從下標1開始，當前遍歷到的元素。

array數組自己。

})

字符串

charAt()

字符串.charAt(下標) 下標是從零開始

charCodeAt()

charCodeAt(下標) 返回對應下標對應的ASCII值

fromCharCode(碼值)

功能：將ascii值轉爲對應的字符

substring()、、截取

格式：字符串.substring(start,end)
功能：將字符串中[start,end)提取這一部分字符，生成新字符。
返回值：新字符串。

substr()、、截取

格式：substr(start,length)
返回值：新生成的字符串。

slice() 、、提取

格式：字符串.slice(start,end)
功能：將字符串中[start,end)提取這一部分字符，生成新字符。
返回值：新生成的字符串。

replace()、、替換

格式：字符串.replace(oldStr,newStr)
功能：用newStr替換oldStr
返回值：新生成的字符串。

split() 、、

格式：字符串.split(分割符，length)
參數：分隔符對原字符串進行分割，length返回數組的長度，通常不用。
功能：用分割符對原字符串，進行字符串分割。將分割完畢後的字符串放在數組中返回。
返回值：數組。

join()

格式：數組.join()
功能：將數值轉換成字符串。