Modulare und nicht-modulare Verwendung von Laui (mit Code)-Layui-Tutorial-php.cn

Modulare und nicht-modulare Verwendung von Laui (mit Code)

尚

Freigeben： 2019-11-26 17:38:02

nach vorne

2443 Leute haben es durchsucht

Modulare und nicht-modulare Verwendung von Laui (mit Code)

Der Unterschied zwischen nicht-modular und modular ist

Nicht-modular Es besteht keine Notwendigkeit,layui.use([] aufzurufen, macht Spaß ..) Stellen Sie das entsprechende Modul vor: /layui/layui.all.js

Modularisierung Sie müssen jeden Taglayui.use([], fun...) aufrufen Zeit Führen Sie das entsprechende Modul ein: /layui/layui.js　(Dies wird empfohlen, ist aber nicht bequem zu schreiben)

/layui/layui.js enthält alle Funktionen von /layui/. Durch die Einführung dieses JS werden alle Module geladen. Es besteht keine Notwendigkeit, Module automatisch einzuführen, wodurch Laui die Bedeutung der Modularität verliert, aber es ist in der Tat viel bequemer zu schreiben. Daher empfiehlt Lauii offiziell die Verwendung des modularen Ansatzes.

1. Modulare Verwendung:

Hinweis: Das eingeführte JS ist: /layui/layui.js

Befolgen Sie die Modulspezifikation vonlayui An Eintragsdatei und laden Sie die Eintragsdatei überlayui.use()

Zum Beispiel:

<!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>

Nach dem Login kopieren

Ergänzung: Der Einfachheit halber können Sie zum Importieren die folgende Methode verwenden:

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;)
        //删除的业务逻辑
    }
}

Nach dem Login kopieren

Sie können Ebene und Form auch als globale Variablen einführen:

/**
 * @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   *****************/

Nach dem Login kopieren

2. Nicht-modulare Verwendung:

Hinweis: Das importierte JS ist /layui/layui all .js

verwendet die Methode „einmaliges Laden“. Wenn Sie diese Methode übernehmen, müssen Sie das Modul nicht mehr über die Methodelayui.use () laden, sondern können es direkt verwenden, z. B.:

Zum Beispiel:

<!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>

Nach dem Login kopieren

3. Ergänzung

1. Nicht-modulare Methoden können nicht direkt in der Modulmethode verwendet werden

Zum Beispiel: (Die folgende Einführung ist modulares JS, verwendet jedoch die nicht-modulare Methode um einen Fehler zu melden)

<!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>

Nach dem Login kopieren

2. Modularisierung kann in Nicht-Modularisierung verwendet werden

Zum Beispiel: Folgendes funktioniert normal, ist aber nicht notwendig

<!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>

Nach dem Login kopieren

3. Wenn Modularisierung und Nicht-Modularisierung gleichzeitig eingeführt werden, kann die Nicht-Modularisierungsmethode verwendet werden, aber nicht-modulares JS muss nach der Modularisierung eingeführt werden

Zum Beispiel:

<!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>

Nach dem Login kopieren

Für mehr Laui Wenn Sie über Kenntnisse verfügen, beachten Sie bitte die Spalte Tutorial zur Verwendung von Lauii.

Das obige ist der detaillierte Inhalt vonModulare und nicht-modulare Verwendung von Laui (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!