straight to the point, or it is more appropriate to use it directly. Layui's module loading adopts the core layui.use(mods, callback) method. When your JS needs to use the Layui module, we recommend that you use preloading, because it can avoid the trouble of writing layui.use everywhere. You should define it like this at the outermost level:
/*
Demo1.js
Use Layui's form and upload modules
*/
layui.use(['form', 'upload'], function(){ //If only one module is loaded, you can leave the array blank. For example: layui.use('form')
var form = layui.form() //Get the form module
,upload = layui.upload; //Get the upload module
//listen to submit button
form.on('submit(test)', function(data){
console.log(data);
});
//Instantiate an upload control
upload({
url: 'Upload interface url'
,success: function(data){
console.log(data);
}
})
});
On-demand loading (not recommended)
If you have obsessive-compulsive disorder, you have extreme requirements on the performance of the website, you do not want to pre-load the required modules, but only load the modules when an action is triggered, then, this is allowed. You don't need to wrap a big layui.use in the outermost layer of your JS, you just need:
*
Demo2.js
Load a Layui module on demand
*/
//……
//Your various JS code or something
//……
//The following is to load a Layui module in an event callback
button.addEventListener('click', function(){
layui.use('laytpl', function(laytpl){ //Reminder: Calling use multiple times will not load laytpl.js repeatedly. Layui has internal module cache processing.
var html = laytpl (''). render ({});
console.log(html);
});
});
All modules in the module namespace
Layui are bound under the layui object, which is done internally by the layui.define() method. Each module has a unique name and cannot be occupied. So you don't need to worry about the module space being polluted, unless you delete layui.mod; calling a module must also rely on the assignment of the layui object. Such as:
layui.use(['layer', 'laypage', 'laydate'], function(){
var layer = layui.layer //Get the layer module
,laypage = layui.laypage //Get the laypage module
,laydate = layui.laydate; //Get the laydate module
// use the module
});