Layui入门指南-开始使用

阅读须知:当前文档仅针对layui系列更新:2019-01-20 10:09:48 阅读量:14473 评论跟帖:0 文档整理编辑:Larry

此文档非layui官方文档,是由LarryMS的作者 larry,结合日常开发过程中对layui的使用经验总结,以及layui官方文档为蓝本所写的一系列快速开发文档;由于larryms的部分产品是完全基于layui所开发的,因此本文档可作为使用larryms系列产品的基础文档(如需查看layui官方正版文档请访问layui.com) ,layui是一款经典模块化前端UI框架,它遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。一经推出迅速获得众多开发者的青睐,区别于bootstrap这类略显臃肿的框架,layui非常适合作为PC端后台系统与前台界面的速成开发方案,其浏览器兼容性除了IE6/7外几乎全部支持了,特别时面向服务端程序员,大大简化了工作量,以最简单的方式去诠释高效!因此layui也成为了larryms社区特别推荐的前端基础UI,在larryms产品分支中有部分产品是完全基于layui所开发 【larryms.com】 ,为了方便用户更快捷的熟悉和上手layui,从本篇开始我们一起探讨layui的使用,让一切你所需要的layui正确使用姿势,从这里信手拈来。

温馨提示: 关于Layui的使用问题可直接在 larryms社区layui专区交流,本文档系列在后续会开启用户评论交流

可根据实际需要通过点击以下QQ群链接加入 layui技术交流群【均由larryms社区创建和维护】

交流群1:493153642(已满) 交流群2:779334991(3000人群-推荐) 交流群3:180558598(推荐对larryms产品感兴趣的用户添加) 

对于LarryMS的VIP用户直接加对应售后服务群即可,可以忽略此处推荐的QQ交流群

【LarryMS系列上手使用指南】文档教程入口地址:LarryMS(iframe)版vip文档 (点击进入阅读)

获得 layui

1、可通过layui官网获得layui最新稳定版下载,可直接用于生产环境的版本,下载地址:layui官方下载

2、通过git仓库下载layui源码,可以更方便的阅读layui源码和获得对其更深入的了解与二次开发,可在 github 与 码云 获得源码下载

3、通过 npm方式安装,如用于 WebPack 管理

npm install layui-src
快速上手

在下载layui后如何快速将其引入至项目中,layui是一款经典模块化前端ui,它的模块是基于 layui.js 内部实现的异步模块加载方式 ,与日常所熟知的AMD 规范有所区别,有一套完全属于layui定义的模块加载规范,通过预加载方式,这也是layui官方所推荐的方式,将下载到的源码引入项目只需要引入layui.css和layui.js两个文件,通过layui.use()方法完成需要使用的模块加载,如下示例所示:加载layui内置的jquery稳定版本和layer组件 【当我们在初次接触layui时,如果还没有耐心读完layui官方文档,我们可以先记住使用格式和使用规范,能正常用了再深入,不要纠结于细节而停步不前,我遇到过一些交流layui使用的用户,他还没看过文档就直接去读layui源码的,结果还是云里雾里,误以为直奔源码是最佳方式,一叶障目而不见泰山,两耳塞豆而不闻雷霆;个人观点:如果作为学习时又觉得撇开文档直接去读源码的方式适合自己 暂不做评论,但若是用于工作此种方式个人认为是最为笨拙的,因此官方文档对初学者是必读的,而不是直接上来就去看源码,本系列文档可作为larryms产品使用的前提基础,若是初次接触推荐阅读,若有瑕疵可在评论中给予斧正】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="layui/css/layui.css">
<!-- your css link -->
</head>
<body>
<!-- you html code -->
<script type="text/javascript" src="layui/layui.js"></script>
<script>
layui.use(['jquery','layer'],function(){
var $ = layui.$,
layer = layui.layer;
#your js coding
});
</script>
</body>
</html>

