前端 - 面試題總彙

前端基礎

1. 標籤上 alt 與 title 屬性的區別是什麼？

alt ：搜索引擎識別，在圖像無法顯示時的替代文本；
title ：元素註釋信息，主要給用戶解讀。當鼠標放到文字或是圖片上時有 title 文字顯示。
（因爲 IE 不標準）在 IE 瀏覽器中 alt 起到了 title 的作用，變成文字提示。
在定義 img 對象時，將 alt 和 title 屬性寫全，可以保證在各種瀏覽器中都能正常使用。

2. DIV+CSS 佈局較 table 有什麼優勢？

DIV+CSS 佈局：
1、頁面體積小，瀏覽速度快，對於一些控制主機流量的網站來說是最大的優勢；
2、更好地被搜索引擎收錄，因爲大部分 html 頁面的樣式寫入了 CSS 文件中，便於被搜索引擎採集收錄；
3、CSS 富含豐富的樣式，使頁面更加靈活，可以根據不同的瀏覽器，而達到顯示效果的統一和不變形；
4、使用 DIV+CSS 製作方法，在修改頁面的時候更加容易省時，提高工作效率；

（table在企業中極少用！！！）

爲什麼我們要棄用 table 標籤？
table的缺點：只有等table標籤裏的內容全部加載完才能顯示網頁。
table：服務器把代碼加載到本地服務器的過程中，本來是加載一行執行一行，但是 table 標籤是裏面的東西要全都下載完之後纔會顯示出來，那麼如果圖片很多的話就會導致網頁一直加載不出來，除非所有的圖片和內容都加載完，如果要等到所有的圖片全部加載完之後才能顯示會影響網頁的性能，所以 table 標籤現在我們基本放棄使用了。

3. CSS 盒子模型與低版本 IE 盒子模型的區別？

CSS盒子模型：包括margin、border、padding、content，content部分不包含其他部分；
IE盒子模型：包括margin、border、padding、content，content部分包含了padding和border；

4. CSS 選擇符有哪些？

id選擇器、類選擇器、標籤選擇器、屬性選擇器、通配符選擇器、子選擇器、相鄰選擇器、後代選擇器

id 選擇器（ #myid）
類選擇器（.myclassname）
標籤選擇器（div,h1,p） ,用逗號分割，可多個
相鄰選擇器（h1+p），兄弟節點
子選擇器（ul>li），
後代選擇器（lia）
通配符選擇器（ * ）
屬性選擇器（a[rel=“external”]），jQuery常用
僞類選擇器（a:hover,li:nth-child）

5. JS 的數據類型有哪些？

基本數據類型：Undefined、Null、Boolean、Number、String
引用數據類型：Array 、Object

null，undefined 的區別?
null ：表示一個對象被定義了，值爲“空值”
undefined ：表示不存在這個值

7. 描述下 JSON 對象的兩個很重要的方法

JSON.parse() ：JSON 字符串轉換爲 JSON 對象
JSON.stringify() ：JSON 對象轉換爲JSON 字符串

8. eval 是做什麼的？

字符串解析成 js 代碼並運行（不建議使用，不安全，耗性能，一次解析成 js 語句，一次執行）；
把JSON字符串轉換成JSON對象： var obj = eval(’(’+str+’)’)

9. 爲什麼 ajax 發送請求會出現亂碼，如何解決？

編碼格式衝突，在傳輸中文數據前加 encodURL() 編碼

如：encodeURI($("#fk_info").val())；在接收參數時把傳過來的內容進行解碼
java中編碼：URLEncoder.encode(strUri, “UTF-8”);
java中解碼：URLDecoder.decode(strUri, “UTF-8”);

10.HTML5、CSS3 新增了哪些新特性？

HTML5：新的語義標籤、增強型表單、視頻/音頻、SVG 與 Canvas繪圖、地理定位、拖放API
CSS3：圓角邊框、多背景圖、顏色與透明度、2d、3d 盒子的變換

HTML5 的新特性：

語義標籤：使界面內容結構化

<header> 文檔頭部
<footer> 文檔尾部
<nav> 文檔導航
<dialog> 對話框

增強型表單，多個新表單input輸入類型：更好的控制輸入與驗證

search 搜索域
tel 輸入電話字段
url 地址的輸入域

表單元素:
<datalist> 輸入域的選項列表
<keygen> 驗證用戶，標籤規定用於表單的密鑰對生成器字段
<output> 用於不同類型的輸出

表單屬性：
required 輸入域不能爲空
min/max 設置元素最小/大值
height/width 設置image類型<input>標籤圖像的高/寬

視頻/音頻：使用元素設置播放音頻文件的標準

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
<audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg

Canvas繪圖：標籤是圖形容器，用腳本來繪製圖形； SVG繪圖：可伸縮的矢量圖形
SVG 與 Canvas兩者間的區別：
SVG ：使用 XML 描述 2D 圖形的語言；基於 XML，這意味着 SVG DOM 中的每個元素都是可用的，可以爲某個元素附加 JavaScript 事件處理器；每個被繪製的圖形都被視爲對象，如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
Canvas ：通過 JavaScript 來繪製 2D 圖形；逐像素進行渲染，一旦圖形被繪製完成，瀏覽器則不會關注，如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。
地理定位：geolocation定位用戶的位置
拖放API

CSS3 的新特性：

圓角邊框

border-radius：6px

多背景圖

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

顏色與透明度，由原來的rgb到現在的rgba

background: rgba(0,0,0,.5);

2d、3d 盒子的變換

  transform: translate(50px,100px);//移動
  transform: rotate();//旋轉
  transform: scale();//縮放
  transform: skew();//傾斜

用於元素的直接或者鼠標感應變化，沒有其他變幻參數（如延時，持續時間，變幻曲線），立即改變。

11.什麼是響應式設計？

