hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

【WEB前端开辟】layui的模块化和非模块化运用(附代码)

2019-11-27后端开发ki4网24°c
A+ A-

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

非模块化不必每次都挪用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() 体式格局来加载该进口文件

比方:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模块化的运用</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <!--引入这个JS-->
    <script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<script>
    /*必需运用这个要领先援用对应的模块*/
    layui.use(['layer'],function () {
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
    })
</script>
</body>
</html>

补充:为了轻易运用能够运用下面要领引入:

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作为全局变量引入运用:

/**
 * @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() 要领加载模块,直接运用即可,如:

比方:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>非模块化的运用要领</title>

    <link rel="stylesheet" href="./layui/css/layui.css">

    <!--引入这个JS-->
    <script type="text/javascript" src="./layui/layui.all.js"></script>
</head>
<body>

<script>
    var layer = layui.layer;
    layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
</script>
</body>
</html>

3、补充

1.在模块法中不能直接运用非模块化的要领

比方:(下面引入是模块化JS却运用非模块化要领报错)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模块化的运用</title>
    <link rel="stylesheet" href="./layui/css/layui.css">

    <!--引入这个JS-->
    <script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<script>
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
</script>
</body>
</html>

2.非模块化中能够运用模块化

比方:下面一般运转,然则没必要

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>非模块化的运用要领</title>

    <link rel="stylesheet" href="./layui/css/layui.css">

    <!--引入这个JS-->
    <script type="text/javascript" src="./layui/layui.all.js"></script>
</head>
<body>

<script>
    layui.use(['layer'],function () {
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
    })
</script>
</body>
</html>

3.同时引入模块化和非模块化的话能够运用非模块化要领,然则非模块化的JS必需在模块化以后引入

比方:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模块化的运用</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <!--引入这个JS-->
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script type="text/javascript" src="./layui/layui.all.js"></script>
</head>
<body>
<script>
    /*必需运用这个要领先援用对应的模块*/
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
</script>
</body>
</html>

更多layui学问请关注layui运用教程栏目。

以上就是layui的模块化和非模块化运用(附代码)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开辟】layui的模块化和非模块化运用(附代码)

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>