前端考前復習階段練習題（二）

練習題一見 前端考前復習階段練習題（一）

目錄

• 前端考前復習階段練習題（二）
  • 1. DOM提供了兩種方式來訪問HTML元素，請問是哪兩種？
  • 2. 主流瀏覽器通過網絡下載得到HTML文檔之后，大體上會執行4步操作，請問是哪4步？
  • 3. JavaScript腳本可以為DOM動態的增加節點，程序為DOM樹增加節點時，頁面會動態地增加HTML元素。當需要為頁面增加HTML元素時，應按哪兩個步驟進行操作？
  • 4. window對象提供了如下幾個方法，這些方法可以在 JavaScript腳本中直接使用，請回答下列方法alert()、confirm()、prompt()、focus()、blur()的作用是什么？
  • 5. window對象提供了如下幾個方法，這些方法可以在 JavaScript腳本中直接使用，請回答其中的moveBy()、moveTo()兩個方法的作用和區別是什么？
  • 6. window對象提供了如下幾個方法，這些方法可以在 JavaScript腳本中直接使用，請回答其中的resizeBy()、resizeTo()兩個方法的作用和區別是什么？
  • 7. 事件對象（Event）提供了一個eventPhase屬性，該屬性主要有如下3個值，請問是哪3個值，其含義分別是什么？
  • 8. document或其他元素可以通過 addEventListener方法注冊多個事件處理函數，當特定的事件發生時，瀏覽器必須按什么順序調用所有的事件處理程序？
  • 9. DOM模型標准的事件先后沿着兩個方向傳播，分為兩個階段，試說明一下具體的傳播過程。
  • 10. JavaScript所能使用的事件大致可分為哪幾類？
  • 11. 請回答單頁面應用程序的優點有哪些？
  • 12. Vue前端路由配置有固定的步驟，可以分為6個步驟，請問是哪6個步驟？
  • 13. 組件實例從創建到銷毀，中間會經歷幾個階段，Vue提供了一些生命周期鈎子。請回答updated、activated、mounted三個鈎子分別是在什么時候被調用的。
  • 14. 為什么Vue組件中的data必須是函數？
  • 15. 在Vue中，當混入對象和組件本身包含同名的選項時，這些選項將按一定的策略進行合並，請回答這些策略是什么？

---

1. DOM提供了兩種方式來訪問HTML元素，請問是哪兩種？

• 根據ID訪問HTML元素或根據CSS選擇器訪問HTML元素
• 利用節點關系訪問HTML元素

2. 主流瀏覽器通過網絡下載得到HTML文檔之后，大體上會執行4步操作，請問是哪4步？

1. 解析HTML文檔來構建DOM樹

2. 解析外部CSS文件及<style……>元素中的樣式信息，這些樣式信息將會作用於HTML元素用於構建Render樹

3. Render樹構建好之后，接下來會執行布局過程，也就是確定每個節點在屏幕上的確切坐標位置

4. 繪制Render樹

3. JavaScript腳本可以為DOM動態的增加節點，程序為DOM樹增加節點時，頁面會動態地增加HTML元素。當需要為頁面增加HTML元素時，應按哪兩個步驟進行操作？

1. 創建或復制節點

2. 添加節點

4. window對象提供了如下幾個方法，這些方法可以在 JavaScript腳本中直接使用，請回答下列方法alert()、confirm()、prompt()、focus()、blur()的作用是什么？

• alert()、confirm()、prompt()：分別用於彈出警告框、彈出確認對話框和彈出提示輸入對話框

• focus()、blur()：讓窗口獲得焦點和失去焦點

5. window對象提供了如下幾個方法，這些方法可以在 JavaScript腳本中直接使用，請回答其中的moveBy()、moveTo()兩個方法的作用和區別是什么？

moveBy()、moveTo()：移動窗口（moveBy() 方法可相對窗口的當前坐標把它移動指定的像素）

6. window對象提供了如下幾個方法，這些方法可以在 JavaScript腳本中直接使用，請回答其中的resizeBy()、resizeTo()兩個方法的作用和區別是什么？

resizeBy()、resizeTo()：重設窗口大小（這兩個方法都接受兩個參數，其中resizeTo()接受瀏覽器窗口新寬度和新高度，而resizeBy()接受新窗口與原窗口的寬度和高度之差）

7. 事件對象（Event）提供了一個eventPhase屬性，該屬性主要有如下3個值，請問是哪3個值，其含義分別是什么？

1. Event.CAPTURING_PHASE：表明該事件正處於捕獲階段，該事件正沿着父元素逐層向事件目標傳播

2. Event.AT_TARGET：表明該事件已到達事件目標

