使用layui框架封装ajax模块的具体步骤(2)-木庄网络博客

模块写完后，我们需要配置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 >
< script  src = "assets/js/global.js" ></ script >
< script >
     layui.use(['common'], function () {
         var common = layui.common;
         common.ajax('http://route.showapi.com/32-9', 'post', 'json', {
             'showapi_appid': 28043,
             'showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15',
             'q': 'hello'
         }, function (res) {
             alert(JSON.stringify(res));
         });
     });
</ script >