备注:预加载的方式无论从代码可维护度、阅读便利以及代码优雅美观方面是要强于按需加载避免随从可见的layui.use()造成混乱,曾遇到过对网站性能的极致苛求用户使用按需加载方式【不推荐使用按需加载方式】,按需加载如果对变量的作用域等关系处理不当也容易出现错误且不便于后期维护,当然在某些特定的情况下 可以配合layui.cache.xx全局变量使用按需加载也是相对较好的方式;但同时也不建议直接引入 layui.all.js一次性全加载(全加载方式似乎失去了layui模块化的意义); layui的模块组件通过预加载方式在larryms的产品中是比较常见的

目录结构
在了解了layui的引入方法之后,一起熟悉下layui的目录结构,从layui官方下载的压缩版或git得到的源码版目录结构是一致的,如下所示:
    ├─css //css目录
    │  │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
    │  │  ├─laydate
    │  │  ├─layer
    │  │  └─layim  
    │  └─layui.css //核心样式文件
    ├─font  //字体图标目录
    ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情) 
    │─lay //模块核心目录
    │  └─modules //各模块组件
    │─layui.js //基础核心库
    └─layui.all.js //包含layui.js和所有模块的合并文件

layui内置组件模块全部存放于layui/lay/目录下,同时layui也支持用户对内置组件之外的自定义组件扩展,此方面在larryms产品中有着非常明显的体现,大量第三方优秀javascript扩展库,提高开发效率,layui扩展组件的定义与方法在后面章节中会继续讲解,layui/css/目录存放着la'yui的基本css以及各类内置组件模块的样式文件和资源,正如开头所讲,在具体项目中的引入文件 只需要layui.css和layui.js,其余组件可通过layui.use方法模块化加载,以上内容是对layui的初步介绍。接下来我们从layui的模块定义逐步深入至上手:

layui全局配置

layui提供有layui.config(options)方法进行全局参数初始配置,虽然在大多数时候该方法并不是必须,但在larryms中一般会在html页面的入口处使用layui.config()方法进行一些个性化的全局配置,首先从layui官方文档我们可以清晰的知道,默认layui在全局配置中所提供的参数相对较少,具体参数如下:

layui.config({
dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视
,version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
,base: '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
});

通过阅读layui源码我们即可知道config的相关实现,Layui.prototype.cache = config; 通过layui.cache记录基础数据,而在layui.config(options)方法中 options所设置的参数值赋值给了config变量,即可通过 layui.cache.dir、layui.cache.base等获得对应值,因此我们可以很好的利用layui对象这一便利性做扩展,当需要全局变量时只需在layui.config()方法自定义参数,这些传入的初始参数值会挂载到layui.cache的属性中去,另外对于layui.config()默认参数所对应的功能我们只需记住和使用即可;有了这个切入点 理解larryms中的页面入口配置基本上就是水到渠成了。

layui模块初识
对于layui模块组件的使用,我们推荐使用预先加载方式,同时建议一个js文件一般只用一个layui.use()方法;同时从本小节开始 我们会从layui的模块加载机制、模块命名空间、模块定义规范、模块组件使用范例以及自定义扩展layui组件来掌握layui的基本用法,这样可以加速layui的上手,后面的章节会对layui的底层,UI元素属性规范,各内置组件文档做详细介绍

一、模块命名空间:

通过阅读laui源码可发现,layui的所有模块接口都会绑定在layui对象下,并且每一个模块都会拥有独立的命名,模块定义不能重复占用,以确保模块的空间不会被污染,在layui的底层通过layui.define()方法来定义模块,然后再通过layui.use()方法实现模块的调用,最后通过layui对象取得对应模块;下面我们通过阅读layui内置组件 如form.js表单组件源码来熟悉layui模块的定义:

