layui的介绍以及它和easyui、bootstarp的对比

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更符合现在的审美

谢谢大家，多多指教！