3. Event.BUBBLING_PHASE：表明該事件正處於冒泡階段，該事件正沿着事件目標逐層向父元素傳播

8. document或其他元素可以通過 addEventListener方法注冊多個事件處理函數，當特定的事件發生時，瀏覽器必須按什么順序調用所有的事件處理程序？

1. 通過HTML元素事件屬性或JavaScript對象事件屬性設置的事件處理程序一直優先調用

2. 使用addEventListener()方法注冊的事件處理程序將按它們的注冊順序調用

3. 對於IE8及更早版本的IE瀏覽器，使用attachEvent()方法注冊的事件處理程序可能按任何順序調用

9. DOM模型標准的事件先后沿着兩個方向傳播，分為兩個階段，試說明一下具體的傳播過程。

• 第一個階段，即事件捕獲階段，事件從最頂層的對象依次向下傳播，因此先觸發頂層對象的事件處理函數，然后依次向下，直到傳播到事件所發生的最底層對象
• 第二個階段，即事件冒泡階段，在這個階段，事件傳播從底層一直向上，直到最頂層的對象

整個DOM模型的事件傳播可以分成兩個階段：捕獲階段和冒泡階段。捕獲階段的事件觸發器總是比冒泡階段的觸發器先觸發。在事件捕獲階段，頂層對象的事件處理器先被觸發；而在事件冒泡階段，則是底層對象的事件觸發器先被觸發。

10. JavaScript所能使用的事件大致可分為哪幾類？

• 傳統事件：傳統事件是早期Web編程的遺產，也是普通開發者最熟悉的事件類型，如常見的 click事件、 window事件等。

• DOM3規范的事件：DOM3規范重新引入了一些新的事件類型（某些瀏覽器可能並不完全支持這些事件）。

• HTML5規范引入的新事件：比如歷史管理、拖放、跨文檔通信，以及視頻和音頻的播放。

• 基於移動觸屏設備的事件：由於IOS和 Android等設備的廣泛使用，引入了一些支持觸摸和手勢的事件。

11. 請回答單頁面應用程序的優點有哪些？

• 前后端分離

前端工作在瀏覽器端，后端工作在服務器端，使得前后端可以徹底地分離開發，並行工作，對開發人員的技能要求也會變得更加單一。單頁Web應用可以和 REST API規約一起使用，通過 REST API提供接口數據，並使用Ajax異步獲取，這樣有助於分離客戶端和服務器端工作。

• 良好的用戶體驗

用戶不需要重新刷新頁面，數據通過Ajax異步獲取，頁面顯示更加流暢。

• 減輕服務器壓力

服務器只需要提供數據就可以了，不用管展示邏輯和頁面合成，吞吐能力會大幅提高。

• 共用一套后端程序代碼

不用修改后端程序代碼就可以同時用於Web界面手機、平板等多種客戶端。

12. Vue前端路由配置有固定的步驟，可以分為6個步驟，請問是哪6個步驟？

1. 使用router-link組件設置導航鏈接

2. 指定組件在何處渲染

3. 定義路由組件

4. 定義路由

5. 創建VueRouter實例，將第4步定義的路由配置作為選項傳遞進去

6. 在Vue根實例中使用 router選項注入第5步創建的 router對象，從而讓整個應用程序具備路由功能

13. 組件實例從創建到銷毀，中間會經歷幾個階段，Vue提供了一些生命周期鈎子。請回答updated、activated、mounted三個鈎子分別是在什么時候被調用的。

• updated：在數據更改導致的虛擬DOM被重新渲染和修補后調用該鈎子
• activated：當keep-alive組件激活時調用
• mounted：在實例被掛載后調用，其中el被新創建的vm. $el替換

14. 為什么Vue組件中的data必須是函數？

這是因為組件是可復用的Vue實例，如果還是允許使用先前根實例的數據定義方式，那么所有復用的組件實例都將共享同一份數據，顯然這很容易導致混亂。采用函數定義方式，那么每個組件實例都將擁有自己的一份返回對象的獨立拷貝，每復用一次組件，data函數就執行一次，從而返回一個新的數據對象。

15. 在Vue中，當混入對象和組件本身包含同名的選項時，這些選項將按一定的策略進行合並，請回答這些策略是什么？

1. 數據對象進行遞歸合並，在發生沖突時以組件的數據優先

2. 同名的鈎子函數被合並到一個數組中，因此這些函數都會被調用。另外，混入對象的鈎子將在組件自身鈎子之前調用

3. 值為對象的選項，如 methods、components和 directives，將被合並為同一個對象。當這些對象中存在沖突的鍵名時，以組件的選項優先

4. Vue.extend也使用同樣的策略進行合並

后記：AB卷基本把這些問題都覆蓋了