layui框架适合移动端吗？LayUI-极易上手拿来即用的前端
layui框架适合移动端吗？LayUI-极易上手拿来即用的前端<!-- 引入 layui.css --> <link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css"> <!-- 引入 layui.js --> <script src="//unpkg.com/layui@2.6.5/dist/layui.js">当然，使用 NPM 下载也是可以的： ├─css //css目录 │ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：） │ │ ├─laydate │ │ └─layer │ └─layui.css //核心样式文件 ├─font //字体图标目录 └─layui.js //核心
前端框架和思想一直在不停变化，当前主流的前端框架基本是基于 MVVM 底层的，难免会令一些开发者感到不适应，尤其是对于前端开发较为陌生的后端人员。Layui，重新回到“经典模块化”的前端思想，试图以最简单快速的方式构建面向浏览器的前端应用。
Layui
简介LayUI，是 sentsin 在 Github 上开源的一款采用自身模块规范编写的前端 UI 框架，仓库位于 https://github.com/sentsin/layui（https://gitee.com/sentsin/layui），目前版本为 2.6.5。
Layui 采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其
- 风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发
- 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。
- 更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来
layui
使用区别于主流的前端框架，Layui 不依赖于 NPM 和 Yarn 等进行管理，只需要下载 layui，然后把其部署到静态资源项目目录，并引入下述文件：
./layui/css/layui.css
./layui/layui.js
即可进行开发。Layui 项目的结构如下：
├─css //css目录
│ │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
│ │ ├─laydate
│ │ └─layer
│ └─layui.css //核心样式文件
├─font //字体图标目录
└─layui.js //核心库
也可以使用 CDN 引入：
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.5/dist/layui.js">
当然，使用 NPM 下载也是可以的：
npm i layui
layui 兼容市面上的全部浏览器（IE6/7除外），可作为 Web 界面速成开发方案。
我们来看一个基本的 Layui 使用例子：
<!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>
如果熟悉 jQuery 时代的前端开发的话，相信你不会对这种形式感到陌生。在这个例子中，我们编写了一个最简单的 HTML 文件，引入 Layui 提供的 CSS 样式文件和 JS 库，并直接使用 script tag 进行初始化使用。
一个 layui 模块是这样定义的：
//layui 模块的定义（新 js 文件）
layui.define([mods] function(exports){
//……
exports('mod' api);
});
//layui 模块的使用
layui.use(['mod1' 'mod2'] function(args){
var mod = layui.mod1;
//……
});
Layui 定义为「经典模块化」，避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效。Layui 具备早前 AMD 的影子，又并非受限于 CommonJS 的那些条条框框，layui 认为这种轻量的组织方式，比WebPack更符合绝大多数场景。所以坚持采用经典模块化，也正是能让人避开工具的复杂配置，回归简单，安静高效地编织原生态的 HTML/CSS/JS。
但是 layui 又并非是 RequireJS 那样的模块加载器，而是一款 UI 解决方案，与 BootStrap 的不同又在于：layui 糅合了自身对经典模块化的理解。这使得你可以在 layui 组织的框架之内，以更具可维护性的代码、去更好的编织丰富的用户界面。
可以遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：
<!-- 你引入的 layui.js 建议是通过官网首页下载的。当然也可以由 github 或 gitee clone -->
<script src="./layui/layui.js"></script>
<script>
layui.config({
base: '/res/js/modules/' //你存放新模块的目录，注意，不是 layui 的模块目录
}).use('index'); //加载入口
</script>
上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：
/**
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 提供栅格化的布局，使用响应式的行列模式：
<div class="layui-container">
常规布局（以中型屏幕桌面为例）：
<div class="layui-row">
<div class="layui-col-md9">
你的内容 9/12
</div>
<div class="layui-col-md3">
你的内容 3/12
</div>
</div>
移动设备、平板、桌面端的不同表现：
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
移动：4/12 | 平板：12/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
移动：4/12 | 平板：7/12 | 桌面：8/12
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
移动：4/12 | 平板：5/12 | 桌面：4/12
</div>
</div>
</div>
栅格化布局
Layui 提供了美观强大的表单
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
...
表单
Layui 提供了使用方便的数据表格，可以智能地从数据渲染出美观的表格：
layui.use('table' function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
height: 312
url: '/demo/table/user/' //数据接口
page: true //开启分页
cols: [[ //表头
{field: 'id' title: 'ID' width:80 sort: true fixed: 'left'}
{field: 'username' title: '用户名' width:80}
{field: 'sex' title: '性别' width:80 sort: true}
{field: 'city' title: '城市' width:80}
{field: 'sign' title: '签名' width: 177}
{field: 'experience' title: '积分' width: 80 sort: true}
{field: 'score' title: '评分' width: 80 sort: true}
{field: 'classify' title: '职业' width: 80}
{field: 'wealth' title: '财富' width: 135 sort: true}
]]
});
});
表格
Layui 还实现了一个强大的模版引擎 laytpl，模板可与数据共存，这意味着可直接在模板中处理逻辑。
layui.use('laytpl' function(){
var laytpl = layui.laytpl;
//直接解析字符
laytpl('{{ d.name }}是一位公猿').render({
name: '贤心'
} function(string){
console.log(string); //贤心是一位公猿
});
//你也可以采用下述同步写法，将 render 方法的回调函数剔除，可直接返回渲染好的字符
var string = laytpl('{{ d.name }}是一位公猿').render({
name: '贤心'
});
console.log(string); //贤心是一位公猿
//如果模板较大，你也可以采用数据的写法，这样会比较直观一些
laytpl([
'{{ d.name }}是一位公猿'
'其它字符 {{ d.content }} 其它字符'
].join(''))
});
总结
Layui 采取了与当前主流的前端框架截然不同的思想，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，面向传统的浏览器开发，但又有所不同，实现了更为强大、美观、简洁的工具集。
Layui 极易上手，拿来即用 风格简约轻盈，组件优雅丰盈，非常适合网页界面的快速开发。其更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互。
layui
