layui入门那些事儿

---

一、layui入门初接触 —— 文档为本

官方文档说明可以点击后面链接? layui开发使用文档。同时官方还给出了layer的独立模块?layer弹出层插件

初次了解layui是在2017年，在维护一个老系统时，由于当时需要一个弹框提示作为作业调度系统的展示提醒（Quartz.Net），在网上一波查找，就被layer清新脱俗的外表给吸引了。可对突如其来的 layui 和 layer 两个如此相近的名词给整懵了。起初对模块的理解不清晰，以为 layui = layer，致使踩坑不断，bug连连。

由于没有认真研读官方文档，导致对layui自带的jquery充耳不闻，以至于引入其他版本jquery，还是未参考官方的引入方式，不过最终还是实现了功能，只是中间的过程非常的曲折。由此可得，

【文档非常重要】！important 错误代码就不示范了，免得【误人子弟】

二、layui再回首 —— layuiCMS

再次接触已是2018年，而这次相遇的却是因为 layuiCMS 这次还是因为他的清新脱俗，让我再次沦陷。什么，肤浅？不存在，不存在的。始于才华，忠于技术，这就是我们技术人的品质嘛。

layuiCMS的整体设计核心部分为bodyTab.js与index.js，目录如下图：

以及引入的layui的整体模块包，最为常用的就是layui.css和layui.js，目录如图所示：

layuiCMS在这里不详谈，里面的功能还是比较全面，有兴趣的可以直接点击这儿layuiCMS

今天我们就只是简单说说layui模块的使用，通常情况下只需导入以下两个文件即可。

导入一个layui.css代码和layui.js代码：

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

	<script type="text/javascript" src="/layui/layui.js"></script>

栗子1：模块化layer的简易弹框

<script src="/layui/layui.js"></script>
//layui的日常使用
layui.use(['layer', 'jquery'], function () {
	var layer = layui.layer
        , $ = layui.jquery;
	//通过调用layer模块下的对象方法来进行弹框提示
	//以下语句分别执行
	layer.alert('hello world');
	layer.msg('hello world');
});

以上语句分别执行的结果如图：

栗子2：非模块化用法

如果使用非模块化的调用，则是引入 layui.all.js 文件，但官方给出的建议是不推荐，所以，这里只做参考。

    <script src="../layui/layui.all.js"></script>  
    <script>
    ;!function(){
      //无需再执行layui.use()方法加载模块，直接使用即可
      var form = layui.form
      ,layer = layui.layer;
      
      //…
    }();
    </script> 

栗子3：自定义模块layui.define

自定义模块于根目录 js/modules/，文件名 tabs.js，定义两个方法set和func，注：exports中的模块名一定要和文件名一样（官方未给出明确的说法，但仔细琢磨应该是这么回事儿）

//自定义模块于根目录 js/modules/，文件名 index.js
layui.define(["jquery", "layer"], function (exports) {
    var $ = layui.$
    	, layer = layui.layer
        , Tab = function () {
            this.tabConfig = {
                openTabNum: undefined  //设置一个参数，用于初始传值全局变量
            }
        };
    //参数设置
    Tab.prototype.set = function (option) {
        var _this = this;
        $.extend(true, _this.tabConfig, option);
        return _this;
    };
    //方法
    Tab.prototype.func = function (Info) {
        layer.alert(Info);
    };

    var tabs = new Tab();
    //把模块往外抛，注意：模块名必须和use时的模块名一致
    exports('tabs', function (option) {
        return tabs.set(option);
    });
});

调用 js/modules/ 目录下的 tabs.js 模块

<script src="/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
    base: '/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
}).use("tabs") //加载入口
//使用自定义模块
layui.use(['tabs'],function(){
	var tab = layui.tabs({
		openTabNum: "50"
	});
	//调用模块方法
	tab.func("模块定义成功");
}); 
</script>

结果：

明白了以上这些个操作，那你对layui就已经是有了入门水平。接下来要做的就是对照官方的文档来进行内置模块的调用。