layui前端项目打包方法_layui封装模块基础教程
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方法访问一个在线翻译的接口,文件代码如下:
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));
});
});
访问 index.html 看到下图返回结果,证明模块封装成功了。
更多web前端开发知识,请查阅 HTML中文网 !!
layui前端项目打包方法_layui封装模块基础教程相关推荐
- rust react tauri app 现有前端项目打包(windows)
现有前端项目打包 环境配置 nodejs及相应包管理器(npm或yarn) rust 开发环境 WebView2 安装 下载地址https://developer.microsoft.com/en-u ...
- ASP.NET Core 项目配置 ( Startup ) - ASP.NET Core 基础教程 - 简单教程,简单编程
ASP.NET Core 项目配置 ( Startup ) - ASP.NET Core 基础教程 - 简单教程,简单编程 原文:ASP.NET Core 项目配置 ( Startup ) - ASP ...
- ASP.NET Core 新建项目 - macOS 环境 - ASP.NET Core 基础教程 - 简单教程,简单编程
原文:ASP.NET Core 新建项目 - macOS 环境 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 新建项目 - macOS 环境 对于任何语言和 ...
- 浅谈前端项目打包工具webpack和gulp
webpack:一个模块打包工具(更适合单页面spa模块开发) Webpack更侧重于模块打包,把开发中的所有资源(图片.js文件.css文件等)看成模块.Webpack是通过loader(加载器)和 ...
- 如何部署前端react项目到服务器,Vue、React前端项目打包部署
前端单页面应用部署 前端打包上线部署方案之 hash路由模式 对于hash路由模式打包的单页面应用,直接发布到服务器,使用nginx指向到对应文件目录即可,通用配置一般如下: location / { ...
- 前端项目打包优化及上线
前端项目优化及上线 根据自己项目实际,进行webpack配置,这里只是一个参考,关于上线很多功能作为了解. 优化问题 项目优化策略步骤及详解安装配置 1.生成打包报告=>为了直观发现项目中的问题 ...
- 使用filemanager-webpack-plugin将前端项目打包成zip压缩包
使用filemanager-webpack-plugin插件将前端的dist目录打包成zip压缩包,省去手动压缩,进一步可以配合 idea 的Cloud Toolkit插件 或者jekenis进行自动 ...
- Vue项目打包部署到Gitee Pages配置教程(无空白bug)
仓库目录结构 我的仓库目录如下图,其他目录结构配置可能会有所不同哈 项目打包配置 vue.config.js 我的项目为vue2+Vue-Cli 4,在vue.config.js中加入以下代码: (如 ...
- springboot公共模块打包_SpringBoot多模块项目打包方法(jar和war)
简单介绍下项目情况(使用的SpringBoot2.0): 成功打包的前提是maven的一些插件啊等等配置要没问题! 打包为jar: 选中项目: 复制项目路径后,win+R+cmd进入命令行(我这里是w ...
最新文章
- LeetCode实战:螺旋矩阵
- hdu4849 最短路
- UIbutton系统按键(System)和图片按键(Custom)对比
- UE4如何贴混合贴图_UE4[蓝图]动态积雪材质的实现(一)
- 了解.NET中的垃圾回收
- .NET Core TDD 前传: 编写易于测试的代码 -- 依赖项
- Hadoop3.0的新特性
- 【UI/UX】浅谈Spin框
- java变量自增题的分解08251944
- ZYNQ PS端输出无效时钟供PL使用
- 今天参加广州.NET俱乐部活动,运气超好
- Java HttpServlet 详解
- 图像特征:突出显示稀疏突出区域Image Signature:Highlighting Sparse Salient Regions
- 数学建模常用算法—模糊综合评价
- 手机锁屏密码忘了怎么办
- The MVGC Multivariate Granger Causality Matlab初上手记录
- Springboot快递管理系统1k61h计算机毕业设计-课程设计-期末作业-毕设程序代做
- 太秀了!用Pandas秒秒钟搞定24张Excel报表,还做了波投放分析!
- 基于贝叶斯优化的离散组合序列问题调研
- 多场景业务实战-AB测试实战(数据分析干货!!!!!)