layui模块规范

　　刚入公司不久，就开始做项目了，最后还是选择用layui来做前端的页面，一来是可以自适应，二来是用框架比较方便，简洁。

先看下Layui的介绍：

layui 是一款采用自身模块规范编写的情怀级前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为PC端后台系统与前台界面的速成开发方案。

获取Layui

可以在http://www.layui.com/ 下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。

快速上手

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css

./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

这两个文件是最基本的也是最重要的。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面

模块化方式

个人建议推荐使用遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>开始使用layui</title>

  <link rel="stylesheet" href="../layui/css/layui.css">

</head>

<body>

<!-- 你的HTML代码 -->

<script src="../layui/layui.js"></script>

<script>

//一般直接写在一个js文件中

layui.use(['layer', 'form'], function(){

  var layer = layui.layer

  ,form = layui.form;

  layer.msg('Hello World');

});

</script>

</body>

</html>

非模块化方式（即所有的模块一次性全部加载）

如果你并不喜欢 layui 的模块化组织方式，你完全可以毅然采用“一次性加载”的方式，我们将 layui.js 及所有模块单独打包合并成了一个完整的js文件，用的时候直接引入这一个文件即可。当你采用这样的方式时，你无需再通过 layui.use() 方法加载模块，直接使用即可，

如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>非模块化方式使用layui</title>

  <link rel="stylesheet" href="../layui/css/layui.css">

</head>

<body>

<!-- 你的HTML代码 -->

<script src="../layui/layui.all.js"></script>

<script>

//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：

;!function(){

  var layer = layui.layer

  ,form = layui.form;

  layer.msg('Hello World');

}();

</script>

</body>

</html>

模块化与非模块化

个人比较喜欢模块化，因为模块化是你需要的时候就加载，假如是非模块化的话，一开始就全部加载了所有的js文件，但实际上，有些页面用到的模块可能很少，并不需要加载那么大的js文件，所以还是推荐使用模块化的方式，非模块化的方式虽然方便，但对用户来说是不太好的。

模块规范

layui的模块是基于layui.js内部实现的异步模块加载方式，并不遵循AMD，而是自己定义了一套更轻量的模块规模。并且这种方式在经过了大量的实战后，成为layui最核心的模块加载引擎。

预先加载

Layui的模块加载采用核心的layui.use(mods,callback)方法，当你JS需要用到layui模块的时候，我们推荐使用采用预先加载，因为这样可以避免到处写layui.use，这样很麻烦，应该在最外层定义:

/*

  Demo1.js

  使用Layui的form和upload模块

*/

layui.use(['form', 'upload'], function(){  //如果只加载一个模块，可以不填数组。如：layui.use('form')

  var form = layui.form //获取form模块

  ,upload = layui.upload; //获取upload模块

  //监听提交按钮

  form.on('submit(test)', function(data){

    console.log(data);

  });

  //实例化一个上传控件

  upload({

    url: '上传接口url'

    ,success: function(data){

      console.log(data);

    }

  })

});

按需加载(此方法不推荐使用)

如果你是一位有强迫症的人，你对网站的性能有极致的要求，你并不想预先加载所需的模块，而是触发一个指令或动作的时候，才气加载模块，那么，这是可以的。你不用在你的JS最外层区包裹这一个那么大的layui.use,你只需要:

button.addEvent('click',function(){

   layui.use('laytp1',function(laytp1){//注意:多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。

        var html=laytp1('').render({});

        console.log(html);

    })

})

注意:如果你的JS中需要大量用到模块，个人建议不推荐您采用这种加载方式，因为这意味着你要写很多layui.use(),代码可维护性不高。

建议还是采用:预先加载。即一个JS文件中，写一个use即可。

扩展一个Layui的三个步骤：

第一步:确认模块名，假设为：test.js文件放入项目任意目录下（注意：不用放入layui目录）

第二步：编写test.js如下:

layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);

  var obj = {

    hello: function(str){

      alert('Hello '+ (str||'test'));

    }

  };

  //输出test接口

  exports('test', obj);

});

第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用

layui.config({

  base: '/res/js/' //假设这是test.js所在的目录

}).extend({ //设定模块别名

  test: 'test' //如果test.js是在根目录，也可以不用设定别名

  ,test1: 'admin/test1' //相对于上述base目录的子目录

});

//使用test

layui.use('test', function(){

  var test = layui.test;

  test.hello('World!'); //弹出Hello World!

});

//使用test1

layui.use('test1', function(){

  var test = layui.test1;

  //……

});

全局配置

方法：layui.config(options)

layui.config({

  base: 'js/' //你存放新模块的目录，注意，不是layui的模块目录

}).use('index'); //加载入口

layui弹出层

layer至今仍作为layui的代表作，它的爱众广泛并非偶然，而是这数年来的坚持、不弃的执念，讲那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在web开发者的圈子里口口相传，乃至于成为今天的layui最强劲的源动力。目前，Layui已成为国内最多人使用的Web弹层组件，GitHub自然Start 5000+,官网累计下载量达50W+,大概有30万不同规模的Web平台使用过layer。

