前端外包测试题

笔试

简答题

1. 写出 5 个块元素和 5 个行内元素
2. 写出 3 个以上 CSS 的单位，2 个以上浏览器内核前缀
3. 一个有序列表，如何实现「奇数行」背景色为 #fefefe？
4. 写出所有 JS 的数据类型，以及 5 个 ES6+ 的新特性
5. if ([] == []) {console.log(1)} else {console.log(2)}; 的运行结果是什么?
6. 下列元素的实际宽度（左边框到右边框且含边框）是多少？

.item {
	box-sizing: border-box;
	width: 200px;
	padding: 0 10px;
	border: 1px solid #000;
}

7. 修改下面代码，使得该元素内部文字水平垂直居中

.wrap {
	width: 100px;
	height: 100px;
	lint-height: 22px;
	font-size: 14px;
}

8. 写出 5 个常见的 HTTP 状态码，并做简单说明

实践题

实现一个纯 UI 组件，要求：

1. 封装成 react 组件
2. 接收 title 参数，默认值为 「Demo」
3. 返回一个 h1 标签，文本内容为 title

实现一个无序列表组件，要求：

1. 封装成 react 组件，允许用 axios 等第三方库
2. 数据从 api/list/ids 和 api/list/map接口获取，返回数据格式如下：

// api/list/ids
["apple", "orange"]

// api/list/map
{
	apple: "An Apple",
	banana: "Bananana...",
	orange: "Orange juice",
	potato: "I'm not fruit"
}

3. 展示效果如下

1. an apple
2. orange juice

实现 A、B 两个组件，要求：

1. A、B 均为 react 组件，且 B 是 A 的子组件
2. A 中有一个「按钮」，点击弹出一个「Modal 对话框」
3. B 既是 Modal 组件，效果如下图，点击「确定」或「取消」关闭 Modal，内容自定义即可
4. 使用 antd 的 Button 和 Modal 组件
   

Antd 的 Form 组件如何实现「双向绑定」？写出关键点即可

写出完整的 git 命令流程：新建一个 test.txt 文件并推到远程仓库

实现下图的列表和表单

基本要求

1. 默认已经搭建好了工程，只实现完整的 jsx 或 vue 文件即可
2. 默认已经引入了 Antd、Element 等组件库
3. 默认已经引入了 axios、lodash、moment 等常用库
4. 不要求能运行，可适当接受伪代码，
5. 计时 60min，可使用搜索引擎，提交文件或代码截图

必须实现

1. 翻页、增/删/改数据后，刷新列表数据，并保持在当前页
2. 点击「编辑」展示表单弹窗，并且回显当前数据
3. 浏览器刷新页面后，保持刷新前的页码。即当前是第 2 页，刷新后还保持在第 2 页

可选实现

• 获取到数据之前展示 loading；获取到数据后，展示「暂无数据」或正常展示。注：不可以上来就展示「暂无数据」
• 表单「成功提交之后」才能关弹窗，数据提交期间禁止重复触发「提交事件」
• url 分享给其他人时，保证页码的同步。即自己分享时是第 2 页，别人打开看到的也是第 2 页
• 重要加分项：使用 React + Typescript + hooks 实现

接口说明

接口	URL	Method	Params	Response
获取列表数据	/getList	GET	pageNo: 页码，number，默认 1； pageSize：单页条数，number，默认 10；	{ list: [{ recordId: ‘1111’, date: ‘2020-02-02’, name: '张三’ address: ‘地址’ }], total: 100 }
提交修改	/update	POST	recordId: 数据 ID，string； name: 姓名，string； date: 日期，string； address: 地址，string；	{ success: true }
删除数据	/delete	POST	recordId: 数据 ID，string；	{ success: true }

面试

1. 浏览器渲染机制
2. 绝对定位注意事项，清除浮动
3. 什么是边界塌陷？如何解决？
4. 如何实现一个列表，只有第一个元素没有上边框？
5. 什么是 ES、DOM、BOM？
6. js 的 == 做了什么？
7. 了解函数式编程吗？
8. 说一下浏览器的缓存机制，以及如何利用
9. 什么是 XSS，CSRF 攻击？如何避免？
10. 说几个常用的库，lodash、moment、qs 等