HTML5 面試選題

時間 2019-11-12

標籤 html5 html 面試選題欄目 HTML5 简体版

原文原文鏈接

01. html5有哪些新標籤？javascript

<article> 標籤訂義外部的內容（外部內容如blog,news）。php

<aside> 標籤訂義article之外的內容（可用作文章的側欄）。css

<canvas>使用JavaScript在網頁上繪製圖形圖像。html

<details> 用於描述某個文檔部分的內容。前端

<summary> 定義<details>元素標題。vue

<datalist> 定義選項列表.。html5

<figure> 對元素進行組合。<figcaption> 定義figure的標題。java

<header>定義頁眉。 <nav>定義導航。 <footer>定義頁腳。 node

<progress>定義運行中的進度。<audio>標籤訂義音樂。 <video> 定義視頻。 react

<time> 定義時間。 <section>定義文檔中的區段。 <output> 定義輸出類型。

選用標籤的標準

若是要支持比較老的瀏覽器（一般是桌面版網頁）則不使用新標籤

手機平板等網頁開發能夠使用新標籤

無論什麼狀況下，都應該優先根據語義來選用標籤

根據搜索引擎優化的要求和建議選用標籤

02. 簡述一下你對HTML語義化的理解？

一、用正確的標籤作正確的事情。

二、使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

三、即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;

四、html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;

五、搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;

03. 你能描述一下當你製做一個網頁的工做流程嗎？

一、內容分析：分清展示在網絡中內容的層次和邏輯關係

二、結構設計：寫出合理的html結構代碼

三、佈局設計：使用html+css進行佈局

四、樣式設計：首先要使用reset.css

五、交互設計：鼠標特效。行爲設計：js代碼，ajax頁面行爲和從服務器獲取數據。最後測試兼容性。優化性能

04. 你如何對網站的文件和資源進行優化？

一、文件合併；二、文件最小化/文件壓縮；三、使用 CDN 託管；四、緩存的使用；五、其餘

05. 請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）

1). 使用CDN

2). 服務器開啓gzip壓縮

3). css樣式的定義放置在文件頭部

4). Javascript腳本放在文件末尾

5). 壓縮Javascript、CSS代碼

6). 儘量減小DOM元素

7). 儘可能減小頁面中重複的HTTP請求數量

8). 使用多域名負載網頁內的多個文件、圖片

9). 在服務器配置Entity-Tag if-none-match

10). 在服務器端配置control-cache last-modify-date

06. 23條Web性能優化最佳實踐和規則

1).儘量減小HTTP請求次數

2).使用CDN

3).避免使用src和href標籤

4).加入Expires或Cache-Control Header

5).使用Gzip壓縮

6).在html文件頂部放置樣式表

7).在html文件底部放置Javascript腳本

8).避免使用CSS表達式

9).使用外部Javascript和CSS外部文件

10).減小使用DNS查找次數

11).精簡Javascript和CSS

12).避免重定向

13).移除重複的腳本

14).配置ETag

15).緩存AJAX

16).使用GET完成AJAX請求

17).減小DOM元素數量

18).避免404

19).減小Cookie大小

20).使用無Cookie的域

21).避免使用濾鏡

22).不要在HTML中縮放圖片

23).使用小favicon.ico文件，並讓其可緩存

07. 如何進行網站性能優化

content方面

1) .減小HTTP請求：合併文件、CSS精靈、inline Image

2) .減小DNS查詢：DNS查詢完成以前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分佈到恰當數量的主機名，平衡並行下載和DNS查詢

3) .避免重定向：多餘的中間訪問

4) .使Ajax可緩存

5) .非必須組件延遲加載

6) .將來所需組件預加載

7) .減小DOM元素數量

8) .將資源放到不一樣的域下：瀏覽器同時從一個域下載資源的數目有限，增長域能夠提升並行下載量

9) .減小iframe數量

10) .不要404

Server方面

11) .使用CDN

12) .添加Expires或者Cache-Control響應頭

13) .對組件使用Gzip壓縮

14) .配置ETag

15) .Flush Buffer Early

16) .Ajax使用GET進行請求

17) .避免空src的img標籤

Cookie方面

18) .減少cookie大小 19) .引入資源的域名不要包含cookie

css方面

20) .將樣式表放到頁面頂部　　21) .不使用CSS表達式

22) .使用不使用@import　　　 23) .不使用IE的Filter

Javascript方面

24) .將腳本放到頁面底部　　 25) .將javascript和css從外部引入

26) .壓縮javascript和css　　 27) .刪除不須要的腳本

28) .減小DOM訪問　　　　 29) .合理設計事件監聽器

圖片方面

30) .優化圖片：根據實際顏色須要選擇色深、壓縮　　31) .優化css精靈

32) .不要在HTML中拉伸圖片　　　　　　　　　　　 33) .保證favicon.ico小而且可緩存

移動方面

34) .保證組件小於25k 　　　35) .Pack Components into a Multipart Document

08. 請儘量完整得描述下從輸入URL到整個網頁加載完畢及顯示在屏幕上的整個流程

1）把URL分割成幾個部分：協議、網絡地址、資源路徑。

　　其中網絡地址指示該鏈接網絡上哪一臺計算機，能夠是域名或者IP地址，能夠包括端口號；

　　協議是從該計算機獲取資源的方式，常見的是HTTP、FTP，不一樣協議有不一樣的通信內容格式；

　　資源路徑指示從服務器上獲取哪一項資源。

　　例如：http://www.guokr.com/question/554991/

　　協議部分：http 　　網絡地址：www.guokr.com 　　資源路徑：/question/554991/

2）若是地址不是一個IP地址，經過DNS（域名系統）將該地址解析成IP地址。

　　IP地址對應着網絡上一臺計算機，DNS服務器自己也有IP，你的網絡設置包含DNS服務器的IP。

　　例如：www.guokr.com 不是一個IP，向DNS詢問請求www.guokr.com 對應的IP，得到IP： 111.13.57.142。

　　這個過程裏，你的電腦直接詢問的DNS服務器可能沒有www.guokr.com 對應的IP，就會向它的上級服務器詢問，上級服務器一樣可能沒有，就依此一層層向上找，最高可達根節點，找到或者所有找不到爲止。

3）若是地址不包含端口號，根據協議的默認端口號肯定一個。

　　端口號之於計算機就像窗口號之於銀行，一家銀行有多個窗口，每一個窗口都有個號碼，不一樣窗口能夠負責不一樣的服務。

　　端口只是一個邏輯概念，和計算機硬件沒有關係。例如：www.guokr.com 不包含端口號，http協議默認端口號是80。

　　若是你輸入的url是http://www.guokr.com:8080/ ，那表示不使用默認的端口號，而使用指定的端口號8080。

4）向2和3肯定的IP和端口號發起網絡鏈接。例如：向111.13.57.142的80端口發起鏈接

5）根據http協議要求，組織一個請求的數據包，裏面包含大量請求信息，包括請求的資源路徑、你的身份例如：用天然語言來表達這個數據包，大概就是：請求 /question/554991/ ，個人身份是xxxxxxx。

6）服務器響應請求，將數據返回給瀏覽器。數據多是根據HTML協議組織的網頁，裏面包含頁面的佈局、文字。

　　數據也多是圖片、腳本程序等。如今你能夠用瀏覽器的「查看源代碼」功能，感覺一下服務器返回的是什麼東東。

　　若是資源路徑指示的資源不存在，服務器就會返回著名的404錯誤。

7）若是（6）返回的是一個頁面，根據頁面裏一些外鏈的URL，例如圖片的地址，按照（1）－（6）再次獲取。

8）開始根據資源的類型，將資源組織成屏幕上顯示的圖像，這個過程叫渲染，網頁渲染是瀏覽器最複雜、最核心的功能。

9）將渲染好的頁面圖像顯示出來，並開始響應用戶的操做。

　　以上只是最基本的步驟，實際不可能就這麼簡單，一些可選的步驟例如網頁緩存、鏈接池、加載策略、加密解密、代理中轉等等都沒有說起。

　　即便基本步驟自己也有很複雜的子步驟，TCP/IP、DNS、HTTP、HTML：每個均可以展開成龐大的課題，而瀏覽器的基礎——操做系統、編譯器、硬件等更是一個比一個複雜。

　　不是計算機專業的同窗看了上面的解釋徹底不明白是很正常的，可能會問爲何要搞得那麼複雜，但我保證這每個步驟都通過深思熟慮和時間的考驗。

　　你輸入URL便可瀏覽互聯網，而計算機系統在背後作了無數你看不到的工做，計算機各個子領域無數工程師爲此付出你不可思議的努力。

09. html5有哪些新特性、移除了哪些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

繪畫 canvas 用於媒介回放的 video 和 audio 元素

sessionStorage 的數據在瀏覽器關閉後自動刪除

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

語意化更好的內容元素，好比 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術：webworker, websockt, Geolocation

* 移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤；

* 兼容性：

IE8/IE7/IE6 支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

<!--[if lt IE 9]>

<![endif]-->

* 如何區分： DOCTYPE聲明\新增的結構元素\功能元素

10. iframe 有哪些缺點？

1) iframe 會阻塞主頁面的 Onload 事件；

2) 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO；

3) iframe 和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載；

　　使用 iframe 以前須要考慮這兩個缺點。若是須要使用 iframe，最好是經過 javascript 動態給 iframe 添加 src 屬性值，這樣能夠能夠繞開以上兩個問題。

11. 如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker；也能夠調用localstorge、cookies等本地存儲方式；

localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊；

注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基於 multipart 編碼發送 XHR 、基於長輪詢的 XHR

12. 常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]。bug多，對w3c標準的支持不是很好。

Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。支持不少複雜網頁效果，可是能耗高，佔內存。

Webkit內核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]。速度僅次於presto，兼容性較好。

Presto內核：Opera7及以上。[Opera內核原爲：Presto，現爲：Blink;]。公認的瀏覽網頁速度最快的內核，處理js時比其餘內核快3倍左右。可是網頁兼容性不太好。

13. 前端須要注意哪些SEO

SEO是由英文Search Engine Optimization縮寫而來，中文意譯爲「搜索引擎優化」。SEO是指經過站內優化好比網站結構調整、網站內容建設、網站代碼優化等以及站外優化。

一、合理的title、description、keywords：

　　搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；

　　description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可

二、語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁

三、重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取

四、重要內容不要用js輸出：爬蟲不會執行js獲取內容

五、少用iframe：搜索引擎不會抓取iframe中的內容

六、非裝飾性圖片必須加alt

七、提升網站速度：網站速度是搜索引擎排序的一個重要指標

14. HTTP 請求方式有哪些?

經常使用的是GET和POST

一、GET是最經常使用的方法，一般用於請求服務器發送某個資源。

二、HEAD與GET相似，但服務器在響應中值返回首部，不返回實體的主體部分

三、PUT讓服務器用請求的主體部分來建立一個由所請求的URL命名的新文檔，或者，若是那個URL已經存在的話，就用幹這個主體替代它

四、POST起初是用來向服務器輸入數據的。實際上，一般會用它來支持HTML的表單。表單中填好的數據一般會被送給服務器，而後由服務器將其發送到要去的地方。

五、TRACE會在目的服務器端發起一個環回診斷，最後一站的服務器會彈回一個TRACE響應並在響應主體中攜帶它收到的原始請求報文。TRACE方法主要用於診斷，用於驗證請求是否如願穿過了請求/響應鏈。

六、OPTIONS方法請求web服務器告知其支持的各類功能。能夠查詢服務器支持哪些方法或者對某些特殊資源支持哪些方法。

七、DELETE請求服務器刪除請求URL指定的資源

GET和POST的區別，什麼時候使用POST？

1) get是從服務器獲取數據 ---"取"; post是向服務器提交數據 ---「發」

2) form表單默認的method爲"GET"

3) get將參數按照variable=value 的形式，加在URL的後面，中間用"?"鏈接，多個參數之間用"&"鏈接;

　好比：http://www.zhiyou100.com/login?username=Tom&password=123

post將數據不像get方式那樣，post 發給服務器的參數所有放在請求體中

4) 參照上面3的數據傳輸方式，能夠得出：post安全性相對比get方式要高

5) URL不存在參數上限的問題，HTTP協議沒有對URL長度進行限制，限制的是部分瀏覽器和服務器的限制。

　 IE對URL長度的限制爲2083KB

6) get方式是經過URL傳輸的數據的，數據量通常在2KB左右，可是執行效率比post高

7) 理論上post方式沒有大小限制，HTTP協議規範也沒進行大小限制。post數據沒有限制，限制的是服務器處理程序的能力

15. HTTP請求報文和響應報文都包括什麼？

一、http請求：客戶端向服務器索要數據

請求行：請求方法，請求資源路徑，http協議版本

請求頭：包含了對客戶端的環境描述，客戶端請求的主機地址等信息。

請求體：客戶端發給服務器的具體數據。

二、http響應：服務器返回給客戶端數據

狀態行：http協議的版本、狀態碼、狀態碼的英文名稱

響應頭：包含了對服務器的一些描述，對返回數據的描述。

響應體：服務器返回給客戶端的具體數據。

16. HTTP狀態碼

