2024年最新前端LayUI框架快速上手详解(二)，斗鱼c++面试

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

1. 首先去 layer 独立版本官网下载组件包。

2. 下载完成后解压，将 layer.js 和 layer.css 拷贝到我们的项目中

3. 引入资源

4. 开始使用

1.1.2、使用模块化🔥

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 即可 | 直接调用方法使用 |

我们使用模块化使用

1. 引入资源

2. 在 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

1. 引入资源

2. 在页面放置一个元素，然后通过 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文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】