layui自定义模块使用

我们知道后端程序设计我们也讲究模块化设计便于更容易维护扩展等....

 

那么我们今天来研究一下这个layui中自定义模块怎么使用，老鸟请飞过..仅供初学者使用

 

1.我们定义一个js

//如果依赖一个模块，不需要中括号
layui.define(['layer','table'],function(exports){
    var obj={
        sayHi:function(str){
            var layer=layui.layer;
            console.log('Hello'+str);
            layer.msg('Hello'+str);
        }
    };
    exports('mymod',obj);
});

2.我们尝试引用一下这个模块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Layui自定义模块使用</title>
    </head>
    <body>
        
    </body>
    
        <script src="lib/layui-v2.5.6/layui/layui.js"></script>
        
        <script type="text/javascript">
            
        //第一步创建自定义模块（layui.define）
        //第二步编写创建的自定义模块
        //第三步应用并使用模块
        layui.config({
            base:'js/',
        }).extend({
            mymod:'mymod'
        })
        //base:可以忽略
        layui.use(['mymod'],function(){
            var mymod=layui.mymod;
            mymod.sayHi('李四');
        })
            
        </script>    
        
</html>

3.测试:

 

 

非常简单，所以我们web也是可以模块化设计的，这样更加方便维护，不要全部放到一个页面里面.

 

posted @ 2021-05-16 20:49  wrjhzou  阅读(328)  评论(0)  编辑  收藏  举报