04 Layui-模块规范

本文主要是针对Layui官网文档中的模块规范进行学习,然后归纳笔记,进行简化记忆,方便后期复盘巩固,如需深入学习,详见:Layui 模块规范 (layuion.com)

Layui定义了一套更轻量级的模块规范,经过大量实践后,成为iayui最核心的模块加载引擎。

模块的核心,即layui.js的两个底层方法:

1. 定义模块的layui.define();

2. 加载模块的layui.use().

一、预先加载模块

layui通过use方法加载模块,当JS需要用到layui模块时,避免到处写layui.use(),在最外层定义如下:

<script>
    layui.use(['form', 'upload'], function(){  
        var form = layui.form   //获取form模块
        , upload = layui.upload;  //获取upload模块
        
        //提交按钮事件
        form.on('submit(test)', function(data){
            console.log(data);
        });

        //实例化一个上传控件
        upload({
            url:'上传接口url',
            success: function(data){
                console.log(data);
        }
    })
});

</script>

二、扩展一个layui模块

layui官方提供的模块如果无法满足,可视图按照layer的模块规范来扩展一个模块。

第一步:确定模块名,假设为:mymod,然后新建一个mymod.js文件放入项目任意目录(不用放入layui目录)

第二步:编写mymod.js

//扩展一个mymod模块
layui.define(function(exports){
    //模块也可以依赖其他模块
    var obj = {
        hello: function(src){
            alert('Hello ' + (str || 'mymod'));
        }
    };
    
    //输出mymod接口
    exports('mymod', obj);
});

第三步:设定扩展模块所在的目录,然后就可在别的JS文件中使用

//config的设置是全局的
layui.config({
    base: '/res/js/'    //假设这是你存放扩展模块的根目录
}).extend({  //设定模块别名
    mymod:'mymod',   //如果mymod.js是在根目录,也可以不用设定别名
    mod1: 'admin/mod1'   //相对于上述base目录的子目录
});

//你也可以忽略base设定的根目录,直接在extend指定路径, v2.2.0新增
layui.extend({
    mod2: '{/} http://cdn.xxx.com/lib/mod2'   //{/}即代表采用自有路径,不跟随base路径
})

//使用扩展模块
layui.use(['mymod', 'mod1'], function(){
    var mymod = layui.mymod
    , mod1 = layui.mod1
    , mod2 = layui.mod2;

    mymod.hello('World!');   //弹出Hello World!
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值