Modular and non-modular use of layui (with code)-Layui Tutorial-php.cn

Home

Web Front-end

Layui Tutorial

Modular and non-modular use of layui (with code)

Nov 26, 2019 pm 05:38 PM

layui

Modular and non-modular use of layui (with code)

The difference between non-modular and modular is

Non-modularThere is no need to call layui.use([],fun. ..)Introduce the corresponding module. The imported JS is /layui/layui.all.js

ModularizationMust call layui.use([],fun...) every time Introduce the corresponding module. The imported JS is /layui/layui.js. (This is recommended, but it is not convenient to write.)

/layui/layui.js will contain all the functions of /layui/layui.js. Introducing this JS will load all modules. There is no need to automatically introduce modules, which will make layui lose the meaning of modularity, but it is indeed much more convenient to write. Therefore, layui officially recommends using the modular approach.

1. Modular use:

Note: The imported JS is: /layui/layui.js

Follow the module specification of layui. An entry file, and load the entry file through layui.use()

For example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;模块化的使用&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;./layui/css/layui.css&quot;&gt;
    &lt;!--引入这个JS--&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;./layui/layui.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
    /*必须使用这个方法先引用对应的模块*/
    layui.use([&#39;layer&#39;],function () {
        var layer = layui.layer;
        layer.alert(&quot;xxxxxxxxxxxxxxxxxxxxxxxx&quot;)
    })
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Supplement: For convenience, you can use the following method to import:

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

Copy after login

You can also introduce layer and form as global variables:

/**
 * @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(&quot;消息框&quot;)
});


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

Copy after login

2. Non-modular use:

Note: The imported JS is /layui/layui. all.js

adopts the "one-time loading" method. When you adopt this method, you no longer need to load the module through the layui.use() method, you can use it directly, such as:

For example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;非模块化的使用方法&lt;/title&gt;

    &lt;link rel=&quot;stylesheet&quot; href=&quot;./layui/css/layui.css&quot;&gt;

    &lt;!--引入这个JS--&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;./layui/layui.all.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;script&gt;
    var layer = layui.layer;
    layer.alert(&quot;xxxxxxxxxxxxxxxxxxxxxxxx&quot;)
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

3. Supplement

1. Non-modular methods cannot be used directly in the module method

For example: (The following introduction is modular JS but uses the non-modular method to report an error)

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;模块化的使用&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;./layui/css/layui.css&quot;&gt;

    &lt;!--引入这个JS--&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;./layui/layui.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
        var layer = layui.layer;
        layer.alert(&quot;xxxxxxxxxxxxxxxxxxxxxxxx&quot;)
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

2. Modularization can be used in non-modularization

For example: the following runs normally, but it is not necessary

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;非模块化的使用方法&lt;/title&gt;

    &lt;link rel=&quot;stylesheet&quot; href=&quot;./layui/css/layui.css&quot;&gt;

    &lt;!--引入这个JS--&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;./layui/layui.all.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;script&gt;
    layui.use([&#39;layer&#39;],function () {
        var layer = layui.layer;
        layer.alert(&quot;xxxxxxxxxxxxxxxxxxxxxxxx&quot;)
    })
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

3. If modularization and non-modularization are introduced at the same time, non-modularization can be used method, but non-modular JS must be introduced after modularization

For example:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;模块化的使用&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;./layui/css/layui.css&quot;&gt;
    &lt;!--引入这个JS--&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;./layui/layui.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;./layui/layui.all.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
    /*必须使用这个方法先引用对应的模块*/
        var layer = layui.layer;
        layer.alert(&quot;xxxxxxxxxxxxxxxxxxxxxxxx&quot;)
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Modular and non-modular use of layui (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn