首頁 web前端 Layui教程 layui的模組化和非模組化使用(附程式碼)

layui的模組化和非模組化使用(附程式碼)

Nov 26, 2019 pm 05:38 PM
layui

layui的模組化和非模組化使用(附程式碼)

非模組化和模組化的區別是

非模組化不用每次都呼叫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([&#39;layer&#39;],function () {
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
    })
</script>
</body>
</html>
登入後複製

補充:為了方便使用可以使用下面方法引入:

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

也可以將layer和form作為全域變數引入使用:

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

/**
 * 一次性自调函数初始化两个全局变量
 */
var lyer,form;
(function () {
    layui.use([&#39;layer&#39;,&#39;form&#39;],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([&#39;layer&#39;],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的模組化和非模組化使用(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

layui怎麼取得表單數據 layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui怎麼取得表單數據

layui登陸頁怎麼設定跳轉 layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui登陸頁怎麼設定跳轉

layui如何實現自適應 layui如何實現自適應 Apr 26, 2024 am 03:00 AM

layui如何實現自適應

layui和elementui哪個好 layui和elementui哪個好 Apr 04, 2024 am 04:15 AM

layui和elementui哪個好

layui怎麼運行 layui怎麼運行 Apr 04, 2024 am 03:42 AM

layui怎麼運行

layui框架是什麼語言 layui框架是什麼語言 Apr 04, 2024 am 04:39 AM

layui框架是什麼語言

layui跟vue有啥差別 layui跟vue有啥差別 Apr 04, 2024 am 03:54 AM

layui跟vue有啥差別

layui框架和vue框架的區別 layui框架和vue框架的區別 Apr 26, 2024 am 01:27 AM

layui框架和vue框架的區別

See all articles