Utilisation modulaire et non modulaire de layui (avec code)-Tutoriel Layui-php.cn

Utilisation modulaire et non modulaire de layui (avec code)

尚

Libérer： 2019-11-26 17:38:02

avant

2425 Les gens l'ont consulté

Utilisation modulaire et non modulaire de layui (avec code)

La différence entre non modulaire et modulaire est

Non modulaire Il n'est pas nécessaire d'appeler layui.use([], amusant ..) Introduisez le module correspondant Le JS importé est /layui/layui.all.js

Modularisation Vous devez appeler layui.use([], fun...) tous les jours. time Introduisez le module correspondant. Le JS importé est /layui/layui.js　(Ceci est recommandé, mais ce n'est pas pratique à écrire)

/layui/layui.js contiendra toutes les fonctions de /layui/. layui.js. L'introduction de ce JS chargera tous les modules. Il n'est pas nécessaire d'introduire automatiquement les modules, ce qui fera perdre à layui le sens de la modularité, mais c'est en effet beaucoup plus pratique à écrire. Par conséquent, layui recommande officiellement d'utiliser l'approche modulaire.

1. Utilisation modulaire :

Remarque : Le JS introduit est : /layui/layui.js

Suivez la spécification du module de layui An. fichier d'entrée et chargez le fichier d'entrée via layui.use()

Par exemple :

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

Copier après la connexion

Supplément : Pour plus de commodité, vous pouvez utiliser la méthode suivante pour importer :

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

Copier après la connexion

Vous pouvez également introduire le calque et le formulaire en tant que variables globales :

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

Copier après la connexion

2. Utilisation non modulaire :

Remarque : Le JS importé est /layui/layui all. .js

adopte la méthode du "chargement unique". Lorsque vous adoptez cette méthode, vous n'avez plus besoin de charger le module via la méthode layui.use(), vous pouvez l'utiliser directement, comme :

Par exemple :

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

Copier après la connexion

3. Supplément

1. Les méthodes non modulaires ne peuvent pas être utilisées directement dans la méthode module

Par exemple : (L'introduction suivante est du JS modulaire mais utilise la méthode non modulaire pour signaler une erreur)

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

Copier après la connexion

2. La modularisation peut être utilisée en non-modularisation

Par exemple : Ce qui suit fonctionne normalement, mais ce n'est pas nécessaire

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

Copier après la connexion

3. Si la modularisation et la non-modularisation sont introduites en même temps, la méthode de non-modularisation peut être utilisée, mais le JS non modulaire doit être introduit après la modularisation

Par exemple :

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

Copier après la connexion

Pour plus de détails connaissances, veuillez faire attention à la colonne tutoriel d'utilisation de layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!