LayUI的入门指南
LayUI
- 什么是LayUI?
-
- LayUI兼容性和面向场景
- 获取LayUI的几种方式
- LayUI存在的价值?
- LayUI的元素由什么组成?
- LayUI拥有哪些内置模块？
- LayUI拥有哪些兼容性?
- LayUI的简单应用
-
- 金典模块化方式
-
- 模块化的用法（推荐）
- 非模块化方式
-
- 非模块化用法(个人不推荐)
- LayUI开发效果
什么是LayUI?
layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用；非常适合界面的快速开发。
layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
注：MVVM是Model-View-ViewModel的简写；它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
| 外文名 | 优 点 | 类 型 | 面向人群 |
|---|---|---|---|
| Layui | 原生开发模式、模块化、兼容性强 | 开源的模块化前端 UI 框架 | 后端开发者，前端工程师 |
LayUI兼容性和面向场景
layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。
获取LayUI的几种方式
1、官网首页下载
你可以在官网首页 下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。
2、 Git 仓库下载
你也可以通过 GitHub 或 码云 得到 layui 的完整开发包，以便于你进行二次开发
3、 npm 安装(一般用于 WebPack 管理)
LayUI存在的价值?
layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！ layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身！
AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
requireJS主要解决两个问题
多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标准库。
LayUI的元素由什么组成?
layui的元素由：
布局（栅格、后台布局）、颜色、字体图标、动画、按钮、表单、导航条、面包屑、选项卡、进度条、面板、静态表格、徽章、时间线、辅助元素等
LayUI拥有哪些内置模块？
layui 提供了丰富的内置模块,其中主要包括：
layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含 layui.js 和所有模块的合并文件
LayUI拥有哪些兼容性?
Chrome / Firefox / Safari /Internet Explorer 8.0+
LayUI的简单应用
金典模块化方式
1、获得 layui 后，你只需要引入下面两个文件：
./layui/css/layui.css
./layui/layui.js //如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js
2、不用去管其它任何文件；因为他们（比如各模块）都是在最终使用的时候才会自动加载。
我们来做一个基本的页面：
<!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 LayUI User');
});
</script>
</body>
</html>
layui具备AMD的影子，又并非受限于 CommonJS 的那些条条框框，layui认为这种轻量的组织方式，比WebPack更符合绝大多数场景。所以她坚持采用经典模块化，也正是能让人避开工具的复杂配置，回归简单，安静高效地编织原生态的HTML、CSS和JavaScript。
她与Bootstrap最大的不同恰恰在于她糅合了自身对经典模块化的理解。
模块化的用法（推荐）
1、遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件
<script>
layui.config({
base: '/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
}).use('index'); //加载入口
</script>
2、 index.js它的内容应该如下：
/**
项目JS主入口
以依赖layui的layer和form模块为例
**/
layui.define(['layer', 'form'], function(exports){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});
非模块化方式
如果你并不喜欢 layui 的模块化组织方式，你可以采用“一次性加载”的方式，我们将 layui.js 及所有模块单独打包合并成了一个完整的js文件，用的时候直接引入这一个文件即可。
<!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.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello LayUI User');
}();
</script>
</body>
</html>
非模块化用法(个人不推荐)
当你采用这样的方式时，你无需再通过 layui.use() 方法加载模块，直接使用即可，如：
<script src="../layui/layui.all.js"></script>
<script>
;!function(){
//无需再执行layui.use()方法加载模块，直接使用即可
var form = layui.form
,layer = layui.layer;
//…
}();
</script>
LayUI开发效果
如果你已经学会了以上的知识点，恭喜你，你已经成功入门了！！！