響應式設計是在開發和設計網站過程中產生的一種方式，目的是讓內容佈局能隨用戶使用顯示器的不同而變化。
優點：可兼容所有尺寸的屏幕，手持屏幕尺寸繁多，兼容性好；開發一次，pc版、觸屏版、手機版融合爲一；
缺點：屏幕兼容要求前端工程師對各種瀏覽器差異性瞭解要深入。
總結：響應式Web設計在企業站點，微型或者小站還是可以用的，對於大中型站點（尤其大信息量展示的）不合適。

13.iframe 的優缺點？

優點：方便調入靜態頁面；頁面和程序分離；
缺點：樣式/腳本需要額外鏈入，會增加請求（js防盜鏈只防得了小偷，防不了大盜）；用戶體驗感差；調用外部頁面需要額外調用css，給頁面帶來額外的請求次數；阻塞主頁面 onload 事件；影響頁面並行加載（瀏覽器限制相同域的鏈接）；

window 的 onload 事件需要在所有 iframe 加載完畢後(包含裏面的元素)纔會觸發。在 Chrome 裏，通過 JavaScript 動態設置 iframe 的src可以避免這種阻塞情況。

iframe 和 frame 的區別：
1、frame不能脫離frameSet單獨使用，iframe可以；
2、frame不能放在body中；
3、嵌套在frameSet中的iframe必需放在body中，不嵌套在frameSet中的iframe可以隨意使用；
4、frame的高度只能通過frameSet控制；iframe可以自己控制，不能通過frameSet控制
5、如果在同一個頁面使用了兩個以上的iframe，在IE中可以正常顯示，在firefox中只能顯示出第一個；使用兩個以上的frame在IE和firefox中均正常

14.meta viewport 是做什麼用的，怎麼寫？

控制頁面在移動端不要縮小顯示。

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
name			設置爲viewport，表示供移動設備使用. content定義viewport的屬性.
width/height	表示移動設設備下顯示的寬/高度爲設備寬/高度
user-scalable	設置爲no，不允許用戶縮放
initial-scale	表示設備與視口的縮放比率
maximum/minimum	表示縮放的最大/小值, maximum > minimum

15.json 和 xml 數據的區別

json：輕量級，傳遞速度快；佔帶寬小，易壓縮；更方便與js交互，易解析，項目交互中多用於數據交互；
xml：重量級；佔帶寬大；對數據的描述性好，項目交互中多用於配置文件；

16.document.write 和 innerHTML 的區別

document.write ：直接寫入頁面的內容流，在寫之前若沒有調用document.open，瀏覽器會自動調用open，寫完關閉之後重新調用該函數，會導致頁面被重寫；
innerHTML ：是DOM頁面元素的一個屬性，代表該元素的html內容，可精確到某個 DOM 節點進行更改，不會導致頁面全部重繪；如果想修改document的內容，則修改document.documentElement.innerElement；
innerHTML很多情況下都優於document.write，因爲它可以精確控制要刷新頁面的某一部分。

17.jQuery 庫中的 $ 是什麼？

$就是jQuery的別稱，是jQuery庫提供的一個函數。

1、可以通過 $() 裏的參數進行查找和選擇html文檔中的元素

	$('#tmp');//這是查找dom的id等於tmp的元素

2、訪問 $ 中定義的函數

	$.ajax(options)

18.$(document).ready() 和 window.onload 的區別？

$(document).ready() 方法：可在 DOM 載入就緒時就執行，並調用執行綁定的函數；可多次使用不同事件處理程序；
window.onload 方法：網頁中所有元素(包括元素的所有關聯文件)完全加載後執行；一次只能保存對一個函數的應用；

window.onload 和 $(document).ready()主要有兩點區別：

1、執行時機
window.onload：在網頁中所有元素（包括元素的所有關聯文件）都完全加載到瀏覽器之後才執行。
$(document).ready()：只要在DOM完全就緒時，就可以調用了，比如一張圖片只要<img>標籤完成，不用等這個圖片加載完成，就可以設置圖片的寬高的屬性或樣式等。
從二者的英文字母可以大概理解上面的話，onload即加載完成，ready即DOM準備就緒。
2、註冊事件　
$(document).ready()：可以多次使用不同的事件處理程序，
window.onload：一次只能保存對一個函數的引用，多次綁定函數只會覆蓋前面的函數。

兩個window.onload在同一個頁面上可能效果會展示不了。

19.行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的 HTML元素，例如：br、meta、hr、link、input、img

20.你爲什麼要使用 jQuery？

jQuery的優點：輕量級框架；選擇器強大；DOM操作封裝豐富；jQuery文檔豐富；支持的插件豐富；
事件處理機制可靠；Ajax完善；瀏覽器兼容性好；支持鏈式操作、隱式迭代；行爲層與結構層分離；

jquery的優點：

輕量級
JQuery非常輕巧，採用Dean Edwards編寫的Packer壓縮後，大小不到30KB；
如果使用Min版並且在服務器端啓用Gzip壓縮後，大小隻有18KB。
強大的選擇器
JQuery支持所有CSS選擇器，除此之外，JQuery有獨創的高級選擇器，另外還可以加入插件使其支持XPath選擇器，甚至開發者可以自定義選擇器。
DOM操作封裝豐富
JQuery封裝了大量常用的DOM操作，使開發者在編寫DOM操作相關程序的時候能夠得心應手。
JPA文檔豐富
JQuery的文檔非常豐富，現階段多位英文文檔，中文文檔相對較少。很多熱愛JQuery的團隊都在努力完善JQuery中文文檔，例如JQuery的中文API。
支持的插件豐富
JQuery的易擴展性，吸引了很多技術大咖來編寫JQuery的擴展插件。目前已經有超過幾百種官方插件支持，而且還不斷有新插件面試。
可靠的事件處理機制
JQuery的事件處理機制吸收了JavaScript事件處理函數的精華，JQuery在處理事件綁定的時候相當可靠。在預留退路、循序漸進以及非入侵式編程思想方面，JQuery也做得非常不錯。
完善的Ajax
JQuery將所有的Ajax操作封裝到一個函數$.ajax()裏，使得開發者處理Ajax的時候能夠專心處理業務邏輯而無需關心複雜的瀏覽器兼容性和XMLHttpRequest對象的創建和使用的問題。
不污染頂級變量
JQuery只建立一個名爲JQuery的對象，它所有的函數方法都在這個對象中，$可以隨時交流控制權，並不會污染其他對象，因此，JQuery可以與其他JavaScript庫共存。
出色的瀏覽器兼容性
作爲一個流行的JavaScript庫，瀏覽器的兼容性是必須具備的條件之一。JQuery能夠在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常運行。JQuery同時修復了一些瀏覽器之間的的差異，使開發者不必在開展項目前建立瀏覽器兼容庫。
鏈式操作方式、隱式迭代
JQuery的鏈式操作方式：對發生在同一個JQuery對象上的一組動作，可以直接繼續編碼無需要重複獲取對象。
JQuery的隱式迭代：當用JQuery找到帶有“.class”類的全部元素，在隱藏時無需循環遍歷每一個返回的元素。JQuery裏的方法都被設計成自動操作的對象集合，而不是單獨的對象，避免了大量的循環結構，大幅度地減少代碼量。
行爲層與結構層的分離
開發者可以使用選擇器選中元素，然後直接給元素添加事件。這種將行爲層與結構層完全分離的思想，可以使JQuery開發人員和HTML或其他頁面開發人員各司其職，擺脫過去開發衝突或個人單幹的開發模式。同時，後期維護也非常方便，不需要在HTML代碼中尋找某些函數和重複修改HTML。

