Layui 模块化教程(说人话版本)

官方对于layui模块化的说明只言片语，看得我着实有点懵逼，还好有万能群友帮助，总算明白要怎么写了，为此特意出个教程。

模块化优点

相比于传统的jq模块，layui模块他在于导入方式和不占据浏览器资源请求额度(一般一次只能6个)，且调用也方便。

jq模块是需要自己手动在html里创建script元素并src引用js文件，这样即便我们丢到body的最后面加载，也是需要占用下载数量的，并且如果你要调用这个模块，你的js必须在该模块之后才行。这也是传统js调用的一个模式。

layui模块他的原理是js创建script元素并插入，而这样创建的script是不占据下载资源数量的，并且调用时只需要在layui的方法里输入对应的模块名字即可。

模块路径

既然模块js文件是动态插入的，那么我们肯定需要两个东西

1. 模块的路径
2. 模块的名字

layui提供了一个方法，用于设置模块的加载路径和模块名。

layui.config({
  base: "./xxx/xxx"
})

base的路径是相对于自己这个js文件的路径，但是有些环境相对路径并不正确，这就需要你固定路径了，比如:https://www.xxxx.com/lay/js/

路径有了我们还需要文件名，layui有个默认名，就是你调用的模块名，比如我调用的是一个qrcode模块，那么他会自动生成这样一个路径:

https://www.xxxx.com/xxx/xxx/qrcode.js

一般来说可能够用了，但是我们有可能遇到模块名很简单，js文件名很复杂的，比如压缩的js文件，他的文件名是带min的，qrcode.min.js

那么官方默认的就不行了，我们需要手动调整

layui.config({
  base: "./xxx/xxx"
}).extend({
  qrcode: "qrcode.min"
});

extend接收一个对象参数，参数里面的key对应调用的模块名，只要有对应的key，那么会使用key对应的value值路径，注意，不需要.js后缀

此时路径为:

https://www.xxxx.com/xxx/xxx/qrcode.min.js

一切都设置好后，这段js代码我们可以单独保存为layui.config.js文件，并在引入layui.js文件后引入，作为自定义模块入口文件，所有的自定义模块路径都可以在这里进行定义。

模块格式

layui.define(["你需要使用的layui模块"],function(exports){
  ……自己写的模块方法

  exports("模块名",需要导出的模块方法)
});

define第一个参数为你需要使用的layui模块，也就是说你可以在模块里面使用其他模块，如果只有一个模块，你可以直接这样写：

layui.define("layui模块名",function(exports){
  ……自己写的模块方法

  exports("模块名",需要导出的模块方法)
});

其实和use的用法差不多了，第一个参数的使用上。

如果你不需要使用依赖模块，第一参数你可以填一个空的数组，如果是一个空的字符，会报错的，null也会报错

layui.define([],function(exports){
  ……自己写的模块方法

  exports("模块名",需要导出的模块方法)
});

模块导出

layui模块他有两种模式，一种是引用后自动运行了，一种是需要手动运行，这种一般都是带参数的，我们一个个来。

自运行

layui.define("jquery",function(exports){
  let $ = layui.jquery;
  $.fn.test=function(){
    return "我是一个自动添加的jq模块";
  };

  exports("test",null)
});

exports导出的时候，第一个为模块名，第二个为要导出的方法名，如果没有需要导出，就为null，比如这里我们只是给jq加了个方法，所以不需要导出。

将这段代码保存为一个js文件，丢入我们的模块目录，这个目录自己定，自己创建的，然后有需要再layui.config.js里面对这个模块引用路径进行调整。

调用

layui.use(["jquery","test"],function(){
  let $ = layui.jquery;

  $.test();
});

这是常见的jq使用的方法，还有一种就是不需要再调用里面触发的，只要use就能自运行的

layui.define("",function(exports){

  alert("直接运行的");

  exports("test",null)
});

调用

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

});

这样就会直接弹窗。

手动运行

和自运行其实差不了多少，只是写法上的变更

layui.define("",function(exports){

  function test(options){
    if(options){
      console.log("有参数",options.test);
    }else {
     console.log("无参数");
    }
  };

  exports("test",test);
});

调用

layui.use("test",function(){
  const test = layui.test;

  //运行
  test({test:"无用的消息"})
});

当然也可以这样调用

layui.use("test",function(){
  //运行
  layui.test({test:"无用的消息"});

});

不过不怎么建议，推荐还是上一种，也是layui官方使用的方式。

至此，模块化就这样了，其实很简单，只要说人话，就很容易理解，快速入门。