- 前言
在前面的第一篇文章,我们已经进行了layui的初步准备工作以及简单的使用了,从本篇开始,便正式开始layui的学习.本篇文章主要就layui的基础说明进行学习,以期加深对layui的认识.另外,所有的学习以及参考资源偶都基于layui官方文档.
核心方法
layui的底层方法是layui的基础支撑,是layui.js核心基础库中几个核心的方法,而在这里,暂时只对其中比较重要的模块定义方法layui.define,模块加载方法layui.use.以及全局配置方法layui.config进行简单的总结介绍.其他一些底层方法,比较详细的内容可以参看官方文档学习.
- layui.config(options) 全局配置方法
该方法是一个全局配置方法,在使用模块之前,进行一些最基本的全局参数配置(在连接外部js模块文件是会经常使用到)
layui.config({
dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视
,version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
,base: '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
});
我们看看提供的参数,我们可以发现,我们在使用该方法的时候,基本只会使用到base参数来引入我们的外部js文件,甚至如果我们不按照其模块规范使用传统js引入方式的话,我们都不需要设置base参数.
该方法的使用多使用在使用模块规范来引入外部js文件,使用自定义模块的时候使用: 我们看一个简单的例子:
// 通过config方法引入js文件的绝对路径,只需要导入到对应的目录下即可.
layui.config({
base: '/sty_layui/src/js/'
})
// 通过layui.use('mods',callback)方法加载(调用)js文件夹下对应的mods模块.
layui.use('sty_module',{}); // 这里第一个mods参数就是需要用到的模块js文件的名字
当然我们还可以使用下面的方法引入不同级的js文件.并且设置别名:
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
我们还可以直接使用.extend方法直接引入不更随base绝对路径的自定义文件路径,这种方式通常使用在从静态资源服务器上获取js资源文件.
//你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为 layui 2.2.0 新增)
layui.extend({
mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径,即不跟随 base 路径
})
- layui.define(['mods'],callback) 模块定义方法
我们在前面知道layui框架的设计思想是模块化的,并且可以实现按需加载,预先加载等加载模块的方式,以求通过这种方式来达到用更轻量级的内容达到更高效的目的.并且其是支持自定义模块的,自定义模块的好处在于能够大量减少代码的冗杂重复.可以将共用的模块封装起来.
我们通过一个例子来看看模块的定义:
/*外部js文件,将自定义模块封装在外部纯js文件中.*/
layui.define(function (exports) {
var obj = { // 声明一个对象,对象体内部用来书写自定义方法.
hello: function (str) {
alert('Hello'+ str);
}
};
exports('mymod',obj); // exports的两个参数,第一个用来设置当前模块的名称,第二个返回对象obj
});
// define的两个参数,第一个参数用来声明当前模块需要依赖的模块我们可以不填.
// 第二个参数即为模块的回调函数,它返回exprots参数,用于输出该模块的接口.
layui.define(['layer','form'],function (exports) {
var obj = {
hello: function (str) {
alert('Hello'+ str);
}
};
exports('mymod',obj);
});
-
layui.use(['mods'],callback)加载模块的方法
layui的内置模块都是默认不加载的,必须在执行了该方法后才会被加载(当然前提是你使用的是模块化),该方法其实几乎与define方法一样,用法上没有什么区别,我们来看看该如何使用上面我们自定义的模块吧:
// 该方法使用的前提是你已经引入了对应的模块.
layui.use('mymod',function () {
var mod = layui.mymod;
mod.hello('world');
});
模块规范
layui的模块是基于layui.js内部的异步模块加载方式,它自己定义一套更轻量的模块规范,使其在大量的实践后成为layui最核心的模块加载引擎.
-
预先加载
layui采用的核心加载方法就是layui,use(mods,callback)方法,预先加载,其实就是使用一个大的use方法,将所需的模块都先加载进来,然后在内部进行操作,这样会避免到处写use方法的情况.我们看看官方的示例:
layui.use(['form', 'upload'], function(){ //如果只加载一个模块,可以不填数组。如:layui.use('form')
var form = layui.form //获取form模块
,upload = layui.upload; //获取upload模块
//监听提交按钮
form.on('submit(test)', function(data){
console.log(data);
});
//实例化一个上传控件
upload({
url: '上传接口url'
,success: function(data){
console.log(data);
}
})
});
-
按需加载
按需加载其实就是在具体的控件中的事件回调中直接使用use方法,来达到当使用到该事件的时候,模块才被加载的目的.来看看例子:
button.addEventListener('click', function(){
layui.use('laytpl', function(laytpl){ //温馨提示:多次调用use并不会重复加载laytpl.js,Layui内部有做模块cache处理。
var html = laytpl('').render({});
console.log(html);
});
});
显然这种方式并不利于代码的可读性和维护性,当你的js代码较多的时候,这种方式显然是不明智的.
-
扩展一个模块
layui允许我们随意拓展自定义模块.来达到封装我们自己所需的模块.拓展方法其实在上面定义模块中就有讲到.参考上面描述.
页面元素规范
layui提倡返璞归真,遵循于原生态的元素书写规则,所以通常而言,你仍然是在写基本的HTML和CSS代码,不同的是,在HTML结构上及CSS定义上需要小小遵循一定的规范。
- css命名规范
class命名前缀:layui,连接符:-,如:class="layui-form"命名格式一般分为两种:
一:layui-模块名-状态或类型,
二:layui-状态或类型。因为有些类并非是某个模块所特有,他们通常会是一些公共类。
如:一(定义按钮的原始风格):class="layui-btn layui-btn-primary"、
二(定义内联块状元素):class="layui-inline"
大致记住这些简单的规则,会让你在填充HTML的时候显得更加得心应手。
- html规范
- layui在解析HTML元素的时候,必须充分确保其结构是被支持的:
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
如果改变了结构,极有可能会导致Tab功能失效。所以在嵌套HTML的时候,你应该细读各个元素模块的相关文档.
- 常用公共属性.
很多时候,元素的基本交互行为,都是由模块自动开启。但不同的区域可能需要触发不同的动作,这就需要你设定我们所支持的自定义属性来作为区分。如下面的 lay-submit、lay-filter即为公共属性.
image.png更新时间:
2019-6-12
15:26
网友评论