21.jQuery選擇器和 CSS選擇器的區別？

jQuery 選擇器支持 CSS選擇器，jQuery 選擇器可用來添加樣式和行爲，而CSS選擇器只能添加樣式。

區別：
1、兩者屬於不同的兩門語言，jQuery是屬於js的一個框架，jQuery選擇器是js裏面的選擇器；
css是另一門不同於js的語言，CSS選擇器是css選擇器，則兩者在根本上是不同的。
2、但兩者有交集，都可作爲網頁或瀏覽器的解析語言，js可通過修改瀏覽器的dom對象來實現對css的修改。
3、css選擇器用於css當中，js選擇器用於js當中，有時兩者使用相同的id標識選擇對象。
jQuery選擇器和CSS選擇器的寫法十分類似，都具有隱式迭代的特點，無需循環遍歷符合選擇器要求的每個元素，使用起來相對方便，通常，把css選擇器用 $("")包起來就成了一個jQuery選擇器。

22.web 前端，怎麼做頁面性能優化？

前端性能優化的思路：分析一個頁面從輸入 URL 到頁面加載顯示完成的所有步驟，採用 分治法 逐步優化。

內容方面：
1.減少 HTTP 請求與DOM 元素數量
2.使用 Ajax 緩存

針對 CSS 與 JavaScript：
1.把 CSS 放到代碼頁上端；JS腳本放到代碼頁底部
2.精簡 JS 與 CSS，並從頁面中剝離 JS與 CSS
3.避免 CSS 表達式；移除重複js腳本

面向圖片(Image)：
1.優化圖片、使用恰當的圖片格式
2.不要在HTML中使用縮放圖片
3.使用 CSSSprites 技巧對圖片優化

優化DNS查詢
減少域名：儘量把所有的資源放在一個域名下。
一個域名同時可以發4（IE8）或 8（Chrome）個請求，請求文件少，用1個域名，文件多用多個域名。
優化TCP協議
TCP連接複用：連接回復加上請求頭：keep-alive，第一次請求不斷開，第二次請求複用。
使用http 2.0版本：多路複用，連接複用率會更高
優化發送HTTP請求
合併JS或CSS文件
inline image：使用data:url scheme來內連圖片
減小cookie體積，每個請求都會附帶cookie，所以不要濫用cookie。
合理使用CasheControl代替發送HTTP請求
同時發送多個請求（瀏覽器自帶）IE8可以同時請求下載4個的css文件，Chrome可以同時請求下載8個。
優化接受響應
設置Etags：瀏覽器重複與請求服務器一樣的文件，ETag響應304。
Gzip壓縮大文件使用macos gzip，npm server gzip gzip 文件名
其響應頭爲Content-Encodinging：gzip，先壓縮接收到再解壓縮。缺點：耗費瀏覽器CPU，權衡
優化DOCTYPE
不能不寫，不能寫錯
優化CSS、JS請求
使用CDN：用CDN請求靜態資源同時可以增大同時下載數量，內容分發網絡（CDN）可以使請求總時間降低，也可以減少cookie
CSS放在head裏：使其儘早下載，因爲chrome需要下載完所有的css後才渲染頁面
JS放在body裏的最後：儘早顯示整個頁面，獲取節點。
使用懶加載
組件懶加載
const xxx =()=>import(’./components/xxx.vue’)
路由懶加載
優化用戶體驗
用戶看到哪些內容就請求哪些內容
加一個loading動畫用戶會感覺時間變快

減少監聽器，使用事件委託

    <body>
        <ul>
            <li>1</li><li>2</li><li>3</li><li>4</li>
        </ul>
        <script>
            let liList = document.querySelectorAll('li')

            // liList[0].onclick = ()=>console.log(1)
            // liList[1].onclick = ()=>console.log(2)
            // liList[2].onclick = ()=>console.log(3)
            // liList[3].onclick = ()=>console.log(4)
            //監聽太多

            let ul = document.querySelector('ul')

            ul.onclick = (e) => {
                if (e.target.tagName === 'LI') {
                    console.log(e.target.innerText)

                }
            }//減少監聽，採用事件委託
        </script>
    </body>

優化圖片大小，圖片壓縮

減少或合併DOM操作或使用虛擬DOM

// 不好的方式
var elem = $('#elem');
for (var i = 0; i < 100; i++) {
 elem.append('<li>element '+i+'</li>');
}

// 好的方式
var elem = $('#elem' ),
arr = [];
for (var i = 0;  i < 100; i++) {
  arr.push('<li>element ' +i+'</li>' );
}
elem.append(arr. join(''));
12. 對大量數據計算使用緩存
// data.length === 100000
   for(var i = 0;i < data.length;i++){
     // do something...
   }
   //上面的代碼沒有下面的好
   for(var i = 0,len = data.length;i < len;i++){
     // do something...
   }

