目录

layui - 经典模块化前端框架（入坑篇）

什么是layui？

如题，layui是一款模块化的前端框架。

Layui 出蛋于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。

Layui兼容除IE6/7以外的全部浏览器，并且绝大多数结构支持响应式。

官网

http://www.layui.com

为什么使用？

因为我是一个菜鸟，接触前端以后都很少使用框架，在这之前只使用过bootstrop和国产的pintuer，在过去这一年里我也发现了如今的前端正处在一个很疯狂的黄金时代，觉得自己也有必要更多的了解一些前端的知识。这次再写项目想尝试一些不同的前端框架，这时候我看到了layui。

进入官网最先看到的是“模块化”三个大字，当时我就想，模块化前端框架？似乎有些与众不同，于是打开文档就开干。 layui - 经典模块化前端框架（入坑篇）

模块化规范用法

既然是模块化，当我们想使用layui的组件时，比如我们使用layui的form模块，那么我们就这样引入组件：

<!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建议我们使用组件时，先建立一个模块作为入口：

<script>
layui.config({
  base: '/res/js/modules/' //你的模块目录
}).use('index'); //加载入口
</script>

上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：

/**
  项目JS主入口
  以依赖Layui的layer和form模块为例
**/    
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer,
  form = layui.form();

  layer.msg('Hello World');

  exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});

这样做了过后，模块化的思路就逐渐清晰，也发觉确实是不一样啊哈哈。

底层支持

全局配置

方法：layui.config(options)

你可以在使用组件之前，全局化配置一些参数。目前支持的全局配置项如下：

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

定义模块

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

通过该方法可定义一个 Layui模块。参数mods是可选的，用于声明该模块所依赖的模块。callback即为模块加载完毕的回调函数，它返回一个exports参数，用于输出该模块的接口。

layui.define(function(exports){
  //do something

  exports('demo', function(){
    alert('Hello World!');
  });
});

跟Requirejs最大不同的地方在于接口输出，exports是一个函数，它接受两个参数，第一个参数为模块名，第二个参数为模块接口，当你声明了上述的一个模块后，你就可以在外部使用了，demo就会注册到layui对象下，即可通过 layui.demo() 去执行该模块的接口。

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

layui.define(['layer', 'laypage'], function(exports){
  //do something

  exports('demo', function(){
    alert('Hello World!');
  });
});

上述的['layer', 'laypage']即为本模块所依赖的模块，它并非只能是一个数组，你也可以直接传一个字符型的模块名，但是这样只能依赖一个模块。

加载所需模块

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

Layui的内置模块并非默认就加载的，他必须在你执行该方法后才会加载。它的参数跟上述的 define方法完全一样。
另外请注意，mods里面必须是一个合法的模块名，不能包含目录。如果需要加载目录，建议采用extend建立别名（详见组件规范）

layui.use(['laypage', 'layedit'], function(){
  var laypage = layui.laypage,
  layedit = layui.layedit;

  //do something
});

该方法的函数其实返回了所加载的模块接口，所以你其实也可以不通过layui对象赋值获得接口.

layui.use(['laypage', 'layedit'], function(laypage, layedit){

  //使用分页
  laypage();

  //建立编辑器
  layedit.build();
});

第三方支撑

Layui部分组件依赖jQuery（比如layer），但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块，当你去使用layer的时候，它会首先判断你的页面是否已经引入了jQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。

另外，我们的图标取材于阿里巴巴矢量图标库（iconfont），构建工具采用 Gulp 。

除此之外，不依赖于任何第三方工具。最后，向jQuery（自信地采用，不爽者请去抱React、Vue等大腿）/iconfont/Gulp致敬！

预先加载

开门见山，还是直接说使用比较妥当。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);
    }
  })
});

结语

layui 的模块化用起来还是挺舒服，需要用什么组件就加载什么组件然后再来使用，而且也很轻量级，此外，我很喜欢layui的ui，以及他的一些组件，作为一个国产的前端框架，我觉得大家可以尝试一下，因为我也是很支持国产的。 layui - 经典模块化前端框架（入坑篇）

以上代码基于1.0版本，现2.x可能有所不同，请各位知悉！