layui封装模块教程-木庄网络博客

本文摘自PHP中文网，作者尚，侵删。

layui是国人开发的一款非常简洁的UI框架，使用了模块化加载方式，因此在使用过程中我们难免需要添加自己的模块，本教程就教大家封装一个简单的模块。

推荐：layui使用教程

平常使用中，ajax可以说使用广泛，所以这里我们添加一个自己的模块，将ajax封装一下，方便使用。

注：模块加载需要服务器环境支持，因此看本教程前，请先在你本地搭建好本地服务器环境，这个不在本教程范畴内，请自行百度。

1、搭建项目目录

首先从layui的网站下载layui的包，放置到自己的项目里，这里我用一个全新的空项目，添加完layui后，目录结构如下：

2、编写模块文件

现在我在 plugin 的 layui 文件夹下新建 modules 文件夹，用以保存我们自己的模块文件，在这个文件夹里新建 common.js 文件，来编写我们第一个模块，该文件内容如下：

layui.define(['jquery'], function(exports){ 
    var $ = layui.jquery;
    var obj = {
        ajax: function (url, type, dataType, data, callback) {
            $.ajax({
                url: url,
                type: type,
                dataType: dataType,
                data: data,
                success: callback
            });
        }
    };
    //输出接口
    exports('common', obj);
});

layui.define()方法为layui的定义模块方法，该方法接收2个参数，第一个参数为依赖模块，这里看到我们依赖与jquery；第二个回调方法，这里面我们定义模块的内容，就是提供那些方法，从上面可以看出我们定义了一个obj对象，该对象有一个ajax方法用于调用jquery的ajax执行我们的操作。如果你是封装其他的jquery插件，那就把插件的js代码放到layui.define()的回调方法里就行了。

exports()为输出接口，这个方法也有两个参数，第一个为输出模块的名字，第二个为输出哪个对象。

到此我们的模块就写完了，如果后续需要添加方法，就给obj对象添加方法就行了。现在我们的目录结构如下：