layui框架学习笔记

最新推荐文章于 2025-02-22 15:19:19 发布

修克儿

最新推荐文章于 2025-02-22 15:19:19 发布

阅读量317

点赞数

文章标签： layui

本文链接：https://blog.youkuaiyun.com/qq_42425957/article/details/107633674

版权

layui 前端框架模块加载样式引用路径配置

关键词由优快云通过智能技术生成

本文介绍了layui前端UI框架的基本特性，强调其轻量级和易用性。通过实例展示了如何声明模块和回调函数，以及解决样式加载问题。在layui.config中配置外部js时遇到的问题和解决路径问题的经验分享，强调了正确设置路径对于模块加载的重要性。

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

layui的深入浅出

关于layui

layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

声明模块和回调函数

layui 的模块是基于 layui.js 内部实现的异步模块加载方式，它并不遵循于AMD（没有为什么，毕竟任性呀！），而是自己定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为 layui 最核心的模块加载引擎。

常用方法:layui.use(‘模块’,function(){…})

来个小例子吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>声明模块和回调函数</title>
		
		<link href="layui/css/layui.css" >
		<script src="layui/layui.js"></script>
	</head>
	<body>
		<ul class="layui-nav" lay-filter="">
			<li class="layui-nav-item"><a href="">最新活动</a></li>
			<li class="layui-nav-item layui-this"><a href="">产品</a></li>
			<li class="layui-nav-item"><a href="">大数据</a></li>
			<li class="layui-nav-item">
				<a href="javascript: ;">解决方案</a>
				<dl class="layui-nav-child"><!--二级菜单-->
					<dd><a href="">移动模块</a></dd>
					<dd><a href="">后台模板</a></dd>
					<dd><a href="">电商平台</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="">社区</a></li>
		</ul>
		
		<script>
			//注意 ：导航依赖element模块，否则无法进行功能性操作
			layui.use('element',function(){
				var element=layui.element;
				//....
			});
			
		</script>
	</body>
</html>

Tips：当我们使用编辑器时（我这里是HbuilderX），可以使用快捷键来快速创建标签
例如:
*li[class=“layui-nav-item”]5 再按下Tab键
*(dd>a[href=""])3再按下Tab键
运行结束效果如下：
这里是个顶部导航栏，并且具有二级菜单
这时是不是发现一个问题，我们的导航展示没有样式！！！我也一样。所以我就一行行的查看代码，竟然没有发现什么明显的问题，所以我就从html头部开始看，是不是样式引入出了问题呢？果不其然，问题就在这段代码中…

所以我发现自己的这段代码中少了 rel=“sytlesheet”,加上之后样式就正常了！！！
我去查了下rel属性，以下是查询结果：
rel 属性 – link标签中的rel属性,定义了文档与链接的关系。
rel属性通常出现在a,link标签中
属性值
Alternate – 定义交替出现的链接
Stylesheet – 定义一个外部加载的样式表
Start – 通知搜索引擎,文档的开始
Next – 记录文档的下一页。
(浏览器可以提前加载此页)
Prev – 记录文档的上一页。*

至此，我明白了rel的作用，和它一些其它的属性值。以后html中最好加上ref="Stylesheet"保证样式的正常展示。

layui.config中获取不到外部js

当我们希望采用外部js时，即使用官网所说的预先加载js文件—【因为这样可以避免到处写layui.use的麻烦】和扩展模块。
以扩展模块为例，当我们有几个js文件中，分别通过layui.define定义了自己的属性,

//mod1.jslayui.define('layer',
 function(exports){  
 //…  
 exports(mod1, {});});
  //mod2.js，假设依赖 mod1 和 form
  layui.define(['mod1', 'form'],
   function(exports){  
   //…  
   exports(mod2, {});});  
    //mod3.js
    //…  
    //main.js 主入口模块
    layui.define('mod2',
     function(exports){ 
      //…  
      exports('main', {});});

那么你只需要根据其依赖关系将其合并，即可一次性加载所有扩展模块！！mod1、mod2和mod3！接下来只需要去加载它们

<script src="../layui/layui.all.js"></script>  
<script>layui.config({ 
 base: '../js/' //你的扩展模块所在目录
 }).use('main'); //这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块}();
 </script>

当时我的文件目录是放在了这里：
这个文件夹下面
代码我是这样写的：
在这里插入图片描述
可出现了些问题，这些模块都未加载到。。。。
接着我想到可能是路径的问题，就把路径改成绝对路径：

问题解决！当我们在写路径的时候经常会遇到获取不到的情况，而当我们把路径写成绝对路径以后，这个问题就迎刃而解，就可以去找其他地方的问题。