1. Global configuration
1.1. Method: layui.config(options).
1.2. You can configure some parameters globally before using the module, although it is not necessary most of the time. The currently supported global configuration items are as follows:
layui.config({
dir: '/res/layui/' // layui.js所在路径(注意, 如果是script单独引入layui.js, 无需设定该参数。), 一般情况下可以无视。
,version: false // 一般用于更新模块缓存, 默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值, 如: 201610。
,debug: false // 用于开启调试模式, 默认false, 如果设为true, 则JS模块的节点会保留在页面。
,base: '' // 设定扩展的layui模块的所在目录, 一般用于外部模块扩展。
});2. Define the module
2.1. 方法: layui.define([mods], callback)。
2.2. A layui module can be defined by this method. The parameter mods is optional and is used to declare the modules that the module depends on. callback is the callback function after the module is loaded. It returns an exports parameter to output the module's interface.
layui.define(function(exports){
exports('alias', function(){
return '一般对子目录模块建立别名';
}
);
});2.3. exports is a function, it accepts two parameters, the first parameter is the module name, the second parameter is the module interface, when you declare a module above, you can use it externally, the alias will be Register under the layui object, you can use layui.alias() to execute the interface of the module.
2.4. You can also declare the dependencies required by the module when defining a module:
layui.define('code', function(exports){
exports('etdCode', {
title: '代码修饰器扩展模块'
,code: function(id, elem, title, height, encode, skin, about){
var elem = document.getElementById(id);
elem.innerHTML = elem.innerHTML.trim();
layui.code({elem, title, height, encode, skin, about});
}
});
});2.5. The mods parameter is not only an array, you can also pass a character-type module name directly, but this can only depend on one module. The above'code' is the module that this module depends on, and the second parameter of the exports function is an object.
2.6. The module interface of layui will be bound under the layui object, and the internal is completed by the layui.define() method. Each module has a unique name and cannot be occupied. So you don't need to worry about the space of the module being polluted, unless you actively delete layui.{module name}. Calling the module can be achieved through the layui.use method, and then obtain the module interface through the layui object. Such as:
layui.use(['layer', 'laypage', 'laydate'], function(){
var layer = layui.layer // 获得layer模块
,laypage = layui.laypage // 获得laypage模块
,laydate = layui.laydate; // 获得laydate模块
// 使用模块
});3. Expand a module alias
3.1. Method: layui.extend(options). Generally used for your extension modules, give an alias to a module with multiple levels of subdirectories.
<script type="text/javascript">
layui.config({
base: 'layui/etdCode/'
}).extend({
alias: 'child/alias'
});
</script>3.2. You can also ignore the root directory set by base and specify the path directly in extend. {/} means to use its own path, that is, not to follow the base path.
<script type="text/javascript">
layui.extend({
mod2: '{/}http://cdn.xxx.com/lib/mod2'
});
</script>4. Extension module example
4.1. Create a new etdCode in the layui directory as the directory of our extension module
4.2. Create a new extension module of etdCode.js in the etdCode directory
4.3. Edit etdCode.js module code
layui.define('code', function(exports){
exports('etdCode', {
title: '代码修饰器扩展模块'
,code: function(id, elem, title, height, encode, skin, about){
var elem = document.getElementById(id);
elem.innerHTML = elem.innerHTML.trim();
layui.code({elem, title, height, encode, skin, about});
}
});
});4.4. There is also a child directory under the etdCode directory, which is our alias module
4.5. Edit alias.js module code
layui.define(function(exports){
exports('alias', function(){
return '一般对子目录模块建立别名';
}
);
});4.6. Edit extendcode.html to use extension modules
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>code模块的扩展</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<pre class="layui-code" id='test1'>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
<div id='test2'></div>
<script type="text/javascript">
layui.config({
base: 'layui/etdCode/'
}).extend({
alias: 'child/alias'
});
// 使用use方法引入模块
layui.use(['etdCode', 'alias'], function(){
var etdCode = layui.etdCode;
layui.$('#test2').text(layui.alias());
etdCode.code('test1');
});
</script>
</body>
</html>4.7. Effect picture
5. Get device information
5.1. Method: layui.device(key), the parameter key is optional.
5.2. Due to compatibility processing and responsive support for some functions of layui, this method also plays a vital role. Especially the role in the layui mobile module is very important. This method returns a wealth of device information:
var device = layui.device();
// device即可根据不同的设备返回下述不同的信息
{
os: "windows" // 底层操作系统, windows、linux、mac等
,ie: false // ie6-11的版本, 如果不是ie浏览器, 则为false
,weixin: false // 是否微信环境
,android: false // 是否安卓系统
,ios: false // 是否ios系统
,mobile: false // 是否为移动设备
}6. Other
| Method/attribute |
description |
| layui.cache |
Static properties. Get some configuration and temporary cache information. |
| layui.each(obj, fn) |
Object (Array, Object, DOM object, etc.) traversal can be used to replace the for statement. |
| layui.getStyle(node, name) |
Get the style attribute value of an original DOM node, such as: layui.getStyle(document.body,'font-size'). |
| layui.img(url, callback, error) |
The picture is preloaded. |
| layui.sort(obj, key, desc) |
Re-sort the objects in the array according to a member, such as: layui.sort([{a: 3},{a: 1},{a: 5}],'a'). |
| layui.router() |
Obtain the location.hash routing structure, which generally plays a role in single-page applications. |
| layui.url(href) |
Used to objectify the pathname, search, and hash attribute values in a URL link. Parameters: href is optional. If it is not passed, the url of the current page (ie: location.href) will be automatically read. Example: var url = layui.url(); |
| layui.hint() |
To print some exception information to the console, currently only the error method is returned: layui.hint().error('error'). |
| layui.stope (e) |
Stop the event from bubbling up. |
| layui.onevent(modName, events, callback) |
Add custom module events. |
| layui.event(modName, events, params) |
Execute custom module events, use with onevent. |
| layui.off(events, modName) |
Used to remove the monitoring of module related events. For example: layui.off('select(filter)','form'), then the event of form.on('select(filter)', callback) will be removed. |
| layui.factory(modName) |
Used to obtain the define callback function corresponding to the module. |
| layui.link(href) |
Load CSS dynamically. href is the css path. Note: This method is not necessary for you to use layui, it is generally only used to dynamically load your external CSS files. |
| layui.data(table, settings) |
Friendly encapsulation of localStorage. Persistent storage, data will exist forever, unless physically deleted. |
| layui.sessionData(table, settings) |
Friendly encapsulation of sessionStorage. Conversational storage, the data becomes invalid after the page is closed. |
7. Examples
7.1. Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>layui其它底层方法</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div id="test1"></div>
<script type="text/javascript">
layui.use(['jquery'], function(){
var $ = layui.jquery;
// 平台信息
var device = layui.device();
var platform = '';
// 变量对象
layui.each(device, function(key, value){
platform += (key + ':' + value + '<br />');
});
$('#test1').html(platform);
});
</script>
</body>
</html>7.2. Effect picture
