这是一个非常好的问题！
将模拟数据和表格初始化逻辑封装成**独立函数并拆分到单独的 JS 文件中**，是前端工程化的重要一步。这样做可以让代码更清晰、可维护性更强。
---
## ✅ 一、目标
把以下内容从主页面 JS 中移出：
- 模拟数据（`mockData`）
- 表格渲染函数（`systemLogListRefresh`）
- 搜索刷新函数（`reloadLogList`）
→ 封装为一个模块，放在 `logTable.js` 或类似文件中
---
## ✅ 二、目录结构建议
```
/html
├── index.html
├── js/
│ ├── home.js # 主业务逻辑
│ └── logTable.js # 封装表格 + 模拟数据（我们要写的）
├── layui/
└── ...
```
---
## ✅ 三、步骤 1：创建 `js/logTable.js`（封装模块）
```js
// js/logTable.js
// 定义一个模块对象，避免全局污染
var LogTableModule = (function () {
var table = layui.table;
var $ = layui.$;
// 模拟数据（可以后期替换为 API 请求）
var mockData = {
code: 200,
data: {
count: 5,
list: [
{ id: 1, cID: 'admin', mac: 'AA:BB:CC:DD:EE:FF', sn: 'SN001', time: 1712345678, createDate: '2024-04-05' },
{ id: 2, cID: 'testuser', mac: '11:22:33:44:55:66', sn: 'SN002', time: 1712345679, createDate: '2024-04-06' },
{ id: 3, cID: 'zhangsan', mac: 'A1:B2:C3:D4:E5:F6', sn: 'SN003', time: 1712345680, createDate: '2024-04-07' },
{ id: 4, cID: 'lisi', mac: 'F1:E2:D3:C4:B5:A6', sn: 'SN004', time: 1712345681, createDate: '2024-04-08' },
{ id: 5, cID: 'dev001', mac: '00:11:22:33:44:55', sn: 'SN005', time: 1712345682, createDate: '2024-04-09' }
]
}
};
// 初始化表格
function initTable() {
table.render({
elem: '#logListTable',
id: 'loglist',
data: mockData.data.list,
height: 'full-35',
cellMinWidth: 90,
page: true,
limits: [10, 30, 50],
cols: [[
{ type: 'checkbox', fixed: 'left' },
{ type: 'numbers', title: '序号', width: 60, sort: true },
{ field: 'id', align: 'center', title: 'ID', width: 60, sort: true },
{ field: 'cID', align: 'center', title: '用户名', width: 120, sort: true },
{ field: 'createDate', align: 'center', title: '创建时间', width: 200, sort: true },
{ field: 'mac', align: 'center', title: 'MAC地址', width: 200, sort: true },
{ field: 'sn', align: 'center', title: '设备SN', width: 200, sort: true },
{ field: 'time', align: 'center', title: 'time', width: 220, sort: true },
{ fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#toolDemo' }
]]
});
}
// 带搜索条件的刷新
function reloadLogList() {
var cID = $('#Input-field-query').val();
var filteredData = mockData.data.list.filter(function (item) {
return item.cID.includes(cID) ||
item.mac.includes(cID) ||
item.sn.includes(cID);
});
table.reload('loglist', {
data: filteredData,
page: { curr: 1 }
});
}
// 暴露公共方法
return {
initTable: initTable,
reloadLogList: reloadLogList
};
})();
```
> ✅ 使用了 IIFE（立即执行函数）防止变量泄露
> ✅ 只暴露必要的函数给外部使用
---
## ✅ 四、步骤 2：在 HTML 中引入这个 JS 文件
确保顺序正确：
```html
<!-- 引入 Layui -->
<script src="./layui/layui.js"></script>
<!-- 引入你封装的模块 -->
<script src="./js/logTable.js"></script>
<!-- 主逻辑文件 -->
<script src="./js/home.js"></script>
```
---
## ✅ 五、步骤 3：在 `home.js` 中调用封装好的函数
```js
// js/home.js
layui.use(['table', 'jquery'], function () {
var table = layui.table;
var $ = layui.$;
// 初始化表格（来自 logTable.js）
LogTableModule.initTable();
// 绑定工具栏事件
table.on('toolbar(logListTable)', function (obj) {
if (obj.event === 'query') {
LogTableModule.reloadLogList(); // 调用封装的搜索
}
});
// 回车触发搜索
$(document).on('keypress', '#Input-field-query', function (e) {
if (e.which === 13) {
LogTableModule.reloadLogList();
}
});
});
```
---
## ✅ 六、优势总结
| 优点 | 说明 |
|------|------|
| ✅ 结构清晰 | 数据、逻辑、UI 分离 |
| ✅ 易于维护 | 修改模拟数据只需改 `logTable.js` |
| ✅ 方便替换 | 后续换成真实接口时，只需改 `url` 和 `where` |
| ✅ 支持复用 | 多个页面可用同一个模块 |
---
## ✅ 七、进阶建议（未来优化方向）
1. **支持配置项传入**
```js
LogTableModule.initTable({ enableExport: true, pageSize: 30 });
```
2. **动态切换“模拟模式” or “真实接口模式”**
```js
const USE_MOCK = true;
if (USE_MOCK) {
table.render({ data: mockData.list });
} else {
table.render({ url: '/api/device/list' });
}
```
3. **使用 ES6 模块化（推荐长期项目）**
```js
// logTable.mjs
export function initTable() { ... }
export function reloadLogList() { ... }
```
然后用 `<script type="module">` 导入
---
Python全自动整理文件技巧
面对杂乱无章的文件，使用Python进行自动整理。通过文件读写、基础语法、字符串处理和循环遍历等技巧，实现高效分类。示例代码展示了如何实现这一功能。
最低0.47元/天 解锁文章
扫一扫
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
