Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use modularization and non-modularization in layui, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

Non-modularization does not need to call layui.use ([], fun...) every time The corresponding module is introduced, and the JS introduced is / layui/layui.all.js

Modularization must call layui.use ([], fun...) every time. Introduce the corresponding module, and the JS introduced is / layui/layui.js (recommended, but it's not easy to write)

/ layui/layui.js will include all the functions of / layui/layui.js, and the introduction of this JS will load all the modules. There is no need to introduce modules automatically, which will make layui lose its modularization meaning, but it is much easier to write. Therefore, layui officially recommends a modular approach.

1. Use of modularization:

Note: the JS introduced is: / layui/layui.js

Follow the module specification of layui to create an entry file, and load the entry file by layui.use ()

For example:

For modular use / * you must first use this method to reference the corresponding module * / layui.use (['layer'], function () {var layer = layui.layer; layer.alert ("xxxxxxxxxxxxxxxxxxxxxxxx")})

Add: for ease of use, you can use the following methods to introduce:

Function deleteDictBatch () {var form,layer; layui.use (['form','layer'], function () {form = layui.form; layer=layui.layer;}); / / get the number of selected elements var length_1 = $("[name='dictionaryCheckbox']: checked"). Length; / / 1. If the number selected is 0, exit the function directly, prompt to delete if (length_1 = = 0) {layer.alert ("Please select the dictionary to be deleted") return;} / / if there are elements that need to be deleted else {if (! confirm ("are you sure you want to delete the following dictionaries?") {/ / cancel also exit the function return } / / the second way, submit as an array. Backend uses string to receive var values = []; $("[name='dictionaryCheckbox']: checked") .each (function (I) {/ / I represents index values [I] = $(this). Val ();}) $.post (contextPath+'/dictionary/deleteDictBatch.do', {dictionaryIds:values.toString ()}, function (response) {alert (response)) If (response = = "deleted successfully") {getDictionaryTree (); / query dictionary tree getDictionaryFY (); / / paged query dictionary information}}, 'text') / / deleted business logic}}

You can also introduce layer and form as global variables:

/ * * @ author: qlq * @ time: 9:31 * @ description: add the JS * / / * one-time self-tuning function of the training program to initialize two global variables * / var lyer,form; (function () {layui.use () ['layer','form'], function () {layer=layui.layer,form=layui.form;})}) () / * * execute some functions * / $(function () {layer.msg ("message box")}) after the page is loaded; / * S * /

2. Non-modular use:

Note: the JS introduced is / layui/layui.all.js

The method of "one-time loading" is adopted. When you use this method, you no longer need to load the module through the layui.use () method, you can just use it, such as:

For example:

Non-modular usage var layer = layui.layer; layer.alert ("xxxxxxxxxxxxxxxxxxxxxxxx")

3. Supplement

1. Non-modular methods cannot be used directly in modular methods.

For example: (the following introduces a modular JS but uses a non-modular method to report an error)

Modular use of var layer = layui.layer; layer.alert ("xxxxxxxxxxxxxxxxxxxxxxxx")

two。 Modularization can be used in non-modularization

For example, the following works normally, but it is not necessary

Non-modular usage layui.use (['layer'], function () {var layer = layui.layer; layer.alert ("xxxxxxxxxxxxxxxxxxxxxxxx")})

3. Non-modular methods can be used if both modularization and non-modularization are introduced, but non-modular JS must be introduced after modularization.

For example:

For modular use / * you must use this method to reference the corresponding module * / var layer = layui.layer first. Layer.alert ("xxxxxxxxxxxxxxxxxxxxxxxx") Thank you for reading this article carefully. I hope the article "how to use Modularization and non-Modularization in layui" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.