前端面试总结

最新推荐文章于 2025-09-10 11:40:22 发布

weixin_34148508

最新推荐文章于 2025-09-10 11:40:22 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签：面试前端 java ViewUI

原文链接：https://juejin.im/post/5b8e7255e51d4559a81ef957

js原生

BOM和DOM的区别
window有哪些方法
事件委托原理
rem和px的转换
处理缓存
AMD-CMD-Require
跨域有哪些实现方法（jsonp,代理,nginx）？自己封装跨域（node自己封装）
请求方法都有哪些？
restfulAPI
iframe
字符串模板拼接方法(es6)

vue

vuex
vue生命周期
vue双向绑定
路由问题
项目中分页点击进入详情保存当前数据用子路由去实现

1、BoM 和 DOM 区别

（1）BOM

BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

screen对象
location对象
window对象的常用方法等

（2）DOM对象模型

DOM：文档对象模型（Document Object Model）
DOM当网页被加载时，浏览器会创建页面的文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

【DOM树节点】

DOM节点分为三大类：元素节点，文本节点，属性节点：文本节点，属性节点为元素节点的两个子节点；通过getElment系列方法，可以去到元素节点；

【查看节点】

1.getElementById：通过id获取唯一的节点；多个同名ID只会取到第一个； 2.etElementByName：通过name取到一个数组，包含1到多个节点；使用方式：通过循环取到每个节点，循环次数，从0开始<数组.length

[查看设置属性节点]

1.查看属性节点：getAttribute("属性名") 2.设置属性节点：setAttribute("属性名""属性值")*/

2、window对象

Window 对象属性

例如

closed 返回窗口是否已被关闭。
document 对 Document 对象的只读引用。(请参阅对象)
frames 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 - Window 对象在窗口中含有一个框架。
history 对 History 对象的只读引用。请参数 History 对象。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
name 设置或返回窗口的名称。
navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
parent 返回父窗口。
screen 对 Screen 对象的只读引用。请参数 Screen 对象。

Window 对象方法

例如

alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
scroll()
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

3、事件委托原理

事件委托就是（事件委托就是利用的DOM事件的事件捕获阶段）利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件（将事件加在父元素或者祖先元素上，触发该事件）。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

4、Rem 和 px

rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。
不同的是em是相对于元素的父元素的font-size进行计算；
rem是相对于根元素html的font-size进行计算。
这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能
假设就使用浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：

| px | rem | 
| 12 | 12/16 = .75 
需要在根元素<html>中定义，为了方便计算，时常将在<html>元素中设置font-size值为62.5%
html { font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */ }
复制代码

5、iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
复制代码

6、restfulAPI

REST是一种架构风格：无状态，以资源为中心，充分利用HTTP协议和URI协议，提供统一的接口定义，使得它作为一种设计Web服务的方法而变得流行。在某种意义上，通过强调URI和HTTP等早期Internet标准，REST是对大型应用程序服务器时代之前的Web方式的回归。

架构约束：
客户-服务器:通信只能由客户端单方面发起，表现为请求-响应的形式。无状态:通信的会话状态（Session State）应该全部由客户端负责维护。缓存:响应内容可以在通信链的某处被缓存，以改善网络效率。统一接口:通信链的组件之间通过统一的接口相互通信，以提高交互的可见性。分层系统:通过限制组件的行为（即，每个组件只能"看到"与其交互的紧邻层），将架构分解为若干等级的层。按需代码:支持通过下载并执行一些代码（例如Java Applet、Flash或JavaScript），对客户端的功能进行扩展。

主要特征：