layui 是国人开发的一款非常简洁的 UI 框架, 使用了模块化加载方式, 因此在使用过程中我们难免需要添加自己的模块, 本教程就教大家封装一个简单的模块.
平常使用中, 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 对象添加方法就行了. 现在我们的目录结构如下:
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>
- <script src="assets/js/global.js"></script>
- <script>
- layui.use(['common'], function () {
- var common = layui.common;
- common.Ajax('//route.showapi.com/32-9', 'post', 'json', {
- 'showapi_appid': 28043,
- 'showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15',
- 'q': 'hello'
- }, function (res) {
- alert(JSON.stringify(res));
- });
- });
- </script>
访问 index.HTML 看到下图返回结果, 证明模块封装成功了.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/layui/15532.html