02 Layui底层方法

引言：本文主要是针对Layui官网文档中的l底层方法进行学习，然后归纳笔记，进行简化记忆，方便后期复盘巩固，如需深入学习，详见：Layui 底层方法 (ilayuis.com).

一、全局配置

在使用模块前，可以根据需要，全局变量配置一些参数，目前Layui官方提供的全局配置项如下：

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

如果对layui.js本身进行了动态加载等其他特殊场景，那么layui.config所设定的dir参数会失效，它会在部分组件的依赖文件(css)加载后再执行，此时可在动态加载layui.js之前预先设定一个定好的全局对象：

<script>  
var LAYUI_GLOBAL = {
  dir: '/res/layui/' //layui.js 所在目录（layui 2.6.6 开始新增）
};
</script>

以上dir参数的目录设定仅仅针对特殊场景下，若采用script标签正常引入layui，则无视该dir参数。

二、定义模块

方法：layui.define([mods], callback)

通过该方法在新的js文件定义一个layui模块：

参数mods可选，用于声明该模块所依赖的模块；

参数callback为模块加载完毕的回调函数，它返回一个exports参数，用于输出该模块的接口。

/** demo.js **/
layui.define(function(exports){  
  //省略了参数mods（所依赖的模块）
  //回调函数function(exports)，返回一个exports参数，用于输出该模块的接口
  
  //do something
  
  exports('demo', {       //跟RequireJS不同的地方---接口输出
    msg: 'Hello Demo'     //exports是一个函数，接受两个参数
  });                     //第1个参数为模块名，第2个参数为模块接口
});                       

当声明了上述的一个模块后，就可以在外部使用了，demo会注册到layui对象下，即可通过

var demo = layui.demo去得到该模块的接口。

此外，也可以在定义一个模块的时候，声明该模块所需要的依赖，如：

/** demo.js **/
layui.define(['layer', 'laypage', 'mod1'], function(exports){ 
  //其中layer、laypage是layui的内置模块， mod1 为自定义的任意扩展模块
  //do something
  
  exports('demo', {
    msg: 'Hello Demo'
  });
});

三、加载模块

方法：layui.use([mods], callback)

参数mods：如果有，必须是一个layui合法的模块名（不能含目录）

从layui2.6开始，参数mods若没有，只传一个callback参数，则表示引用所有的内置模块

参数callback：模块加载完毕的回调函数

从layui2.6开始，该回调函数会在html文档加载完毕后再执行，确保代码在任何地方都能对元素进行操作。 

//引用指定模块
layui.use(['layer', 'laydate'], function(){
  var layer = layui.layer
  ,laydate = layui.laydate;
  
  //do something
});
 

//引用所有模块（layui 2.6 开始支持）
layui.use(function(){
  var layer = layui.layer
  ,laydate = layui.laydate
  ,table = layui.table;
  //…
  
  //do something
});

 我们同样还可以通过回调函数得到模块对象。

//通过回调的参数得到模块对象
layui.use(['layer', 'laydate', 'table'], function(layer, laydate, table){
  
  //使用 layer
  layer.msg('test');
  
  //使用 laydate
  laydate.render({});
  
  //使用 table
  table.render({})
});

四、动态加载CSS

方法：layui.link(href)     href即为css路径。

注意：该方法不是使用layui所必须的，只是一般用于动态加载外部css文件。

五、本地存储

 对localStoreage和sessionStrorage的友好封装，可方便地管理本地数据。

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

上面两个方法的使用方式完全一样，参数table为表名，settings是一个对象，用于设置key、value。 

//【增】：向 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是可选的

var device = layui.device();

//device即可根据不同的设备返回下述不同的信息
{
  os: "windows" //当前浏览器所在的底层操作系统，如：Windows、Linux、Mac 等
  ,ie: false //当前浏览器是否为 ie6-11 的版本，如果不是 ie 浏览器，则为 false
  ,weixin: false //当前浏览器是否为微信 App 环境
  ,android: false //当前浏览器是否为安卓系统环境
  ,ios: false //当前浏览器是否为 IOS 系统环境
  ,mobile: false //当前浏览器是否为移动设备环境（v2.5.7 新增）
}

七、更多底层API

layui内部提供了许多底层引擎,他们同样是整个layui框架的有力支撑，常用的如下：

layui.cache        //静态属性，用于获得一些配置及临时的缓存信息 

layui.disuse(modules)        //丢弃某模块或多个(数组)，便于重新获得新的同名模块。v2.7新增

layui.disuse('table');    //丢弃table模块，方便重新扩展新的同名模块

layui.extend(options)        //扩展模块别名

layui.extend({test: '/res/js/test'})   //扩展一个模块别名

layui.each(obj, fn)        //对象遍历，可取代for语句

layui.type(operand)        //获取详细数据类型（基本数据类型+常见引用类型） v2.6.7新增

//获取详细数据类型（基本数据类型，各类常见引用类型）
layui._typedef([]);     //Array
layui._typedef({});     //object
layui._typedef(new Data());    //data

 layui.isArray(obj)    //对象是否为泛数组结构，如Array、NodeList、JQuery对象等。 v2.6.7新增

//判断是否是 泛数组类型：如Array, NodeList, JQuery对象等
layui._isArray([1.6]);    //true
layui._isArray($('div'));   //true
layui._isArray(document.querySelectorAll('div'));  //true

layui.getStyle(node, name)   //获得一个原始DOM节点的style属性值 

layui.getStyle(document.body, 'font-size');   //获得body的font-size属性值

layui.img(url, callback, error)  //图片预加载

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

layui.sort([{a:3}, {a:1}, {a:5}], 'a')  //按照a的值对该数据进行排序

layui.router()   //获得location.hash路由结构，一般在单页面应用中发挥作用

layui.url(href)   //用于将一段URL链接中的pathname、search、hash属性值进行对象化处理

其中参数href可选，若不传，则自动读取当前页面的url（即location.href)

var url = layui.url();

layui.hint()   //向控制台打印一些异常信息，目前只返回了error方法

layui.hint().error('出错了');

layui.stope(e)   //阻止事件冒泡

layui.onevent(modName, events, callback)  //增加自定义模块事件，可阅读layui.js源码和form模块

layui.event(modeName, events, params)   //执行自定义模块事件，搭配onevent使用

layui.off(events, modName)   //用于移除模块相关事件  v2.5.7新增

layui.off('select(filter)', 'form')
form.on('select(filter)', callback)的事件将会被移除

layui.factory(modName)       //用于获取模块对应的define回调函数

八、第三方工具

Layui部分内置模块依赖JQuery（比如layer），所以Layui已经将JQuery最稳定的一个版本进行了规范的模块化处理，只需要像使用Layui的其他模块一样去使用JQuery即可。

图标取材于阿里巴巴矢量图标库（iconfont)，构建工具采用Gulp.