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


推荐文章
layui有什么功能?

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

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

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

layui是什么时候开发的?

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

浅谈layui时间控件闪退问题的解决方案

项目上线,发现后台管理系统layui的子页面出现时间控件闪退的问题,根本选取不到时间。其原因是:如果出现页面找到多个节点,只有第一个节点能正常使用后面的节点都会闪退,可以理解为目前laydate不支持

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

layui table组件常见用法总结

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

layui如何实现表格反转?简单实现方式介绍

表格反转,或者叫行列转换,估计都不陌生,先看效果图:测试页面:https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled相对标

layui登录后token问题详解

layui是一个非常简单且实用的后台管理系统搭建框架,里面的插件丰富使用简单,只需要在原有基础上进行修改即可,但是在数据处理方面略显薄弱,内置的jquery在实际过程中略显不足,若是能添加内置的mvc

layui之弹出form表单以及提交

第一步:引用两个文件第二步:点击删除按钮弹出提示框/*删除开始*/ $(".del").click(function(){ varid=$(this).attr("id"); layer.alert(

layui input只读属性是什么?

layuiinput只读属性是什么?layuiinput只读属性是readonly。readonly属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中

layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取

layui调用弹层的方法

两种调用方法:1、引用独立的layer.js文件引入好layer.js后,直接用即可 layer.msg('hello'); 2、调用layui中的layer模块layui.use('layer',

layui如何抓取表单数据?

注意事项:1、layui中提交按钮是基于“监听”机制实现的。2、form.on()的调用需置于layui.use的回调函数中。3、末尾的'returnfalse'不可或缺,以确保不会触发页面刷新。注意

layui同页面如何显示多种时间样式?

Layui时间模块同页面显示多种时间样式layui时间模块主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器等五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。代码如下:

layuiadmin是什么呀?

layuiAdmin是一种采用layui自建的纯前端MVC架构而成的后台模板系统开发框架,而不仅限于模板。layuiAdmin全面接管视图和路由,并自主完成数据渲染,服务端只负责数据接口,因此这赋予了

layui的优缺点是什么?

layui是一款采用自身模块规范编写的前端UI框架,它遵循原生的HTML/CSS/JS书写方式。它虽然外在极简,但是内容丰富,里面包含众多组件从核心代码到API都非常适合界面的快速开发。事实上layu

layui 开源吗?

layui开源吗?layui是免费开源的。layui是一款开源和免费的前端UI框架,可随意使用;不过为了维持发展,在其生态下,也会推出一些基于layui的收费产品,比如:layuiAdmin和layI

项目中如何优雅地使用函数 layui.define

前言:1、如果你深刻理解并合理运用layui.define,那么本篇对你来说有点浪费时间了。2、如果你对于“Javascript模块化开发”听都没听过,更别说还要理解它。那么建议可以先在网络上找找什么

layui的模块是什么意思?

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

layui open怎么更改按钮的颜色?

layuiopen中可以使用skin来设置按钮颜色。skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同