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

92 0

官方对于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官方使用的方式。

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

0
  • 本文分类:Layui
  • 本文标签:layui模块化
  • 流行热度:已超过 92 人围观了本文
  • 最后更新:2020年10月4日 - 19时02分19秒
  • 发布日期:2020年09月24日 - 8时48分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码