layui 它是一个前端，采用自己的模块规范编写 UI 遵循原生的框架 HTML/CSS/JS 书写和组织形式，门槛很低，可以立即使用。
在正常使用中，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定义模块方法，接收两个参数，第一个参数是依赖模块。在这里，我们可以看到我们依赖jquery；第二种回调方法，我们定义模块的内容，就是提供这些方法，从上面可以看出，我们定义了obj对象，这个对象有一个ajax方法来调用jqueryajax来执行我们的操作。如果您包装了其他jquery插件，请将插件的js代码放入layuiry.define()回调方法就行了。
exports()为输出界面，该方法还有两个参数，一个是输出模块的名称，另一个是输出对象。
到目前为止，我们的模块已经完成。如果后续需要添加方法，只需添加obj对象。目前我们的目录结构如下:
3、设置layui加载组件目录模块
模块完成后，我们需要配置layui，以便layui能够找到我们的模块。一般来说，这个配置是在我们的整体js中完成的，我在这里 assets/js 下面新建 global.js 文件内容如下：
layui.config({
base: '/assets/plugin/layui/modules/' //自定义layui组件的目录
}).extend({ ///设置组件别名
common: 'common' ,
});layui.config()是layui的配置方法，base参数表示我们模块的保存目录，从网站的访问根目录开始。从上一步可以看出，我的模块保存路径是 /assets/plugin/layui/modules/ 在extend中定义我们的实际模块名，上述代码中冒号前的common表示模块的名称，即我们将来加载模块时使用的名称，冒号后的‘common这实际上是指我们模块文件的名称 /assets/plugin/layui/modules/common.js 文件，我们可以省略js后缀，加载时会自动添加后缀。
4、使用模块
定义模块后，我们可以使用模块。使用模块实际上与使用layui的自带模块相同。我们来修改项目 index.html 在文件中，我使用模块ajax方法访问在线翻译界面，文件代码如下：
< script src = "assets/plugin/layui/layui.js" >
< script src = "assets/js/global.js" >
< script >
layui.use(['common'], function () {
var common = layui.common;
common.ajax('http://route.showapi.com/32-9', 'post', 'json', {
'showapi_appid': 28043,
'showapi_sign': 'fd5ce06f641bfa078c0ad16129b15#;,
'q': 'hello'
}, function (res) {
alert(JSON.stringify(res));
});
});
访问 index.html 见下图返回结果，证明模块封装成功。
layui教程
以上是layui框架包装ajax模块具体步骤的详细内容。请关注861模板网的其他相关文章！