数据存储
- localStorage 持久化存储：layui.data(table, settings)，数据会永久存在，除非物理删除。
- sessionStorage 会话性存储：layui.sessionData(table, settings)，页面关闭后即失效。
公共方法
| 方法/属性 | 描述 |
|---|---|
| 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 回调函数 |
公共属性
| 属性 | 描述 |
|---|---|
| lay-skin=" " | 定义相同元素的不同风格，如checkbox的开关风格 |
| lay-filter=" " | 事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器 |
| lay-submit | 定义一个触发表单提交的button，不用填写值 |
layui模块的定义
layui.define([mods], function(exports){
//……
exports('mod', api);
});
layui模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;//……
});
第一步：编写扩展模块test.js 如下：
layui.define(function(exports){ // 提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'mymod'));
}
};
exports('mymod', obj); // 输出接口（模块名，接口）
});
第二步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({
mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
var mymod = layui.mymod
,mod1 = layui.mod1
,mod2 = layui.mod2;mymod.hello('World!'); //弹出 Hello World!
});
文章评论