狀態代碼有三位數字組成，第一個數字定義了響應的類別，且有五種可能取值：

1XX: 信息響應類表示接收到請求而且繼續處理

2XX: 處理成功響應類表示動做被成功接，理解和接受

3XX: 重定向響應類爲了完成指寶的動做必須接受進一步處理

4XX: 客戶端錯誤，客戶請求包含的語法錯誤或者是不能正確執行

5XX: 服務器端錯誤，服務器不能正肯定執行一個正確的請求

常見狀態代碼、狀態描述、說明：

200 OK 正常返回信息

400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

401 Unauthorized 請求未受權。

403 Forbidden 禁止訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

500 Internal Server Error 最多見的服務器端錯誤。

503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

17. 前端頁面有哪三層構成，分別是什麼？做用是什麼？

最準確的網頁設計思路是把網頁分紅三個層次，即：結構層、表示層、行爲層。

網頁的結構層:（structural layer）由 HTML 或 XHTML 之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：這是一個文本段。

網頁的表示層:（presentation layer）由 CSS 負責建立。 CSS 對「如何顯示有關內容」的問題作出了回答。

網頁的行爲層:（behavior layer）負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM 主宰的領域。

18. 瀏覽器本地存儲與服務器端存儲之間的區別

一、其實數據既能夠在瀏覽器本地存儲，也能夠在服務器端存儲。

二、瀏覽器端能夠保存一些數據，須要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。

三、服務器端也能夠保存全部用戶的全部數據，但須要的時候瀏覽器要向服務器請求數據。

四、服務器端能夠保存用戶的持久數據，如數據庫和雲存儲將用戶的大量數據保存在服務器端。

五、服務器端也能夠保存用戶的臨時會話數據。服務器端的session機制，如jsp的 session 對象，數據保存在服務器上。實現上，服務器和瀏覽器之間僅需傳遞session id便可，服務器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效，這個時間就是server端設置的session有效期。

六、服務器端保存全部的用戶的數據，因此服務器端的開銷較大，而瀏覽器端保存則把不一樣用戶須要的數據分佈保存在用戶各自的瀏覽器中。

七、瀏覽器端通常只用來存儲小數據，而服務器能夠存儲大數據或小數據。

八、服務器存儲數據安全一些，瀏覽器只適合存儲通常數據。

19. 請描述一下cookies,sessionStorage和localStorage的區別？

1) cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

2) cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。

3) sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：cookie數據大小不能超過4k。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有效時間：localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。

cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

20. 談談你對預加載的理解？

Web預加載指的是在網頁全加載完成以前，在頁面優先顯示一些主要內容，以提升用戶體驗。對於一個較龐大的網站，若是沒有使用預加載技術，用戶界面就會長時間顯示一片空白，直到資源加載完成，頁面纔會顯示內容。

例如：能夠經過js預先從服務加載圖片資源(動態建立Image，設置src屬性)，只要瀏覽器把圖片下載到本地，就會被緩存，再次請求至關的src時就會優先尋找瀏覽器緩存，提升訪問速度。

緩存和預加載的區別是什麼？

緩存就是把請求過的數據緩存起來，下次請求的時候直接使用緩存內容，提升響應速度；

預加載指的是提早把須要的內容加載完成，訪問的時候能夠明天提升響應效率，好比圖片的預加載

（能夠提早加載必定數量的圖片，當用戶訪問圖片的時候通常只看前幾張，因爲是預加載好的，因此速度比較快）

21. Doctype做用？嚴格模式與混雜模式如何區分？它們有何意義？有多少種Doctype文檔類型？
1，<!DOCTYPE> 聲明位於文檔中的最前面，處於標籤以前。告知瀏覽器以何種模式來渲染文檔。
2，嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。
3，在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
4，DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。
5，可聲明三種文檔類型，分別表示嚴格版本、過渡版本以及基於框架的類型。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

22.在製做一個Web應用或Web站點的過程當中，你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的？

一、UI：界面美觀，要有個性，考慮用戶使用的邏輯要簡單，用起來溫馨自由。使用習慣要符合大部分用戶的習慣，好比少讓用戶輸入，採用選擇的方式，提供搜索和提示功能。

二、安全性：對輸入進行有效性驗證（非法字符，特殊字符）如PHP中的方法htmlspecialchars()將特殊字符（>）轉化爲html實體，trim()去掉用戶輸入的沒必要要字符，stripslashes()去掉用戶輸入的反斜槓等等。

三、對交互操做進行身份驗證和受權（api-key,authtoken）,異常錯誤處理（向用戶反饋單額錯誤提示不要讓攻擊者分析出一些網絡環境和配置），內存溢出，注入攻擊等。

四、高性能：

a. DNS負載均衡

b. HTTP重定向（經過使客戶端重定向，來分散和轉移請求壓力，好比一些下載服務一般都有幾個鏡像服務器）

c. 分佈式緩存

d. 負載均衡：反向代理負載均衡,

e. 數據庫擴展：讀寫分離，垂直分區，水平分區。

f. SEO:選好關鍵字，描述語言，修飾性圖片換成文本，合理使用h1-h6，對圖片添加alt屬性，連接添加target屬性。

g. 可維護性：代碼是否容易被理解，是否容易被修改和增長新的功能，當出現問題時是否能快速定位到問題代碼。

css部分

01. CSS3有哪些新特性（包含哪些模塊）？

一、圓角border-radius、陰影box-shadow,text-shadow、漸變gradients、過渡transitions、

動畫animations、佈局multi-columns, flex box, grid layout, Opacity,color(rgb,rgba,hsl,hsla )

二、子串匹配的屬性選擇器:E[attribute^="value"], E[attribute$="value"], E[attribute*="value"]

三、新的僞類：

:target, :enabled 和 :disabled,:checked,:indeterminate,:root,:nth-child 和 :nth-last-child,

:nth-of-type和 :nth-last-of-type,:last-child,:first-of-type 和 :last-of-type,

:only-child 和 :only-of-type,:empty,和 :not

四、僞元素使用兩個冒號而不是一個來表示：

:after 變爲 ::after, :before 變爲 ::before,

:first-letter 變爲 ::first-letter, :first-line 變爲 ::first-line。

Css3:CSS即層疊樣式表。

在網頁製做時採用層疊樣式表技術，能夠有效地對頁面的佈局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分，或者頁數不一樣的網頁的外觀和格式

爲何要初始化CSS樣式。

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

*淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

02. CSS 選擇器有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

1).id選擇器（ # myid） 2).類選擇器（.myclassname）

3).標籤選擇器（div, h1, p） 4).相鄰選擇器（h1 + p）

5).子選擇器（ul > li） 6).後代選擇器（li a）

7).通配符選擇器（ * ） 8).屬性選擇器（a[rel = "external"]）

9).僞類選擇器（a: hover, li: nth - child）

可繼承的樣式：一、關於文字排版的屬性如：font,word-break,letter-spacing,text-align等

二、line-height、color、visibility、cursor等

不可繼承的樣式：border padding margin width height ;

選擇器的優先級：將選擇器的權值相加，值越大優先級越高

選擇器優先級權值：!important=10000 / style=1000 / #id=100 / .class=10 / tag=1 / *=0
優先級就近原則,同權重狀況下樣式定義最近者爲準;

CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或複選框被選中。

03. 解釋下浮動和它的工做原理？列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景

浮動讓元素脫離文檔流，按照指定的方向進行運動，遇到相鄰的元素或者父元素的邊沿時停下，左浮動left;右浮動right

1.使用空標籤清除浮動。<div class=「clear」></div>

這種方法是在全部浮動標籤後面添加一個空標籤定義css屬性 clear:both. 弊端就是增長了無心義標籤。

2.使用overflow。給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。

3.使用after僞對象清除浮動。

.clearfix{zoom: 1;}

.clearfix::after{content: '';display: block;overflow: hidden;clear:both;height:0;}

使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素； 2、content屬性是必須的，但其值能夠爲空

04. 介紹一下標準的CSS的盒子模型？與IE的盒子模型有什麼不一樣的？

一、有兩種, IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

二、盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border). 文檔中的每一個元素被描繪爲矩形盒子。肯定其大小,屬性——好比顏色、背景、邊框,及其位置是渲染引擎的目標。CSS下這些矩形盒子由標準盒模型描述。這個模型描述元素內容佔用空間。

盒子有四個邊界：外邊距邊界margin edge, 邊框邊界border edge, 內邊距邊界padding edge 與內容邊界content edge。

a.內容區域content area 是真正包含元素內容的區域。位於內容邊界的內部,它的大小爲內容寬度或 content-box寬及內容高度或content-box高。若是 box-sizing 爲默認值, width, min-width, max-width, height, min-height 與 max-height 控制內容大小。

b.內邊距區域padding area 用內容及可能的邊框之間的空白區域擴展內容區域。它位於內邊邊界內部,一般有背景——顏色或圖片（不透明圖片蓋住背景顏色）.它的大小爲 padding-box 寬與 padding-box 高。內邊距與內容邊界之間的空間由padding-top,padding-right,padding-bottom,padding-left和簡寫padding控制。

c.邊框區域border area 是包含邊框的區域,擴展了內邊距區域.它位於邊框邊界內部,大小爲 border-box 寬和 border-box 高。由 border-width 及簡寫屬性 border控制。

d.外邊距區域margin area用空白區域擴展邊框區域,以分開相鄰的元素。它的大小爲margin-box,margin-top,margin-right,margin-bottom,margin-left及簡寫屬性margin控制。在外邊距合併的狀況下,因爲盒之間共享外邊距,外邊距不容易弄清楚。

最後注意,對於行內非替換元素,其佔用空間（行高）由 line-height 決定,即便有內邊距與邊框。

05. display有哪些值？說明他們的做用。position的值relative和absolute定位原點是？absolute與fixed共同點與不一樣點？

一、display:

block 象塊類型元素同樣顯示。

none 缺省值。象行內元素類型同樣顯示。

inline-block 象行內元素同樣顯示,但其內容象塊類型元素同樣顯示。

list-item 象塊類型元素同樣顯示,並添加樣式列表標記。

二、position

absolute 生成絕對定位的元素,相對於 static 定位之外的第一個父元素進行定位。

fixed （老IE不支持）生成絕對定位的元素,相對於瀏覽器窗口進行定位。

relative 生成相對定位的元素,相對於其正常位置進行定位。

static 默認值。沒有定位,元素出如今正常的流中

inherit 規定從父元素繼承 position 屬性的值。

*（忽略 top, bottom, left, right z-index 聲明）

三、absolute與fixed共同點與不一樣點

A、共同點：

1.改變行內元素的呈現方式,display被置爲block;

2.讓元素脫離普通流,不佔據空間;

3.默認會覆蓋到非定位元素上;

B、不一樣點：

absolute的」根元素「是能夠設置的,會隨着參照對象元素的高度和寬度變化而變化

fixed的」根元素「固定爲瀏覽器窗口。當你滾動網頁,fixed元素與瀏覽器窗口之間的距離是不變的。

06. display:none和visibility:hidden的區別？

display:none 隱藏對應的元素,在文檔佈局中再也不給它分配空間,它各邊的元素會合攏,就當他歷來不存在。

visibility:hidden 隱藏對應的元素,可是在文檔佈局中仍保留原來的空間。

07. 解釋下 CSS sprites,以及你要如何在頁面或網站中使用它？

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中;再利用CSS的「background-image」,「background- repeat,background-position」的組合進行背景定位;background-position能夠用數字能精確的定位出背景圖片的位置;

這樣能夠減小不少圖片請求的開銷,由於請求耗時比較長；

優勢：一、減小HTTP請求數,極大地提升頁面加載速度;

二、增長圖片信息重複度,提升壓縮比,減小圖片大小;

三、更換風格方便,只需在一張或幾張圖片上修改顏色或樣式便可實現;

缺點：一、圖片合併麻煩; 二、維護麻煩,修改一個圖片可能須要重新佈局整個圖片,樣式;

08. 什麼叫外邊距摺疊(collapsing margins)？

毗鄰的兩個或多個margin會合併成一個margin,叫作外邊距摺疊。規則以下：

一、兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會摺疊

二、浮動元素/inline-block元素/絕對定位元素的margin不會和垂直方向上的其餘元素的margin摺疊

三、建立了塊級格式化上下文的元素,不會和它的子元素髮生margin摺疊

四、元素自身的margin-bottom和margin-top相鄰時也會摺疊

08. 若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

09. display:inline-block 何時會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

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

（1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，好比div默認display屬性值爲「block」，成爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。

（2）行內元素有：a b span img input select strong；塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素： <br> <hr> <img> <input> <link> <meta> 不爲人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

10. 行內元素和塊級元素的區別，怎麼相互轉換？

塊級元素：

一、塊級元素會獨佔一行，其寬度自動填滿其父元素寬度。

二、能夠設置width,height屬性。（即便設置了寬度，也是獨佔一行的，除非用float屬性等特殊狀況）

三、能夠設置margin(外邊距)和padding(內邊距)。

行內元素：

一、行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裏，直到一行排不下，纔會換行，其寬度隨元素的內容而變化（其寬度由內容撐開）。

二、設置width,height屬性無效。

三、水平方向上的padding-left,padding-right,margin-left,margin-right產生邊距效果，