使用setTimeout降低調用接口頻率

BootStrap

23.說一下你對Bootstrap的理解？

Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。
Bootstrap 基於 HTML、CSS、JavaScript，具有移動設備優先、瀏覽器支持良好、容易上手、響應式設計等優點，所以 Bootstrap 被廣泛應用。

24.不同尺寸的設備，Bootstrap 設置的 class 前綴有哪些？

超小設備手機（<768px）：.col-xs;
小型設備平板電腦（>=768px）：.col-sm;
中型設備臺式電腦（>=992px）：.col-md;
大型設備臺式電腦（>=1200px）：.col-lg;

25.什麼是 Bootstrap 網格系統（Grid System）？

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，可以隨着設備或視口大小的增加而適當地擴展到 12 列。
它包含了預定義類（簡單佈局選項）和混合類（生成更多語義佈局）。響應式網格系統隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多 12 列。

26.Bootstrap 網格系統列與列之間的間隙寬度是多少？

間隙寬度爲 30px（一個列的每邊分別是 15px）。

EasyUI

27.介紹一下 easyui 的佈局

easyui：分爲上，中，下，左，
右面板一般在工作中使用上（企業 logo,登錄,退出）；左（菜單）；中（展示數據）；

28.Easyui 如何實現表單驗證

提供了一個 validatebox 插件來驗證一個表單， input 表單根據 validType 屬性來應用驗證；
validType=“email” 郵箱驗證； required=“true” 必填項；

<input class="easyui-validatebox" type="text" name="name" validType="email" required="true"></input>

29.Easyui 常用的組件有哪些？

datagrid：數據表格；window：窗口；form：表單；layout：佈局；tabs：選項卡；according：摺疊面板；combobox：下拉列表；

Vue

30. 說說對 Vue.js 的理解？

Vue.js 是一個輕巧、高性能、可組件化的 MVVM 庫，同時擁有非常容易上手的 API；Vue.js 是一個構建數據驅動的 web 界面的漸進式框架，與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。
目標：通過儘可能簡單的 API 來實現響應的數據綁定和組合的視圖組件。
Vue.js 的核心是一個響應的數據綁定系統。

使用 Vue 的好處?
vue 兩大特點：響應式編程、組件化；
vue 的優勢：輕量級框架、雙向數據綁定、組件化、視圖與數據與結構的分離、虛擬 DOM、運行速度快

32.MVVM 定義

MVVM 是 Model-View-ViewModel 的簡寫，模型-視圖-視圖模型。
【模型】指的是後端傳遞的數據（數據：json）。
【視圖】指的是所看到的頁面。
【視圖模型】mvvm 模式的核心，它是連接 view 和 model 的橋樑。
有兩個方向：
將【模型】轉化成【視圖】：即將後端傳遞的數據轉化成所看到的頁面（將後端Ajax數據渲染到前端視圖）。實現的方式是：數據綁定。
將【視圖】轉化成【模型】：即將所看到的頁面轉化成後端的數據。實現的方式是：DOM 事件監聽。
這兩個方向都實現的，我們稱之爲數據的雙向綁定。
總結：
在 MVVM 的框架下view和model是不能直接通信的，它們通過 ViewModel 來通信，ViewModel 通常要實現一個 observer 觀察者，當數據發生變化，ViewModel 能夠監聽到數據的這種變化，然後通知到對應的視圖做自動更新；
當用戶操作視圖，ViewModel 也能監聽到視圖的變化，然後通知數據做改動，這實際上就實現了數據的雙向綁定。並且 MVVM 中的 View 和 ViewModel 可以互相通信。

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

34.Vue 的響應式原理

當一個 Vue 實例創建時，vue 會遍歷 data 選項的屬性，用 Object.defineProperty 將它們轉爲 getter/setter，並且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。
每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄爲依賴，之後當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

35.第一次頁面加載會觸發哪幾個鉤子？

四個： beforeCreate、created、beforeMount、mounted ，並在 mounted 的時候 DOM 渲染完成。

36.爲什麼vue 中 data 必須是一個函數？

對象爲引用類型，當重用組件時，由於數據對象都指向同一個 data 對象，當某一個組件修改 data 時，其他重用的組件中的 data 會同時被修改；
而使用返回對象的函數，由於每次返回的都是一個新對象（Object 的實例），引用地址不同，則不會出現這個問題。

37.vue 做數據渲染時，如何保證將數據原樣輸出？

v-text：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會作爲普通文本輸出；
v-html：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會被渲染；
{{}}：插值表達式，可以直接獲取 Vue 實例中定義的數據或函數，使用插值表達式的時候，值可能閃爍；而使用 v-html、v-text 不會閃爍，有值就顯示，沒值就隱藏；

38.active-class 是哪個組件的屬性？

active-class 是vue-router 模塊的 router-link 組件的屬性；用來做選中樣式的切換。

39.vue-router 有哪幾種導航鉤子？

1，全局導航鉤子：
前置守衛router.beforeEach(to,from,next)，next 方法必須要調用，否則鉤子函數無法 resolved；
後置鉤子router.afterEach((to, from) ；
2，組件內的鉤子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave，直接在路由組件內部定義；
3，單獨路由獨享鉤子：單個路由獨享的導航鉤子，在路由配置上直接進行定義；

//前置守衛
//to：要進入的目標，是一個路由對象
//from：要離開的目標，是一個路由對象
//next：是一個必須要調用的方法，具體的執行效果依賴next方法調用的參數
meta: { may: true }
router.beforeEach((to, from, next) => {
})

//後置鉤子
router.afterEach((to,from) => {
})

//組件內的鉤子
beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
},
beforeRouteUpdate(to, from, next) {
    // 在當前路由改變，但是依然渲染該組件是調用
},
beforeRouteLeave(to, from ,next) {
    // 導航離開該組件的對應路由時被調用
}
//beforeRouteEnter 不能獲取組件實例 this，因爲當守衛執行前，組件實例被沒有被創建出來
//剩下兩個鉤子則可以正常獲取組件實例 this。
//但並不意味着在 beforeRouteEnter 中無法訪問組件實例
//可以通過給 next 傳入一個回調來訪問組件實例，在導航被確認時執行這個回調，這時就可以訪問組件實例
beforeRouteEnter(to, from, next) {
    next (vm => {
        // 這裏通過 vm 來訪問組件實例解決了沒有 this 的問題
        //注意，僅僅是 beforRouteEnter 支持給 next 傳遞迴調，其他兩個並不支持。因爲歸根結底，支持回調是爲了解決 this 問題，而其他兩個鉤子的 this 可以正確訪問到組件實例，所有沒有必要使用回調
    })
}

