引言:本文主要是针对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>