溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

layui中模塊化和非模塊化的區(qū)別以及使用方法

發(fā)布時間：2020-06-23 22:51:12 來源：億速云 閱讀：297 作者：元一 欄目：web開發(fā)

本篇文章展示了layui中模塊化和非模塊化的區(qū)別以及使用方法具體操作，代碼簡明扼要容易理解，絕對能讓你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

Redis的模塊采用的是動態(tài)鏈接庫的方式，可以啟動的時候加載，也可以在運行時加載（MODULE LOAD）,在Linux系統(tǒng)里面，可以通過dlopen，dlsym等實現(xiàn)動態(tài)加載庫，在業(yè)務(wù)系統(tǒng)里面，經(jīng)常用于將業(yè)務(wù)代碼和框架代碼進行分離，以實現(xiàn)插件化開發(fā)。在Redis里面也是同樣的道理。要實現(xiàn)分離，首先需要的是初始化，以便讓框架可以找到對應(yīng)的方法，這就需要進行注冊，Redis通過RedisModule_Init方法進行注冊模塊，和RedisModule_CreateCommand注冊自定義方法。
Redis進行模塊化，可以擴大Redis的生態(tài)圈，滿足一些擴展性功能需求，現(xiàn)在就有一個Hub用于收集Redis模塊的插件。

非模塊化和模塊化的區(qū)別是

非模塊化不用每次都調(diào)用layui.use([],fun...)引入對應(yīng)模塊，引入的JS是/layui/layui.all.js

模塊化必須每次都調(diào)用layui.use([],fun...)引入對應(yīng)模塊，引入的JS是/layui/layui.js　　(推薦這種，但是寫起來不太方便)

/layui/layui.js會包含/layui/layui.js的所有功能，引入這個JS會加載所有的模塊，無需自動引入模塊，會使layui失去模塊化的意義，但是寫起來確實方便多了。因此layui官方推薦使用模塊化的方式。

1、模塊化的使用:

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

遵循 layui 的模塊規(guī)范建立一個入口文件，并通過 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>
    /*必須使用這個方法先引用對應(yīng)的模塊*/
    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;
    });
    //獲取選中的元素的個數(shù)
    var length_1 = $("[name='dictionaryCheckbox']:checked").length;
    //1.如果選中的個數(shù)為0，直接退出函數(shù)，提示選擇字典刪除
    if(length_1 ==0 ){
        layer.alert("請選中需要刪除的字典")
        return ;
    }
    //如果有元素需要被刪除
    else{
        if(!confirm("您確認(rèn)要刪除下列字典?")){//點取消也退出函數(shù)
            return;
        }
        //第二種方式，以數(shù)組的方式去提交。后臺用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')
        //刪除的業(yè)務(wù)邏輯
    }
}

也可以將layer和form作為全局變量引入使用：

/**
 * @author: qlq
 * @time: 9:31
 * @description:    添加培養(yǎng)方案的JS
 */

/**
 * 一次性自調(diào)函數(shù)初始化兩個全局變量
 */
var lyer,form;
(function () {
    layui.use(['layer','form'],function () {
        layer=layui.layer,form=layui.form;
    })
})();

/**
 * 頁面加載完成后執(zhí)行一些函數(shù)
 */
$(function () {
    layer.msg("消息框")
});


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

2、非模塊化的使用:

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

采用“一次性加載”的方式。當(dāng)你采用這樣的方式時，你無需再通過 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>
    /*必須使用這個方法先引用對應(yīng)的模塊*/
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
</script>
</body>
</html>

看完上述內(nèi)容，你們掌握layui中模塊化和非模塊化的使用方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手