//單獨路由獨享鉤子
cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
            }
        }
    ]
});

//router.beforeResolve 註冊一個全局守衛，和 router.beforeEach 類似

完整的導航解析流程：

1，導航被觸發
2，在失活的組件裏調用離開守衛
3，調用全局的 beforeEach 守衛
4，在重用的組件裏調用 beforeRouteUpdate 守衛
5，在路由配置裏調用 beforEnter
6，解析異步路由組件
7，在被激活的組件裏調用 beforeRouteEnter
8，調用全局的 beforeResolve 守衛
9，導航被確認
10，調用全局的 afterEach 鉤子
11，觸發 DOM 更新
12，在創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數

40. $route 和 $router 的區別

$route 是“路由信息對象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數；
$router 是“路由實例對象”，包括了路由的跳轉方法、鉤子函數；

41.vue 幾種常用的指令

v-if 、v-show、v-else、v-for 、v-bind（綁定屬性，簡寫：）、v-on（事件綁定）。

v-if 和 v-show 區別?
v-if 和 v-show 都可以動態控制元素的隱藏和顯示，但是他們控制的原理不同。
v-if ：把dom元素整個渲染或者刪除，如果刪除，也就是頁面中不存在這個dom元素，以此達到隱藏的效果，v-if在每次切換的時候都會重新創建或者銷燬元素，有較高的切換性能消耗；
v-show：無論初始條件是什麼，元素都會被渲染，就是dom元素始終是存在的，只是通過控制css中的display屬性block（滿足）或 none（不滿足）來控制顯示或隱藏；它擁有比較高的初始渲染消耗；
元素頻繁切換，用v-show；元素很少切換，或可能永遠都不會顯示，用v-if；

43.vue 常用的修飾符？

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

44.vue-loader 是什麼？使用它的用途有哪些？

vue-loader：是解析 .vue 文件的一個加載器。
用途：解析和轉換 .vue 文件，提取出其中的邏輯代碼 script、樣式代碼 style、以及 HTML 模版 template，再分別把它們交給對應的 Loader 去處理。

45.computed、watch、methods 的區別

computed 計算屬性：聲明式的描述一個值依賴了其它的值。在模板裏把數據綁定到一個計算屬性上時，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能非常強大，它可以讓代碼更加聲明式、數據驅動且易於維護。場景：一個數據受多個數據的影響。

watch 監聽：監聽定義的變量，當定義的變量的值發生變化時，調用對應的方法。就好在 div 寫一個表達式 name， data 裏寫入 num 和 lastname、firstname，在 watch 裏當 num 的值發生變化時，就會調用 num 的方法，方法裏面的形參對應的是 num 的新值和舊值，計算屬性計算的是 Name 依賴的值，它不能計算在 data 中已經定義過的變量。場景：一個數據影響多個數據

methods 方法：函數，需要手動綁定事件調用；不會使用緩存

46.什麼是 js 的冒泡？Vue 中如何阻止冒泡事件？

js 冒泡：當父元素內多級子元素綁定了同一個事件，js 會依次從內往外或者從外往內地執行每個元素的該事件，從而引發冒泡；
js 解決冒泡：event.stopPropagation()
vue 解決冒泡：事件.stop，例如：@click.stop="" ， @mouseover.stop=""

47.vue 組件通信

1.父子組件傳值，父組件傳給子組件：子組件通過 props 方法接受數據；子組件傳給父組件：$emit 方法傳遞參數；
2.非父子組件間的數據傳遞，兄弟組件傳值 eventBus，創建一個事件中心相當於中轉站，可以用來傳遞/接收事件；
3.使用 vuex；
4.路由帶參數傳值

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳轉到B
this.$route.query.orderId

Vue 子組件調用父組件：
1，直接在子組件中通過this.$parent.event來調用父組件的方法；
2，在子組件裏用 $emit 向父組件觸發一個事件，父組件監聽這個事件；
3，父組件把方法傳入子組件中，在子組件裏直接調用這個方法；

Vue 父組件調用子組件：
1，在父組件裏通過 $refs 拿到子組件，然後調用 $emit 方法通知子組件;
2，在子組件裏通過 $on 方法監聽上一步廣播的事件名，然後在 callback 裏發ajax就行;

使用Vuex出現的問題：
最近做項目過程中發現了一個問題，想要獲取vuex裏的數據，並且這個數據還要實時更新的話，是不能保存在data裏的，必須使用computed計算屬性。

而我在使用的過程中一開始是全部將數據獲取保存在了data裏，但沒有出現問題的原因是我所寫的那個組件每一次都會重新執行created生命週期鉤子函數，也就是data每一次都會重新初始化，所以沒有發現這個問題，但實際上data就如同一個純粹的字面量，它只會保存第一次獲取到的vuex裏的值，之後是不會再進行更新的。

換句話說，也就是data裏冒號右邊的內容依賴更新時，冒號左邊的屬性值是不會變更的，仍然是初始化的時候的那個值。

而computed是依賴追蹤的，它再值發生改變的時候會觸發重新計算，所以 想要對vuex裏保存的數據進行獲取操作，並且想要實時更新，使用computed屬性比較穩妥。

48.keep-alive 組件的作用是什麼？

<keep-alive></keep-alive>包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免重新渲染。

