layui怎么使用模块化

模块化

模块化是指将一个大的应用程序划分为一些互相依赖的小模块(或者组件)，以方便代码的维护和重用。模块化旨在解决软件规模日益庞大时代码难以维护的问题，将其拆分为相对独立且易于维护的单元，增强代码的可重用性与可扩展性，从而提高开发效率。

layui.use(['layer','form'], function(){
    var layer = layui.layer
    ,form = layui.form;
    layer.msg('Hello World');
});

layui模块调用

layui模块通过使用layui.use来调用，layui.use会自动加载所需的模块，该函数包含两个参数，第一个参数是需要加载的模块数组，每个模块的名称都需要用单引号链接并变成数组元素，第二个参数则是回调函数，该函数会在所有模块加载完毕后执行。

layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.alert('Hello World');
});  

扩展模块

除了layui本身提供的一些基础组件外，我们也可以开发自己的模块，并通过layui.use来调用。首先定义这个组件并暴露出去，然后通过layui.define来发布一个layui模块，这个模块名称就是参数一，会帮助我们在使用use的时候更方便的调用和使用。

layui.define(['jquery'],function(exports){
    var $ = layui.jquery;
    var obj = {
        name: 'Layui_custom'
        ,version: '2019'
        ,hello: function(str){
            alert('Hello '+str);
        }
    };
    
    exports('mymod', obj);
});

异步加载模块

layui异步加载模块通过Layui提供的layui.define和layui.use方法实现，可以使用layui.use加载自己定义的Layui模块，然后就可以在回调函数中使用该模块的方法。需要注意的是，在异步加载模块时，需要将依赖模块通过一个数组字符串传递给模块，所有依赖模块需要在回调函数中做为参数导入。

layui.define([], function(exports){
    exports('modName', function(){
        console.log("loaded modName");
    });
});
layui.use(['modName'], function(mod){
    var $ = layui.jquery;
    mod('modName')();
});