layui.config({
dir: ‘/res/layui/’ //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视
,version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
,base: ‘’ //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
})
方法:layui.define([mods], callback)
通过该方法可定义一个 Layui模块。参数mods是可选的,用于声明该模块所依赖的模块。callback即为模块加载完毕的回调函数,它返回一个exports参数,用于输出该模块的接口。
layui.define(function(exports){
//do something
exports(‘demo’, function(){
alert(‘Hello World!’);
});
});
exports是一个函数,它接受两个参数,第一个参数为模块名,第二个参数为模块接口,当你声明了上述的一个模块后,你就可以在外部使用了,demo就会注册到layui对象下,即可通过 layui.demo() 去执行该模块的接口。
你也可以在定义一个模块的时候,声明该模块所需的依赖,如:
layui.define([‘layer’, ‘laypage’], function(exports){
//do something
exports(‘demo’, function(){
alert(‘Hello World!’);
});
});
上述的[‘layer’, ‘laypage’]即为本模块所依赖的模块,它并非只能是一个数组,你也可以直接传一个字符型的模块名,但是这样只能依赖一个模块。
方法:layui.use([mods], callback)
Layui的内置模块并非默认就加载的,他必须在你执行该方法后才会加载。它的参数跟上述的 define方法完全一样。
另外请注意,mods里面必须是一个合法的模块名,不能包含目录。如果需要加载目录,建议采用extend建立别名(详见模块规范)
layui.use([‘laypage’, ‘layedit’], function(){
var laypage = layui.laypage
,layedit = layui.layedit;
//do something
});
方法:layui*.link(href)*
href即为css路径。注意:该方法并非是你使用Layui所必须的,它一般只是用于动态加载你的外部CSS文件。
本地存储是对 localStorage 和 sessionStorage 的友好封装,可更方便地管理本地数据。
localStorage 持久化存储:layui.data(table, settings),数据会永久存在,除非物理删除。
sessionStorage 会话性存储:layui.sessionData(table, settings),页面关闭后即失效。
上述两个方法的使用方式是完全一样的。其中参数 table 为表名,settings是一个对象,用于设置key、value。下面与 layui.data 方法为例:
//【增】:向test表插入一个nickname字段,如果该表不存在,则自动建立。
layui.data(‘test’, {
key: ‘admin’
,value: ‘码农洞见’
});
//【删】:删除test表的nickname字段
layui.data(‘test’, {
key: ‘admin’
,remove: true
});
layui.data(‘test’, null); //删除test表
//【改】:同【增】,会覆盖已经存储的数据
//【查】:向test表读取全部的数据
var localTest = layui.data(‘test’);
console.log(localTest.admin);
由于Layui部分内置模块依赖jQuery,所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块(唯一的一个第三方模块)。只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的$和jQuery,是一个符合layui规范的标准模块。所以你必须通过以下方式得到:
//主动加载jquery模块
layui.use([‘jquery’, ‘layer’], function(){
var $ = layui.$ //重点处
,layer = layui.layer;
//后面就跟你平时使用jQuery一样
$(‘body’).append(‘hello jquery’);
});
//如果内置的模块本身是依赖jquery,你无需去use jquery,所以上面的写法其实可以是:
layui.use(‘layer’, function(){
var $ = layui.$ //由于layer弹层依赖jQuery,所以可以直接得到
,layer = layui.layer;
//……
});
layui提供的模块有时可能还无法满足你,或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法,相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧:
第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:不用放入layui目录)
第二步:编写test.js 如下:
/**
扩展一个test模块
**/
layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define(‘layer’, callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||‘mymod’));
}
};
//输出test接口
exports(‘mymod’, obj);
});
第三步:设定扩展模块所在的目录,然后就可以在别的JS文件中使用了
//config的设置是全局的
layui.config({
base: ‘/res/js/’ //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: ‘mymod’ //如果 mymod.js 是在根目录,也可以不用设定别名
,mod1: ‘admin/mod1’ //相对于上述 base 目录的子目录
});
//你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增)
layui.e
真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】
xtend({
mod2: ‘{/}http://cdn.xxx.com/lib/mod2’ // {/}的意思即代表采用自有路径,即不跟随 base 路径
})
//使用拓展模块
layui.use([‘mymod’, ‘mod1’], function(){
var mymod = layui.mymod
,mod1 = layui.mod1
,mod2 = layui.mod2;
mymod.hello(‘World!’); //弹出 Hello World!
});
3.8.1.规范原则
-
接口返回数据即显示:前端仅做渲染逻辑处理;
-
渲染逻辑禁止跨多个接口调用;
-
前端关注交互、渲染逻辑,尽量避免业务逻辑处理现象;
3.8.2.数据格式
- 响应数据格式
{
“code”: 200, //请求处理状态
“msg”: “success”, //请求处理消息
“url”: null, //请求地址
“count”: 2,
“data”: [{}, {}…]
}
code:请求处理状态
-
100 ERROR: 代码异常
-
200 OK:服务器成功返回用户请求的数据
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心
- 响应数据格式
{
“code”: 200, //请求处理状态
“msg”: “success”, //请求处理消息
“url”: null, //请求地址
“count”: 2,
“data”: [{}, {}…]
}
code:请求处理状态
-
100 ERROR: 代码异常
-
200 OK:服务器成功返回用户请求的数据
学习分享,共勉
题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心