如：有一個列表和一個詳情，那麼用戶就會經常執行打開詳情=>返回列表=>打開詳情。這樣的話列表和詳情都是一個頻率很高的頁面，那麼就可以對列表組件使用 <keep-alive></keep-alive> 進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是重新渲染。

說說 <keep-alive></keep-alive> 的原理？
在 created 函數調用時，將需要緩存的 VNode 節點保存在 this.cache 中，在 render（頁面渲染）時，如果 VNode 的 name 符合緩存條件（可以用 include 以及 exclude 控制），則會從 this.cache 中取出之前緩存的 VNode 實例進行渲染。
VNode：虛擬DOM，其實就是一個JS對象

49.$nextTick 是什麼？

vue 實現響應式並不是數據發生變化後 dom 立即變化，而是按照一定的策略來進行 dom 更新。
$nextTick 是在下次 DOM 更新循環結束之後執行延遲迴調，在修改數據之後使用 $nextTick，則可以在回調中獲取更新後的 DOM。

51.Promise 對象是什麼？

1.Promise 是異步編程的一種解決方案，是一個容器，裏面保存着某個未來纔會結束的事件（通常是一個異步操作）的結果。
從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。
Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。
promise 對象是一個構造函數，用來生成 Promise 實例；
2.promise 的兩個特點：對象狀態不受外界影響，並且一旦狀態改變，就不會再變，任何時候都可以得到結果
（pending 狀態 --> fulfilled或pending --> rejected）

52.Axios 的特點有哪些？

1、axios 是一個基於 promise 的 HTTP 庫，支持 Promise API；
2、可以攔截請求和響應；
3、可以轉換請求數據和響應數據，並對響應回來的內容自動轉換爲 json 類型的數據；
4、安全性更高，客戶端支持防禦 XSRF；

Ajax和Axios、Fetch的區別?

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.配置和調用方式非常混亂，而且基於事件的異步模型不友好。
Axios ： Vue2.0之後，尤雨溪推薦大家用Axios替換JQuery Ajax。
Axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規範，它本身具有以下特徵：
1.從瀏覽器中創建 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些併發請求的接口（這點很重要，方便了很多的操作）
5.從 node.js 創建 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據
Fetch ： fetch號稱是Ajax的替代品，在ES6中出現，使用了ES6中的promise對象，基於promise設計。Fetch的代碼結構比Ajax要簡單，參數有點像jQuery Ajax。但是，Fetch不是Ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。
fetch的優點：
1.語法簡潔，更加語義化
2.基於標準 Promise 實現，支持 async/await
3.同構方便，使用 isomorphic-fetch
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可以

總結：Axios既提供了併發的封裝，也沒有fetch的各種問題，而且體積也較小，當之無愧現在最應該選用的請求的方式。

53.vue 中的 ref 是什麼？

ref 被用來給元素或子組件註冊引用信息。
引用信息將會註冊在父組件的 $refs 對象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
如果用在子組件上，引用就指向組件實例。

54.vue 如何兼容 ie

安裝babel-polyfill 插件

55.頁面刷新 vuex 被清空解決辦法？

1.localStorage 存儲到本地再回去
2.重新獲取接口獲取數據

56.Vue 與 Angular 以及 React 的區別？

1、 Vue與 AngularJS 的區別：
相同點：
都支持內置指令和自定義指令；都支持內置過濾器和自定義過濾器；都支持雙向數據綁定；都不支持低端瀏覽器。
不同點：
AngularJS 的學習成本高，比如增加了依賴注入（Dependency Injection）特性；Vue.js 本身提供的 API 都比較簡單、直觀；
AngularJS 依賴對數據做髒檢查，所以 Watcher 越多越慢；Vue.js 基於依賴追蹤觀察，使用異步隊列更新，所有數據獨立觸發。

2、 Vue與 React 的區別：
相同點：
React 採用特殊的 JSX 語法，Vue.js 在組件開發中也推崇編寫.vue 特殊文件格式，兩者都需要編譯後使用；
都是組件，組件實例之間可以嵌套；都提供合理的鉤子函數，可讓開發者定製化地去處理需求；
都不內置列數 AJAX、Route 等功能到核心包；以插件的方式加載；在組件開發中都支持 mixins 的特性。
不同點：
React 採用的 Virtual DOM 會對渲染出來的結果做髒檢查；Vue.js 在提供了指令，過濾器等，可方便、快捷地操作 Virtual DOM。

57.localstorage 和 sessionstorage 是什麼?區別是什麼?

localstorage 和 sessionstorage 都用來存儲客戶端臨時信息的對象，都只能存儲字符串類型。
區別:
localstorage 生命週期永久，除非用戶在瀏覽器提供的 UI 上清除 localstorage 信息，否則這些信息將永遠存在。
sessionstorage 生命週期爲當前窗口或標籤，當窗口或標籤被關閉，所有的 sessionstorage 數據也被清空。

不同瀏覽器無法共享 localstorage 或 sessionstorage 中的信息。
相同瀏覽器的不同頁面可以共享相同的 localstorage（頁面屬於相同的域名和端口），但是不同頁面或標籤間無法共享 sessionstorage。
這裏需要注意的是，頁面及標籤指頂級窗口，如果一個標籤頁包含多個 iframe 標籤，他們屬於同源頁面，那麼他們之間可以共享 sessionstorage 。

58.爲什麼要進行前後端分離？前後端分離的優缺點？

前後端分離的優點：
前端：專門負責前端頁面和特效的編寫；追求頁面美觀、頁面流暢、頁面兼容；
後端：專門負責後端業務邏輯的處理；追求高併發、高可用、高性能；
各自負責各自的領域，提高開發效率；

前後端分離的缺點：
1 、當接口發生改變的時候，前後端都需要改變；
2、當發生異常的時候，前後端需要聯調；（聯調非常浪費時間！)

ElementUI

58.說說你對ElementUI的理解？

