layui实战 - 自定义模块

一.目录结构

  ├─src // layui目录
  │  │─lay // 模块核心目录
  │  │  └─modules // 各模块组件
  │  └─layui.js // 基础核心库
  │
  └─res // 测试目录
     ├─js // js目录
     │ ├─modules // 自定义模块
     │ └─index.js // 模块加载入口
     └─html 测试页面

二.自定义模块 - 简单方法封装

2.1 在modules创建模块

// res/js/modules/simple.js
layui.define(function(exports){
    // 通过exports暴露，给外部使用
    exports('simple', function(){
        alert('Hello World!');
    });
});

2.2 在index.js中配置扩展

// res/js/index.js
layui.config({
    //自定义layui组件的目录,设定扩展的layui模块的所在目录，一般用于外部模块扩展
    base: '/layui/res/js/modules/'
}).extend({ //设定组件别名
    simple: 'simple',
});

三.自定义模块 - 对象封装

3.1 在modules创建模块

// res/js/modules/common.js
/**
 * layui.define([mods], callback)
 * 第一个参数表示该模块所依赖的模块，这里是依赖了-jquery
 * 第二个参数表示模块加载完毕的回调函数，即加载完依赖后立即执行下面的函数
 */
layui.define(['jquery'], function(exports){
    var $ = layui.jquery;
    var mAjax = {
        ajax: function (url, type, dataType, data, callback) {
            $.ajax({
                url: url,
                type: type,
                dataType: dataType,
                data: data,
                success: callback
            });
        },
        version:'v0.01'
    };
    //输出该模块的接口
    exports('common', mAjax);
});

3.2 在index.js中配置扩展

// res/js/index.js
layui.config({
    //自定义layui组件的目录,设定扩展的layui模块的所在目录，一般用于外部模块扩展
    base: '/layui/res/js/modules/'
}).extend({ //设定组件别名
    simple: 'simple',
    common: 'common',
});

四.在页面中使用

4.1 使用自定义扩展的方法

<script src="../src/layui.js"></script>
<script src="../res/js/index.js"></script>
<script>
    layui.use(['simple'], function () {
        var simple = layui.simple;
        simple();// 调用前面定义的方法
    });
</script>

4.2 使用自定义扩展的对象

<script src="../src/layui.js"></script>
<script src="../res/js/index.js"></script>
<script>
    layui.use(['layer','common'], function () {
        var layer = layui.layer
            ,common = layui.common;
        common.ajax('http://route.showapi.com/32-9', 'post', 'json', {
                'showapi_appid': 28043,
                'showapi_sign': '111',
                'q': '111'
            }, function (res) {
                layer.msg(common.version+" result: "+JSON.stringify(res));
            });
    });
</script>