layui的介绍
layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！ layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身
layui是一款采用自身模块规范编写的前端 UI 框架，它遵循原生的 HTML/CSS/JS 书写方式。它虽然外在极简，但是内容丰富，里面包含众多组件从核心代码到 API 都非常适合界面的快速开发。事实上layui更多是面向于后端开发者，而且它还拥有自己的模式。更加轻量和简单
layui的优点与缺点
优点有以下几方面：
（1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
（2）layui是提供给后端开发人员最好的ui框架，基于DOM驱动，只要不涉及到交互layui还是很不错的
缺点如下：
（1）layui出现较迟，想必其他前端框架来说还是不太成熟。现在已更新到2.X版本了
（2）在实现前端交互上比较麻烦，因为页面的增删改查都需要查询DOM元素
layui的使用方法：
layui官网
https://www.layui.com/ 进入官网下载所需要的文件
下载完后我们将其解压拿出，然后将其放入到要引用的文件夹下面
关于layui的具体操作有很多，大家可以参考layui详细介绍和具体实例 下面我们通过一个案例来初步了解layui
案例：通过layui框架实现轮播图效果
（1）外部引入layui文件
<link rel="stylesheet" type="text/css" href=".\layui-v2.4.5\layui\css\layui.css">
<script src=.\layui-v2.4.5\layui\layui.js></script>（2）轮播图代码：
<div carousel-item>
<div style="background-color:pink;">图1</div>
<div style="background-color:lightblue">图2</div>
<div style="background-color:blue">图3</div>
<div style="background-color:mediumorchid">图4</div>
<div style="background-color:orange">图5</div>
</div>
</div>
<script src=.\layui-v2.4.5\layui\layui.js></script>
<script>
layui.use('carousel', function () {
var carousel = layui.carousel;
var ins=carousel.render({
elem: '#test1'
, width: '450px' //设置容器宽度
, arrow: 'always' //始终显示箭头，可选hover,none
//,anim: 'updown' //切换动画方式，可选fade,default
, full: false //全屏
, autoplay: true //自动切换
, interval: 1000 //自动切换的时间间隔
, index: 3 //初始化时item索引,默认时0
, indicator:'inside' //指示器位置，可选outside,none
});
//监听轮播切换事件
carousel.on('change(carofilter)', function (obj) { //test1来源于对应HTML容器的
lay-filter="test1" 属性值
console.log(obj.index); //当前条目的索引
console.log(obj.prevIndex); //上一个条目的索引
console.log(obj.item); //当前条目的元素对象
});
//重置轮播
ins.reload({arrow:'hover'});//将arror从alway变成hover
});
</script>
效果图：
使用layui的注意事项：
1.layui的基本使用，下面的在他下面写，其他的事件也要在这个里面写 行内onclick事件是监听不到写在下面这种代码中的函数方法，layui有单独的监听方法。
layui.use(['jquery', 'form', 'layedit', 'laydate', 'laypage', 'element'], function () {
var $ = layui.jquery,
element = layui.element,
form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate,
laypage = layui.laypage;
})2.layui使用过程中要注意代码执行的顺序，执行的顺序会导致有时候回显不上去的情况。
3.layui表单类，select要用form.render(‘select’) 其他的一定要用form.render() 来刷新列表，否则会出现显示不出来的情况
4.layui的input类型为date类型，如果后台传过来的数据不是2018-09-10的这种类型，是回显不上去的。解决方法有两种：第一种是后台处理数据格式，第二种是前端接受过来数据做格式化处理。 下面的指定元素一定要唯一
//执行一个laydate实例
laydate.render({
elem: '#birth'//指定元素
})对比
我们来给它进行一个形象的比较：
如下所示：
easyui=jquery+html4（用来做后台的管理界面） 半老徐娘
bootstrap=jquery+html5 美女 拜金
layui 清纯少女
layui和bootstrap 对比
这两个都属于UI渲染框架
1.layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看
2.bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过
适用范围不一样
1.layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。
2.适合做后台框架
3.layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的
4.bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。
5.适合做网站
6.如果是类似官网，且需要同时满足PC端和移动端效果，bootstrap 表现很好，但是如果是要交互的网站，比如商城之类，layui显然更好，前后端分离
大小不一样
1.layui 轻量级
2.bootsrap 因为成熟，所以使用方便，但是同时也是因为成熟，就显得有些冗余
layui和easyui对比
1.easyui 是非开源的，有需要解决的问题的话，就只能等官方更新了
2.layui是开源的，社区比较活跃，解决问题还是比较快的
3.easyui诞生的早些，所以功能相对完善一些，很多功能都能是比较健全的
4.layui就相对来说少一些了，不过，功能都是像官网说的，精雕细琢
5.layui更符合现在的审美
谢谢大家，多多指教！
