layui相关用法

// layui 模块的定义
layui.define([mods], function() {
    // ...
    
    export('mod', api);
});




// layui模块化加载
layui.use(['layer', 'form'], function() {
    var layer = layui.layer;
    var form = layui.form;
    
    // 调用封装的弹框
    layer.msg('hello world!');
    
});

推荐相关用法

layui.config({
    base: '/res/js/mymoudels/' // 存放新模块的目录，不是layui的目录
}).use('index'); // 加载入口，即使用的文件

// 这里的index,表示/res/js/mymoudels/目录下的index.js


// index.js 内容可以为下
layui.define(['layui', 'form'], function(exports) {
    var layer = layui.layer;
    var form = layui.form;
    
    layer.msg('Hello World!');
    exports('index', {}); // 模块的输出核心，表示此模块对外暴露
});

底层方法

全局配置

• 使用模块化之前，需要进行全局配置

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

模块的定义和导出

• 方法：layui.define([mods], callback);
• mods 是可选的，用于声明该模块所需要依赖的模块，

// 不依赖外部模块
layui.define(function() {
    
    // do something
    
    exports('demo', function() {
        alter('对外暴露完毕！');
    });
});

// 依赖外部模块
layui.degine(['layer', 'laypage'], function() {
    // do something
    
    exports('demo', function() {
        alter('对外暴露完毕！');
    });
});

使用所需要的模块

• 方法：layui.use([mods], callback)
• layui 的内置模块也不是默认就加载的，执行该方法后才会执行

layui.use(['laypage', 'layedit'], function() {
    var laypage = layui.laypage;
    var laydit = layui.laydit;
    
    // do something
});

// use 方法返回了所加载模块的接口，所以可以不需要通过layui对象复制获得接口
layui.use(['laypage', 'layedit'], function() {
    
    // 使用分页
    laypage();
    
    // 建立编辑器
    layedit.build();
});

动态加载CSS

• 方法：layui.link(href)
• href 为css的路径，该方法并非是使用layui必须的，它一般只是用于动态加载外部的css文件

本地存储

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

localStorage 持久化存储：layui.data(table, settings) // 数据会永久存在，除非物理删除
sessionStorage 会话性存储： layui.sessionData(table, settings) // 页面关闭后失效

• 上述两个方法的使用方式是相同的，其中table为表名，settings是一个对象，settings是一个对象，用于设置key, value，下面以layui.data方法为例

// [增]：向test表中插入一个nickname 字段，如果该表不存在就自动创建
layui.data('test', {
    kdy: 'nickname',
    value: 'jijijijideideidei'
});

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

// [改]: 同[增]会覆盖已经存储的数据

// [查]: 向test表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); // 打印value

获取设备信息

• 方法：layui.device(key), 参数key 是可选的
• 由于layui 的一些功能进行了兼容性的处理和响应式支持，所以获取设备信息很重要

var device = layui.device();

// device 即可根据不同的设备，返回不同的信息
{
    os: "windows", // 底层的操作系统，windows，Linux，Mac等
    ie: false, // ie6-11的版本，如果不是IE浏览器则为false
    weixin: false, // 是否微信环境
    android: false, // 是否安卓系统
    ios: false // 是否ios系统    
}

其他方法