024-底层方法

最新推荐文章于 2025-03-22 23:55:12 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-03-22 23:55:12 发布

阅读量179

点赞数

分类专栏： layui学习

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/113063223

版权

layui学习专栏收录该内容

32 篇文章

订阅专栏

layui 是一款采用自身模块规范编写的前端 UI 框架，这篇文章详细介绍了 layui 的全局配置、模块定义、扩展模块、获取设备信息以及其他底层方法的使用。通过实例展示了如何定义和使用模块，以及如何扩展别名和自定义事件。同时，还提供了获取设备信息的方法，方便在不同设备上进行适配和调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 全局配置

1.1. 方法: layui.config(options)。

1.2. 你可以在使用模块之前, 全局化配置一些参数, 尽管大部分时候它不是必须的。目前支持的全局配置项如下:

layui.config({
    dir: '/res/layui/' // layui.js所在路径(注意, 如果是script单独引入layui.js, 无需设定该参数。), 一般情况下可以无视。
    ,version: false // 一般用于更新模块缓存, 默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值, 如: 201610。
    ,debug: false // 用于开启调试模式, 默认false, 如果设为true, 则JS模块的节点会保留在页面。
    ,base: '' // 设定扩展的layui模块的所在目录, 一般用于外部模块扩展。
});

2. 定义模块

2.1. 方法: layui.define([mods], callback)。

2.2. 通过该方法可定义一个layui模块。参数mods是可选的, 用于声明该模块所依赖的模块。callback即为模块加载完毕的回调函数, 它返回一个exports参数, 用于输出该模块的接口。

layui.define(function(exports){
	exports('alias', function(){
    		return '一般对子目录模块建立别名';
		}
  	);
});

2.3. exports是一个函数, 它接受两个参数, 第一个参数为模块名, 第二个参数为模块接口, 当你声明了上述的一个模块后, 你就可以在外部使用了, alias就会注册到layui对象下, 即可通过layui.alias()去执行该模块的接口。

2.4. 你也可以在定义一个模块的时候, 声明该模块所需的依赖:

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. mods参数并非只能是一个数组, 你也可以直接传一个字符型的模块名, 但是这样只能依赖一个模块。上述的'code'即为本模块所依赖的模块, 同时exports函数的第二个参数是一个对象。

2.6. layui的模块接口会绑定在layui对象下, 内部由layui.define()方法来完成。每一个模块都会一个特有的名字, 并且无法被占用。所以你无需担心模块的空间被污染, 除非你主动delete layui.{模块名}。调用模块可通过layui.use方法来实现, 然后再通过layui对象获得模块接口。如:

layui.use(['layer', 'laypage', 'laydate'], function(){
    var layer = layui.layer // 获得layer模块
    	,laypage = layui.laypage // 获得laypage模块
      	,laydate = layui.laydate; // 获得laydate模块
      
    // 使用模块
});

3. 拓展一个模块别名

3.1. 方法: layui.extend(options)。一般用于你的扩展模块, 给具有多级子目录的模块起一个别名。

<script type="text/javascript">
	layui.config({
			base: 'layui/etdCode/'
	}).extend({
	  	alias: 'child/alias'
	});
</script>

3.2. 你也可以忽略base设定的根目录, 直接在extend指定路径。{/}的意思即代表采用自有路径, 即不跟随base路径。

<script type="text/javascript">
	layui.extend({
		mod2: '{/}http://cdn.xxx.com/lib/mod2' 
	});
</script>

4. 扩展模块例子

4.1. 在layui目录下新建一个etdCode作为我们扩展模块的目录

4.2. 在etdCode目录新建一个etdCode.js的扩展模块

4.3. 编辑etdCode.js模块代码

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. 在etdCode目录下还有一个child目录, 是我们的alias模块

4.5. 编辑alias.js模块代码

layui.define(function(exports){
	exports('alias', function(){
    		return '一般对子目录模块建立别名';
		}
  	);
});

4.6. 编辑extendcode.html使用扩展模块

<!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. 效果图

5. 获取设备信息

5.1. 方法: layui.device(key), 参数key是可选的。

5.2. 由于layui的一些功能进行了兼容性处理和响应式支持, 因此该方法同样发挥了至关重要的作用。尤其是在layui mobile模块中的作用可谓举足轻重。该方法返回了丰富的设备信息:

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. 其它

方法/属性	描述
layui.cache	静态属性。获得一些配置及临时的缓存信息。
layui.each(obj, fn)	对象(Array、Object、DOM对象等)遍历, 可用于取代for语句。
layui.getStyle(node, name)	获得一个原始DOM节点的style属性值, 如: layui.getStyle(document.body, 'font-size')。
layui.img(url, callback, error)	图片预加载。
layui.sort(obj, key, desc)	将数组中的对象按某个成员重新对该数组排序, 如: layui.sort([{a: 3},{a: 1},{a: 5}], 'a')。
layui.router()	获得location.hash路由结构, 一般在单页面应用中发挥作用。
layui.url(href)	用于将一段URL链接中的pathname、search、hash属性值进行对象化处理。参数: href可选。若不传, 则自动读取当前页面的url(即: location.href)。示例: var url = layui.url();
layui.hint()	向控制台打印一些异常信息, 目前只返回了error方法: layui.hint().error('出错啦')。
layui.stope(e)	阻止事件冒泡。
layui.onevent(modName, events, callback)	增加自定义模块事件。
layui.event(modName, events, params)	执行自定义模块事件, 搭配onevent使用。
layui.off(events, modName)	用于移除模块相关事件的监听。如: layui.off('select(filter)', 'form'), 那么form.on('select(filter)', callback)的事件将会被移除。
layui.factory(modName)	用于获取模块对应的define回调函数。
layui.link(href)	动态加载CSS。href即为css路径。注意: 该方法并非是你使用layui所必须的, 它一般只是用于动态加载你的外部CSS文件。
layui.data(table, settings)	对localStorage的友好封装。持久化存储, 数据会永久存在, 除非物理删除。
layui.sessionData(table, settings)	对sessionStorage的友好封装。会话性存储, 数据在页面关闭后即失效。

7. 例子

7.1. 代码

<!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. 效果图