layui学习心得

layui是一款深受开发者喜爱的前端UI框架，以下是我对学习layui的一些心得：

首先，我被layui的简洁设计所吸引。其设计理念是“简约而不简单”，这一点在API设计上体现得淋漓尽致。无论是组件的调用方式还是参数设置，都力求直观易懂，使得初学者也能快速上手，大大降低了学习门槛。

其次，layui提供的丰富组件是我深感便利之处。从基础的按钮、表格、表单，到复杂的导航、弹出层、提示信息等，几乎涵盖了网页开发中的所有常见需求。这些组件不仅功能强大，而且样式美观，极大地提升了页面的视觉效果和用户体验。

再者，layui的官方文档是我学习过程中的重要参考。文档详细记录了每个组件的使用方法、参数说明和示例代码，让我在遇到问题时能够迅速找到解决方案。这种详尽的文档支持无疑为学习和使用layui提供了极大的便利。

另外，layui的兼容性也给我留下了深刻印象。无论是在PC端还是移动端，无论是在哪种浏览器环境下，layui都能保持良好的展示效果，这无疑增强了我在项目开发中的信心。

此外，layui活跃的社区氛围也是我非常喜欢的一点。在社区中，我可以提问、分享经验、获取帮助，与广大开发者共同进步。这种互动交流的环境对于解决问题和提升技能都有着极大的帮助。

最后，我要提到的是layui的高度定制化特性。它提供了丰富的自定义选项，可以根据项目需求进行灵活调整，满足个性化需求。这对于追求创新和独特的开发者来说，无疑是一个巨大的优势。

总的来说，学习和使用layui不仅可以提高开发效率，提升页面美观度和用户体验，还能在互动交流和持续学习中不断提升自己的技术水平。然而，我们也需要注意合理使用组件，避免过度依赖框架，保持代码的可读性和可维护性。只有这样，我们才能真正发挥出layui的强大威力，创造出更多优秀的网页作品。

一、layui优点

是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，开箱即用。

第三方支持：
Layui部分模块依赖jQuery（比如layer），但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块，当你去使用 layer 之类的模块时，它会首先判断你的页面是否已经引入了jQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。

layui 的模块是基于 layui.js 内部实现的异步模块加载方式，它并不遵循于AMD，而是自己定义了一套更轻量的模块规范。

<link rel="stylesheet" href="./plugins/layui/css/layui.css"  type="text/css">   


<!-- 可加自己的jquery --> 

<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>	
<script type="text/javascript" src="./plugins/layui/layui.js"></script>

二、layui提供了页面的功能

layui提供了15中页面元素，其中包括了：布局、颜色、图标、动画、按钮、表单、导航、
菜单、选项卡、进度条、面板、表格、徽章、时间线、辅助等模块

栅格系统与后台布局
为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格布局规则：
1.采用 layui-row 来定义行，如：<div class="layui-row"></div>
2.采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。
3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

实例的代码：

<div class="layui-row">
  <div class="layui-col-xs3">
    <div class="grid-demo grid-demo-bg1">3/12</div>
  </div>
  <div class="layui-col-xs3">
    <div class="grid-demo">3/12</div>
  </div>
  <div class="layui-col-xs3">
    <div class="grid-demo grid-demo-bg1">3/12</div>
  </div>
  <div class="layui-col-xs3">
    <div class="grid-demo">3/12</div>
  </div>
</div>

layui提供了一些颜色，以下是实例：

layui提供了一些按钮：

<div class="layui-btn-container">
  <button type="button" class="layui-btn">默认按钮</button>
  <button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
  <button type="button" class="layui-btn layui-bg-orange">橙色按钮</button>
  <button type="button" class="layui-btn layui-bg-red">红色按钮</button>
  <button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
  <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>

layui图标：

以下是实例的代码：

<i class="layui-icon layui-icon-face-smile"></i> 
<div>
  你可以去定义它的颜色或者大小，如：  
  <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i> 
</div>

layui提供了一些动画：

以下是代码实例：

<script>
layui.use(function(){
  var $ = layui.$;
  var elem = $('#example-anim-element');
  var animName = 'layui-anim-down'; // 动画类名
  
  // 通过事件简单演示动画过程
  $('#example-anim-usage').on('click', function(){
    elem.removeClass(animName);
    setTimeout(function(){
      elem.addClass(animName); // 给目标元素追加「往下滑入」的动画
    }); 
  });
});
</script>

layui还提供了一些API和事件：

 

以下是API的实例：

API	描述
var form = layui.form	获得 form 模块。
form.render(type, filter)	#用法
form.verify(obj)	#用法
form.validate(elem)	#用法
form.val(filter, obj)	#用法
form.submit(filter, callback)	#用法
form.on('event(filter)', callback)	#用法
form.set(options)

还有属性，定义一些特定属性来配合组件的使用，它们一般以 lay-* 为命名格式，以下是实例：

<form class="layui-form" lay-filter="form-1">
  <input type="text" class="layui-input" lay-verify="email">
  <input type="checkbox" lay-skin="switch" lay-filter="agree" title="同意">
  <button class="layui-btn" lay-submit>提交</button>
</form>

属性实例：

属性	值	描述
title	自定义	设置表单元素标题，一般用于 checkbox,radio 元素
lay-filter	自定义	设置表单元素的过滤器，以便用于执行相关方法时的参数匹配
lay-verify	required必填项 phone手机号 email邮箱 url网址 number数字 date日期 identity身份证 自定义规则值	设置表单项的验证规则，支持单条或多条规则（多条用|分隔），如： lay-verify="required" lay-verify="required|email" lay-verify="其他自定义规则值" 自定义规则的用法：#详见 注：2.8.3 版本中调整了内置规则，不再强制必填。 如需保留必填，可叠加 required 规则，如： lay-verify="required|number"
lay-vertype	tips吸附层 alert 对话框 msg 默认	设置验证异常时的提示层模式
lay-reqtext	自定义	设置必填项（lay-verify="required"）的默认提示文本
lay-affix	#详见	输入框动态点缀，<input type="text">元素 私有属性
lay-skin	#详见	设置 UI 风格。 <input type="checkbox"> 元素 私有属性
lay-search	默认不区分大小写; 设置cs区分大小写	给 select 组件开启搜索功能。<select> 元素 私有属性
lay-submit	无需值	设置元素（一般为<button> 标签）触发 submit 提交事件
lay-ignore	无需值	设置表单元素忽略渲染，即让元素保留系统原始 UI 风格

渲染

form.render(type, filter);

• 参数 type 可选，对应表单组件类型，支持：input,select,checkbox,radio；若不填，则指向所有类型。
• 参数 filter 可选，对应 class="layui-form" 所在元素的 lay-filter 属性值，用于指定需渲染的表单区域。

等等功能。

总的来说，学习和使用layui是一次充实且有益的经历。其简洁的设计、丰富的组件、详尽的文档、良好的兼容性、活跃的社区以及高度的定制化特性，都为我提供了极大的便利和启发。 layui不仅提升了我的开发效率，优化了页面效果，也促进了我的技能提升和知识拓展。然而，我也认识到，尽管layui功能强大，但合理使用和保持代码的清晰、可读与可维护性同样重要。在未来的学习和工作中，我将持续关注layui的更新和发展，将其优点最大化地应用于实践，创造出更多优质的前端作品。