Layui使用简要

Layui使用简要

layui是采用自身模块规范编写的前端ui框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

核心模块一般放于layui/lay/modules文件夹中

---

快速搭建使用环境：

在页面引入一下两个文件：

• layui.js （/layui/layui.js）
• layui.css （layui/css/layui.css）

模块的使用：

通过layui.use([model],callback)加载模块;

	//layer必须是合法的模块，即自定义或存在于		
	//layui/lay/modulse文件夹中，模块名即对应的文件名。
	layui.use(['layer',function(){
	  var lay = Layui.layer;//获得layer模块（即弹出层模块）
	  lay.msg('hello world');
	}]);

提示： layui 的模块接口会绑定在 layui 对象下，内部由 layui.define() 方法来完成。每一个模块都会一个特有的名字，并且无法被占用。所以你无需担心模块的空间被污染，除非你主动 delete layui.{模块名}。调用模块可通过 layui.use 方法来实现，然后再通过 layui 对象获得模块接口。如：

  layui.use(['layer', 'laypage', 'laydate'], function(){
   var layer = layui.layer //获得layer模块
   ,laypage = layui.laypage //获得laypage模块
   ,laydate = layui.laydate; //获得laydate模块
   //使用模块
 });      

自定义模块：

同过 layui.define([model],callback)自定义;
model为需要依赖的模块,当然也可以不为数组,这样的话就只能依赖单个模块。callback为回调函数：

		layui.define(['myModel', 'laypage'],function(){
			//dosometing
		});
		
		layui.define('myModel',function(){
			//dosometing
		});	

完整案例：

A>定义模块：myModel

		//假定当前文件为src/js/models/Myobj.js
		layui.define('myModel',function(exports){//*
		//-----------------创建方法1------------------
		/*var Obj = {
		//定义方法
		myFunction:function(){
			alert('Hello World');
		}
		};*/
		//---------------创建方法2：(建议使用)------------
		//创建Obj对象，值为空
		var Obj = function(){};
		//为Obj对象添加属性和方法
		Obj.prototype.functionName = function(){
		alert('function');
		}	
		Obj.prototype.functionName1 = function(){
		  alert('function1');
		}
	
		//暴露接口
		/**
		*使用exprots('name',callback)函数;
		*name为接口名称，callback为回调函数
		*接口名称应当与文件名保持一致
		*方法名因与define()方法中回调函数的参数保持一致
		*通常为exprots
		*/

		//exprots('Myobj',Obj);//方法1
		exprots('Myobj',new Obj);//方法2
		});

不使用方法1的原因是每当实例化Obj对象时都会对其下面的每个属性造成影响，方法2则将其属性分离开来，实> 例化时不会对其属性和方法造成影响 请看下面↓↓↓*/

使用自定义模块

	//创建文件entrance.js 
	layui.config({
		//base:'自定义模块的目录';
		base:'src/js/models';
	}).use(['Myobj'],!function(){//自执行
		//获取Myobj模块
		ver myObj = layui.Myobj;
		//调用其成员方法
		myObj.functionName();//弹出function
		myObj.functionName1();//弹窗function1
	})
	//加载入口,使用自定义模块模块名即为暴露的接口名;

最后将entrance.js引入页面即可，可在use中添加需要的模块
前端页面美化详情请参考官方文档：
https://www.layui.com/doc/
使用方法很简单，只需添加依赖的模块。再到需要美化的元素上添加对应的类名即可。