• 前言

在前面的第一篇文章,我们已经进行了layui的初步准备工作以及简单的使用了,从本篇开始,便正式开始layui的学习.本篇文章主要就layui的基础说明进行学习,以期加深对layui的认识.另外,所有的学习以及参考资源偶都基于layui官方文档.

layui文档

---

核心方法

layui的底层方法是layui的基础支撑,是layui.js核心基础库中几个核心的方法,而在这里,暂时只对其中比较重要的模块定义方法layui.define,模块加载方法layui.use.以及全局配置方法layui.config进行简单的总结介绍.其他一些底层方法,比较详细的内容可以参看官方文档学习.

• layui.config(options) 全局配置方法

该方法是一个全局配置方法,在使用模块之前,进行一些最基本的全局参数配置(在连接外部js模块文件是会经常使用到)

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

我们看看提供的参数,我们可以发现,我们在使用该方法的时候,基本只会使用到base参数来引入我们的外部js文件,甚至如果我们不按照其模块规范使用传统js引入方式的话,我们都不需要设置base参数.

该方法的使用多使用在使用模块规范来引入外部js文件,使用自定义模块的时候使用: 我们看一个简单的例子:

// 通过config方法引入js文件的绝对路径,只需要导入到对应的目录下即可.
layui.config({
       base: '/sty_layui/src/js/'
    })
// 通过layui.use('mods',callback)方法加载(调用)js文件夹下对应的mods模块.
layui.use('sty_module',{}); // 这里第一个mods参数就是需要用到的模块js文件的名字

当然我们还可以使用下面的方法引入不同级的js文件.并且设置别名:

//config的设置是全局的
layui.config({
  base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});

我们还可以直接使用.extend方法直接引入不更随base绝对路径的自定义文件路径,这种方式通常使用在从静态资源服务器上获取js资源文件.

//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({
  mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})

• layui.define(['mods'],callback) 模块定义方法

我们在前面知道layui框架的设计思想是模块化的,并且可以实现按需加载,预先加载等加载模块的方式,以求通过这种方式来达到用更轻量级的内容达到更高效的目的.并且其是支持自定义模块的,自定义模块的好处在于能够大量减少代码的冗杂重复.可以将共用的模块封装起来.

我们通过一个例子来看看模块的定义:

/*外部js文件,将自定义模块封装在外部纯js文件中.*/
layui.define(function (exports) { 
    var obj = {  // 声明一个对象,对象体内部用来书写自定义方法.
        hello: function (str) {
            alert('Hello'+ str);
        }
    };
    exports('mymod',obj);  // exports的两个参数,第一个用来设置当前模块的名称,第二个返回对象obj
});

// define的两个参数,第一个参数用来声明当前模块需要依赖的模块我们可以不填.
// 第二个参数即为模块的回调函数,它返回exprots参数,用于输出该模块的接口.
layui.define(['layer','form'],function (exports) {

    var obj = {
        hello: function (str) {

            alert('Hello'+ str);
        }
    };
    exports('mymod',obj);
});

• layui.use(['mods'],callback)加载模块的方法
  layui的内置模块都是默认不加载的,必须在执行了该方法后才会被加载(当然前提是你使用的是模块化),该方法其实几乎与define方法一样,用法上没有什么区别,我们来看看该如何使用上面我们自定义的模块吧:

// 该方法使用的前提是你已经引入了对应的模块.
  layui.use('mymod',function () {
        var mod = layui.mymod;
        mod.hello('world');
    });

---

模块规范

layui的模块是基于layui.js内部的异步模块加载方式,它自己定义一套更轻量的模块规范,使其在大量的实践后成为layui最核心的模块加载引擎.

• 预先加载
  layui采用的核心加载方法就是layui,use(mods,callback)方法,预先加载,其实就是使用一个大的use方法,将所需的模块都先加载进来,然后在内部进行操作,这样会避免到处写use方法的情况.我们看看官方的示例:

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);
    }
  })
});

• 按需加载
  按需加载其实就是在具体的控件中的事件回调中直接使用use方法,来达到当使用到该事件的时候,模块才被加载的目的.来看看例子:

button.addEventListener('click', function(){
  layui.use('laytpl', function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
    var html = laytpl('').render({});
    console.log(html);
  });
});

显然这种方式并不利于代码的可读性和维护性,当你的js代码较多的时候,这种方式显然是不明智的.

• 扩展一个模块
  layui允许我们随意拓展自定义模块.来达到封装我们自己所需的模块.拓展方法其实在上面定义模块中就有讲到.参考上面描述.

---

页面元素规范

layui提倡返璞归真,遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的HTML和CSS代码，不同的是，在HTML结构上及CSS定义上需要小小遵循一定的规范。

• css命名规范

class命名前缀：layui，连接符：-，如：class="layui-form"命名格式一般分为两种：
一：layui-模块名-状态或类型，
二：layui-状态或类型。因为有些类并非是某个模块所特有，他们通常会是一些公共类。
如：一（定义按钮的原始风格）：class="layui-btn layui-btn-primary"、
二（定义内联块状元素）：class="layui-inline"
大致记住这些简单的规则，会让你在填充HTML的时候显得更加得心应手。

• html规范
• layui在解析HTML元素的时候,必须充分确保其结构是被支持的:

    <div class="layui-tab">
      <ul class="layui-tab-title">
        <li class="layui-this">标题一</li>
        <li>标题二</li>
        <li>标题三</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
      </div>
    </div> 

如果改变了结构，极有可能会导致Tab功能失效。所以在嵌套HTML的时候，你应该细读各个元素模块的相关文档.

• 常用公共属性.

很多时候，元素的基本交互行为，都是由模块自动开启。但不同的区域可能需要触发不同的动作，这就需要你设定我们所支持的自定义属性来作为区分。如下面的 lay-submit、lay-filter即为公共属性.

image.png

---

更新时间:
2019-6-12
15:26