一、底层方法

1、全局配置：layui.config(options)

作用：在使用layui模块之前可以全局化配置一些参数。

使用：（未使用，mark）

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

2、定义模块：layui.define([mods],callback)

作用：可定义一个模块。mods：定义的模块所依赖的模块，callback：会调用函数，返回一个exports参数，输出该模块的接口（也就是定义模块）。

使用：

//1.不使用mods参数，直接使用回调方法定义一个模块
//define：定义模块的方法
layui.define(function(exports){
    /*
     * exports参数:可定义一个模块
     *
     * demo：模块名字
     * function():回调方法
     */
	exports('demo', function(){
	    alert('Hello World!');
	});
});
		
layui.demo();//调用定义的模块



//2.使用mods参数，设置该模块所依赖的模块来使用回调方法定义一个模块
layui.define("layer",function(exports){    //可使用数组来依赖多个模块：["layer","laypage"]

	exports('demo', function(){
		alert('Hello World!');
	});
});
//需要通过use()来加载layer模块，之后在该回调方法中调用定义的demo方法
layui.use("layer",function(){
	layui.demo();
})

3、加载所需模块：layui.use([mods],callback)

作用：layui的内置模块，不是一开始就加载的，需要通过该方法来加载内置模块。

扩展：（目前只做了解）如果mods中需要包含目录，需使用extends定义别名。

使用：

/*
 * 3.使用模块
 */
layui.use(['layer','laypage'],function(){	//指定加载的模块
	//通过对象赋值的方式来获取模块接口（当然，不使用对象赋值也可以直接使用，但是为了规范吧）
	var layer = layui.layer
		,laypage = layui.laypage;
		
	//使用layer模块的msg()
	layer.msg("你好");

});




//强烈不推荐下面的做法，如果你的业务代码实在模块加载完成之前执行的，则会存在报错风险
var laypage, laydate;
layui.use(['laypage', 'laydate'], function(){
  laypage = layui.laypage;
  laydate = layui.laydate;
});

4.其他的方法

方法/属性	描述
layui.link(href)	动态下载css，href即为css路径。注意：该方法并非是你使用Layui所必须的，它一般只是用于动态加载你的外部CSS文件。
layui.data(table, settings)	localStorage 持久化存储、数据会永久存在，除非物理删除。其中参数 table 为表名，settings是一个对象，用于设置key、value。（未理解）
layui.sessionData(table, settings)	sessionStorage 会话性存储、页面关闭后即失效。注：layui 2.2.5 新增。（未理解）
layui.device(key)	获取设备信息，参数key是可选的，在layui mobile模块中的作用可谓举足轻重。该方法返回了丰富的设备信息。（详情见官网）
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 回调函数

二、页面元素

需要的页面元素，可直接去官网搜索，目前还没有什么无法理解的地方。（持续更新）

三、模块规范

1、layui的模块是基于layui.js内部实现的模块异步加载方式。

2、预先加载，也就是先在最外层定义一个layui.use()，将所有的js代码都包括在里面，这样可以防止多次重复的定义layui.use()

3、按需加载（不推荐），在需要使用某个模块的时候再去定义layui.use()来加载模块，可满足对网站的性能有极致的要求的人。

注意：如果你的 JS 中需要大量用到模块，我们并不推荐你采用这种加载方式（按需加载），因为这意味着你要写很多 layui.use()，代码可维护性不高。建议还是采用：预先加载。即一个JS文件中，写一个use即可。

4.使用扩展模块：

/*
 * 1、test.js代码
 */
//使用define()定义模块
layui.define(function(exports){
	//声明一个对象
	var obj= {
			//hello属性指定一个方法
		    hello:function(str){
		    	alert("hello "+(str||"mymod"));
		    }
	   	}
	//输出借口（输出定义的模块，模块名为mymod）
	exports("mym",obj);
});



/*
 * 2、html页面代码
 */
//配置test.js的路径
 layui.config({
 	base:"js/"	//test.js的根目录
 }).extend({
 	mymod:"test"	//test.js所在的目录，且指定模块
 });
 
//使用拓展模块
layui.use(['mymod'], function(){
  var mymod = layui.mymod;
  
  mymod.hello('World!'); //弹出 Hello World!
});

layui学习