layui中从上一个js模块中取参数_[layui初探]__ layui基础说明

前言

在前面的第一篇文章,我们已经进行了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元素的时候,必须充分确保其结构是被支持的:

• 标题一
• 标题二
• 标题三

内容1

内容2

内容3

如果改变了结构，极有可能会导致Tab功能失效。所以在嵌套HTML的时候，你应该细读各个元素模块的相关文档.

常用公共属性.

很多时候，元素的基本交互行为，都是由模块自动开启。但不同的区域可能需要触发不同的动作，这就需要你设定我们所支持的自定义属性来作为区分。如下面的 lay-submit、lay-filter即为公共属性.

image.png

更新时间:

2019-6-12

15:26