1. layui框架简介
layui是一款基于jquery的模块化前端UI框架，其特点是简洁明了、易于上手，同时具有很强的扩展性和自定义性。layui 中大量使用了自定义属性(data-*)和自定义事件，在实际应用中极为方便，可以大大提高前端开发效率。layui的开发者介绍说，layui价值不在于“新”而在于“好用”，用的人多才是硬道理。
1.1 layui的优点：
1. 体积小
// 官方文档给出的压缩版大小
// layui 2.6.8
layui.all.js 317KB
layui.all.min.js 106KB
layui.js 215KB
layui.min.js 68KB
// ZUI 1.9
zui.min.js 223KB //比layui的压缩版还大
2. 组件丰富
Layui有大量的组件可以使用，在应用中足够满足日常开发所需。例如，button、form、table 等基础UI组件，以及 tree、carousel 等高级组件，很多还可以使用配置项进行自定义。
3. 很容易上手
学习成本很低，多数组件都是通过HTML+CSS的形式，在需要时引入对应的js文件即可，同时文档详细易懂，示例代码比较多。
2. layui框架源码兼容性微调
Layui在实际使用中，有些细节会存在一些兼容性问题，需要进行一些微调，例如：
2.1 组件渲染出错时，无法调试
当一个组件渲染出错时，通常使用 browser console 可以非常方便诊断错误信息，但是layui默认是将错误信息压缩到一行代码中，这样就会使得调试非常困难。
解决方案：在 layui.js 文件头部加入以下代码：
layui.data('layui', {
key: 'is_debug',
value: true
});
这段代码的作用是在 localStorage 中添加一个 key 为 'is_debug' 的数据，并将它的值设置为 true，这样 layui就会在组件渲染失败时将失败信息打印到 console 中，至于为什么添加到 localStorage 而不是其他地方，是因为 layui 会在全局注入一个 data 方法，可以方便地读取 localStorage 数据。
2.2 iframe 嵌入的页面不能自适应高度
如果用 layui 的 iframe 嵌入一个页面，该页面的高度不能自适应调整，会固定在一个较小的高度。
解决方案：把父页面的 layui.js 文件引入代码片段改为以下方式：
layui.use(['form', 'layer', 'element', 'index'], function(){
var form = layui.form,
layer = layui.layer,
element = layui.element,
index = layui.index;
layer.ready(function(){
index.regIframe();
});
})
其中 index.regIframe() 的作用是监听 iframe 所在的父窗口 window resize 事件，使 iframe 的高度能够自适应调整。 但是，该方法只支持在 iframe 内部使用 layui 的页面，而不能在 layui 页面中嵌套第三方页面。
2.3 某些浏览器下 table 含有 radio 或 checkbox 的列，点击不了
在某些浏览器环境下，table 中含有 radio 或 checkbox 的列，双击单元格两次才能勾选，点击一次反而取消勾选。
解决方案：在 CSS 文件中添加如下样式：
tbody tr:hover {
cursor: pointer;
}
给 tbody 绑定鼠标 hover 事件，把光标样式改为手型 cursor: pointer; 就可以了。
2.4 字符串作为 ID 无法识别
layui 的一些组件（例如 Table）需要使用 DOM 元素的 ID 属性绑定事件，但是如果把一个字符串作为 ID 传递给 layui，就会报错。
解决方案：把该字符串生成一个唯一的 ID。
var id = 'my-table' + parseInt(Math.random()*10000); //生成随机数ID
table.render({
elem: '#'+ id, //指定元素
id: id, //给table设置一个随机id
})
把随机的 ID 绑定给 table 就可以解决该问题。
3. layui框架兼容性微调补充
3.1 layui 当中 batchDelete 删除功能与 jQuery 的冲突
layui 的 batchDelete 功能是一个删除的扩展方法，在使用 jQuery 的同时要使用 layui 带来的一些问题。
解决方案：删除 jQuery 的事件绑定，只保留 layui 的，修改一下源码。
layui.each(entitys, function (index, item) {
// **如果手动调用 trigger，如果不把之前 bind 的 jQuery 删除，会执行两次。
$("button[data-type='delete']").unbind('click').on("click", function () {
top.layer.confirm('确定要删除吗？', function (a) {
top.layer.close(a);
var loadIndex = top.layer.load(1);
// 发送删除 HTTP 请求
// Ajax delete request...
});
});
});
3.2 导航的跳转在部分火狐浏览器下显示不直观
跳转链接显示短暂的闪现，在部分火狐浏览器下表现的不直观，很容易导致误操作。
解决方案：阻止默认链接点击事件，客制化跳转。
$('.layui-nav li a').click(function(e){
e.preventDefault(); // 阻止链接跳转
var _this = $(this);
// 获取跳转链接
var url = _this.attr("href");
// 改成 ajax 请求对应的 html 页面
$.get(url,function(data){
$('.layui-body').html(data);
})
// 修改 layui-tab 导航样式
layui.use(['element'], function() {
var element = layui.element;
_this.parent('li').addClass('layui-this')
.siblings().removeClass('layui-this');
});
});
3.3 路由切换在多次事件绑定下会出现未知异常
通过路由来实现页面跳转时，如果多次绑定同一事件，会导致不可预测的问题。
解决方案：使用 off 解除路由事件绑定。
$(".router").off('click').on('click', function(e){
// 定义路由跳转链接
var url = $(this).attr('href');
// 异步获取网页内容
$.ajax({
url: url,
success: function (data) {
$(".app-content").html(data);
}
});
});
4. 总结
layui是一款不错的前端开发 UI 框架，它简单、好用，性能也不错。但是在实际开发中，也存在着一些兼容性问题，需要我们加以修正。只有深入理解其中的特性花费更多的实践，才能长久地保持开发的效率和质量。