Element-UI是餓了麼前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架，手機端有對應框架是 Mint UI 。
Element UI 是一套採用 Vue 2.0 作爲基礎框架實現的組件庫，它面向企業級的後臺應用，能快速搭建網站，極大地減少研發人力與時間成本。

59.ElementUI 的計數器組件怎麼使用？

首先引入 ui 框架，然後放的 vue 裏面寫 <el-input-num></el-input-num>

60.ElementUI 的表單組件怎麼使用？它有哪些屬性？

先寫 el-form 組件，裏面寫 el-form-item 用來放輸入框，

屬性：
el-from 屬性： ref、rules，綁定：model
el-form-item 屬性： prop 用來定義一個該輸入框對應的驗證規則

直接查官網就行！

61.ElementUI 的表單驗證怎麼實現？

表單驗證：
在開始 el-form 中綁定:model=“a”，規則:rules=“規則名 b”，然後:ref 跟之前的 a 一樣的值，遵守規則的數據名。
在 data 中定義 a，裏面放表單的所有數據。
在 data 屬性中定義 rules 規則，例如：必須填寫就是 required:true，最小最大就是 min 和 max。
裏面放 el-form-item，上面定義 prop 取一個名字等於什麼，rules 中用這個 prop 裏面定義的名字作爲規則屬性。

怎麼自定義規則？
在 rules 的規則中定義 validata 屬性，屬性值就是自定義規則的名稱；
在 data 裏寫 var 自定義規則名稱 =(rule,value,callback)=> 如果校驗正確就返回 callback()，校驗錯誤就返回 callback(newError(‘格式錯誤！’))

直接查官網就行！

62.ElementUI 的表格組件怎麼使用？它有哪些屬性？

用一個 <el-table></el-table> 這個是最外面的上面，裏面用 <el-table-row></el-table-row> 。
屬性：
el-table 組件的 data 用來獲取數據；
每一行 el-table-row 的數據通過 prop 屬性。

jQuery

jQuery的選擇器

基本選擇器：ID選擇器、類選擇器、元素選擇器、通配符（多個選擇器：並集，用“，” ；交集，用“ ” ）

層次選擇器：（查找所有元素，查詢子元素【 > + 】）

過濾選擇器：獲取(符合條件)元素（:first、:last、:even、:odd、:gt、:lt）

// 0 < x < 4 先小於後大於
$("ul li:lt(4):gt(0)").css.......

表單選擇器：獲取單選框(input📻checked)、多選框(input:checkbox:checked)、下拉(i)的值

var v = $("#myForm input:radio:checked").val();

$("#myForm input:checkbox:checked").each(function(){
	var v = $(this).val();
})

$("#myForm select option:selected").val();

$工具方法

$.each()：遍歷數組、對象、對象數組中的數據
$.trim()：去除字符串兩邊的空格
$.type(obj)：得到數據的類型
$.isArray(obj)：判斷是否是數組
$.isFunction(obj)：判斷是否是函數
$.parseJSON(obj)：解析json字符串轉換爲js對象或數組

jQuery屬性和CSS

屬性

attr()：獲取某個標籤屬性的值，或設置某個標籤屬性的值
removeAttr()：刪除某個標籤屬性
addClass()：給某個標籤添加class屬性值
removeClass()：刪除某個標籤class屬性值
prop()：和attr()類似，但prop用於屬性值爲Boolean類型的情況（多選）
html()：獲取某一個標籤體內容（可包含子標籤）
text()：獲取某一個標籤體內容（不可包含子標籤）
val()：獲取/設置輸入框的值

CSS

位置：

offset()
position()
scrollTop()
scrollLeft()

尺寸：

width()：容器寬
height()：容器高
innerWidth()：width+padding
innerHeight()：height+padding
outerWidth()：width+padding+border
outerHeight()：height+padding+border

篩選與文檔處理

過濾、查找

在jQuery對象數組中，過濾出一部分元素出來

first()：獲取匹配的第一個元素
last()：獲取匹配的最後一個元素
eq(n)：獲取匹配的第n（-n）個元素
filter(selector)：篩選出與指定表達式匹配的元素集合
has(selector)：篩選出包含特定特點的元素集合
not(selector)：篩選出不包含特定特點的元素集合

在jQuery對象數組中，根據選擇器查找子標籤，父標籤，兄弟標籤

children()：子標籤中找
find()：後代標籤中找
parent()：父標籤
prevAll()：前面所有兄弟標籤
nextAll()：後面所有兄弟標籤
siblings()：前後所有兄弟標籤

文檔處理

增：

內部插入：
append()：將內容添加到指定元素後面
appendTo()：將內容添加到指定元素前面
prepend()：將內容添加到指定元素前面
prependTo()：將內容添加到指定元素後面
外部插入：
after()：在匹配元素之後插入內容
before()：在匹配元素之前插入內容

刪：

empty()：刪除匹配的元素集合中所有的子節點（不包含匹配的元素）
remove()：刪除匹配的元素集合中所有的子節點（包含匹配的元素）

改：
replaceWith()：將所有匹配的元素替換成指定的內容

事件和動畫效果

事件

加載Dom的方式：

window.onload方式：（編寫一個）整個網頁中所有的內容加載完之後纔會執行

jQuery方式：（編寫多個）網頁結構繪製完成後執行

$(function(){});
$(document).ready(function(){});
$(document).on('ready', function(){});

（jQuery3.0：window.onload比jQuery先執行；jQuery1.0與2.0jQuery比window.onload先執行）

綁定事件的方式：

元素.on(“事件名”,funcrion(){})
元素.事件名(function(){})

合成事件/事件切換：
hover()：鼠標懸停合成事件
toggle()：鼠標點擊合成事件

事件傳播（事件冒泡）：
傳播：小–>中–>大
阻止傳播：事件後面加上return false

事件座標：
offsetX：當前元素左上角
clientX：窗口左上角
pageX：網頁左上角

移除事件：
元素.unbind(“事件名”)（一般情況不會用，推薦使用變量控制事件）
one()：某個元素只允許使用一次事件

動畫效果

基本：
show(Time)：顯示
hide(Time)：隱藏
toggle(Time)：切換

