Layui 模块开发时调用的三大方式；第三种方式“无敌”-CFANZ编程社区

在读这篇文章前，作者默认你已经读过，官方的模块介绍

https://www.layui.com/doc/base/modules.html

首先你是要引入layui.js的

<script src="./layui/layui.js" charset="utf-8"></script>

结构介绍

假如：你的项目（站点/网站）结构是这样的

站点

├───js

├──layui

└──layui.js

└──MyModule

└───common.js

└───my.js

项目（站点/网站）根目录里有个js文件夹

js文件夹里有2个文件夹分别是layui和MyModule

layui文件夹放的是所有layui文件

MyModule文件夹放的是我们自己定义的模块文件，里面有2个文件分别是common.js和my.js

我们定义的模块文件

MyModule文件夹

common.js

layui.define(function (exports) { //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);

    var obj = {
        commonName:'我是common;一个公共的js，主要用于建立约束，类似config'
        //自定义请求字段
        ,request: {
            tokenName: "access_token"//自动携带 token 的字段名（如：access_token）。可设置 false 不携带。
        }
        //自定义响应字段
        , response: {
            statusName: 'code' //数据状态的字段名称
            , statusCode: {
                  ok: 1 //数据状态一切正常的状态码 0:失败，1：成功
                , logout: 0 //登录状态失效的状态码
            }
            , msgName: 'msg' //状态信息的字段名称
            , dataName: 'data' //数据详情的字段名称

        }

    };

    //输出common接口
    exports('common', obj);
});

注意：exports('common', obj)的第一个参数一定要和你的js文件名一致，除非你对layui的模块加载十分了解。

my.js

layui.define(['layer'],function(exports){ //提示：我们这里引入了layui的弹窗layer模块；模块也可以依赖其它模块，如：layui.define('layer', callback);
var layer = layui.layer;
var obj = {
  hello: function(str){
    layer.msg("我是my.js");
  }
};

//输出my接口
exports('my', obj);
});

注意：exports('my', obj)的第一个参数一定要和你的js文件名一致，除非你对layui的模块加载十分了解。

模块调用

第一种方式调用

里面的common和my是我们刚才写的js 文件

<script>
  //第一种
  layui.config({
    base: '/js/MyModule/' //你定义的模块文件夹所在路径
  }).extend({
    common:'common' //主入口模块 
    ,my: 'my'
  }).use(['common', 'my'], function () {
    var common =layui.common
        ,my=layui.my;
    alert(common.commonName);
    my.hello();
  })
</script>

效果

Layui 模块开发时调用的三大方式；第三种方式“无敌”_html

Layui 模块开发时调用的三大方式；第三种方式“无敌”_html_02

第二种方式调用

里面的common和my是我们刚才写的js 文件

这里我们省略了config()

//第二种
    layui.extend({
      common:'/js/MyModule/common' //模块所在完整路径
    ,my: '/js/MyModule/my'
  }).use(['common', 'my'], function () {
    var common =layui.common
        ,my=layui.my;
    alert(common.commonName);
    my.hello();
  })

第三种方式调用

第一步：

找到layui.js所在位置并打开它，根据我们前面介绍的它的路径是“项目>js>layui>layui.js”

第二步：

找到代码末端，然后，换行，粘贴下面代码

layui.config({
    base: '/js/MyModule/' //你定义的模块文件夹所在路径
  });

base的值是你定义的模块文件夹所在路径

这样的好处就是，一次写好自定义的模块路径，不用每次都去写一边（复制粘贴也是时间^_^）

如图：

Layui 模块开发时调用的三大方式；第三种方式“无敌”_字段_03

调用时的代码

//第三种
   layui.extend({
    common:'common' //主入口模块 
    ,my: 'my'
  }).use(['common', 'my'], function () {
    var common =layui.common
        ,my=layui.my;
    alert(common.commonName);
    my.hello();
  })

代码有木有干净好多？哈哈

个人心得分享

提示：下面代码是在“第三种方式调用”的基础上写的

我个人喜欢模块话后，一个页面一个模块，让html页面更纯净

那么，我们在MyModule文件夹下建立一个message.js假设他是消息页面专属独立的js，其他页面不会需要他

message.js

layui.define(['common','my'],function(exports){ //提示：这里我们引用了刚才我们自己写的模块
var my = layui.my;
var common = layui.common;
var obj = {};

alert("我是message.js\r"+common.commonName)
my.hello();

//输出接口
exports('message', obj);
});

message.html页面代码

<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title>message页面</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <script src="js/layui/layui.js" charset="utf-8"></script>
  <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
  <h1>message页面</h1>
</body>
<script> 
   layui.extend({message: 'message'}).use('message')  
</script>

</html>