layui如何使用公共模块

2021-04-16 13:42发布

16条回答
我是大脸猫
2楼 · 2021-04-16 14:27

在使用layui的过程,有几个方法需要被多个js引用,所以我按照文档,自定义了一个layui的模块,下面实现过程


先定义一个模块

//定义模块

layui.define(['form'], function(exports){


    var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功

    var $ = layui.$;


    var obj = {

        changeParentPlace: function (parentId,tagId,levelPlace) {

            $.ajax({

                url:ctx + '/base/place/changeParentPlace',

                type:'get',

                data:{

                    parentId:parentId

                },

                dataType:'json',

                success:function (data) {

                    $("#" + tagId).empty();

                    $("#" + tagId).append('

                    if(data.result != null && data.result.length != 0) {

                        $.each(data.result,function(i,place) {

                            if(levelPlace == place.name) {

                                $("#" + tagId).append('

                            }else {

                                $("#" + tagId).append('

                            }

                        })

                    }

                    form.render('select'); //刷新select选择框渲染

                }

            })

        }

    }


    //输出模块

    exports('common', obj);

});


定义方法使用layui.define

define中的第一个参数可以加载一些layui中内置的模块来使用,第二个回调方法中定义一些公共的方法

exports的第一参数是这个模块起的名字,第二个参数是一个对象该对象中定义了这三个方法



20200921文 - 做更棒的自己!
3楼 · 2021-04-16 14:39

layer比较特殊,只要use了layer,layer就是全局的!
其他所有模块皆是用layui.define()定义的layui模块
必须使用 layui.模块名 的方式调用!

小橘子
4楼 · 2021-04-16 15:33

一、模块使用

1、自定义模块

第一个参数是可选的,用于声明该模块所依赖的模块,可以为数组依赖多个模块,也可以为单个字符串依赖单个模块。第二个参数即为模块加载完毕的回调函数,它返回一个exports参数,用于输出该模块的接口。

exports参数是一个函数,第一个参数指定自定义模块的模块名,第二个参数为模块接口(对象、函数、变量等等)。第一个参数可以认为是Java中的对象引用名,第二个参数是真正的对象。

注意:js文件名要和模块名一致

layui.define(['layer', 'laypage'], function(exports) {
    console.log("进入helloworld的define")
    var obj = {
        name : "yang",
        hello : function() {
            console.log("helloworld");
        }
    }
    exports('helloworld', obj);});

2、使用模块

需要先引入layui.js文件才能生效,这时候页面加载完成后就会通过layui.use加载helloworld模块,加载完成后回调第二个参数的函数。

[removed]
    //全局配置    layui.config({
        //你存放新模块的目录,注意,不是layui的模块目录,引入第三方模块需要定义的         base: 'resource/lay/modules/' 
    });
    layui.use('helloworld', function() {
        //获取模块实例        var helloworld = layui.helloworld;
        //使用模块实例中的变量和函数(如果模块实例定义的接口是仅仅是一个函数通过helloworld()调用)        console.log(helloworld.name);
        helloworld.hello();
    });[removed]进入helloworld的defineyanghelloworld

其实关于模块的核心,就是 layui.js 的两个底层方法:一个用于定义模块的 layui.define(),一个加载模块的 layui.use()

官方文档

二、LayUI的坑

1、不要动下载好的layui的css和js文件路径,会导致后面样式找不到的问题


请叫我雷锋叔叔啊
5楼 · 2021-04-16 15:40

第一步:新建一个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 全局定义


        [removed]

        //方法 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();

        });

        [removed]

第二:使用layui.extend 再use


        [removed]

        // 方法 2

        //layui扩展模块的两种加载方式 - 示例

        layui.extend({

            myFirstModel: '{/}../../static/js/myFirstModel' // {/}的意思即代表采用自有路径,即不跟随 base 路径

        });

        //使用拓展模块

        layui.use('myFirstModel', function () {

            var mym = layui.myFirstModel

            mym.hello(' 使用了方法2'); //弹出 Hello World!

        });

        [removed]

注意:


base属性,指明js所定义的模块的相对(相对于根目录)路径


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



注意:js文件名要和模块名一致

