- 前言
最近有需要做前端界面的快速开发,于是就考虑到前端框架的使用,在了解下,选择了学习当下比较常用到的layui前端框架来进行前端后台的界面搭建.
首先我们来看一段layui官方的自我介绍:
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
通过这段介绍我们简单了解到其几个基本的特点:
-
第一是基于原生html/css/js的前端框架(多用于界面搭建),
-
第二,其实比较容易上手使用的,学习门槛比较低
-
第三,极简主义(其所有空间的设计都比较符合现代审美观,极简,扁平化等),
-
第四,体积小巧,但组件丰富.非常适合界面的快速开发.
-
layui的安装与layui文档的使用
我们简单了解了layui之后,就需要动手安装并使用它了,
- 简单安装layui
访问官网,下载压缩包,解压并将其中的layui文件拷贝到自己对应的项目中.
image.png
image.png
image.png
这里需要注意的是,我们只需要layui文件夹,并不需要拷贝其他的多余文件.在安装完layui之后,记得将官网收藏,因为我们不是下载了就能够使用,我们还会需要访问其官方文档来学习该框架的使用方法.并且我们可以在其知识交流论坛进行交流学习.
- 如何学习layui
我们既然使用了别人的产品,那么最好的学习方式定然是通过产品说明书,即layui的文档.我们可以在layui官网上找到,文档,示例,社区,这三个重要的学习layui的资源地.
-
可以通过文档来一步步循序渐进的学习layui的使用,因为文档都是全面且详细的.
image.png
-
可以通过示例来快速上手使用layui给我们提供的丰富的各种控件.
image.png
-
可以通过社区来交流学习心得与查找碰到的bug与问题
image.png
- layui的简单使用
我们在了解并准备好了layui开发的工作后,就开始准备使用layui了.
首先浏览官方文档,并结合案例来说明:
- 在我们的资源加载到对应项目后,我们如何在我们的项目里引入layui.?
只需引入两个关键文件即可:
layui.css
layui.js
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
当然就是使用的传统的js,css文件引入的方式.
我们再来看一个官方的入门案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
效果:会在界面中间弹出一条信息,这条信息我们通过代码知道其并不是一个标签,而是通过js代码来直接弹出的.是layer的一个msg方法弹出的.layer我们现在还不清楚.在之后进行学习.
image.png
通过这个案例我们发现了一点,这里的js代码是直接书写在body标签里的,这与我们平常通过引用纯js文件的方式不同,俺么我们能否使用传统的引用方式,将js代码单独写入js文件呢.答案当然是可以的.
<!--引入js-->
<script src="../layui/layui.js"></script>
<!--自定义导入js文件-->
<!--<script src="index.js"></script>-->
我们完全可以使用传统的方法,来进行js文件的导入,但需要注意的是,我们一定需要引入laui.js文件,因为layui的诸多模块都与其关联,如果不引入它,项目是无法正常运行,使用layui中的各模块功能的.
- layui的模块化设计思想
前面简单了解到layui是采用模块规范编写的前端框架,之所以采用模块化来编写,是为了实现js的按需加载,使每个单独的标签或者属性都有单独的js模块与之对应,尝试以最简单的方式达到更高效的效果.
- 模块化的用法
其实我们在前面的基础案例中使用的就是模块化的使用方式,
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script>
使用模块化,需引入layui.js文件,并需通过layui.use来加载对应模块.
当然,在这个前提下,我们可以使用layui的模块规范建立入口文件,通过layui.use方法来加载该入口文件,如此我们就可以直接在外部书写纯js文件,并且不再需要使用use方法再次加载模块了.
我们通过一个实例看看:
html文件:
<!--引入js-->
<script src="../layui/layui.js"></script>
<!--自定义导入js文件-->
<!--<script src="index.js"></script>-->
<!--使用layui规范新建一个一个自己的模块作为接口-->
<script>
layui.config({
base:'/sty_layui/src/js/'
}).use('sty_module');
</script>
sty_module.js文件:
layui.define(['layer','form'],function (exports) {
var layer = layui.layer,form = layui.form;
layer.msg('hello world');
exports('sty_module',{}); // 这里的exports参数必须与上面的use模块名对应,是模块输出的核心
});
使用模块化,我们要记住必须引入layui.js文件,我们可以发现layui是通过,layui.config().use();方法来建立接口文件的 .
其中base应当为接口js文件的绝对路径.use参数表示为接口文件的名称.
绝对路径:从储存的根目录下,直到当前文件所存放的目录,windows系统采用的路径方式就是绝对路径方式:
image.png
相对路径:相对路径是以当前文件所处的位置来相对的寻找其他文件的位置.这在js,css文件的引入上就是使用的这种方式:
image.png
- 非模块化的用法
当然,layui尽管是基于模块化的设计思想,但显然它也没有抛弃非模块化的使用方式(尽管他们并不推荐这种使用方式):
非模块化的使用类似于一次性加载,将其所有的模块一次性加载,如何来实现呢,layui将layui.js与所有的模块另合为了一个完整的js文件,我们只需要在项目中引用它即可一次加载所有模块,在使用时就无须再使用layui.use方法来加载模块了.
<script src="../layui/layui.all.js"></script>
<script>
;!function(){
//无需再执行layui.use()方法加载模块，直接使用即可
var form = layui.form
,layer = layui.layer;
//…
}();
</script>
非模块化的使用,当然你必须了解,采用这种方式,就意味着layui模块化就失去了它的意义.但显然这种方式的使用会更加简单直接.
更新时间:
2019-6-11
19:50
网友评论