但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom不會產生效果。

轉換：給行內元素加上 display:block 這樣的屬性，讓行內元素也有每次都重新行開始的屬性。

給塊級元素加上 display:inline 這樣的屬性，讓塊級元素不具備重新行開始的屬性。

給行內元素加上 display:inline-block 屬性，仍爲行內元素，可是能夠設置width及height屬性等

11. CSS3中新增了什麼佈局方式？

彈性佈局：flex佈局的基本思想是經過flex容器來伸縮控制子項目的寬度和高度，以此來徹底填充flex容器的可用空間。子項目的寬高、排列方式等都是經過設置相關屬性改變的。

除了上述佈局方式外還有什麼經常使用的佈局方式？

一、文檔流佈局方式：這是最基本的佈局方式，就是按照文檔順序一個一個地顯示，塊元素獨佔一行，內聯元素共享一行。

二、浮動佈局方式：某個元素浮動以後，其後面的元素就當其不存在而佔用其原來的地方，按照原來文檔流佈局方式佈局。

三、定位佈局方式：經過position屬性定位。

四、框架佈局方式：BootStrap

13. CSS中的calc()有什麼做用？用於動態計算寬高。

14. 何時使用mm、cm？一個是毫米，一個是釐米，都是絕對長度單位，看網頁、打印的須要

15. 若是一個頁面即要在屏幕上顯示，又要打印，怎麼將這2種樣式定義在一塊兒？

通常用媒體查詢 @media print{}{ h1{color:black;} }

@media print 裏面的內容只對打印出來的內容有效，以外的內容就是屏幕顯示的樣式

或者用<link rel=」stylesheet」 href=」css/mainstylesheet.css」 media=」all」>

16. 媒體查詢除了在打印時使用還在什麼狀況下使用？響應式佈局（不一樣寬度的設備上使用）

17. 在手機頁面上使用圖片，寬度爲80%，怎麼讓圖片居中？

text-align：center；或將其設置爲display：block；爲其父元素設置margin：0 auto；

18. 手機頁面底部工具條中4個圖標，怎麼均分空間？設邊框後最後一個掉下去怎麼辦？

使用bootstrap裏面的class="col col-25" 設置樣式box-sizing:border-box;也可設置width：25%

19. viewport是什麼？何時使用？有什麼做用？

viewport是用戶網頁的可視區域，作手機頁面或響應式設計時<meta name="viewport">,這樣設計，用戶能夠經過平移和縮放來看頁面的不一樣部分

20. box-sizing何時用？經常使用的值都有什麼？

作自適應網頁時；區域的大小調整的時候（邊框線佔據位置），border-box，content-box，inherit

21. vertical-align何時使用？經常使用的值分別有什麼做用？

vertical-align用來定義行內元素的極限相對於該元素所在行的基線的垂直對齊。text-top:把元素的頂端與父元素內容區域的頂端對齊;text-bottom:居下;middle,上下居中;top;bottom;

22. CSS3中的transform都支持哪些變換效果？

translate(x,y)平移到（x,y），scale(0.5)縮小0.5倍 Rotate(30deg)旋轉30度，skew()傾斜 matrix()定義2D轉換，matrix3d(x,y,z)定義3D轉換 prespective(n)爲3D轉換元素定義透視視圖

23. CSS3中的transition可否過渡opacity?可否過渡display？

css3中的transition能夠過渡opacity，不能過渡display

24. 何時使用transition?何時使用animation？

當使用js靈活設定動畫屬性時使用transition；當使用靈活定製多個幀以及循環的時候使用animation

25. 簡述bootstrap的柵格系統的特色，

(1) 全部的行必須放在容器中： .container或.container-fluid (2) 分爲多行(row)，一行中平均分爲12列(col)

(3) 網頁內容只能放在列(col)中，不能直接放在行(row) (4) 能夠在col中再嵌套row

(5) col分爲四大類： col-xs col-sm col-md col-lg

(6) col-md-* *值可爲1~12，值就爲某個列的寬度( */12 )

(7) 能夠爲一個列指定不一樣屏幕下的不一樣寬度

(8) col-lg-* 只對大PC屏幕有效；col-md-* 對普通PC和大PC屏幕都有效；

col-sm-* 對平板、PC、大PC屏幕都有效； col-xs-* 對手機、平板、PC大PC屏幕都有效

(9) .hidden-lg 當前列只在大PC屏幕下隱藏；.hidden-md 當前列只在PC屏幕下隱藏

.hidden-sm 當前列只在平板屏幕下隱藏； .hidden-xs 當前列只在手機屏幕下隱藏

26. 怎麼實現桌面4列、平板2列、手機1列？

一、桌面4 列： .col-lg-3 .col-md-3；二、平板2列： .col-sm-6；三、手機1列： .col-xs-12；四、媒體查詢

27. 頁面上有一個aside標籤，在桌面上是顯示的，但平板和手機是隱藏的，怎麼實現？

媒體查詢 @media(max-width:@screen-sm-max){aside{display:none}}

28. 用過Less嗎？它與CSS有什麼不一樣？

less是css預處理語言，增長了變量、函數等特性。將CSS賦予了動態語言的特性，如變量，繼承，運算，函數LESS既能夠在客戶端上運行 (支持IE 6 、Webkit和Firefox)，也能夠藉助Node.js或者Rhino在服務端運行。LESS是一個動態的標準CSS樣式表語言擴展，其有精簡的代碼更容易維護，less相比於css更加靈活。

29. 知道SASS/SCSS嗎？它與Less有什麼不一樣？

1.Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器，也能夠在開發環節使用Less，而後編譯成Css文件，直接放到項目中，也有Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。

2.變量符不同，less是@，而Scss是$，並且變量的做用域也不同

3.輸出設置，Less沒有；輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded。

4.Sass支持條件語句，能夠使用if{}else{},for{}循環等等。而Less不支持。

less基於javascript，在客戶端處理，sass基於ruby，是在服務端處理的

JavaScript部分

01.javascript有哪幾種數據類型

六種基本數據類型：字符串（String）、數字(Number)、布爾(Boolean)、對象(Object)、空（Null）、未定義（undefined）

02.怎麼判斷一個變量是不是數組？

instanceof() 或者 Array.isArray() 或者 Object.prototype.toString.call(arr)==='[object Array]'

03.從文本框是獲得value，怎麼轉換成整數？怎麼轉換成小數？整數:parseInt() 小數:parseFloat()

04.整數怎麼保留2位小數？保留2位小數後是什麼類型2.toFixed(2) 類型 :string

05.typeof(function(){})返回什麼？typeof([])返回什麼？ Function / object

06.函數內部arguments變量有哪些特性,有哪些屬性,如何將它轉換爲數組

arguments全部函數中都包含的一個局部變量，是一個類數組對象，對應函數調用時的實參。若是函數定義同名參數會在調用時覆蓋默認對象

arguments[index]分別對應函數調用時的實參，而且經過arguments修改實參時會同時修改實參

arguments.length爲實參的個數（Function.length表示形參長度）

arguments.callee爲當前正在執行的函數自己，使用這個屬性進行遞歸調用時需注意this的變化

arguments.caller爲調用當前函數的函數（已被遺棄）

轉換爲數組：var args = Array.prototype.slice.call(arguments, 0);

07.怎樣獲得瀏覽器窗口的寬度和高度？（IE和標準下有哪些兼容性的寫法）

有三種方法可以肯定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度； window.innerWidth - 瀏覽器窗口的內部寬度

對於 Internet Explorer 八、七、六、5：

document.documentElement.clientHeight / document.documentElement.clientWidth

或者 document.body.clientHeight / document.body.clientWidth

實用的 JavaScript 方案（涵蓋全部瀏覽器）：

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

08.JS中事件傳播過程是什麼？怎麼阻止事件傳播？

事件捕獲(事件挖洞)：事件由祖先元素向子元素傳遞;事件冒泡：事件由子元素向祖先元素傳遞;

事件捕獲和事件冒泡是事件流中的兩個階段，任何事件產生時，如點擊一個按鈕，將從最頂端的容器開始（通常是html的根節點）。瀏覽器會向下遍歷DOM樹直到找到觸發事件的元素，一旦瀏覽器找到該元素，事件流就進入事件目標階段，該階段完成後，瀏覽器會沿DOM樹向上冒泡直到最頂層容器，看看是否有其它元素須要使用同一個事件。

經過使用 preventDefault() 方法只取消默認的行爲。

經過使用event.stopPropagation() 中止事件的傳播，但不會影響同級別的事件監聽者，。

經過使用event.stopImmediatePropagation() 當即中止事件的傳播，中止同級別的多個事件監聽者的調用。

09.棧和堆的區別？

棧區（stack）：由編譯器自動分配釋放，存放函數的參數值，局部變量的值等。

堆區（heap）：通常由程序員分配釋放，若程序員不釋放，程序結束時可能由OS回收。

堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；

棧（數據結構）：一種先進後出的數據結構。

10.document的DOMContentLoaded事件何時發生？window的load事件何時發生？

document的DOMContentLoaded 全部DOM解析完觸發；window的load事件全部頁面元素加載完觸發包括圖片

11.什麼是原型和原型鏈，原型鏈的做用？

在JavaScript中，每一個對象都有一個內部屬性[prototype],咱們一般稱之爲原型.訪問一個對象的原型能夠使用ES5中Object.getPrototypeOf方法,或者ES6中的__proto__屬性;

JS運行時在查找可調用的屬性和方法時並不僅查找一層原型，由於原型自己也是對象，所以JS運行時還會查找原型對象的原型，一直查找到Object的原型爲止。這樣就構成了一個鏈式結構，稱爲原型鏈。

原型鏈的做用：經過原型鏈能夠造成相似繼承的效果。好比咱們新建一個數組,數組的方法就是從數組的原型上繼承而來的。

JS的原型鏈在Angular中還被用於構造做用域鏈。

12.怎樣創建原型鏈？

//Object.create(proto [, propertiesObject ]) 是E5中提出的一種新的對象建立方式，第一個參數是要繼承的原型

ObjFunc.prototype = object.create(baseFunc.prototype)

ObjFunc.prototype.constructor = ObjFunc

12.什麼是構造函數？與普通函數有什麼區別?

構造函數：是一種特殊的方法、主要用來建立對象時初始化對象，總與new運算符一塊兒使用，建立對象的語句中構造函數的函數名必須與類名徹底相同。與普通函數相比只能由new關鍵字調用，構造函數是類的標示

13.什麼是閉包？閉包有什性質？

閉包：指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域，將函數內部的變量和方法傳遞到外部。

性質：1.函數內再嵌套函數 2.內部函數能夠引用外層的參數和變量 3.參數和變量不會被垃圾回收機制回收

說說js中的閉包和變量做用域？

1、變量的做用域

要理解閉包,首先必須理解Javascript特殊的變量做用域。變量的做用域無非就是兩種：全局變量和局部變量。Javascript語言的特殊之處,就在於函數內部能夠直接讀取全局變量。

　　var n=999; function f1(){alert(n);} f1(); // 999

另外一方面,在函數外部天然沒法讀取函數內的局部變量。

　　function f1(){var n=999;} alert(n); // error

須要注意:函數內部聲明變量的時候,必定要使用var命令。若是不用的話,你實際上聲明瞭一個全局變量！

　　function f1(){n=999; } f1(); 　alert(n); // 999

2、如何從外部讀取局部變量？

出於種種緣由,咱們有時候須要獲得函數內的局部變量。可是正常狀況下,這是辦不到的；只有經過變通方法才能實現。那就是在函數的內部,再定義一個函數。

