对于layui框架源码兼容性微调介绍-猿码集

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 框架，它简单、好用，性能也不错。但是在实际开发中，也存在着一些兼容性问题，需要我们加以修正。只有深入理解其中的特性花费更多的实践，才能长久地保持开发的效率和质量。

对于layui框架源码兼容性微调介绍