关于layui的exports相关

最新推荐文章于 2025-02-20 16:25:01 发布

施小楠

最新推荐文章于 2025-02-20 16:25:01 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui

本文链接：https://blog.csdn.net/qq_29278623/article/details/110131120

layui 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了layui自定义模块相关内容。以自定义uzoome模块uzoome.js为例，该模块依赖Jquery和element模块，exports输出模块接口有函数、方法、对象三种形式，并说明了不同形式下的调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义模块部分

首先自定义一个uzoome模块uzoome.js，依赖Jquery和element模块：

layui.define(['element', 'jquery'], function (exports) {
    var el = layui.element;
    var $ = layui.$;
    function getUser() {
        alert('施小楠');
    }
    exports('uzoome', function () {
        return getUser
    });
});

exports输出模块接口是一个函数

它接受两个参数，第一个参数为模块名(此方法名必须和定义的js同名)，第二个参数为模块接口

当你声明了上述的一个模块后，你就可以在外部使用了

这里的uzoome模块给外部的接口是一个匿名函数。而这个匿名函数返回值也是一个函数，所以我们在调用uzoome时候

调用如下：

<script src="./layui/layui.js"></script>
<script>
    layui.use(['form', 'element', 'uzoome'], function () {
        var uzoome = layui.uzoome;
        uzoome()();
    });
</script>

exports模块接口是一个方法

layui.define(['element', 'jquery'], function (exports) {
    var el = layui.element;
    var $ = layui.$;
    function getUser() {
        alert('施小楠');
    }
    exports('uzoome', getUser);
});

调用如下：

<script src="./layui/layui.js"></script>
<script>
    layui.use(['form', 'element', 'uzoome'], function () {
        var u = layui.uzoome;
        u();
    });
</script>

exports输出的模块接口是一个对象

layui.define(['element', 'jquery'], function (exports) {
    var el = layui.element;
    var $ = layui.$;
    var obj = {
        name: '施小楠',
        age: '18',
        getUser: function () {
            alert(this.name);
        }
    };
    exports('uzoome', obj);
});

调用如下：

<script src="./layui/layui.js"></script>
<script>
    layui.use(['form', 'element', 'uzoome'], function () {
        var zoom = layui.uzoome;
        zoom.getUser();
        alert(zoom.age);
    });
</script>