01 Layui入门指南

qq_48968230

已于 2023-03-17 15:10:04 修改

阅读量207

点赞数

分类专栏： layui 文章标签： layui 前端 javascript

于 2023-03-09 19:45:27 首次发布

本文链接：https://blog.csdn.net/qq_48968230/article/details/129427097

版权

layui 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

引言：本文主要是针对Layui官网文档l进行学习，然后归纳笔记，进行简化记忆，方便后期复盘巩固，如需深入学习，详见：Layui 开发使用文档 - 入门指南 (ilayuis.com)。

一、下载引用

方法1. 官网首页下载 Layui - 经典开源模块化前端 UI 组件库 (ilayuis.com)

然后解压到项目中作为css，js的文件引入即可

其中：layui.css //核心样式库； layui.js //核心模块库

（目前采用的这个方法）

方法2 GIt下载详见引言中官网文档

方法3 npm下载详见引言中官网文档

方法4 第三方CDN方式引入

<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
 
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.7.6/dist/layui.js">

练习：(将Layui下载到了本地，并放在项目的静态资源目录，并在html页面引入和核心文件layui.css //核心样式库； layui.js //核心模块库

项目文件目录：

index.html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui学习01</title>
		<!-- 引入核心layui样式 -->
		<link rel="stylesheet" href="./layui/css/layui.css">
	</head>
	<body>
		<!-- 编写html代码 -->	
		
		
		<!-- 引入核心js文件 -->
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['layer','form'],function(){
				var layer = layui.layer;
				var form = layui.form;
				
				// 弹出信息“Hello World”
				layer.msg('Hello World');
			});
		</script>
	</body>
</html>

运行结果：（过几秒中间内容消失）

二、Layui关于模块的想法

1. 定义模块与使用模块

layui.define() 定义

layui.use() 使用

像使用普通的API一样来管理模块。

//定义模块  （通常单独作为一个js文件）
layui.define([modules], function(exports) {
    //……


    export('mod1', api);
});


//使用模块
layui.use(['mod1'], function(args) {
    var mod1 = layui.mod1;

    //……
});

2. 建立模块入口

遵循layui的模块规范建立一个入口文件，并通过layui.use()方式来加载该入口文件

<!-- 引入的核心js文件   当然也可以由 github 或 gitee clone -->
<script src="./layui/layui.js"></script> 
<script>
layui.config({
  base: '/res/js/modules/' //存放新模块的目录，注意，不是 layui 的模块目录
}).use('index'); //加载入口，index即为/res/js/modules/目录下的index.js
</script>

其中加载入口中的index.js内容如下：（注意layui2.6之前需要指定内置模块，之后不需要指定）

//index.js 项目 JS 主入口     
//以依赖 layui 的 layer 和 form 模块为例
   
layui.define(['layer', 'form'], function(exports){    //目前layui2.6后不需要指定内置模块
    var layer = layui.layer, form = layui.form;
    layer.msg('Hello World');

    exports('index', {}); //注意，这里是模块输出的核心，模块名index必须和 use 时的模块名一致
});


//从layui2.6开始，layui.js里面已经包含了layui的所有内置模块，无需再指定内置模块了,如下：

// index.js 项目 JS 主入口

layui.define(function(){ 
    //直接可得到各种内置模块
    var layer = layui.layer, form = layui.form, table = layui.table;
    
    //…
    layer.msg('Hello World');
    exports('index', {}); //注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致
});

3. 管理扩展模块

平时也会需要加载扩展模块（符合layui模块规范的js文件）。假定项目中存放了多个扩展模块，如下：

//mod1.js
layui.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、main等扩展模块构建合并到一个模块文件：main.js，只需加载它即可。这样我们最多只需要加载两个js文件：layui.js、main.js，从而大幅度减少静态资源的请求。

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