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更符合现在的审美
谢谢大家,多多指教!