layui.define(['layer', 'laypage'], function(exports) {
    console.log("进入helloworld的define")
    var obj = {
        name : "yang",
        hello : function() {
            console.log("helloworld");
        }
    }
    exports('helloworld', obj);});


我想吃肉
7楼 · 2021-04-16 19:46

需要先引入layui.js文件才能生效,这时候页面加载完成后就会通过layui.use加载helloworld模块,加载完成后回调第二个参数的函数。

[removed]
    //全局配置    layui.config({
        //你存放新模块的目录,注意,不是layui的模块目录,引入第三方模块需要定义的         base: 'resource/lay/modules/' 
    });
    layui.use('helloworld', function() {
        //获取模块实例        var helloworld = layui.helloworld;
        //使用模块实例中的变量和函数(如果模块实例定义的接口是仅仅是一个函数通过helloworld()调用)        console.log(helloworld.name);
        helloworld.hello();
    });[removed]进入helloworld的defineyanghelloworld


我的网名不再改
8楼 · 2021-04-17 15:25

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


步骤如下:


第一步:新建一个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 全局定义


        [removed]

        //方法 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();

        });

        [removed]

第二:使用layui.extend 再use


        [removed]

        // 方法 2

        //layui扩展模块的两种加载方式 - 示例

        layui.extend({

            myFirstModel: '{/}../../static/js/myFirstModel' // {/}的意思即代表采用自有路径,即不跟随 base 路径

        });

        //使用拓展模块

        layui.use('myFirstModel', function () {

            var mym = layui.myFirstModel

            mym.hello(' 使用了方法2'); //弹出 Hello World!

        });

        [removed]

注意:


base属性,指明js所定义的模块的相对(相对于根目录)路径


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


最后结果如下:


任@先生
9楼 · 2021-04-18 13:45

layer比较特殊,只要use了layer,layer就是全局的!
其他所有模块皆是用layui.define()定义的layui模块
必须使用 layui.模块名 的方式调用!

相关问题推荐

  • 回答 120

    相对前几年来说,要高上不少了,毕竟入行的人也是越来越多了,基础的工作对应想要参与的人群基数越来越大,但是对于高端人才的需求还是很多,人才还是相对稀缺性的。所以,想要学web或者其他技术也一样,别等,别观望。web前端就业方向特别多包括web前端开发...

  • 回答 25

    相对定位和绝对定位是定位的两种表现形式,区别如下:一、主体不同1、相对定位:是设置为相对定位的元素框会偏移某个距离。2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。二、特点不同1、相对定位:在使用相对定位时,无论是否进行移...

  • 抓包是什么意思?2020-04-01 17:36
    回答 7
    已采纳

    抓包(packet capture)就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析,可以得到有用的信息。目前流行的...

  • 回答 89

    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等

  • 回答 65
    已采纳

    前端是目的就业前景非常不错的一个计算机技术,但是自学的话还是有一定难度的,网络上自学是碎片化的,同时互联网技术跟新换代快,自己的话比较吃力也学习不到最新的技术。

  • SSR 是什么意思?2020-03-20 18:56
    回答 6

    SSR就是一台服务器,可以利用 SSR 在远程的服务器上配置 SSR,使其能够成为 SSR 节点,这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR(简称 SSR)是 Shadowsocks 分支,在 Shadowsocks 的基础上增加了一些数据...

  • 回答 11

    1、代码判断xAxis: {type: 'time',splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time,然后设置对应X轴......

  • 回答 52
    已采纳

    计算机培训方向比较多,建议找适合自己的方向选择培训编程类:JAVA、WEB、Python、C/C++、C#等测试类:软件测试运维类:云计算、网络安全设计类:UI设计、3D建模等

  • 回答 8

    HTML5 + CSS + JavaScript 开发 跨平台重用代码 

  • 回答 4

    采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。

  • 回答 10

    iView UI、ioni、SUI

  • 回答 6

     jQTouch 

  • 回答 4

    如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app(对应vue语法)taro(对应react) 或者纯原生 这个没有限制的,自己怎么舒服怎么来

  • 回答 4

    因为可以运用在网页和小程序的开饭中,而且开源,用着便宜,企业都很喜欢

  • 回答 10

    一、Visual Studio Code下载地址:https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...

  • 回答 9

    jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 

没有解决我的问题,去提问