滑動：
slideUp(Time)：動畫收縮（向上滑動）–>隱藏
slideDown(Time)：動畫展開（向下滑動）–>顯示
slideToggle(Time)：動畫切換

淡入淡出（透明度）：
fadeIn(Time)：淡入（透明度減少）
fadeOut(Time)：淡出（透明度增大）
fadeToggle(Time)：切換

自定義動畫：
元素.animate({屬性：屬性值},Time)
縮放：width、height
移動：top、left
移動(本元素)，距離：top="+="、left="-="

自定義插件

$.extend：
對象繼承：$.extend(a,b)，a繼承b
擴展jQuery類方法：$.extend({方法名:function(){方法體}})
$.fn.extend：
擴展jQuery對象方法：$.fn.extend({方法名:function(){方法體}})

第三方插件 validation

如何用jQuery去獲取文本框的值?

	function f1(){
		//獲取文本框的值
		var name = document.getElementById("n1").value;
		alert(name);
	}
	// window.onload = function(){
	// 	var b1 = document.getElementById("b1")
	// 	b1.onclick = function(){
	// 		var name = document.getElementById("n1").value;
	// 		alert(name)
	// 	}
	// }

js的onload在jQuery裏如何表示?

window.onload = function(){
    // 當網頁加載完成後執行這裏的代碼塊
};
$(document).ready(function(){
    // 當網頁加載完成後執行這裏的代碼塊     
});

jQuery裏如何動態設置樣式的?

$("div").css()
$(".two").css({"background":"pink","color":"red"})//多屬性

jQuery的事件?點擊事件?失焦事件?該如何表示?

blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發生變化
click() 鼠標單擊
dblclick() 鼠標雙擊
mouseover() 鼠標進入（進入子元素也觸發）
mouseout() 鼠標離開（離開子元素也觸發）
mouseenter() 鼠標進入（進入子元素不觸發）
mouseleave() 鼠標離開（離開子元素不觸發）
hover() 同時爲mouseenter和mouseleave事件指定處理函數
mouseup() 鬆開鼠標
mousedown() 按下鼠標
mousemove() 鼠標在元素內部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 鬆開鍵盤
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發生改變
scroll() 滾動條的位置發生變化
select() 用戶選中文本框中的內容
submit() 用戶遞交表單
toggle() 根據鼠標點擊的次數，依次運行多個函數
unload() 用戶離開頁面

綁定事件的其他方式

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

取消綁定事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html()); 
        // $(this).unbind();
        $(this).unbind('mouseover'); 
    });
});

前端 - 面試題總彙

前端 - 面試題總彙

前端基礎

1. 標籤上 alt 與 title 屬性的區別是什麼？

2. DIV+CSS 佈局較 table 有什麼優勢？

3. CSS 盒子模型與低版本 IE 盒子模型的區別？

4. CSS 選擇符有哪些？

5. JS 的數據類型有哪些？

7. 描述下 JSON 對象的兩個很重要的方法

8. eval 是做什麼的？

9. 爲什麼 ajax 發送請求會出現亂碼 ，如何解決？

10.HTML5、CSS3 新增了哪些新特性？

11.什麼是響應式設計？

13.iframe 的優缺點？

14.meta viewport 是做什麼用的，怎麼寫？

15.json 和 xml 數據的區別

16.document.write 和 innerHTML 的區別

17.jQuery 庫中的 $ 是什麼？

18.$(document).ready() 和 window.onload 的區別？

19.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

20.你爲什麼要使用 jQuery？

21.jQuery選擇器 和 CSS選擇器 的區別？

22.web 前端，怎麼做頁面性能優化？

BootStrap

23.說一下你對Bootstrap的理解？

24.不同尺寸的設備，Bootstrap 設置的 class 前綴有哪些？

25.什麼是 Bootstrap 網格系統（Grid System）？

26.Bootstrap 網格系統列與列之間的間隙寬度是多少？

EasyUI

27.介紹一下 easyui 的佈局

28.Easyui 如何實現表單驗證

29.Easyui 常用的組件有哪些？

Vue

30. 說說對 Vue.js 的理解？

32.MVVM 定義

33.Vue 的生命週期（重點）

34.Vue 的響應式原理

35.第一次頁面加載會觸發哪幾個鉤子？

36.爲什麼vue 中 data 必須是一個函數？

37.vue 做數據渲染時，如何保證將數據原樣輸出？

38.active-class 是哪個組件的屬性？

39.vue-router 有哪幾種導航鉤子？

40. $route 和 $router 的區別

41.vue 幾種常用的指令

43.vue 常用的修飾符？

44.vue-loader 是什麼？使用它的用途有哪些？

45.computed、watch、methods 的區別

46.什麼是 js 的冒泡？Vue 中如何阻止冒泡事件？

47.vue 組件通信

48.keep-alive 組件的作用是什麼？

49.$nextTick 是什麼？

51.Promise 對象是什麼？

52.Axios 的特點有哪些？

53.vue 中的 ref 是什麼？

54.vue 如何兼容 ie

55.頁面刷新 vuex 被清空解決辦法？

56.Vue 與 Angular 以及 React 的區別？

57.localstorage 和 sessionstorage 是什麼?區別是什麼?

58.爲什麼要進行前後端分離？前後端分離的優缺點？

ElementUI

58.說說你對ElementUI的理解？

59.ElementUI 的計數器組件怎麼使用？

60.ElementUI 的表單組件怎麼使用？它有哪些屬性？

61.ElementUI 的表單驗證怎麼實現？

62.ElementUI 的表格組件怎麼使用？它有哪些屬性？

jQuery

jQuery的選擇器

$工具方法

jQuery屬性和CSS

屬性

CSS

篩選與文檔處理

過濾、查找

文檔處理

事件和動畫效果

事件

動畫效果

自定義插件

第三方插件 validation

如何用jQuery去獲取文本框的值?

9. 爲什麼 ajax 發送請求會出現亂碼，如何解決？

19.行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

21.jQuery選擇器和 CSS選擇器的區別？