前端考前复习阶段练习题（二）

前端考前复习阶段练习题（二）

练习题一见 前端考前复习阶段练习题（一）

目录

• 前端考前复习阶段练习题（二）
  • 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卷基本把这些问题都覆盖了