layui封装模块基础教程

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

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

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

1、搭建项目目录

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

1.png

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对象添加方法就行了。现在我们的目录结构如下:

2.png

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 看到下图返回结果,证明模块封装成功了。

3.png

Image placeholder
前端答疑
未设置
  67人点赞

没有讨论,发表一下自己的看法吧

推荐文章
详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

jquery easyui和layui的区别是什么?

jqueryeasyuijQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复

Go语言高级编程_2.6 实战: 封装qsort

2.6实战:封装qsort qsort快速排序函数是C语言的高阶函数,支持用于自定义排序比较函数,可以对任意类型的数组进行排序。本节我们尝试基于C语言的qsort函数封装一个Go语言版本的qsort函

怎么封装react组件

怎么封装react组件1、封装自己的组件使用es6的扩展类的方式,在基类中扩展组件。importReact,{Component}from'react'; classClickCounterexten

如何封装一个react组件

如何封装一个react组件1、对于reactscript,官方建议我们用JSX(javascriptxml)语法糖,需要引入额外的解析文件去解析。2、render方法:用于给dom元素插入渲染类dom

面向对象的封装特性和static关键字笔记

封装流程:1:私有化成员变量,使用private关键字修饰;2:提供公有的get和set方法,在方法体中进行合理值的判断;3:在构造方法中调用set方法进行合理值的判断

面向对象的封装特性和static关键字笔记

static修饰成员变量后,由成员变量层级提升为类层级

IDC发布:4Q18云IT基础设施收入低于传统IT基础设施收入

根据IDC全球云IT基础设施季度跟踪报告,在2018年第四季度(4Q18),包括公有和私有云在内的云IT基础设施产品(服务器、企业存储和以太网交换机)销售收入同比增长28.0%,达到168亿美元。20

Python入门教程_6. 模块

如果你从Python解释器退出然后再进入它,你所做的定义(函数和变量)都会消失。因此,如果你想写某些更长的程序,你最好使用一个文本编辑器来为解释器准备输入,然后以这个文件作为输入来运行程序。这也被称为

jquery ui和easyui区别?

jqueryui和easyui区别?●jqueryui是jQuery插件,是由jQuery官方维护的UI方向的插件●easyui也是jQuery插件,是第三方维护的插件●jqueryui是免费的界面库

jquery easyui乱码怎么办?

jqueryeasyui乱码怎么办?之所以出现乱码是因为,我们在引入easyui以后,它里面的汉化包并没产生作用而汉化包没有发生作用的原因有:1.汉化包引入路径有问题,文件找不到404,这个很简单,只

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

layui table组件常见用法总结

table是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头

jquery easyui是什么?

jQueryEasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者

如何让layui支持es5?写法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

jquery easyui和bootstrap的区别是什么?

JQueryEasyUIJQueryEasyUI是一组基于jQuery的UI插件集合体,而jQueryEasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复

Git教程_1.3 起步 - Git 基础

那么,简单地说,Git究竟是怎样的一个系统呢?请注意接下来的内容非常重要,若你理解了Git的思想和基本工作原理,用起来就会知其所以然,游刃有余。在开始学习Git的时候,请努力分清你对其它版本管理系统的

Git教程_2.1 Git 基础 - 获取 Git 仓库

假如你只能阅读一章来学习Git,本章就是你的不二选择。本章内容涵盖你在使用Git完成各种工作中将要使用的各种基本命令。在学习完本章之后,你应该能够配置并初始化一个仓库(repository)、开始或停

Git教程_2.2 Git 基础 - 记录每次更新到仓库

记录每次更新到仓库 现在我们手上有了一个真实项目的Git仓库,并从这个仓库中取出了所有文件的工作拷贝。接下来,对这些文件做些修改,在完成了一个阶段的目标之后,提交本次更新到仓库。 请记住,你工作目录下

Git教程_2.3 Git 基础 - 查看提交历史

在提交了若干更新,又或者克隆了某个项目之后,你也许想回顾下提交历史。完成这个任务最简单而又有效的工具是gitlog命令。 接下来的例子会用我专门用于演示的simplegit项目,运行下面的命令获取该项

Git教程_2.4 Git 基础 - 撤消操作

撤消操作 在任何一个阶段,你都有可能想要撤消某些操作。这里,我们将会学习几个撤消你所做修改的基本工具。注意,有些撤消操作是不可逆的。这是在使用Git的过程中,会因为操作失误而导致之前的工作丢失的少有的

Git教程_2.5 Git 基础 - 远程仓库的使用

远程仓库的使用 为了能在任意Git项目上协作,你需要知道如何管理自己的远程仓库。远程仓库是指托管在因特网或其他网络中的你的项目的版本库。你可以有好几个远程仓库,通常有些仓库对你只读,有些则可以读写。与

Git教程_2.6 Git 基础 - 打标签

打标签 像其他版本控制系统(VCS)一样,Git可以给历史中的某一个提交打上标签,以示重要。比较有代表性的是人们会使用这个功能来标记发布结点(v1.0等等)。在本节中,你将会学习如何列出已有的标签、如

Git教程_2.7 Git 基础 - Git 别名

在我们结束本章Git基础之前,正好有一个小技巧可以使你的Git体验更简单、容易、熟悉:别名。我们不会在之后的章节中引用到或假定你使用过它们,但是你大概应该知道如何使用它们。 Git并不会在你输入部分命