/**
@Name:layui.form 表单组件
@Author:贤心
@License:MIT
*/
layui.define('layer', function(exports){
"use strict";

var $ = layui.$
,layer = layui.layer
,hint = layui.hint()
,device = layui.device()
,MOD_NAME = 'form';//定义模块名称
#....此处省略若干行代码
#....此处省略若干行代码段
//自动完成渲染
var form = new Form();
exports(MOD_NAME, form);//导出form模块
});

如上所示截取的form.js部分源码,通过开头和结尾出几个关键点我们来观察组件的定义方式,首先define()中定义了layer组件该组件作为当前定义模块的依赖并进行加载(如果无依赖前置组件即可省略),MOD_NAME即模块名称,将定义的form对象通过exports方法导出绑定至layui对象,从而外部可以通过layui对象获取到form所定义的系列方法和属性。

通过layui底层提供的layui.define([mods], callback) 方法定义一个Layui模块,其中 参数mods是可选的,用于声明该模块所依赖的模块。callback即为模块加载完毕的回调函数,它返回一个exports参数,用于输出该模块的接口。 跟Requirejs最大不同的地方在于接口输出,exports是一个函数,它接受两个参数,第一个参数为模块名,第二个参数为模块接口,当你声明了上述的一个模块后,你就可以在外部使用了;首先我们来看下如何定义一个demo模块:

第一步:确认模块名,假设为:demo,然后新建一个demo.js 文件放入项目任意目录下(注意:不用放入layui目录) 

第二步:编写demo.js 如下: 

/**
扩展一个demo模块
**/
layui.define(function(exports){
//提示:模块也可以依赖其它模块,如:layui.define(['layer','laypage'], callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'mymod'));
}
};
//输出demo接口
exports('demo', obj);
});

备注:上述示例代码中注释代码段中  的['layer', 'laypage']即为当前定义模块所依赖的模块,它并非只能是一个数组,你也可以直接传一个字符型的模块名,但是这样只能依赖一个模块。至此我们已经完成了一个demo模块的定义,在项目中如何使用刚才定义的demo模块,如下所示:

通过layui底层提供的 layui.use([mods], callback) 方法对模块进行加载, Layui的内置模块并非默认就加载的,他必须在你执行该方法后才会加载。它的参数跟上述的 define方法完全一样; 另外需要注意的是,mods里面必须是一个合法的模块名,不能包含目录;在使用自定义模块之前我们必须先确定模块所在目录并初始化【特别不建议将自定义模块放置在layui目录内,建议另立目录避免更新问题】,假如上述模块定义中的demo模块 即demo.js我们放在根目录的lib目录下,我们在其他js文件中使用demo模块,则可以按如下步骤操作:

第三步:设定扩展模块所在的目录 及模块使用

//config的设置是全局的
layui.config({
base: '/lib/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
demo: 'demo' //如果 demo.js 是在根目录,也可以不用设定别名
});
//从layui 2.2.0 版本开始 也可以忽略 base 设定的根目录,直接在 extend 指定路径
layui.extend({
demo2: '{/}http://cdn.xxx.com/lib/demo2' // {/}的意思即代表采用自有路径,即不跟随 base 路径
});

//使用拓展模块
layui.use(['demo', 'demo2'], function(){
var demo = layui.demo
,demo2 = layui.demo2;

demo.hello('World!'); //弹出 Hello World!
});

通过以上介绍我们上手使用layui,最常用到的就是layui.js的两个底层基础方法:layui.use() 与layui.define() ,以及layui.config() layui.extend() ,同时还需记住layui.cache这个 静态属性。用于获得一些配置及临时的缓存信息 ;下一篇文档我们将全面介绍layui的底层UI 元素、属性、以及扩展书写规范和具体组件的使用。


Layui中的第三方支撑,绝大多数Web开发者对Jquery库是在熟悉不过了(如果有人说Jquery他没听说过,那么他一定是来自未来或者接触Web开发的太少),layui中有部分模块是依赖于Jquery的,在layui中提供封装有最新稳定版Jquery版本,因此 不用去额外加载jQuery。当你去使用 layer 之类的模块时,它会首先判断你的页面是否已经引入了jQuery,如果没有,则加载内部的jQuery模块,如果有,则不会加载。

