Layui是一套开源免费的Web UI组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用

Layui区别于一众主流的前端框架，更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可实现页面所需呈现的元素与交互

layui官方文档网址：https://layui.dev/

layui官方开源网址：https://github.com/layui/layui

layui的引入

<link rel="stylesheet" href="https://unpkg.com/layui/dist/css/layui.css">
<script src="https://unpkg.com/layui/dist/layui.js">

或者直接从官网下载后引入以减少不必要的网络请求

当引入了layui.js后，会有一个名为layui的全局变量，提供了一系列基础API

属性

v：当前layui版本号
cache：获得一些配置及临时缓存信息
lay ：基础模块，提供了更多基础API，一般供Layui内置组件中使用
modules：获取当前已加载的所有模块名称

使用"layui.模块名"就可获取该模块对象，如modules.jquery(或modules.$)获取query对象

常用方法

全局配置：config(options)

options为一个对象，表示一些全局配置项目，大部分时候不是必须的
为了减少一些不必要的工作，尽可能让使用变得更简单，目前提供的全局配置项非常少
常用的全局配置项：
dir: 'layui/'
        //layui.js所在目录，用于动态导入layui.js时内置模块的加载
        //如果是script引入则无需设定该参数
version: false //一般用于更新模块缓存，默认不开启。设为true即让浏览器不缓存
debug: false   //开启调试模式，默认 false，如果为true，则模块的引入节点会保留在页面
base: ''       //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
skin: 'demo-class' //设定全局弹窗样式
anim: 1 //设定全局弹窗动画风格
open: '{{', // 模板语法的前缀标签符号
close: '}}', // 模板语法的后缀标签符号

url解析：url(href)

将网址中的pathname、search、hash属性值进行对象化处理

不传入href会使用当前页面URL(location.href)

返回一个解析后的对象，该对象的属性
pathname：值为数组，为该网址中的所有目录及文件名组成的数组
search：值为对象，每个键值对表示一个网址的参数对解析结果
hash：值为对象
    path：数组，hash中的所有不含等号(=)的类似目录名称
    search：对象，解析hash中key=val格式后的结果
    hash：url中的hash解析后的对象
    href：hash的完整字符串

网址：http://127.0.0.144/layui/study?name=qian#/yi/er/p=4/n=name?one&si/wu/liu#haha")解析后的结果
    {
        pathname:['layui', 'study']
        search:{name: 'qian'}
        hash:{
            path: ['yi', 'er', 'san', 'wu', 'liu'], 
            search: {p: '4', n: 'name?one&si'}, 
            hash: '#hf', 
            href: "/yi/er/p=4/n=name?one&si/wu/liu#haha"
        }
    }

hash()和router()：获得当前页面的hash路由结构，其实就是url()返回对象的hash属性

hash解析：hash() 或 router()

两者返回完全相同，均为当前页面的hash路由结构

本质上就是url()返回对象的hash属性

本地存储

data(table, settings) ：localStorage持久化存储

table 为表名，settings是一个对象，用于设置key、value

layui.data('test', {
  key: 'nickname',
  value: '张三'
});
    //【增、改】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立
 

layui.data('test', {
  key: 'nickname',
  remove: true
});
    //【删】：删除 test 表的 nickname 字段
layui.data('test', null);
    //删除test表

let localTest = layui.data('test'); // 获取test表全部数据的对象
console.log(localTest.nickname); // 通过属性获取指定字段

sessionData(table, settings) ：sessionStorage会话性存储，用法同layui.data

浏览器信息

device(key)：浏览器信息

参数key可选，用户获取指定的属性值
不指定key获取包含所有属性的对象

模块相关

use([mods], callback)：使用模块

参数mods可选，为一个字符串或字符串数组，必须是已被成功定义的模块名
若不传入mods，表示引用所有内置模块
callback为成功使用模块后的回调函数，该回调会在html文档加载完毕后再执行

回调函数中需要获取模块对象，然后通过模块对象获取或使用模块中的变量或方法
获取模块对象的方式
    1、回调函数不传入任何参数
        在函数体中使用 mod_job = layui.mod_name 语句获取模块对象
        use(['mod1','mod2'], function(){
            let mod1 = layui.mod1;
            let mod2 = layui.mod2;
        })
    2、通过传入回调函数的参数来获取模块对象
        回调函数中的参数和传入的mods参数一一对应，分别表示各个模块对象
        use(['mod1','mod2'], function(mod1,mod2){ })

define([mods], callback)：定义模块

参数mods可选，用于声明该模块所依赖的模块
callback为模块加载完毕的回调函数，接受一个exports参数，在函数体中必须运行exports方法输出该模块的导出接口
    exports(mod_name, api)
        mod_name为定义的模块的名称
        api为一个对象，表示模块的导出接口

layui.define(function(exports){
    let name = "清河洛";
    let eat = function(food){
        console.log(`${name}在吃${food}`);
    }
    exports("mymod",{ name:name, eat:eat })
});

定义模块时的callback只会在模块初次加载中被调用
如果有些场景中需要再次执行回调函数，可以使用layui.factory(modName)来获取定义模块时的回调函数

extend(options)：注册声明模块，用于声明外部模块

options为一个对象，
    属性名为模块名，属性值为定义该模块的文件名(不含.js后缀)
    属性名必须和模块文件中的定义模块相同
    layui.extend({
        mymod1:'static/js/mydiy'
    })
    如果mydiy.js文件中有多个定义模块语句，仅声明"mymod1"模块
    通过layui.config({ base: 'static/js/' })设置模块基础目录
    layui.extend({
        mymod1:'mydiy'
    })

实际使用中我们无需声明模块也可使用外部模块

通过layui.config({ base: 'static/js/' })设定外部模块目录
此时layui.use('mod',function(){})会在设定的模块目录中查找和模块名同名的mod.js文件
如果同名js文件中定义了同名模块，则加载该模块
所以实际开发中我们建议模块名和文件名同名，一个文件仅定义一个模块

disuse(modules)：弃用模块，以便重新扩展新的同名模块

CSS相关

getStyle(dom, name) ：获得一个DOM节点的style属性值

link(href)：动态加载CSS。一般用于动态加载外部CSS文件

addcss(href)：动态加载CSS，基路径为layui的css目录，一般用于加载layui内部css文件

事件相关

stope(e) ：阻止事件冒泡

on(?)

onevent(modName, events, callback) ：增加自定义模块事件，一般在内置组件中使用

event(modName, events, params) ：执行自定义模块事件，搭配 onevent 使用

当 events 参数中未设定 filter 时则可重复执行该事件，否则只会执行一次最新添加的事件

off(events, modName) ：用于移除模块相关事件

其他方法

img(url, callback, error)：图片预加载

each(obj, fn)：用于取代for语句遍历对象（Array、Object、DOM 对象等），fn接受index和item两个参数

type(val)：获取详细数据类型（基本数据类型和各类常见引用类型）

isArray(obj) ：判断对象是否为泛数组结构。如 Array、NodeList、jQuery对象等等

sort(obj, key, desc) ：将数组中的对象按某个成员重新对该数组排序