　　function f1(){ var n=999；function f2(){ alert(n); // 999} }

在上面的代碼中,函數f2就被包括在函數f1內部;這時f1內部的全部局部變量,對f2都是可見的;可是反過來就不行,f2內部的局部變量,對f1就是不可見的;這就是Javascript語言特有的"鏈式做用域"結構（chain scope）;子對象會一級一級地向上尋找全部父對象的變量。因此,父對象的全部變量,對子對象都是可見的,反之則不成立。

既然f2能夠讀取f1中的局部變量,那麼只要把f2做爲返回值,咱們不就能夠在f1外部讀取它的內部變量了嗎！

　　function f1(){

　　　　var n=999;

　　　　function f2(){

　　　　　　alert(n);

　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

3、閉包的概念

上一節代碼中的f2函數,就是閉包。

各類專業文獻上的"閉包"（closure）定義很是抽象,很難看懂。個人理解是,閉包就是可以讀取其餘函數內部變量的函數。因爲在Javascript語言中,只有函數內部的子函數才能讀取局部變量,所以能夠把閉包簡單理解成"定義在一個函數內部的函數"。因此,在本質上,閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

4、閉包的用途

閉包能夠用在許多地方。它的最大用處有兩個: 一個是前面提到的能夠讀取函數內部的變量;另外一個就是讓這些變量的值始終保持在內存中。怎麼來理解這句話呢？請看下面的代碼。

　　function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　function f2(){

　　　　　　alert(n);

　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

　　nAdd();

　　result(); // 1000

在這段代碼中,result實際上就是閉包f2函數。它一共運行了兩次,第一次的值是999,第二次的值是1000。這證實了,函數f1中的局部變量n一直保存在內存中,並無在f1調用後被自動清除。

爲何會這樣呢？緣由就在於f1是f2的父函數,而f2被賦給了一個全局變量,這致使f2始終在內存中,而f2的存在依賴於f1,所以f1也始終在內存中,不會在調用結束後,被垃圾回收機制（garbage collection）回收。

這段代碼中另外一個值得注意的地方,就是"nAdd=function(){n+=1}"這一行,

一、首先在nAdd前面沒有使用var關鍵字,所以nAdd是一個全局變量,而不是局部變量;

二、其次,nAdd的值是一個匿名函數（anonymous function）,而這個匿名函數自己也是一個閉包,

因此nAdd至關因而一個setter,能夠在函數外部對函數內部的局部變量進行操做。

5、使用閉包的注意點

一、因爲閉包會使得函數中的變量都被保存在內存中,內存消耗很大,因此不能濫用閉包,不然會形成網頁的性能問題,在IE中可能致使內存泄露。解決方法是,在退出函數以前,將不使用的局部變量所有刪除。

二、閉包會在父函數外部,改變父函數內部變量的值。因此,若是你把父函數看成對象（object）使用,把閉包看成它的公用方法（Public Method）,把內部變量看成它的私有屬性（private value）,這時必定要當心,不要隨便改變父函數內部變量的值。

6、思考題

若是你能理解下面兩段代碼的運行結果,應該就算理解閉包的運行機制了。（首先考慮做用域this的指向）

代碼片斷一。

　　var name = "The Window";

　　var object = {

　　　　name : "My Object",

　　　　getNameFunc : function(){

　　　　　　return function(){

　　　　　　　　return this.name;

　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

代碼片斷二。

　　var name = "The Window";

　　var object = {

　　　　name : "My Object",

　　　　getNameFunc : function(){

　　　　　　var that = this;

　　　　　　return function(){

　　　　　　　　return that.name;

　　　　　　};

　　　　}

　　};

alert(object.getNameFunc()());

14.JSON的瞭解？XML和JSON的區別？

瞭解： JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小；

區別：(1).數據體積方面：JSON相對於XML來說，數據的體積小，傳遞的速度更快些。

(2).數據交互方面：JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。

(3).數據描述方面：JSON對數據的描述性比XML較差。

(4).傳輸速度方面：JSON的速度要遠遠快於XML。

15.哪些地方會出現css阻塞,哪些地方會出現js阻塞？

js的阻塞特性：全部瀏覽器在下載JS的時候,會阻止一切其餘活動,好比其餘資源的下載,內容的呈現等等。直到JS下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗,新一代瀏覽器都支持並行下載JS,可是JS下載仍然會阻塞其它資源的下載（例如.圖片,css文件等）。

*因爲瀏覽器爲了防止出現JS修改DOM樹,須要從新構建DOM樹的狀況,因此就會阻塞其餘的下載和呈現。

*嵌入JS會阻塞全部內容的呈現,而外部JS只會阻塞其後內容的顯示,2種方式都會阻塞其後資源的下載。

也就是說外部樣式不會阻塞外部腳本的加載,但會阻塞外部腳本的執行。

CSS怎麼會阻塞加載了？

CSS原本是能夠並行下載的,在什麼狀況下會出現阻塞加載了(在測試觀察中,IE6下CSS都是阻塞加載）

*當CSS後面跟着嵌入的JS的時候,該CSS就會出現阻塞後面資源下載的狀況;

*而當把嵌入JS放到CSS前面,就不會出現阻塞的狀況了。

根本緣由：

*由於瀏覽器會維持html中css和js的順序,樣式表必須在嵌入的JS執行前先加載、解析完。

*而嵌入的JS會阻塞後面的資源加載,因此就會出現上面CSS阻塞下載的狀況。

嵌入JS應該放在什麼位置？一、放在底部,雖然放在底部照樣會阻塞全部呈現,但不會阻塞資源下載。

二、若是嵌入JS放在head中,請把嵌入JS放在CSS頭部。三、使用defer（只支持IE）

四、不要在嵌入的JS中調用運行時間較長的函數,若是必定要用,能夠用`setTimeout`來調用

16.js中的this指向有什麼特色？

js中的this與其它編程語言中的不一樣，js中的this指向的對象不是固定的，而是能夠改變的（經過function對象的call、apply、bind，jQuery的proxy等能夠改變this指向）。如下是this的默認指向：

1.定義在全局做用域中的普通函數中的this指向window對象（嚴格模式下本條無效，參見後面嚴格模式的說明）

2.事件處理函數中的this指向觸發事件的標籤元素，特殊的是，IE中的attachEvent中的this老是指向全局對象Window；

3.構造函數中的this指向當前正在建立的對象（嚴格模式下必須使用new）

4.原型中的函數內的this指向當前實例

其它框架中的函數內的this都有特定的指向，如jQuery.each(func)中func中的this指向當前迭代的標籤元素對象。

17.怎麼改變this指向？call和apply的區別是什麼？call和bind的區別是什麼？

隨着函數使用場合不一樣，this的值會發生變化。可是總有一個原則，那就是this指的是調用函數的那個對象。This通常指向當前被調用者。

改變this指向：經過call、apply、bind。

他們的區別：

Call（object，object）調用一個對象的一個方法，以另外一個對象替換當前對象。

Apply (thisObj，[argArray]) 應用某一對象的一個方法，用另外一個對象替換當前對象。

bind()，它會建立一個函數的實例，其this值會被綁定到傳給bind()函數的值。

18.break和 return的區別？

break是用來跳出循環的，例如for，while，do-while均可以跳出，但不跳出函數

return是使整個函數返回的，後面的無論是循環裏面仍是循環外面的都不執行

break語句一般用在循環語句和開關語句中,當break語句用於do-while、for、while循環語句中時,可以使程序終止循環而執行循環後面的語句, 一般break語句老是與if語句聯在一塊兒,即知足條件時便跳出循環return語句是將函數的值返回主調函數。

還有一個continue語句的做用是跳過循環本中剩餘的語句而強行執行下一次循環。continue語句只用在for、while、do-while等循環體中,常與if條件語句一塊兒使用,用來加速循環

19.簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

20.建立一個長度爲100，值等於索引的數組。

var arr = [0,1,2,…,99];

var arr = new Array(100)； for (var i = 0; i < arr.length; i++) {arr[i] = i;}； arr;

var arr = Object.keys(Array.from({ length: 100 }));

var arr = Object.keys(Array.apply(null,{ length: 100 }));

var arr = Object.keys(Array.from({ length: 100 })).map(function(item){return +item;});

var arr = Array.from(new Array(100).keys());

var arr = [...Array(100).keys()];

var arr = [...Array.from({ length: 100 }).keys()];

23.js跨域請求的方式，能寫幾種是幾種？CORS

一、經過jsonp跨域

2、CORS（Cross-Origin Resource Sharing）跨域資源共享,須要服務器設置header ：Access-Control-Allow-Origin。

3、經過修改document.domain來跨子域

4、使用window.name來進行跨域

5、使用HTML5中新引進的window.postMessage方法來跨域傳送數據（ie 67 不支持）

6、nginx反向代理這個方法通常不多有人說起，可是他能夠不用目標服務器配合，不過須要你搭建一箇中轉nginx服務器，用於轉發請求

跨域訪問與同源策略

由於在同一個瀏覽器窗口中可以同時打開多個網站的頁面，並且它們都處於同一個會話中，若是不由止跨域訪問則會形成用戶隱私數據泄露和登陸身份冒用的問題，因此瀏覽器會使用同源策略限制跨域訪問。

在瀏覽器中，經過JS代碼訪問不一樣域名下的URL（JS的XHR/AJAX）或者iframe（JS訪問iframe內部的DOM）時，會被禁止訪問。而不是經過JS代碼進行的跨域訪問不存在跨域問題！好比能夠跨域加載圖片、引用JS文件、下載各類文件、使用iframe跨域嵌入其它網站的頁面都是容許的。

跨域訪問被禁止有時會給應用開發帶來阻礙，但在符合特定條件時也有相應的方法在保證安全的狀況下可以解決跨域訪問的問題。

一、跨域資源共享（CORS：Cross-Origin Resource Sharing）

在對方的服務器中的響應頭中添加 Access-Control-Allow-Origin 容許哪些域進行跨域訪問它是值能夠是域名，或者 * 。這種方案只有在對方信任或不在意（安全）的狀況下才能使用。

在用Ionic開發Web App時，一般會遇到瀏覽器端和服務端分離的狀況，這時可以使用CORS瀏覽器插件自動在響應頭中添加Access-Control-Allow-Origin頭。這樣能夠輕鬆實現開發時的跨域。

二、若是域名都是同一個根域名的子域名，則能夠使用document.domain = "根域名" 來統一JS執行環境中的域名。這種方案只能在同一個公司或組織的內部使用。

不一樣的框架之間是能夠獲取window對象的,但卻沒法獲取相應的屬性和方法。

有一個頁面,它的地址是http://www.example.com/a.html ,

在這個頁面裏面有一個iframe,它的src是http://example.com/b.html,

這個頁面與它裏面的iframe框架是不一樣域的,因此咱們是沒法經過在頁面中書寫js代碼來獲取iframe中的東西的：

function test(){

var iframe = document.getElementById('ifame');

var win = document.contentWindow;

//能夠獲取到iframe裏的window對象,但該window對象的屬性和方法幾乎是不可用的

var doc = win.document;//這裏獲取不到iframe裏的document對象

var name = win.name;//這裏一樣獲取不到window對象的name屬性

}

</script>

這個時候,document.domain就能夠派上用場了:

一、只要設置http://www.example.com/a.html和http://example.com/b.html

這兩個頁面的document.domain爲相同的域名就能夠了。

二、但要注意的是：document.domain的設置是有限制的,

咱們只能把document.domain設置成自身或更高一級的父域,且主域必須相同。

1.在頁面 http://www.example.com/a.html 中設置document.domain:

document.domain = 'example.com';//設置成主域

function test(){

//contentWindow可取得子窗口的window對象

alert(document.getElementById('iframe').contentWindow);

}

</script>

2.在頁面 http://example.com/b.html 中也設置document.domain:

//在iframe載入這個頁面也設置document.domain,使之與主頁面的document.domain相同

document.domain = 'example.com';

</script>

**修改document.domain的方法只適用於不一樣子域的框架間的交互**

三、JSONP：JSON Padding，原理是：瀏覽器不限制經過script標籤引入其它網站的腳本，因此能夠經過JS向頁面上動態添加一個script標籤而且指定其 src 爲一個特殊的url，對方的服務器針對這個url的請求，會進行特殊處理。

這種方案能夠跨域任意域名，可是必是對方有意這樣設計才能使用。若是對方不支持將JSON數據padding到函數名後面的()中，則JSONP沒法使用。

在jQuery中 $.getJSON() 這個方法支持 JSONP !!!

在url後面加 callback=? 便可，jQuery會自動生成函數名並將調用轉交給getJSON中的回調函數。

$.ajax()方法也支持JSONP，設置type:’GET’， dataType:’jsonp’便可

Angular中的$http服務也提供了jsonp()方法支持JSONP

四、將要請求的URL發送給本身的服務端，讓服務端發起請求（服務端沒有跨域限制），服務端請求成功後，將數據再回傳給瀏覽中的JS----服務端代理請求。

這種方式只要本身的服務端支持一下就能夠了，是比較經常使用的方案，沒有任何限制，並且這種方安還能夠實現其它方案沒法實現的功能：

經過服務端抓取別人的網頁，將網頁上的數據提取出來，變成JSON返回

在Node.js中，使用cheerio模塊能夠像使用jquery同樣從HTML字符串中篩選並提取想要的數據。

五、使用任何能夠利用的瀏覽器端中間機制實現跨域交換數據

如：window.name在代碼中使用name變量時實際上使用的是window對象的name屬性，可是name屬性是window對象的內部屬性。它只接受字符串值，若是給它賦其它值，將會直接被轉換成字符串！！！！尤爲是賦一個對象給name變量的時候，會致使數據丟失！！！(對象toString()後是[object Object])。可是name有一特別性質能夠被用來作跨域數據交換name值不會隨全局做用域被銷燬，無論窗口跳轉到哪一個頁面，無論窗口打開了多少個頁面，name的值都是通用的。其它的，諸如 location.hash 也能夠用來作跨域數據交換（主要是iframe）

使用HTML5的window.postMessage方法跨域：

window.postMessage(message,targetOrigin) 方法是html5新引進的特性；能夠使用它來向其它的window對象發送消息,不管這個window對象是屬於同源或不一樣源,目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。

24.null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲0；null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象

undefined是一個表示"無"的原始值，轉爲數值時爲NaN；

undefined表示「缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：

1. 變量被聲明瞭，但沒有賦值時，就等於 undefined

2. 調用函數時，應該提供的參數沒有提供，該參數等於 undefined

3. 對象沒有賦值的屬性，該屬性的值爲 undefined

4. 函數沒有返回值時，默認返回 undefined

null表示「沒有對象」，即該處不該該有值。典型用法是：

做爲函數的參數，表示該函數的參數不是對象

2. 做爲對象原型鏈的終點

25.ES6有什麼新特性？

ECMA於2015年6月發佈的JS標準（也被稱做ECMA2015，該版本於2016年6月小幅修訂）、目前在Node.js和桌面瀏覽器上已經完成了支持（主流的現代瀏覽器都支持），移動端的支持較弱（支持約50%的特性，Android因爲碎片化嚴重，老機型支持更差），目前得到最普遍支持的是ES5.1。ES7預計在2017年發佈。

ES6爲JS帶來了大量的新特性，是JS語言升級最大的一個版本：

1. 支持let塊級變量和const常量 2. 支持變量解構賦值

3. 擴展了JS的核心對象

4. 加強了語言反射能力（經過代碼獲取代碼自身信息的能力，如一個類包含哪些方法）

5. 增長了Promise 6. 支持Class定義類 extends 繼承類

7. 支持Module模塊化 8. 支持迭代接口和生成器等

因爲ES6如今尚未被全部瀏覽器支持，若是想在項目中使用ES6，並且還想保證瀏覽器兼容性，就須要使用轉換工具將ES6轉碼成ES5。經常使用的轉換工具備：

Traceur：由谷歌提供，能夠在網頁上就地轉換，也能夠在線轉換、還能夠使用Node.js命令行本地轉換；

Babel：支持ES6語法轉換，若是要支持新增長的API，則還須要使用babel-core。Babel目前由Facebook支持（由於Facebook的React給JS擴展了一套新的組件語法jsx，而這個語法須要babel來轉換成普通js）。Babel推薦使用webpack之類打包工具進行轉換，Babel也提供了babel-standalone支持瀏覽器轉換，但不該在商業正式環境中使用。

上述兩個工具的使用可參考: http://es6.ruanyifeng.com/#docs/intro

模塊化

JS的做用域隔離機制較弱，所以使用不當時會產生命名衝突的問題，尤爲是在單頁應用日益複雜、使用的第三方框架愈來愈多的狀況下更容易產生衝突問題。並且JS自己沒有直接提供使用代碼加載其它腳本文件的機制。所以產生了JS模塊化概念。

JS模塊化一般要解決2個問題：提供定義JS模塊的辦法和提供按需加載模塊及其依賴模塊的辦法

經常使用的JS模塊化方案有如下幾種：

一、Node.js中的模塊化方案（一般稱爲CommonJS規範，最簡單易用，經過約定取消了配置）

二、瀏覽器中使用中RequireJs（稱爲AMD規範）和SeaJs（稱爲CMD規範），這兩個都須要配置

三、ES6中的模塊化方案（無需配置）

目前在瀏覽器端使用最普遍的是RequrieJs（jQuery、Underscore、Backbone、Angular、ionic等流行的庫和框架都支持），RequireJs經過AMD規範描述了定義和使用模塊的方法，自己支持JS文件的按需加載，另外RequireJs還有不少官方和第三方插件能夠實現各類文件（如HTML、CSS、其它文本文件等）的動態加載。

另外還須要注意的是Webpack打包工具支持混合使用Nodejs中的require()導及ES6中的import … from …，還支持直接從npm模塊包中導入js，所以使用Webpack + npm也愈來愈流行，尤爲是在React陣營中幾乎成爲主流。

組件化技術

自從HTML產生以後，就以其簡單易出成果而被普遍應用，HTML的功能也愈來愈強大，標籤數量也愈來愈多，到H5標籤已經超過100個。可是但願自定義HTML標籤的人並不會由於HTML標籤愈來愈多而止步，他們的指望更高，那就是能夠自由地增長HTML標籤。因而產生了各類支持自定義標籤的技術，均可以稱之爲Web組件化技術，常見的有：

現代瀏覽器支持的直接自定義新標籤的技術（能夠理解爲是XML），在HTML代碼中直接寫新標籤，默認是inline的，經過CSS能夠給予更多的控制。老瀏覽器不支持。

經過Angular的指令或組件自定義標籤。成熟，功能強大，商業應用普遍。ionic中就經過Angular定義了大量的UI控件。

經過Vue.js的組件定義標籤。Vue.js中能夠定義componet（組件），而後在模版中能夠像標籤同樣使用（Vue.js見下文第三方庫及框架列表）。

經過React組件定義標籤。這種其實算不上自定義標籤，由於它不是HTML，而是JS（所謂的標籤實際上是jsx組件，編譯後變成了js，與HTML關係不大）。

Web Components技術，由W3C提出的技術，有望成爲將來的標準。容許直接從DOM的HTMLElement類繼承出新標籤。這種技術是多種Web新技術的綜合，包含自定義標籤類、template模板、shadow封裝、import導入等，目前還處於試驗階段，除了谷歌外大多數公司都尚未提供支持，離商業應用還很遠。

26. 異步編程Promise/Deferred、多線程WebWorker

長期以來JS都是以單線程的模式運行的，而JS又一般應用在操做用戶界面和網絡請求這些任務上。操做用戶界面時不能進行耗時較長的操做不然會致使界面卡死，而網絡請求和動畫等就是耗時較長的操做。因此在JS中常常要進行異步編程。而最基本的異步編程方法是事件和回調函數。但不管是事件仍是回調函數在遇到稍微複雜一點的場景時都會變得難以使用。如時機問題、等待問題等。這時就產生了Promise的概念。

Promise能夠保證不管何時添加回調函數，都能使回調函數獲得恰當的調用；還能保證異步任務的狀態不會被篡改。JS中的Promise有多種實現方案，它們的API各有不一樣，但核心概念都是類似的（jQuery3.x的Deferred已經向ES6靠攏）。

ES6支持Promise、提供了resolve、reject、then、catch、race、all等最基本的API。

jQuery則經過Deferred額外提供了進度通知及在外部改變狀態的API，支持resolve、reject、then、done、fail、always、progress、notify、state等，還有經過$.when()支持相似all的功能，支持經過promise()轉換成Promise對象（不是ES6中的Promise，而是表示一種不可從外部更改狀態的Deferred）

Angular則支持$q，它即兼有ES6中Promise和jQuery Defferred的特色。

使用Promise能夠將異步任務自己與後續業務徹底分離，所以能夠簡化異步編程。經過 .then() 的鏈式調用還能夠減小回調函數嵌套的層級，使代碼更加易於閱讀和易於理解。

JS在H5時增長了多線程API，即WebWorker。WebWorker是一個真正的分線程，與其它系統線程同樣。但與其它編程技術中的多線程不一樣，它是經過消息機制與主線程交互的。所以能夠理解爲是放入沙盒中的線程。由於沒有開放其它API，避免了產生線程死鎖的可能，但功能上要弱一些。

27.怎樣將兩個對象混合在一塊兒？$.extend() 、Object.assign()

28.怎麼在網頁上實現兼容性較好的音視頻播放器，而且還能優先使用H5技術？<soruce/>

29.在手機頁面上一打開頁面就自動播放音頻有什麼問題？

部分手機瀏覽器無法自動播放，添加autoplay="autoplay"屬性

30. 添加、移除、移動、複製、建立和查找節點的方法?

1）建立新節點：createElement()、createTextNode()

2）添加、移除、替換、插入：appendChild()、removeChild()、replaceChild()、insertBefore()

3）查找：getElementsByTagName()、getElementsByName()、getElementById()

jQuery部分

01.jQuery支持哪些動畫效果？

隱藏/顯示淡入淡出滑動還能夠自定義動畫

fadeIn/fadeOut/fadeToggle(漸入漸出)，hide/show/toggle(隱藏出現)

SlideUp/SlideDown/SlideToggle(上下滑動)，animate()(自定義)

02.點擊顯示和隱藏怎麼實現？

$("#hide").click(function(){$("p").hide();}) $("#show").click(function(){$("p").show();});

03.動畫執行完畢以後須要執行一段代碼該怎麼作？

jQ中自定義動畫的時候 $(selector).animate({},1000,easing,function(){ 動畫完成後執行的代碼})

04.jQuery Deferred都有哪些經常使用的方法？分別是什麼做用？

.Deferred() 生成一個deferred對象。

deferred.done() 指定操做成功時的回調函數

deferred.fail() 指定操做失敗時的回調函數

deferred.promise() 沒有參數時，返回一個新的deferred對象，該對象的運行狀態沒法被改變；接受參數時，做用爲在參數對象上部署deferred接口。

deferred.resolve() 手動改變deferred對象的運行狀態爲"已完成"，從而當即觸發done()方法。deferred.reject() 這個方法與deferred.resolve()正好相反，調.0用後將deferred對象的運行狀態變爲"已失敗"，從而當即觸發fail()方法。

deferred.then()有時爲了省事，能夠把done()和fail()合在一塊兒寫，這就是then()方法。

deferred.always()這個方法也是用來指定回調函數的，它的做用是，無論調用的是deferred.resolve()仍是deferred.reject()，最後老是執行。

jQuery開發團隊就設計了deferred對象。簡單說，deferred對象就是jQuery的回調函數解決方案。在英語中，deffer的意思是"延遲"，因此deferred對象的含義就是"延遲"到將來某個點再執行, 它解決了如何處理耗時操做的問題，對那些操做提供了更好的控制，以及統一的編程接口。

05.對Deferred的then進行鏈式調用時有什麼要求，有什麼做用？

Deferred.then()至關於Deferred.done()、Deferred.fail()、Deferred.progress()的合體，能夠同時註冊3個狀態下的回調函數。

06.Deferred的then鏈式調用和非鏈式調用有什麼區別？

前一個要向後一個傳遞deffered對象。

then()返回的是一個新deffered對象then註冊的回調函數的返回值將做爲這個新deffered的參數,then()的做用也是指定回調函數，它能夠接受三個參數，也就是三個回調函數。第一個參數是resolve時調用的回調函數，第二個參數是reject時調用的回調函數，第三個參數是progress()方法調用的回調函數。

07.jQuery3.0有什麼新變化？

（1）、移除舊的IE工做區:早於IE9版本的相關技術與工做區都被移除了

（2）、簡化了 show/hide以前的 show/hide 是大兼容，好比 show，不管元素的 display是寫在style，stylesheet裏都能顯示出來。3.0 則不一樣了，寫在 stylesheet 裏的 display:none 調用 show 後仍然隱藏。 3.0 建議採用class方式去顯示隱藏，或者徹底採用 hide先隱藏（不使用css代碼），再調用 show 也能夠。

（3）、data 方法兼容 data-name-11：$('#txt').data() 3.0 版本輸出 {"name-11": aa}，以前版本輸出 {}

（4）、jQuery 3.0運行在Strict Mode下

（5）、引進for...of循環

（6）、動畫方面採用新的API

（7）、對包含特殊含義的字符串提供轉義的新方法：jQuery.escapeSelector()提供了對在CSS中存在特殊含義的字符串或字符進行轉義的方法：好比：頁面中某個ID爲「abc.def」的元素因爲選擇器將其解析爲 ID爲「abc」且包含一個名爲「def」的類的對象，而沒法被$( "#abc.def" )選定。可是它能夠由 $( "#" + $.escapeSelector( "abc.def" ) )來進行選定。

（8）、類操做方法支持SVG：jQuery 3如今還沒法完整的支持SVG，可是對於操做CSS類名稱的jQuery方法，如 .addClass() 和 .hasClass() 如今能夠將SVG文檔做爲目標。

（9）、延遲對象如今與JS Promises兼容

08.jQuery怎樣添加和移除事件監聽函數？經過on添加經過off移除

09.JQuery中若是某事件只需處理一次怎樣添加監聽函數？one()該方法綁定的事件觸發一次後自動刪除.

10.若是但願事件監聽對之後添加到頁面上的新標籤也有效，應該怎麼作？使用事件委託. on 是事件委託

11.文件框中輸入的內容變化時當即得到事件通知應該監聽什麼事件？

onchange事件是文本框內容改變並失去焦點的時候才觸發；比較完美的解決辦法：oninput和onproper

oninput 是 HTML5 的標準事件，對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素經過用戶界面發生的內容變化很是有用，在內容修改後當即被觸發，不像 onchange 事件須要失去焦點才觸發；

oninput 事件在 IE9 如下版本不支持，須要使用 IE 特有的 onpropertychange 事件替代；

12.表單中進行什麼樣的操做會致使表單提交？若是但願阻止表單提交怎麼辦？

在form標籤中添加Action(提交的地址)和method(post)，且有一個submit按鈕（<input type=’submit’>）就能夠進行數據的提交，每個input標籤都須要有一個name屬性，才能進行提交。

點擊提交按鈕時阻止默認提交event.preventDefault() 阻止默認提交，在form表單監聽表單提交事件(onSubmit)

13.jQuery中的proxy方法有什麼做用？

jQuery.proxy()函數用於改變函數的上下文。你能夠將指定函數傳入該函數，該函數將返回一個新的函數，其執行代碼不變，但函數內部的上下文(this)已經被更改成指定值。

14.jQuery中執行一個動畫後，隔2s後再執行一個動畫應該怎麼寫？

$().animate();//執行一個動畫；$().delay(2000).animate()//2s後執行另外一個動畫

15.jQuery中怎麼中止動畫？中止後參與動畫的標籤元素會處於什麼狀態？

stop() 在當前位置中止動畫。中止：$(this).stop(false,true).animate(); //當前動畫直接到達末狀態

16.jQuery中能不能改變更畫頻率？

jQuery.fx.interval 屬性用於改變以毫秒計的動畫運行速率。可操做該屬性來調整動畫運行的每秒幀數。

默認值是 13 毫秒。該屬性經常使用於修改動畫運行的每秒幀數。

下降這個值可以使動畫在更快的瀏覽器中運行得更流暢，但這麼作也行會影響性能。

17.jQuery中可否在color或background-color等顏色值上實施動畫？

jQuery的animate函數能夠進行與尺寸相關CSS樣式動畫，但對於如background-color等與顏色相關的CSS樣式漸變的動畫沒有提供。

18.jQuery插件有2種類型，分別是哪2種？

（1）封裝對象方法的插件$(obj).lightbox();（2）封裝全局函數的插件$.函數名(參數)

19.你用過哪些jQuery插件？全屏滾動插件焦點圖插件無縫滾動插件 swipper

20.jQuery中的Callbacks是什麼？有什麼用？有哪些經常使用方法？

（1）用來管理一組有相同方法參數的回調函數

（2）主要用來進行函數隊列的add、remove、fire、lock等操做

（3）add：向內部添加函數；fire：依次執行隊列裏的函數；empty：清空函數隊列；has：判斷函數隊列中是否存在某個函數；remove：從內部隊列中移除某些函數；disable：禁用回調列表；lock：鎖定回調管理

22.使用jQuery在同一個頁面發起多個Ajax請求時可否將共同的請求設置一次性設置好？可否用一個函數處理全部請求的失敗？

能夠 $.ajaxSetup({type:請求方法}) Promise.all().then().catch().finally()

23.JSONP是什麼？jQuery是否支持JSONP？怎麼支持的？

JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。支持 jQuery-JSONP是一個支持 JSONP 調用的 jQuery 插件跨域請求(瀏覽器經過沒有限制跨域的script標籤，指定其src屬性爲特殊的url，對方的服務器針對這個url請求，會進行特殊處理)，$.getJson(),

不只如此，咱們還發現凡是擁有"src"這個屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>）該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

25.jQuery Ajax怎麼設置請求頭？怎麼獲取響應頭？怎麼設置請求超時時間？

設置請求消息頭：

$.ajax({

type: "GET",

url: "test.php",

success: function(data) {

console.log(data);

beforeSend: function(xhr) {

xhr.setRequestHeader("User-Agent", "headertest");

}

});

獲取響應頭： xhr.getResponseHeader()

超時時間：

var ajaxTimeoutTest = $.ajax({

　　url:'', //請求的URL

　　timeout : 1000, //超時時間設置，單位毫秒

　　type : 'get', //請求方式，get或post

　　data :{}, //請求所傳參數，json格式

　　dataType:'json',//返回的數據格式

　　success:function(data){ //請求成功的回調函數

　　　　alert("成功");

設置 complete 回調函數

　　complete:function(XMLHttpRequest,status){ //請求完成後最終執行參數

　　　　if(status=='timeout'){//超時,status還有success,error等值的狀況

　　　　　 ajaxTimeoutTest.abort();

　　　　　 alert("超時");

　　　　}

});

26.jQuery Ajax發起POST請求時，若是數據須要以JSON格式發送到服務端該怎樣寫？

只須要調用$.ajax()方法，並指明請求的方式、地址、數據類型，以及回調方法等

dataType:’JSON’ JSON.stringify() 或在服務端body-parser使用json方法

27.怎樣經過jQuery Ajax請求上傳文件？

第一步：引入js文件名稱第二步：編寫<input type="file" name="file" id="file"/>點擊上傳文件。

第三步：編寫ajaxFileUpload異步請求，並處理請求結果。

28.怎樣實現將圖片從文件夾拖拽到頁面時將圖片顯示到頁面上？若是拖拽到頁面上就直接經過Ajax上傳到服務器呢？

（1）爲了處理放置文件的操做，須要處理三個事件：ondragenter、ondragover和ondrop。

（2）處理圖片用的是 readAsDataURL() 方法，其獲得的數據URL是一種用長字符串表示圖片的方式。爲了在網頁中顯示圖片，能夠將 <img> 元素的src屬性設置爲圖片URL，也可也將CSS的 background-image 屬性設置爲圖片URL（本例採用此方式）

（3）這裏將顯示圖片的 background-size 設爲100%，爲了縮小圖片以所有顯示。並將 background-repeat 設爲 no-repeat，不讓圖片重複顯示

29. 經過jQuery可否向頁面導入新的js腳本文件（用哪一個方法），若是但願在加載的js腳本執行後運行一段代碼該怎麼辦？

jQuery內置了一個方法能夠加載單一的js文件；當加載完成後你能夠在回調函數裏執行後續操做。最基本的是使用jQuery.getScript（這個加載須要時間，所以須要用一個時間戳字符串跟在須要加載的js地址後面，防止它被緩存，方法爲：jQuery.ajaxSetup({ });）

運行一段代碼能夠使用 .done（function(){}）

例：jQuery.getScript("jquery.cookie.js").done(function() {

jQuery.cookie("cookie_name", "value", { expires: 7 }); });

nodeJs、requireJs 、ArtTemplate、自動化構建工具

01. RequireJs與jQuery的getScript()方法有什麼不一樣？

jquery.getScript(url,[callback]),url js路徑回調函數

RequireJs加載時不須要url，加載的是模塊名,且導入的模塊得有輸出（返回值exports/return）

RequireJs引入js文件只要配置好路徑，就不用在乎寫js的前後順序，一塊兒並行加載提升js加載效率，而且只須要寫一個js文件，能夠緩存在客服端。

getScript 加入腳本，得有延時函數，在加載有依賴的js文件時會致使加載的前後無法肯定，會出現頁面不正常，不會建議緩存在客服端，而且加劇了客戶端對服務器的請求次數。

02. RequireJs中怎麼指定頁面的主js腳本文件？

data-main屬性，查找其程序的主入口文件(data-main)；例如： <script src="require.js" data-main="main"></script>

data-main屬性:規定了程序的主入口文件(默認名爲main,可自定義)文件不須要加.js後綴，在requireJS中，默認加載的是js文件

03. RequireJs中怎麼定義模塊？怎麼指定模塊依賴項？

define（）定義一個模塊:（define(id, [], function)

para1: 默認的ModuleId是文件名， id是可選值(不寫)

para2: []當前JS文件的依賴項，只有一個依賴項，也是個數組

para3: function: 依賴項加載完成以後的回調函數 === 當前JS的主要內容

04. RequireJs中怎麼將數據或功能導出模塊？

三種方法 1.直接用return導出

2.加載一個module模塊用module.exports導出

3.加載一個require模塊在函數中寫入var module = require（‘module’）再用module.exports 導出

05. RequireJs中怎麼加載模塊，並在模塊加載完成後執行代碼？

在入口文件對js文件進行配置在當前的js文件中define的第一個參數爲依賴數組將依賴項寫入依賴數組中，這樣就會在所需的模塊加載完成後執行後面函數中的代碼，其核心就是要肯定依賴關係

06. RequireJs中若是要加載jQuery應該怎麼作？

jQuery特殊引入方式：一、名字命名爲jquery.js 而且和入口文件在一個目錄下

二、定義模塊的方式。命名爲：jquery，依賴項是jquery的路徑，返回jQuery對象

define("jquery", ["./js/jquery-2.0.3"], function($) { return jQuery; })

07. RequireJs中若是要加載jQuery插件應該怎麼作？

這須要在入口文件中作配置先在paths中寫入要加載的jQuery插件的js文件；若是有依賴jquery的能夠在shim中作依賴jQyuery的配置

08. RequireJs除了能加載js腳本文件外，可否加載其它文件？怎麼作？

引入require-css.js文件，在config中進行配置而後再define中用css!css/index !前面爲插件的路徑後面爲文件的路徑

09. ArtTemplate支持if/else嗎？除了if/else以外還有什麼方法能實現條件判斷？支持，三目運算符

ArtTemplate支持循環處理數據（如數組）嗎？

支持使用遍歷表達式

{{each listArr as item index}} // listArr是數組；item數組中的每個元素；index是索引

標籤內容

ArtTemplate支持引用子模板嗎？

支持，在想要使用的模板中用include 後面跟模板的路徑

{{include "template_name"}} //template_name 引入模板的名字

ArtTemplate支持將模板字符串編譯成函數嗎？

支持,經過template.compile(source, options)來將返回一個渲染函數。

支持,經過template(id)來將返回一個渲染函數。

13. Express中怎麼從URL的QueryString中得到參數？用req.query

14. npm是什麼？Node模塊包管理器; npm是雲端包管理器，是用來安裝模塊，建立模塊，發佈模塊，測試模塊

15. npm init命令的做用是什麼？初始化一個nodejs項目，生成一個package.json文件

16. Node.js中導入模塊和導入js文件寫法上有什麼區別？導入模塊是直接寫文件的名字，而導入js文件時要寫路徑

17. Grunt是什麼？有哪些經常使用的插件？

Grunt 是一個基於Nodejs的自動化任務執行工具。那麼什麼是任務執行工具呢，其實就是按照以前編定好的規則執行任務的一個工具。grunt-contrib-clean grunt-contrib-uglify grunt-contrib-concat grunt-contrib-copy：複製文件和文件夾。grunt-contrib-cssmin：CSS文件壓縮。grunt-contrib-imagemin：圖片壓縮。grunt-contrib-htmlmin:壓縮html

知道Gulp嗎？知道，gulp、grunt前端自動化工具 js構建工具

源代碼管理工具、插件、工具

01.怎麼在頁面上繪製曲線圖等圖表？可否支持雙Y軸？Echats 支持

02.手機頁面怎麼支持手勢識別？經過Touch API來支持觸控

03.JS支持多線程嗎？支持h5以後增長了多線程API，Web Worker

04.JS支持Socket雙工雙向通訊嗎？支持 Web Socket

05.JS支持GPS定位嗎？支持 getCurrentPosition()

06.JS能夠實現搖一搖嗎？能夠 window.DeviceMotionEvent

07.微信能夠實現語音識別嗎？能夠

08.何時使用git分支？怎麼建立分支？怎麼合併分支？

主分支通常爲成熟內容，分支內容能夠是一些測試性質或研發新特性等

git branch <分支名> git merge <要被合併到當前枝節的分支>

09.Git 合併衝突了怎麼辦？手動解決

10.Git第一次從遠程庫獲取代碼用什麼命令？git clone [romote-name]

11.Git從遠程庫獲取更新用什麼命令？git pull

12.Git將已提交的代碼發送到遠程庫用什麼命令？git push

13.Git查看提交歷史記錄用什麼命令？

git log #顯示提交日誌

git log --oneline #一行顯示提交日誌

git log -1 #顯示一條日誌

git log -n #-n 顯示 n條日誌

git log --graph 以圖片化方式顯示提交記錄

14.說說你對React的瞭解

React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套。作出來之後，發現這套東西很好用，就在2013年5月開源了；

React 是 Facebook 爲了開發複雜和高性能Web頁面而發佈的開源項目，它爲View層的組件化開發提供了一個全新的解決方案，支持虛擬DOM和JSX是它的最大特色；

React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。但React 自己還在不斷變更，API 一直在調整，至今沒發佈1.0版。參考：http://www.ruanyifeng.com/blog/2015/03/react.html

JSX：HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法

組件：React 容許將代碼封裝成組件（component），而後像插入普通 HTML 標籤同樣，在網頁中插入這個組件

虛擬DOM：組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。

只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，它能夠極大提升網頁的性能表現。

15.Babel你用過嗎，怎麼使用的？

Babel是一個普遍使用的ES6轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。這意味着，你能夠用ES6的方式編寫程序，又不用擔憂現有環境是否支持。

16. 使用Webpack有什麼優點？

支持commonJS和AMD模塊，能夠使模塊加載器靈活定製。

使用babel-loader加載器，該加載器能使咱們使用ES6的語法來編寫代碼。

能夠經過配置打包成多個文件，有效的利用瀏覽器的緩存功能提高性能

使用模塊加載器，能夠支持sass，less等處理器進行打包且支持靜態資源樣式及圖片進行打包

Vue

1、vue介紹

漸進式JavaScript框架

Vue是是一款MVVM模式的前端js框架，其最大的特色是基於.vue單文件的組件化開發，使一個複雜的頁面能夠拆分爲多個獨立的，可複用的組件。另外還擁有雙向數據綁定，事件系統，計算屬性(computed)，狀態過分，自定義指令，過濾器等功能。

組件：組件（Component）是 Vue.js 最強大的功能。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 is 特性擴展。組件中幾個重要的屬性：

data:組件自身的數據，除根組件以外，必須是一個函數。

template:組件模板，能夠是字符串，也能夠是模板所在標籤的#id，若是使用.vue文件設計組件則能夠沒有temlpate屬性；

props:從父組件傳值接受的數據，只能讀取，不該修改。

computed:使用data或props計算出來的屬性，其計算的結果會被緩存，只有函數中使用的變量變化時纔會再調用。

methods:組件的方法(函數)

mounted:組件被渲染以後的鉤子函數（被添加到俯視圖上時）。

created:被建立時的鉤子函數。

activated:組件變爲活躍狀態時的鉤子函數。

mixin:混入選項。

條件渲染：v-if ，v-show，能夠實現切換某個組件或元素的顯示與隱藏。v-for，用於渲染一個列表，經常使用於數組的渲染。

單向數據流：vue中數據的傳遞只能是自上而下的，父組件傳遞給子組件，子組件經過事件發射$emit來實現與父組件的通訊，非父子組件之間的消息傳遞能夠經過空Vue對象做爲事件bus總線，更爲複雜的狀況能夠經過vuex。

Slot插槽：父組件給子組件傳值還能夠經過標籤內容傳遞，而slot插槽則是標記html內容分別應該放在子組件模板中的什麼位置。

Vue雙向數據綁定原理：vue對象在實例化時，會將data對象中的全部屬性都經過Object.defineProperty方法以set，get方法的形式添加給vue實例，而後在屬性的set方法中添加了監視函數，每當修改data屬性時，set方法就會調用，從而調用監視函數，監視函數會修改頁面中綁定這個數據的部分。

單文件組件：使用vue-cli建立項目時，能夠使用.vue文件建立單文件組件，能夠將一個組件寫在一個vue文件中，而後在其餘文件中導入就能夠使用。這樣大大提升的代碼的結構性。

Webpack：一個功能強大的打包工具，vue使用webpack進行打包，經過vue-loader將vue文件打包成瀏覽器能夠識別的js文件。

Vux：一個功能齊全的vue組件庫，其中實現了輪播圖，列表，選項卡，tabBar等移動頁面經常使用的功能。相似的組件庫還有不少，例如mintUI，vonic等。

Vue開發經驗

用vue進行項目編寫開發咱們要注意如下事項

1.要考慮頁面上哪些部分能夠封裝成公共組件

2.數據層次是怎樣進行劃分的（由於vue是數據驅動視圖的，因此組件劃分也是要依據數據進行劃分），最好先作好數據設計，再進行組件和頁面的開發

3.是否須要使用UI框架？現階段的vue的UI框架說白了都是一些組件庫（達不到框架統攝整個應用的級別）

4.多使用es6的寫法，尤爲是import導入和export導出功能，那樣的寫法很輕鬆(推薦閱讀阮一峯的ECMAScript6入門)

5.要注意項目的文件組織，組件可放置在components文件夾下，頁面可放置在pages文件夾下，路由配置可放置在router文件夾下，vuex配置可放置在vuex文件夾下，全局過濾器可放置在新建的filters文件夾下，總體項目會一目瞭然

對vue的見解

如今前端的發展趨勢，新型的三大框架(React，Vue，Angular2)都是使用的組件化構建思想，對於三者來說，vue偏輕量，更靈活一點。學習難度也比其餘兩個低，不像React和Angular2那麼激進，vue社區最近也很活躍。

Vuex狀態管理

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理庫。它採用集中式存儲管理應用的全部組件的狀態（也就是整個應用的數據被Vuex統一集中管理，而不在分散到組件當中），並以相應的規則保證狀態以一種可預測的方式發生變化（只能經過Vuex指定的方式<store.commit(‘mutation’)>更新數據）。說白了在應用中承擔着數據處理中心的職責。

推薦組件間通訊比較複雜的時候使用Vuex。使用狀態管理設計應用的模式常被成爲狀態管理模式。在React開發中也比較常見。每一個vuex應用都包含一個惟一的store實例，包含如下幾部分

1.state 組件的狀態(數據)，是store的核心部分

2.mutation 提交mutation是更改store中的state的惟一方式，只能是同步的

3.getter 獲取state狀態數據，能夠對數據進行加工

4.action 用於封裝業務邏輯，尤爲是ajax等異步操做，在action中經過提交mutation來更改state。action與mutation的區別是:action主要是實現業務邏輯 mutation主要是用來更改state

5.module 能夠將store分割爲更小的塊，每一個塊擁有本身的state、mutation、action、getter。當state較大時適合使用module進行拆分

組件(頁面)中的數據來自於state，頁面上的操做最終致使action被派發(dispatch)，action內部實現了業務邏輯(尤爲是ajax等異步操做)，而且提交了mutation，致使狀態(state)被更改，state的更改會通知vue從新渲染頁面

Vue知識

Vue瞭解

漸進式JavaScript 框架

3、Vue 模板與對象綁定

模板

<span>{{message}}</span>

</div>

var app = new Vue({ // 建立一個vue實例

el: "#app", // 經過el綁定模板

data:{ // data寫數據

message:"Hello Vue!"

}

});

4、模板語法(大部分是指令)

1. {{}} 插入值

2. v-bind 指令綁定值

3. v-on 指令綁定事件

4. v-if 判斷條件

5. v-for 循環

6. v-once 只綁定一次

7. v-html 插入html

8. v-model 雙項數據綁定

5、vue實例的選項

1. data:{ //保存數據的對象

message:"Hello Vue!"

}

2. methods{ //保存方法的對象

change: function() {

this.seen = !this.seen;

}

3. filters:{ //保存過濾器的對象

capitalize: function(text) {}

}

4. conputed:{ //計算屬性對象這個值都是get回來，計算屬性會緩存內容，相同的值只計算一次

birthYear: function() {

var year = new Date().getFullYear();

return year - this.age;

}

6、指令

1. 指令（Directives）是帶有 v- 前綴的特殊屬性。

(1). if指令

<div v-if="seen">能不能看到我？</div>

(2). 帶參數：一些指令能接受一個「參數」，在指令後以冒號指明。

(3). 帶有修飾符：修飾符（Modifiers）是以半角句號 . 指明的特殊後綴，用於指出一個指定應該以特殊方式綁定

<a href="https://www.google.com" v-on:click.prevent="go">google</a>

7、過慮器 Filters

1. 定義過慮器

filters: { // 過慮器對象裏面能夠放不少的過慮器

capitalize: function(text) {

if (! text) {

return "";

}

text = text.toString();

var result = text.charAt(0).toUpperCase() + text.slice(1);

return result

}

2. 使用過慮器

8、縮寫

1. v-bind 縮寫成 :

2. v-on 縮寫成 @

8、計算屬性

computed:{

birthYear: function() { // 只有get沒有set

var year = new Date().getFullYear();

return year - this.age;

time: {

cache: false,

get: function() {

return new Date();

}

birthY: {

get: function() {

var year = new Date().getFullYear();

return year - this.age;

set: function(newValue) {

var year = new Date().getFullYear();

this.age = year - newValue;

}

9、Class 與 Style 綁定

1. class 樣式類

(1). 對象寫法

<div class="one" :class="classObject">對象方法綁定 class</div>

<div class="one" :class="{green:bTrue,red:bFalse}">對象方法綁定 class</div>

// 在data裏面

classObject: {

// 鍵名是class值，鍵值真顯示class 假不顯示

"green": true,

"red": false

bTrue:false,

bFalse:true,

(2). 數組寫法

<div class="one" :class="classArr">數組方法綁定 class</div>

//在data裏面

classArr:["red","green"],

2. style 內聯樣式

(1). 對象寫法

<div :style="styleObject">對象方法綁定內聯樣式</div>

styleObject:{

color:"red",

fontSize:"30px"

}

(2). 數組寫法

<div :style="[styleObject,styleObject2]">對象方法綁定內聯樣式</div>

styleObject:{

color:"red",

fontSize:"30px"

}

styleObject2:{

lineHeight:"60px",

fontWeight:"800"

}

1、什麼是組件

組件（Component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 is 特性擴展。

目的：組件能夠擴展 HTML 元素，封裝可重用的代碼

2、使用組件

1. 註冊全局組件

2. 註冊局部

3. dom模板解析說明

4. data必須是函數

5.構成組件

組件意味着協同工做，一般父子組件會是這樣的關係：組件 A 在它的模版中使用了組件 B 。它們之間必然須要相互通訊：父組件要給子組件傳遞數據，子組件須要將它內部發生的事情告知給父組件。然而，在一個良好定義的接口中儘量將父子組件解耦是很重要的。這保證了每一個組件能夠在相對隔離的環境中書寫和理解，也大幅提升了組件的可維護性和可重用性。

在 Vue.js 中，父子組件的關係能夠總結爲 props down, events up 。父組件經過 props 向下傳遞數據給子組件，子組件經過 events 給父組件發送消息。看看它們是怎麼工做的。

3、Prop

1. 使用 Prop 傳遞數據

2. camelCase vs. kebab-case

3. 動態 Prop

4. 字面量語法 vs 動態語法

5. 單向數據流

6. Prop 驗證

4、自定義事件

一、子組件向父組件傳遞數據的方式 --- 自定義事件；子組件觸發事件，父組件監聽事件

<my-div @myclick="say"></my-div> //監聽自定義事件

this.$emit('myclick','hello vue!') // $emit：觸發一個事件

二、非父子組建之間的傳值：藉助一個空的Vue實例做爲中央事件總線

bus.$on('change',function(value){ // $on() 監聽事件

console.log(value)

}.bind(this));//這裏的this指向bus,要改變this的指向

bus.$emit('change','hello vue!'); // 觸發事件

5、使用 Slot 分發內容

1. 編譯做用域

2. 單個 Slot

3. 具名 Slot

4. 做用域插槽

6、動態組件

多個組件能夠使用同一個掛載點，而後動態地在它們之間切換。使用保留的 <component> 元素，動態地綁定到它的 is

keep-alive

若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個 keep-alive 指令參數：

7、雜項

1. 編寫可複用組件 props, events 和 slots

組件索引

儘管有 props 和 events ，可是有時仍然須要在 JavaScript 中直接訪問子組件。爲此能夠使用 ref 爲子組件指定一個索引 ID

var parent = new Vue({ el: '#app'})；

var child = parent.$refs.profile // 訪問子組件

3. 組件命名約定

當註冊組件（或者 props）時，能夠使用 kebab-case ，camelCase ，或 TitleCase 。Vue 不關心這個。在 HTML 模版中，請使用 kebab-case 形式：

進階

1、過分效果（基礎）

transition 過分動畫

animation 關鍵幀動畫

transform 變幻

translate() 平移

scale() 縮放

rotate() 旋轉

skew() 斜切

matrix(a,b,c,d,e,f) 矩陣

2、通常產生過渡效果的幾種狀況

v-if

v-show

初始化渲染頁面

動態組件（組件之間的切換）

3、css過渡

會有 4 個(CSS)類名在 enter/leave 的過渡中切換

v-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

v-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在 transition/animation 完成以後移除。

v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

v-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成以後移除。

注意：v-enter-active 要寫在前面

4、css動畫

v-enter-active:

v-leave-active:

5、自定義過渡類名

使用外部動畫庫

6、javascript鉤子和動畫

動畫相關事件函數

7、初始渲染動畫

注意：初始渲染動畫最好不要和css過渡動畫一塊，會產生衝突

8、過渡模式

一個動畫結束，別一個動畫纔開始

in-out: 新元素先進行過渡，完成以後當前元素過渡離開。

out-in: 當前元素先進行過渡，完成以後新元素過渡進入。

TypeScript

1. TypeScript是什麼

TypeScript:是JavaScript的超集，須要編譯成js使用，它讓JavaScript支持強類型

在強類型的編程語言中，變量的類型從聲明時就肯定了，而且不能再發生變化，若是賦值爲其它非兼容類型則直接致使編譯出錯（例如age變量類型聲明爲Number則賦值爲String時就會報錯，而這種狀況在js中是不會報錯的）。強類型能夠使開發工具（IDE）更容易經過代碼提供的類型信息發現代碼中的錯誤，也能在編程時給程序員更好代碼提示，還有利使用工具對代碼進行準確地重構。強類型語言的開發工具一般都作得特別好，智能化程度較高，大型項目的開發效率也更高。TypeScript包含了ES6和ES7的語法，它是JavaScript「未來版」。它不能直接運行，須要先編譯成普通JavaScript才能在瀏覽器中運行。它是開源的。它來自於微軟。

2. 使用TypeScript的好處?

一、強類型，有更高的可預測性，更易糾錯（即開發工具更加智能）。

二、編譯爲JavaScript的過程當中，能夠檢查出不少普通JS難以發現的錯誤。

三、增長了模塊，命名空間和強大的面向對象編程支持，構建大型複雜應用程序更加容易。

四、Angular 2 框架就是用 TypeScript 編寫的，而且官方推薦開發人員也使用它。

五、React中也能夠使用TypeScript編寫代碼

3. TypeScript的基本數據類型

number（數值類型）：全部數字都是數值類型的，不管是整數、浮點型

string（字符串類型）：能夠使用單引號或雙引號

boolean（布爾類型）：true 或者 false，用 0 和 1 會形成編譯錯誤。

any（任意類型）：該類型的變量能夠設定爲任何類型，但應儘量少地使用它，優先考慮使用範型。

array（數組類型）：有兩種語法：my_arr: number[];或者my_arr: Array

void （空類型）：用在不返回任何值的函數中。

全部變量類型列表請參考http://www.typescriptlang.org/docs/handbook/basic-types.html

四、 Interfaces 接口

注意此接口是編程語言級的，不是開發應用時常說調用服務端接口的那個接口。

編程語言級的接口一般是一種面向對象程序設計上的考慮，爲的是強制某些類實現一組方法或屬性等成員。TypeScript不支持多重繼承，但一個類能夠實現多個接口。

接口中聲明的方法屬性等對象必須實現，方法和屬性順序並不重要，方法或屬性的個數不夠，類型不一致，名稱拼寫錯誤等狀況發生時編譯器都會報警告信息。

五、類

TypeScript 給前端開發者提供了一個強類型的編程語言，終於能夠像Java、C#同樣利用更強大的IDE來構建大型前端應用程序了。TypeScript 建立類時使用class關鍵字

六、泛型

在強類型的編程語言中由於強類型的限制也存在一種尷尬：就是同一份代碼（算法）即便有通用性也會由於參數類型限制而不能被其它類型重用。如compare(a:number， b:number):bool這個函數只能傳數字類型，而不能傳字符串等其它類型。若是使用any類型則強類型的優點又不復存在！

爲了解決這個問題，比較先進的強類型編程語言都支持泛型這一功能（如Java、.NET等）。

泛型（Generics）是在代碼中添加類型符號，編譯代碼時會根據當時須要的類型編譯出一份針對這種類型的代碼，而遇到另外一種類型時再編譯出另外一份代碼。所以泛型能夠理解爲代碼的模版。泛型的代碼實際上會編譯成多份代碼（Java、.NET）。但由於TypeScript編譯出的是JS，而JS是弱類型的，所以TypeScript的泛型並不會生成多份代碼，而只會生成一份弱類型的JS代碼，泛型起到的是類型檢查和強制的做用。

function identity<T>(arg: T): T {

return arg;

}

var output = identity<string>('myString');

var output2 = identity<number>(100);

七、模塊

模塊在其自身的做用域裏執行，而不是在全局做用域裏。這意味着定義在一個模塊裏的變量，函數，類等等在模塊外部是不可見的，除非你明確地使用export形式之一導出它們。相反，若是想使用其它模塊導出的變量，函數，類，接口等的時候，你必需要導入它們。

兩個模塊之間的關係是經過在文件級別上使用imports和exports創建的。

模塊使用模塊加載器去導入其它的模塊。在運行時，模塊加載器的做用是在執行此模塊代碼前去查找並執行這個模塊的全部依賴。你們最熟知的JavaScript模塊加載器是服務於Node.js的 CommonJS和服務於Web應用的Require.js。

能夠經過import 和 require 關鍵字在另外一個模塊中導入其餘模塊。

八、裝飾器

裝飾器（Decorators）可讓咱們給類、方法等增長一些額外的信息。這些信息在Java、.NET中一般被稱爲元數據。裝飾器是一種特殊類型的聲明，它可以被附加到類聲明，方法，訪問符，屬性或參數上。裝飾器使用 @expression這種形式，expression求值後必須爲一個函數，它會在運行時被調用。

@sealed

class Greeter {}

Angular2中大量使用了裝飾器。

Angular2

Angular2是對Angular1一次顛覆，能夠開發跨平臺的漸近式Web應用，引入H5的新特性Web Worker和服務端渲染來改善了性能，它配合TypeScript語法來編寫嚴格的代碼，號稱一套框架多種平臺，同時適用手機與桌面，正在飛速發展中， Angular4也已經正式發佈，它和Angular2保持了較好的兼容性。

Angular2 應用是由組件組成的。組件由 HTML 模板和組件類組成，組件類控制視圖。組件負責控制屏幕上的一小塊區域，咱們稱之爲視圖。

Angular2還能夠與Ionic2一塊兒配合使用。

Angular2主要有8塊內容:

1,模塊(module)：Angular遵循模塊化開發，一個Angular應用至少有一個模塊（根模塊），根模塊在一些小型應用中多是惟一的模塊，大多數應用會有不少特性模塊，每一個模塊都是一個內聚的代碼塊專一於某個應用領域、工做流或緊密相關的功能。模塊中經過declarations聲明模塊中包含的組件、指令、冠道，經過import導入其所依賴的其餘模塊，經過providers注入其所依賴的服務。

2,組件(component)：組件負責控制屏幕上的一小塊區域，對於複雜龐大的頁面，能夠經過組件將其拆分爲多個組件，從而開發時能夠專一於某個組件，最後將多個組件合成一個頁面，在類中定義組件的應用邏輯，爲視圖提供支持。組件經過一些由屬性和方法組成的 API 與視圖交互。

3，模板(template)：模板是組件的視圖部分。咱們經過組件的自帶的模板來定義組件視圖。模板以 HTML 形式存在，告訴 Angular 如何渲染組件。模板中能夠使用指令、組件、管道。

4，元數據(metadata)：在angular2中，模塊、組件、管道、指令都是一個類，而對於這個類的屬性（例如組件的selector,templateUrl）則經過@Component裝飾器添加到類中，這些元數據能夠理解爲類的靜態屬性，裝飾器只是添加這些靜態屬性的語法糖。

5，數據綁定(databind)，和其餘前端框架同樣，數據綁定（雙向綁定）是整個框架中最爲實用的功能，在雙向綁定中，數據屬性值經過屬性綁定從組件流到輸入框。用戶的修改經過事件綁定流回組件，把屬性值設置爲最新的值。和angular1不一樣，ng2再也不實用$digist驅動髒檢查，提升了數據綁定效率。

6，指令(directive)：指令做爲屬性或class或自定義標籤添加在元素上，當 Angular 渲染它們時，它會根據指令提供的操做對 DOM 進行各類操做。組件實質上就是帶模板的指令。Angular2中也提倡組件化開發，而指令是組件工做的核心。

7，服務(service)：對於業務邏輯代碼，或者常量，angular提倡單獨存放（不像vue同樣寫在組件中），這樣能夠提升代碼重用性，在須要使用這些服務的組件中導入這些服務。

8，依賴注入(dependency injection)：依賴注入和服務共同解決了angular中代碼依賴問題。Angular將應用中全部的服務集中在注入器中，爲組件、過濾器等自動注入所依賴的服務，它下降了業務邏輯代碼和UI代碼之間的耦合度，提升了代碼的重用性，

AngularJs1.x與Angular2的主要區別

對比項	AngularJs 1.x	Angular 2/4
名字	AngularJs	Angular，去掉了JS
編程語言	JavaScript，能夠直接在瀏覽器中運行代碼	TypeScript，不能直接在瀏覽器中運行代碼，必須通過編譯，因此必須使用構建工具
平臺	只針對Web平臺，能很是好地支持桌面Web和手機Web。	除了支持Web平臺，還能支持桌面和手機的原平生臺。Angular2/4的宣傳口號是「一個框架，多個平臺」。例如Angular是應用框架，而React專一於視圖層，因而Angular+ReactNative就使得Angular可以以原生界面的方式運行於手機上，並且官方對於這一構想也提供了一個開源的實現（在Github上）。值得注意的是Angular說的是一個框架多個平臺，而不是一套代碼、多個平臺。在針對不一樣平臺進行開發時，UI層的代碼是不一樣的，最多隻能共用業務層和底層代碼。也正是由於Angular的這種跨平臺的目標決定了在Angular高級開發中（好比寫自定義指令甚至構建UI框架時）直接進行DOM修改是比較困難的，由於官方也不建議這麼作。
做用域Scope	做用域鏈（至關於視圖模型）	無
髒值檢查	$digest機制，屢次檢查整個做用域鏈	採用與VueJs相似的機制，取消主動髒值檢查
控制器Controller	很是重要，用於封裝視圖控制邏輯甚至業務邏輯	無，組件化開發
指令	指令數量較多；指令與組件區別較少	指令數量較少，但指令更強大了；指令與組件區別明顯，指令使用符號，如ngFor、*ngIf
組件	經過組件定義對象CDO進行組件定義；組件比較雞肋，大多數狀況下都在使用指令	經過裝飾器元數據和組件類進行定義，組件呈現和控制頁面上的一塊區域；大量、直接使用組件構建應用頁面
模板	HTML而後編譯成DOM	能夠支持多種視圖Render，如與Vue或React結合都是能夠的。即便HTML也不是直接編譯成DOM的，而是虛擬DOM的方式。
過濾器	Filter	名字改成Pipe，增長asyc、slice、percent去掉filter、limit、orderby，Angular2認爲篩選/分頁/排序屬於視圖控制邏輯/業務邏輯
綁定	經過大量指令和模板插值實現，單向綁定雙向綁定區別不明顯	大量使用括號， () 從視圖到數據方向，指事件 [] 從數據到視圖方向 [()] 雙向綁定 {{}}，模板插值嚴格區分2種單向綁定，區分單向綁定和雙向綁定
父子組件/指令傳值	做用域鏈繼承廣播/發射事件屬性傳值服務共享	訂閱事件屬性傳值服務共享
服務	按照Angular規定好的方式定義服務，服務屬於模塊級，定義時自動註冊到模塊中	普通類，須要在模塊或組件級別的providers元數據中聲明
模塊	在應用層面明確地區分爲根模塊和特性模塊（能夠理解爲普通模塊），模塊內部包括組件、指令、服務（包括服務類、值、函數）	通常這樣區分：官方模塊、第三方模塊、自定義模塊。模塊包含的東西比較多，比較容易混淆
路由	內置的路由機制不支持嵌套，一般複雜點的頁面就要使用第三方路由ui-router	支持平級多路由，支持基於組件的多級嵌套路由，支持路由守衛
元數據	受限於JavaScript語言而無明顯的元數據概念	有明確的基於裝飾器的元數據概念
組件生命週期	沒有明確的生命週期機制	有明確的通過精心設計生命週期，如： OnInit OnDoCheck AfterContentInit AfterContentChecked AfterViewInit AfterViewChecked OnChanges OnDestroy
啓動	能夠經過ng-app自動啓動或代碼啓動	沒有ng-app指令通常經過代碼啓動根模塊的方式啓動
事件對象	在代碼中隨意使用事件對象	不建議在組件代碼中使用事件對象，而推薦使用模版變量獲取想要的值而後僅將值傳到組件內部
事件過濾	無	提供了相似VueJs的機制
依賴注入	基於名字（字符串）的注入	基於類（要利用強類型機制）的注入
提供者	規範定義的可配置的提供者機制，比較複雜	簡化爲工廠函數+簡單的提供者定義對象
命名規範	零散的規定	完整的規範

總體來看，Angular2比AngularJs1.x簡單且功能強大，但由於Angular使用TypeScript致使純前端的開發工程師不容易上手；再加上Angular2與AngularJs1.x差別較大，AngularJs1.x的理念有時反而成爲學習Angular2的障礙。

使用Angular2的緣由

1．但願使用TypeScript語言提升開發效率。TypeScript提供了比JavaScript更強大的面向對象編程能力，並且由於TypeScript是強類型的因此開發工具能夠提供更強大的錯誤檢查機制、代碼重構機制，開發體驗更好，效率更高。

2． Angular2簡單，表明將來，更有生命力。

瞭解各類Web服務器及服務端技術

Java系：以Java EE（最先叫J2EE）中的Servlet（Web核心）、JSP（呈現HTML）、EJB（加強並規範Java語言面向對象特性）等爲核心Web服務端開發技術，隨後產生了不少相關技術和框架如：Structs（MVC）、Spring（解除耦合）、Hibernate（對象和關係型數據庫的映射）等（Structs、Spring、Hibernate也常簡稱爲SSH）。

PHP系：以PHP爲核心的Web服務端開發技術，由於PHP語言及開發方式比較雜亂，所以產生了不少框架，如：Laravel、Symfony二、Nette、CodeIgniter、Yii、PHPixie、Zend Framework等，還有國產框架Think PHP。

.NET系：微軟公司的Web服務端開發技術。使用C#、VB.NET等編程語言和.NET Framework，分爲兩大系列，早期的ASP.NET Web Form（組件化、事件驅動、與Windows應用程序的開發方式類似）、和後來的ASP.NET MVC。另外ASP是微軟在.NET以前的Web開發技術，與JSP同樣古老。

其它：Node.js、Python、Ruby等

Web前端的理解：

影響用戶訪問的最大部分是前端的頁面。網站的劃分通常爲二：前端和後臺。咱們能夠理解成後臺是用來實現網站的功能的，好比：實現用戶註冊，用戶可以爲文章發表評論等等。而前端呢？其實應該是屬於功能的表現。 WEB前端開發主要是使用HTML、CSS、JavaScript技術前端就是網站的門面

其它

01. 大家以前是怎麼估計項目的開發時間的？估計的誤差大嗎？

一般會有必定的誤差，不少時候項目延期，是客戶需求變化致使的，首先wbs項目分解，而後使用delphi估值法

02. 你以前的公司都有哪些部門？都分別負責什麼事？

測試技術部開發部產品研發部前端開發組運維部售後部行政部（考勤，請假，會議）財務部

Execl記錄bug 殘道（bug管理系統）

03. 你以前工做的城市有什麼好吃的？有什麼好玩的地方？

04. 我去過你以前工做的城市，有一個xxx地方，你去過嗎？

05. 你怎麼與你的領導相處？何時向他彙報工做？