layui.use(['jquery'],function(){
var $ = layui.$;
#your code
});

当然有时候如需要使用一些jquery插件的时候,可能会存在获取不到jQuery对象,这种情况下有多种方法,如html中引用jquery.js或将layui.$全局这种方式不太推荐,比如在larryms中就可以很方便解决,larryms提供有jq插件加载机制,无论多老版本的jq插件 都可以通过larryms.plugin()方法去按需调用执行

动态加载CSS

方法:layui.link(href)

href即为css路径。注意:该方法并非是你使用Layui所必须的,它一般只是用于动态加载你的外部CSS文件。

本地存储

本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据。

localStorage 持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。 

sessionStorage 会话性存储:layui.sessionData(table, settings),页面关闭后即失效。注:layui 2.2.5 新增     


上述两个方法的使用方式是完全一样的。其中参数 table 为表名,settings是一个对象,用于设置key、value。下面与 layui.data 方法为例:

    //【增】:向test表插入一个nickname字段,如果该表不存在,则自动建立。
layui.data('test', {
  key: 'nickname'
  ,value: '贤心'
});
 
//【删】:删除test表的nickname字段
layui.data('test', {
  key: 'nickname'
  ,remove: true
});
layui.data('test', null); //删除test表
  
//【改】:同【增】,会覆盖已经存储的数据
  
//【查】:向test表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); //获得“贤心”

获取设备信息

方法:layui.device(key),参数key是可选的

由于Layui的一些功能进行了兼容性处理和响应式支持,因此该方法同样发挥了至关重要的作用。尤其是在layui mobile模块中的作用可谓举足轻重。该方法返回了丰富的设备信息:

    var device = layui.device();
    //device即可根据不同的设备返回下述不同的信息
    {
        os: "windows" //底层操作系统,windows、linux、mac等
        ,ie: false //ie6-11的版本,如果不是ie浏览器,则为false
        ,weixin: false //是否微信环境
        ,android: false //是否安卓系统
        ,ios: false //是否ios系统
    }

有时你的App可能会对userAgent插入一段特定的标识,譬如: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 myapp/1.8.6 Safari/537.36
你要验证当前的WebView是否在你的App环境,即可通过上述的myapp(即为Native给Webview插入的标识,可以随意定义)来判断。

    var device = layui.device('myapp');
    if(device.myapp){
        layer.alert('在我的App环境');
    }      

除了上述底层方法外,layui.js内部还提供了许多底层引擎,他们同样是整个Layui框架体系的有力支撑,如下所列:

方法/属性 描述
layui.cache 静态属性。获得一些配置及临时的缓存信息
layui.extend(options) 拓展一个模块别名,如:layui.extend({test: '/res/js/test'})
layui.each(obj, fn) 对象(Array、Object、DOM对象等)遍历,可用于取代for语句
layui.getStyle(node, name) 获得一个原始DOM节点的style属性值,如:layui.getStyle(document.body, 'font-size')
layui.img(url, callback, error) 图片预加载
layui.sort(obj, key, desc) 将数组中的对象按某个成员重新对该数组排序,如:layui.sort([{a: 3},{a: 1},{a: 5}], 'a')
layui.router() 获得location.hash路由,目前在Layui中没发挥作用。对做单页应用会派上用场。
layui.hint() 向控制台打印一些异常信息,目前只返回了error方法:layui.hint().error('出错啦')
layui.stope(e) 阻止事件冒泡
layui.onevent(modName, events, callback) 自定义模块事件,属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块
layui.event(modName, events, params) 执行自定义模块事件,搭配onevent使用
layui.factory(modName) 用于获取模块对应的 define 回调函数