layui的模块化和非模块化使用(附代码)

小明吖_7545

小明吖_7545

2019-11-26

2680人浏览

转载

非模块化和模块化的区别是

非模块化不用每次都调用layui.use([],fun...)引入对应模块,引入的JS是/layui/layui.all.js

模块化必须每次都调用layui.use([],fun...)引入对应模块,引入的JS是/layui/layui.js  (推荐这种,但是写起来不太方便)

 /layui/layui.js会包含/layui/layui.js的所有功能,引入这个JS会加载所有的模块,无需自动引入模块,会使layui失去模块化的意义,但是写起来确实方便多了。因此layui官方推荐使用模块化的方式。

1、模块化的使用:

注意:引入的JS是:  /layui/layui.js

遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件

例如:

html>


    <meta>
    <title>模块化的使用</title>
    <link>
    <!--引入这个JS-->
    <script></script><script>
    /*必须使用这个方法先引用对应的模块*/
    layui.use(['layer'],function () {
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
    })
</script>

补充:为了方便使用可以使用下面方法引入:

function deleteDictBatch(){
    var form,layer;
    layui.use(['form','layer'],function () {
        form = layui.form;
        layer=layui.layer;
    });
    //获取选中的元素的个数
    var length_1 = $("[name='dictionaryCheckbox']:checked").length;
    //1.如果选中的个数为0,直接退出函数,提示选择字典删除
    if(length_1 ==0 ){
        layer.alert("请选中需要删除的字典")
        return ;
    }
    //如果有元素需要被删除
    else{
        if(!confirm("您确认要删除下列字典?")){//点取消也退出函数
            return;
        }
        //第二种方式,以数组的方式去提交。后台用string接收
        var values = [];
        $("[name='dictionaryCheckbox']:checked").each(function (i) {//i代表索引
            values[i]=$(this).val();
        })
        $.post(contextPath+'/dictionary/deleteDictBatch.do',{dictionaryIds:values.toString()},function(response){
            alert(response);
            if(response == "删除成功"){
                getDictionaryTree();//查询字典树
                getDictionaryFY();//分页查询字典信息
            }
        },'text')
        //删除的业务逻辑
    }
}

也可以将layer和form作为全局变量引入使用:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
/**
 * @author: qlq
 * @time: 9:31
 * @description:    添加培养方案的JS
 */

/**
 * 一次性自调函数初始化两个全局变量
 */
var lyer,form;
(function () {
    layui.use(['layer','form'],function () {
        layer=layui.layer,form=layui.form;
    })
})();

/**
 * 页面加载完成后执行一些函数
 */
$(function () {
    layer.msg("消息框")
});


/**********S   *****************/

2、非模块化的使用:

注意:引入的JS是  /layui/layui.all.js

采用“一次性加载”的方式。当你采用这样的方式时,你无需再通过 layui.use() 方法加载模块,直接使用即可,如:

例如:

html>


    <meta>
    <title>非模块化的使用方法</title>

    <link>

    <!--引入这个JS-->
    <script></script><script>
    var layer = layui.layer;
    layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
</script>

3、补充

1.在模块法中不能直接使用非模块化的方法

例如:(下面引入是模块化JS却使用非模块化方法报错)

html>


    <meta>
    <title>模块化的使用</title>
    <link>

    <!--引入这个JS-->
    <script></script><script>
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
</script>

2.非模块化中可以使用模块化

例如:下面正常运行,但是没必要

html>


    <meta>
    <title>非模块化的使用方法</title>

    <link>

    <!--引入这个JS-->
    <script></script><script>
    layui.use(['layer'],function () {
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
    })
</script>

3.同时引入模块化和非模块化的话可以使用非模块化方法,但是非模块化的JS必须在模块化之后引入

例如:

html>


    <meta>
    <title>模块化的使用</title>
    <link>
    <!--引入这个JS-->
    <script></script>
    <script></script><script>
    /*必须使用这个方法先引用对应的模块*/
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
</script>

更多layui知识请关注layui使用教程栏目。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

2025.09.18

4865

12

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

2025.09.18

2050

13

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

2026.03.17

199

17

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4616

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1395

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1818

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

10183

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

1000

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2904

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习