Layui自定义模块的使用方式

以下是官方样例 说明

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

按照官方给的例子 顺序大概是

步骤如下：

第一步：新建一个js文件 写 一个 模块 该模块写在一个JS文件中如： XX模块.js，目录自选（不在layui的目录下）
 

在 myFirstModel.js文件中 代码如下  可以直接拷贝到一个空白的js文件中 文件名称 为myFirstModel.js

layui.define(function (exports) {
    // 设置对象 可在对象里面设置相关的 属性或者方法 
    var defineFunc = {
        objs:"objs 参数",
        init: function (some) {
            alert("init defineFunc" + some)
        },
        getData: function () {
            alert("getData defineFunc")
        }
    };
    //输出模块 参数说明 
    //参数一 是供别人调用时识别的模块接口的名称 
    //第二个参数为该模块中的可调用的对象，通过该对象可以调用指定的模块中的方法
    // 注意 该接口的名称必须和js的文件名相同（此处的js的文件为myFirstModel.js），否则将模块无法被调用。
    exports('myFirstModel',  defineFunc);
});

第二步：调用定义好的模块，在html 页面和js上都可以调用：

第二步的调用有两种方法：

第一：使用layui.config 全局定义

        <script>
        //方法 1
        //设置模块
        layui.config({
            base: './static/js/'//假设这是你存放拓展模块的根目录
        }).extend({ //设定模块别名
            myFirstModel: 'myFirstModel'
        });
        // 使用模块
        layui.use(['myFirstModel'], function () {
            var def = layui.myFirstModel;
            var objs = def.objs;
            def.init(objs);
            def.getData();
        });
        </script>

第二：使用layui.extend 再use

        <script>
        // 方法 2
        //layui扩展模块的两种加载方式 - 示例
        layui.extend({
            myFirstModel: '{/}../../static/js/myFirstModel' // {/}的意思即代表采用自有路径，即不跟随 base 路径
        });
        //使用拓展模块
        layui.use('myFirstModel', function () {
            var mym = layui.myFirstModel
            mym.hello(' 使用了方法2'); //弹出 Hello World!
        });
        </script>

注意：

base属性，指明js所定义的模块的相对（相对于根目录）路径

以上 myFirstModel: 'myFirstModel' //key和value一般一样，此值和输出接口的名称相同

最后结果如下：

参考：

https://blog.youkuaiyun.com/jialijuan521_zhang/article/details/73556776

请看这篇 这篇文章说的东西很有用 ，它讲述了多种的定义方式和各种方式的调用方法

https://www.cnblogs.com/hss-blog/articles/9055706.html