layui框架的优点和缺点是什么-猿码集

1. 介绍

LayUI 是一个简单易用的前端UI框架，根据 jQuery 的语法进行开发，基于HTML、CSS、JavaScript技术构建，具有丰富的界面组件和常用的JavaScript工具。本文将会介绍 LayUI 框架的优缺点。

2. 优点

2.1 轻量级

LayUI 框架是一款轻量级的前端UI框架，未经压缩的源代码只有 100k 左右，压缩后只有数十 kb 的体积。相比其他大牌UI框架，LayUI 的体积更小巧、更轻便，使得网页的加载速度更快，用户体验更佳。

// LayUI 框架源代码例子
<!DOCTYPE html>
<html>
<head>
  <title>LayUI source code</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <script>
  layui.use('element', function(){
    var element = layui.element;
  });
  </script>
</body>
</html>

2.2 界面组件齐全

LayUI 框架内置了非常多的常用页面组件，例如表格、表单、分页、下拉框等等。这些组件使用方便、代码简洁明了，而且支持 DOM 绑定和事件监听，方便进行二次开发。在LayUI 官网上，还提供了海量的免费 UI 组件供用户下载使用。

// DOM 绑定和事件监听代码例子
<!DOCTYPE html>
<html>
<head>
  <title>DOM bind and event listen example</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <div class="layui-form">
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" checked>
      </div>
    </div>
  </div>
  <script>
  layui.use(['form'], function(){
    var form = layui.form;
    form.on('switch', function(data){
      console.log(data.elem.checked); // 开关是否开启，true 或者 false
      console.log(data.value); // 开关value值，也可以通过data.elem.value得到
      console.log(data.othis); // 得到美化后的DOM对象
    });  
  });
  </script>
</body>
</html>

2.3 实时拖拽

LayUI 框架提供了一个强大的拖拽组件 —— Resizible，可以实现实时拖拽操作。该组件不需要任何代码即可实现实时拖放，完全按照拖动手势任意改变元素大小和位置。

// Resizible 代码例子
<!DOCTYPE html>
<html>
<head>
  <title>Resizible code example</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  *请在 Chrome 浏览器下查看。
  <div class="layui-resize" id="testdiv"></div>
  <script>
  layui.use(['resizabled'], function(){
    var $ = layui.jquery;
    var resizabled = layui.resizabled;
    resizabled.config({
      container: "#testdiv"
    });
    // 针对 element 元素样式问题
    $("#testdiv").css({
      display: "block",
      position: "absolute",
      zIndex: 999
    });
  });
  </script>
</body>
</html>

3. 缺点

3.1 文档不够完善

相较于国外知名 UI 框架，LayUI 的文档存在一些欠缺和疏漏，特别是一些国内开发者新手使用不是很方便。虽然官网上提供了快速入门、设计器等文档，但是仍然存在不够完善的问题，需要使用者花费更多时间来了解使用。

// 快速入门代码例子
<!DOCTYPE html>
<html>
<head>
  <title>Quick start example</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <div class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">单行输入框</label>
      <div class="layui-input-inline">
        <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
  </div>
  <script>
  layui.use(['form'], function(){
    var form = layui.form;
  });  
  </script>
</body>
</html>

3.2 自定义扩展难度高

LayUI 框架虽然内置了很多组件，但却存在着一定的局限性。有些特定的需求可能需要自定义扩展，而自定义扩展又不够简单，需要掌握不少前端技术才行。如果这方面自身技术帮助有限，或者想达到高度扩展性，那么 LayUI 框架显然有些局限性了。

// 自定义扩展代码例子
// 先下载好 jQuery UI 的组件
<!DOCTYPE html>
<html>
<head>
  <title>Custom append example</title>
  <link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
  <script src="layui/layui.js"></script>
  <script src="jquery-ui/jquery-ui.min.js"></script>
</head>
<body>
  <div class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">选择日期</label>
      <div class="layui-input-inline">
        <input type="text" name="test-limit" lay-verify="date" placeholder="YYYY-MM-DD" autocomplete="off" id="datepicker">
      </div>
      <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
  </div>
  <script>
  layui.use(['form'], function(){
    var form = layui.form;
    // 利用 jQuery UI 日历控件实现日期选择
    $( "#datepicker" ).datepicker({
      inline: true
    });
  });  
  </script>
</body>
</html>

3.3 不适合大型单体 Web 应用

尽管 LayUI 框架不错，但它并不适合于大型单体 Web 应用。如果你需要构建一个大型网站或 Web 应用程序，建议使用更适合的框架，如 React、Angular、Vue 等，这些框架提供的功能更加强大、适应性更强、扩展性更好。

4. 总结

LayUI 框架是一款非常适合小型 Web 应用的框架，它有着轻量级、界面组件齐全、实时拖拽等多种优点是其他同类框架所没有的。同时，它也存在着文档不够完善、自定义扩展难度高、不适合大型单体 Web 应用等弊端。总的来说，如果你的项目需要一个简单易用的前端框架，那么 LayUI 是不二之选。

layui框架的优点和缺点是什么