我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
Layui 模块化教程(说人话版本)
官方对于layui模块化的说明只言片语,看得我着实有点懵逼,还好有万能群友帮助,总算明白要怎么写了,为此特意出个教程。
模块化优点
相比于传统的jq模块,layui模块他在于导入方式和不占据浏览器资源请求额度(一般一次只能6个),且调用也方便。
jq模块是需要自己手动在html里创建script元素并src引用js文件,这样即便我们丢到body的最后面加载,也是需要占用下载数量的,并且如果你要调用这个模块,你的js必须在该模块之后才行。这也是传统js调用的一个模式。
layui模块他的原理是js创建script元素并插入,而这样创建的script是不占据下载资源数量的,并且调用时只需要在layui的方法里输入对应的模块名字即可。
模块路径
既然模块js文件是动态插入的,那么我们肯定需要两个东西
- 模块的路径
- 模块的名字
layui提供了一个方法,用于设置模块的加载路径和模块名。
layui.config({
base: "./xxx/xxx"
})
base的路径是相对于自己这个js文件的路径,但是有些环境相对路径并不正确,这就需要你固定路径了,比如:https://www.xxxx.com/lay/js/
路径有了我们还需要文件名,layui有个默认名,就是你调用的模块名,比如我调用的是一个qrcode
模块,那么他会自动生成这样一个路径:
https://www.xxxx.com/xxx/xxx/qrcode.js
一般来说可能够用了,但是我们有可能遇到模块名很简单,js文件名很复杂的,比如压缩的js文件,他的文件名是带min的,qrcode.min.js
那么官方默认的就不行了,我们需要手动调整
layui.config({
base: "./xxx/xxx"
}).extend({
qrcode: "qrcode.min"
});
extend接收一个对象参数,参数里面的key对应调用的模块名,只要有对应的key,那么会使用key对应的value值路径,注意,不需要.js
后缀
此时路径为:
https://www.xxxx.com/xxx/xxx/qrcode.min.js
一切都设置好后,这段js代码我们可以单独保存为layui.config.js
文件,并在引入layui.js文件后引入,作为自定义模块入口文件,所有的自定义模块路径都可以在这里进行定义。
模块格式
layui.define(["你需要使用的layui模块"],function(exports){
……自己写的模块方法
exports("模块名",需要导出的模块方法)
});
define第一个参数为你需要使用的layui模块,也就是说你可以在模块里面使用其他模块,如果只有一个模块,你可以直接这样写:
layui.define("layui模块名",function(exports){
……自己写的模块方法
exports("模块名",需要导出的模块方法)
});
其实和use的用法差不多了,第一个参数的使用上。
如果你不需要使用依赖模块,第一参数你可以填一个空的数组,如果是一个空的字符,会报错的,null也会报错
layui.define([],function(exports){
……自己写的模块方法
exports("模块名",需要导出的模块方法)
});
模块导出
layui模块他有两种模式,一种是引用后自动运行了,一种是需要手动运行,这种一般都是带参数的,我们一个个来。
自运行
layui.define("jquery",function(exports){
let $ = layui.jquery;
$.fn.test=function(){
return "我是一个自动添加的jq模块";
};
exports("test",null)
});
exports导出的时候,第一个为模块名,第二个为要导出的方法名,如果没有需要导出,就为null,比如这里我们只是给jq加了个方法,所以不需要导出。
将这段代码保存为一个js文件,丢入我们的模块目录,这个目录自己定,自己创建的,然后有需要再layui.config.js里面对这个模块引用路径进行调整。
调用
layui.use(["jquery","test"],function(){
let $ = layui.jquery;
$.test();
});
这是常见的jq使用的方法,还有一种就是不需要再调用里面触发的,只要use就能自运行的
layui.define("",function(exports){
alert("直接运行的");
exports("test",null)
});
调用
layui.use("test",function(){
});
这样就会直接弹窗。
手动运行
和自运行其实差不了多少,只是写法上的变更
layui.define("",function(exports){
function test(options){
if(options){
console.log("有参数",options.test);
}else {
console.log("无参数");
}
};
exports("test",test);
});
调用
layui.use("test",function(){
const test = layui.test;
//运行
test({test:"无用的消息"})
});
当然也可以这样调用
layui.use("test",function(){
//运行
layui.test({test:"无用的消息"});
});
不过不怎么建议,推荐还是上一种,也是layui官方使用的方式。
至此,模块化就这样了,其实很简单,只要说人话,就很容易理解,快速入门。
评论(0)