Layui概述---学习笔记

Layui概述

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

Layui的获取

直接访问官网就可以下载Layui框架的最新版本
Layui官网

Layui的目录结构

在下载了Layui之后，解压打开之后，可以看到如图：

点击layui文件夹，就可以看见layui框架的全部内容

Layui的引入

1.首先在Hbuilder x（小编用的是这个，大家可以根据自己的爱好来选择）创建一个新的项目：
2.将解压后的layui整个文件夹复制到这个项目中去：

3.新建一个html文件,打开新建 的html文件，然后通过如下两行代码引入layui.css和layui.js

 <link rel="stylesheet" href="./layui/css/layui.css">

<script src="./layui/layui.js"></script>

由于有一些人会在项目下新建一个resources文件夹，然后放入layui相关文件，所以上述路径需要根据自己放的目录进行填写
上述为第一种方式，叫做模块化式引入，之所以这么起名，是因为我们每次想要调用一些模块时都需要通过如下的方法

<!-- 引入js -->
		<script src="layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(["jquery"],function(){
				//获取jquery对象
				var $ = layui.jquery;
				//为按钮添加事件
				$("#add").click(function(){
					alert($(this).html())
				});
			
				$("#delete").click(function(){
					alert($(this).html())
				});
		
			});
		</script>

这里引入了jquery模块，layui有很多模块，在layui-v2.5.6\layui-v2.5.6\layui\lay\modules这里我们可以看到，layui有如图所示的一些模块：

这里每一个模块的使用都需要通过上述代码的形式进行引入，希望大家熟记，这也是layui作者推荐大家使用的一种方式。
官网还为我们提供了第二种引入方式（不推荐，因为一个项目很难用到所有模块，所以不需要全部引入），非模块化方式，引入代码如下

 <link rel="stylesheet" href="./layui/css/layui.css">

<script src="./layui/layui.all.js"></script>
//模块通过layui.all.js全部加载完毕，所以直接使用即可，不需要通过layui.use的方式。
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
}();

除了内置的一些模块外，layui还支持模块的拓展，具体的使用方法官网文档也给出了使用方法，各位小伙伴们可以自己去看呀，小编这里暂时用不到就不详细解释啦
以上就是layui的概述和引用方式了，做好了以上工作以后，我们就可以开始学习使用layui的一些页面元素和内置模块了