layui封装⾃定义模块
layui是国⼈开发的⼀款⾮常简洁的UI框架，使⽤了模块化加载⽅式，因此在使⽤过程中我们难免需要添加⾃⼰的模块，本教程就教⼤家封装⼀个简单的模块。
平常使⽤中，ajax可以说使⽤⼴泛，所以这⾥我们添加⼀个⾃⼰的模块，将ajax封装⼀下，⽅便使⽤。
注：模块加载需要服务器环境⽀持，因此看本教程前，请先在你本地搭建好本地服务器环境，这个不在本教程范畴内，请⾃⾏百度。为何培训机构不教php
1、搭建项⽬⽬录
⾸先从layui的⽹站下载layui的包，放置到⾃⼰的项⽬⾥，这⾥我⽤⼀个全新的空项⽬，添加完layui后，⽬录结构如下：
2、编写模块⽂件
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对象添加⽅法就⾏了。现在我们的⽬录结构如下：jquery下载文件请求
现在我在plugin 的layui ⽂件夹下新建modules⽂件夹，⽤以保存我们⾃⼰的模块⽂件，在这个⽂件夹⾥新建common.js⽂件，来编写我们第⼀个模块，该⽂件内容如下：
3、设置layui加载组件⽬录模块
模块写完后，我们需要配置layui，让layui能够到我们的模块，⼀般这个配置是在我们的全局js⾥完成，这⾥我在assets/js 下⾯新
建global.js⽂件，该⽂件内容如下：
base: '/assets/plugin/layui/modules/'      //⾃定义layui组件的⽬录
}).extend({ //设定组件别名
common:  'common',
});
指/assets/plugin/layui/modules/common.js ⽂件，我们可以省略js后缀，加载时会⾃动添加后缀。
4、使⽤模块
模块定义好后，我们就可以来使⽤模块了，使⽤模块其实和使⽤layui的⾃带模块⼀样，现在来修改项⽬的index.html⽂件，在⾥⾯我使⽤模块的ajax⽅法访问⼀个在线翻译的接⼝，⽂件代码如下：
<script src="assets/plugin/layui/layui.js"></script>
<script src="assets/js/global.js"></script>
<script>
layui.use(['common'], function () {
linux系统网站var common = layuimon;
common.ajax('route.showapi/32-9', 'post', 'json', {
'showapi_appid': 28043,
c socket server'showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15',
'q': 'hello'
}, function (res) {
alert(JSON.stringify(res));
});
});python指令中文对照
</script>
访问index.html看到下图返回结果，证明模块封装成功了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。