总结一下
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
- 首先去 layer 独立版本官网下载组件包。
下载完成后解压，将
layer.js和layer.css拷贝到我们的项目中引入资源
开始使用
1.1.2、使用模块化🔥
引入资源
在 script 中使用 layui.use() 加载模块
- 依赖模块：layer
1.2、基础参数
1.2.1、type 基本层类型
- 类型 Number ， 默认为0
- layer 提供了5 种层类型。可传入的值有
- 0 ➡ 信息框，默认
- 1 ➡ 页面层
- 2 ➡ iframe层
- 3 ➡ 加载层
- 4 ➡ tips层
- 若采用
layer.open({type:1})方式调用，则 type 为必填项(信息框除外)
1.2.2、title标题
- 类型：String/Array/Boolean，默认 ‘信息’
- title 支持三种类型的值
- 若传入的是普通的字符串，如：
title:'我是标题'，那么只会改变标题文本； - 若需要自定义标题区域样式，
title:['文本','font-size: 18px']，数组第二项可以写任意css 样式 - 若不想显示标题栏，
title: false
1.2.3、area宽高
- 类型： String/Array，默认为
auto - 在默认状态下，layer是宽高都自适应的
- 但当你只想定义宽度时，你可以
area: '500px'，高度仍然是自适应的 - 当你宽高都要定义时，你可以
area: ['500px', '300px']
1.2.4、btn按钮
- 类型：String/Array，默认 ‘确认’
- 信息框(type = 0)模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。
- 当您只想自定义一个按钮时，你可以
btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no'] - 当然，你也可以定义更多按钮，比如：
btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推
1.2.5、time自动关闭所需毫秒
- 类型：Number，默认为0
- 默认不会关闭。当你想关闭时，可以
time:5000，即代表 5 s 后自动关闭
1.2.6、content内容
- 类型：String/DOM/Array，默认 : " "
- content 可传入的值是灵活多变的，不仅可以传入普通的 html 内容，还可以指定DOM，更可以随着 type 的不同而不同
- 页面层 ,就是信息提示
- iframe 弹出来的是页面,例如百度页面
- tips 就是一个信息提示小框
内容1
内容2
内容3
内容4
1.2.7、icon图标
- 类型：Number，默认：-1(信息框) / 0(加载层)
- 信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入_0-6_
- 如果是加载层，可以传入_0-2_
我们的信息框还可以参与互动响应,会有多个选项可选：
1.3、核心方法
1.3.1、layer.open(options)
- 原始核心方法
- 创建任何类型的弹层都会返回一个当前层索引，上述的 options 即是基础参数
1.3.2、layer.alert()
- 普通信息框
1.3.3、layer.msg()
- 提示框
- 默认是 3s 关闭
1.3.4、layer.load()
- 加载层
- 加载层默认是不会自动关闭的
2、日期与时间选择
===========================================================================
日期与时间选择官方文档：https://www.layui.com/doc/modules/laydate.html
和 layer 一样，你可以在 layui 中使用 layDate，也可直接使用 layDate 独立版
| 场景 | 用前准备 | 调用方式 |
| — | — | — |
| 1. 在 layui 模块中使用 | 下载 layui 后，引入_layui.css_和_layui.js_即可 | 通过*layui.use(‘laydate’, callback)*加载模块后，再调用方法 |
| 2. 作为独立组件使用 | 去 layDate 独立版本官网下载组件包，引入 laydate.js 即可 | 直接调用方法使用 |
我们使用模块化使用
引入资源
在 script 中使用 layui.use() 加载模块
- 依赖模块：laydate
2.1、基础参数
2.1.0、基础参数选项
- 通过核心方法：laydate.render(options) 来设置基础参数，
2.1.1、elem绑定元素
- 类型：String/DOM ，默认值：无
- 必填项，用于执行绑定日期渲染的元素，值一般为选择器，或DOM对象
2.1.2、type控件选择类型
- 类型：String ，默认值：date
- 用于单独提供不同的选择器类型，可选值如下表
| type可选值 | 名称 | 用途 |
| — | — | — |
| year | 年选择器 | 只提供年列表选择 |
| month | 年月选择器 | 只提供年、月选择 |
| date | 日期选择器 | 可选择：年、月、日。type默认值，一般可不填 |
| time | 时间选择器 | 只提供时、分、秒选择 |
| datetime | 日期时间选择器 | 可选择：年、月、日、时、分、秒 |
2.1.3、format自定义格式
- 类型：String，默认值：yyyy-MM-dd
- 通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
| 格式符 | 说明 |
| — | — |
| yyyy | 年份，至少四位数。如果不足四位，则前面补零 |
| y | 年份，不限制位数，即不管年份多少位，前面均不补零 |
| MM | 月份，至少两位数。如果不足两位，则前面补零。 |
| M | 月份，允许一位数。 |
| dd | 日期，至少两位数。如果不足两位，则前面补零。 |
| d | 日期，允许一位数。 |
| HH | 小时，至少两位数。如果不足两位，则前面补零。 |
| H | 小时，允许一位数。 |
| mm | 分钟，至少两位数。如果不足两位，则前面补零。 |
| m | 分钟，允许一位数。 |
| ss | 秒数，至少两位数。如果不足两位，则前面补零。 |
| s | 秒数，允许一位数。 |
通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示
| 格式 | 示例值 |
| — | — |
| yyyy-MM-dd HH:mm:ss | 2017-08-18 20:08:08 |
| yyyy年MM月dd日 HH时mm分ss秒 | 2017年08月18日 20时08分08秒 |
| yyyyMMdd | 20170818 |
| dd/MM/yyyy | 18/08/2017 |
| yyyy年M月 | 2017年8月 |
| M月d日 | 8月18日 |
| 北京时间：HH点mm分 | 北京时间：20点08分 |
| yyyy年的M月某天晚上，大概H点 | 2017年的8月某天晚上，大概20点 |
2.1.4、value初始值
- 类型：String，默认值：new Date()
- 支持传入符合format参数设定的日期格式字符，或者 new Date()
2.1.5、lang语言
- 类型：String，默认：cn
- 内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。
2.1.6、theme主题
- 类型：String ，默认值：default
- 内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、*#颜色值（自定义颜色背景）、grid*（格子主题）
2.1.7、calendar公历节日
- 类型：Boolean，默认值：false
- 内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示
3、分页
======================================================================
- 分页官方文档：https://www.layui.com/doc/modules/laypage.html
- 模块加载名称：
laypage - laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染
3.1、基础参数
3.1.1、基础参数选项
- 通过核心方法：laypage.render(options) 来设置基础参数
3.1.2、elem绑定元素
- 类型：String/Object，比填项
- elem 指向存放分页的容器，值可以是 容器 ID、DOM对象
elem: 'id'注意：这里不能加#号elem: document.getElementById('id')
3.1.3、count数据总数
- 类型：Number，必填项
- 数据总数，一般通过服务端得到
count: 100
3.1.4、limit每页显示条数
- 类型：Number，默认值 10
- laypage将会借助 count 和 limit 计算出分页数。
3.1.5、layout自定义排版
- 类型：Array，默认值：[‘prev’, ‘page’, ‘next’]
- 自定义排版，可选值有：
- count ：总条目输出区域
- limit：条目选项区域
- prev：上一页区域
- page：分页区域
- next：下一页区域
- refresh：页面刷新区域(layui 2.3.0新增)
- skip：快捷跳页区域
3.1.6、limits每页条数的选择项
- 类型：Array，默认值：[10,20,30,40,50]
- 如果 layout 参数开启了 limit，则会出现每页条数的select下拉选择框
3.1.7、groups连续出现的页码个数
- 类型：Number，默认值为5
- 连续出现的页面个数，就是分页区域省略号…之前显示的页面个数
3.2、jump切换分页的回调
- 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
4、数据表格
========================================================================
- 支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
- 模块加载名称：
table
引入资源
在页面放置一个元素，然后通过
table.render()方法指定该容器
注意：上面有一个数据接口 url，通常是从服务器获取。我们这里先本地模拟一些json数据传入
{
“code”: 0,
“msg”: “”,
“count”: 50,
“data”: [{
“id”: 10000,
“username”: “user-0”,
“sex”: “女”,
“city”: “城市-0”,
“sign”: “签名-0”
},
{
“id”: 10001,
“username”: “user-1”,
“sex”: “男”,
“city”: “城市-1”,
“sign”: “签名-1”
},
{
“id”: 10002,
“username”: “user-2”,
“sex”: “女”,
“city”: “城市-2”,
“sign”: “签名-2”
},
{
“id”: 10003,
“username”: “user-3”,
“sex”: “女”,
“city”: “城市-3”,
“sign”: “签名-3”
},
{
“id”: 10004,
“username”: “user-4”,
“sex”: “男”,
“city”: “城市-4”,
“sign”: “签名-4”
}
]
}
4.1、三种初始化渲染方式
| | 方式 | 机制 | 适用场景 |
| — | — | — | — |
| 01. | 方法渲染 | 用JS方法的配置完成渲染 | （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。 |
| 02. | 自动渲染 | HTML配置，自动渲染 | 无需写过多 JS，可专注于 HTML 表头部分 |
| 03. | 转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 |
4.1.1、方法渲染🔥
4.1.2、自动渲染
- 所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需写初始的渲染方法。我们需要关注的是以下三点
- 带有
class="layui-table"的<table>标签 - 对标签设置属性
lay-data=" "用于配置一些基础参数 - 在
<th>标签中设置属性lay-data=" "用于配置表头信息。
ID 用户名 性别 城市 签名 积分 评分 职业 财富
4.2、基础参数
结束
一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
版权归原作者 2401_84434331 所有， 如有侵权，请联系我们删除。