之所以列举上面这些数字，并非是在夸夸其谈，而是懂layer的人都知道，这是一种怎样不易的沉淀。而由于layer在layui体系中的位置比较特殊，甚至让很多人都是误以为layui=layer ui,所以再次强调layer只是作为layui的一个弹层模块，由于其用户基量数较大，所以至今把它作为独立组件来维护，不过要注意的是：无论是独立的layer，还是作为内置模块的layer，文档都以本页为准。

模块加载名称:layer,独立版本：http://layer.layui.com/

使用场景

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照您的实际需求来选择。

作为独立组件使用layer

<script src="layer.js"></script>

<script>

layer.msg('hello');

</script>

在layui中使用layer

layui.use('layer', function(){

  var layer = layui.layer;

  layer.msg('hello');

});

除了上面有所不同，其它都完全一致。

基础参数

我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content:"}) layer.msg(",{time:3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都要去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。需要注意的是：从2.3开始，无需通过layer.config来加载拓展模块。

type-基本层类型

类型：Number,默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe）3（加载层）4（tips层）。若你caiyonglayer.open({type:1})方式调用，则type为必填项(信息框除外)

title - 标题

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

content - 内容

类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：

/!*

 如果是页面层

 */

layer.open({

  type: 1,

  content: '传入任意的文本或html' //这里content是一个普通的String

});

layer.open({

  type: 1,

  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响

});

//Ajax获取

$.post('url', {}, function(str){

  layer.open({

    type: 1,

    content: str //注意，如果str是object，那么需要字符拼接。

  });

});

/!*

 如果是iframe层

 */

layer.open({

  type: 2,

  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

});

/!*

 如果是用layer.open执行tips层

 */

layer.open({

  type: 4,

  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM

});

skin - 样式类名

类型：String，默认：''

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子

//单个使用

layer.open({

  skin: 'demo-class'

});

//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高

layer.config({

  skin: 'demo-class'

})

//CSS

body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}

body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}

body .demo-class .layui-layer-btn a{background:#333;}

body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}

…

加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。

area - 宽高

类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']

offset - 坐标

类型：String/Array，默认：垂直水平居中

offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：

icon - 图标。信息框和加载层的私有参数

//eg1

layer.alert('酷毙了', {icon: 1});

//eg2

layer.msg('不开心。。', {icon: 5});

//eg3

layer.load(1); //风格1的加载

btn - 按钮

类型：String/Array，默认：'确认'

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：

//eg1

layer.confirm('纳尼？', {

  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮

  ,btn3: function(index, layero){

    //按钮【按钮三】的回调

  }

}, function(index, layero){

  //按钮【按钮一】的回调

}, function(index){

  //按钮【按钮二】的回调

});

//eg2

layer.open({

  content: 'test'

  ,btn: ['按钮一', '按钮二', '按钮三']

  ,yes: function(index, layero){

    //按钮【按钮一】的回调

  }

  ,btn2: function(index, layero){

    //按钮【按钮二】的回调

    //return false 开启该代码可禁止点击该按钮关闭

  }

  ,btn3: function(index, layero){

    //按钮【按钮三】的回调

    //return false 开启该代码可禁止点击该按钮关闭

  }

  ,cancel: function(){

    //右上角关闭回调

    //return false 开启该代码可禁止点击该按钮关闭

  }

});

btnAlign - 按钮排列

类型：String，默认：r

你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。该参数可支持的赋值如下：

closeBtn - 关闭按钮

类型：String/Boolean，默认：1

layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0

shade - 遮罩

类型：String/Array/Boolean，默认：0.3

即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0

shadeClose - 是否点击遮罩关闭

类型：Boolean，默认：false

如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

time - 自动关闭所需毫秒

类型：Number，默认：0

默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

id - 用于控制弹层唯一标识

类型：String，默认：空字符

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

anim - 弹出动画

类型：Number，默认：0

我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数

isOutAnim - 关闭动画（layer 3.0.3新增）

类型：Boolean，默认：true

默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可

maxmin - 最大最小化

类型：Boolean，默认：false

该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

fixed - 固定

类型：Boolean，默认：true

即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可

resize - 是否允许拉伸

类型：Boolean，默认：true

默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效

resizing - 监听窗口拉伸动作

类型：Function，默认：null

当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的DOM对象

resizing: function(layero){

  console.log(layero);

}

scrollbar - 是否允许浏览器出现滚动条

类型：Boolean，默认：true

默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽

maxWidth - 最大宽度

类型：Number，默认：360

请注意：只有当area: 'auto'时，maxWidth的设定才有效。

maxHeight - 最大高度

类型：Number，默认：无

请注意：只有当高度自适应时，maxHeight的设定才有效

zIndex - 层叠顺序

类型：，默认：19891014（贤心生日 0.0）

一般用于解决和其它组件的层叠冲突。