layui工具函数util：常用工具方法的集合
项目地址: https://gitcode.com/GitHub_Trending/la/layui 还在为Web开发中的日期处理、HTML转义、事件绑定等常见需求而烦恼吗？layui的util模块提供了一套完整、易用的工具函数集合，让你的开发效率提升数倍！
通过本文，你将掌握：
- ✅ util模块的核心功能和使用方法
- ✅ 日期时间处理的完整解决方案
- ✅ HTML安全转义与还原的最佳实践
- ✅ 批量事件绑定的高效技巧
- ✅ 实际项目中的代码示例和应用场景
什么是layui util模块？
layui util模块是一个功能丰富的工具类集合，专门为解决Web开发中的常见需求而设计。它包含了日期处理、字符串操作、事件管理等多个实用功能，能够显著提升开发效率。
快速开始
首先引入layui并加载util模块：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui util示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.9.8/dist/css/layui.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/layui@2.9.8/dist/layui.js"></script>
<script>
layui.use('util', function(){
var util = layui.util;
// 你的代码在这里
});
</script>
</body>
</html>
核心功能详解
1. 日期时间处理
倒计时功能 (util.countdown)
// 创建倒计时实例
var countdown = util.countdown({
date: '2025-12-31 23:59:59', // 目标时间
now: new Date(), // 当前时间
clock: function(result, inst) {
// 每秒触发一次
console.log('剩余时间:', result.d + '天' + result.h + '时' + result.m + '分' + result.s + '秒');
},
done: function() {
console.log('倒计时结束!');
}
});
// 控制方法
countdown.clear(); // 清除倒计时
countdown.reload(); // 重新开始
时间相对显示 (util.timeAgo)
// 显示相对时间
var time1 = util.timeAgo(new Date(2024, 11, 31)); // "1 天前"
var time2 = util.timeAgo(new Date(2023, 0, 1)); // "2023-01-01"
var time3 = util.timeAgo(new Date(), true); // 只显示日期，不显示时间
日期格式化 (util.toDateString)
// 基本格式化
util.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss'); // "2024-01-15 14:30:25"
// 自定义格式
util.toDateString(new Date(), 'yyyy年MM月dd日 HH时mm分ss秒'); // "2024年01月15日 14时30分25秒"
// 12小时制带时段
util.toDateString(new Date(), 'hh:mm:ss A'); // "02:30:25 下午"
// 毫秒显示
util.toDateString(new Date(), 'HH:mm:ss.SSS'); // "14:30:25.123"
数字补零 (util.digit)
util.digit(5, 2); // "05"
util.digit(12, 3); // "012"
util.digit(123, 2); // "123" (超过长度不补零)
2. HTML安全处理
转义与还原
// HTML转义
var escaped = util.escape('<script>alert("XSS")</script>');
// 输出: <script>alert("XSS")</script>
// HTML还原
var unescaped = util.unescape('<div>Hello</div>');
// 输出: <div>Hello</div>
3. 窗口操作
打开新窗口 (util.openWin)
// 打开URL
util.openWin({
url: 'https://example.com',
target: '_blank'
});
// 打开自定义内容
util.openWin({
content: '<h1>自定义窗口</h1><p>这是自定义内容</p>',
specs: 'width=600,height=400'
});
4. 批量事件处理 (util.on)
// 基本用法
util.on({
'btn-save': function(othis, e) {
console.log('保存按钮被点击');
},
'btn-delete': function() {
console.log('删除按钮被点击');
},
'btn-edit': function() {
console.log('编辑按钮被点击');
}
});
// HTML对应
<button class="layui-btn" lay-on="btn-save">保存</button>
<button class="layui-btn" lay-on="btn-delete">删除</button>
<button class="layui-btn" lay-on="btn-edit">编辑</button>
高级事件配置
// 自定义属性名和触发方式
util.on('data-action', {
'item-hover': function(othis, e) {
layer.tips('鼠标悬停提示', this);
},
'item-click': function() {
console.log('项目被点击');
}
}, {
trigger: 'mouseenter', // 鼠标移入触发
elem: '#container' // 指定委托元素
});
实用场景示例
场景1：电商网站倒计时
// 商品限时抢购倒计时
var flashSaleCountdown = util.countdown({
date: '2024-12-25 23:59:59',
now: new Date(),
clock: function(result) {
$('#countdown').html(
'剩余: ' + result.d + '天' +
result.h + '时' + result.m + '分' + result.s + '秒'
);
},
done: function() {
$('#countdown').html('活动已结束');
$('#buy-btn').addClass('layui-btn-disabled');
}
});
场景2：社交平台时间显示
// 动态显示相对时间
function updateTimeAgo() {
$('.post-time').each(function() {
var timestamp = $(this).data('timestamp');
$(this).text(util.timeAgo(timestamp));
});
}
// 每分钟更新一次
setInterval(updateTimeAgo, 60000);
场景3：安全评论系统
// 评论提交处理
$('#comment-form').on('submit', function(e) {
e.preventDefault();
var content = $('#comment-content').val();
var safeContent = util.escape(content); // 防止XSS攻击
// 发送到服务器
$.post('/api/comment', { content: safeContent }, function() {
$('#comment-content').val('');
});
});
功能对比表
| 功能 | util方法 | 原生实现 | 优势 |
|---|---|---|---|
| 日期格式化 | util.toDateString() | Intl.DateTimeFormat | 更简洁的API，支持中文时段 |
| 倒计时 | util.countdown() | setInterval手动实现 | 完整的生命周期管理 |
| HTML转义 | util.escape() | 手动替换 | 更全面的转义规则 |
| 批量事件 | util.on() | 逐个绑定 | 代码更简洁，易于维护 |
最佳实践建议
1. 日期处理优化
// 缓存日期格式化结果，避免重复计算
var formattedDate = util.toDateString(new Date(), 'yyyy-MM-dd');
$('.date-display').text(formattedDate);
// 只在需要时更新
setInterval(function() {
$('.current-time').text(util.toDateString(new Date(), 'HH:mm:ss'));
}, 1000);
2. 事件委托性能
// 使用具体容器而不是body进行事件委托
util.on({
'action-save': function() { /* ... */ },
'action-delete': function() { /* ... */ }
}, {
elem: '#action-buttons' // 指定具体容器
});
3. 错误处理
// 安全的日期格式化
function safeDateString(time, format) {
try {
return util.toDateString(time, format);
} catch (e) {
console.warn('日期格式化失败:', e.message);
return '无效日期';
}
}
常见问题解答
Q: util.countdown 的计时精度如何？
A: util.countdown 使用 setTimeout 实现，精度约为毫秒级，适合大多数业务场景。
Q: 如何处理时区问题？
A: util.toDateString 会自动处理本地时区，确保显示时间与用户所在地一致。
Q: util.on 支持事件委托吗？
A: 支持！util.on 默认使用事件委托机制，性能更好且支持动态添加的元素。
Q: HTML转义是否完全安全？
A: util.escape 提供了全面的HTML特殊字符转义，能有效防止XSS攻击。
总结
layui的util模块是一个功能强大且易用的工具集合，特别适合：
- 🚀 需要快速实现日期时间相关功能
- 🔒 要求HTML内容安全处理的场景
- ⚡ 希望简化事件绑定代码的项目
- 🎯 追求开发效率和代码质量的前端开发者
通过合理运用util模块的各种方法，你不仅能够提升开发效率，还能写出更加健壮和安全的代码。立即尝试将这些工具函数应用到你的项目中，体验layui带来的开发便利吧！
提示：本文示例基于layui 2.9.x版本，建议使用最新版本以获得最佳体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
