LayUI–极易上手拿来即用的前端UI框架

前端框架和思想一直在不停变化,当前主流的前端框架基本是基于 MVVM 底层的,难免会令一些开发者感到不适应,尤其是对于前端开发较为陌生的后端人员。Layui,重新回到“经典模块化”的前端思想,试图以最简单快速的方式构建面向浏览器的前端应用。

LayUI - 极易上手拿来即用的前端 UI 框架

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 - 极易上手拿来即用的前端 UI 框架

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 引入:


<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
 

<script src="//unpkg.com/layui@2.6.5/dist/layui.js">

当然,使用 NPM 下载也是可以的:

npm i layui

layui 兼容市面上的全部浏览器(IE6/7除外),可作为 Web 界面速成开发方案。

我们来看一个基本的 Layui 使用例子:

html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用 layuititle>
  <link rel="stylesheet" href="../layui/css/layui.css">
head>
<body>
 

 
<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() 方式来加载该入口文件,如下所示:


<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 提供栅格化的布局,使用响应式的行列模式:

class=“layui-container”> 常规布局(以中型屏幕桌面为例):

class=“layui-row”> <div class=“layui-col-md9”> 你的内容 9/12 div> <div class=“layui-col-md3”> 你的内容 3/12 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 - 极易上手拿来即用的前端 UI 框架

栅格化布局

Layui 提供了美观强大的表单

class=“layui-form” action=“”>

class=“layui-form-item”>

class=“layui-input-block”> “text” name=“title” required lay-verify=“required” placeholder=“请输入标题” autocomplete=“off” class=“layui-input”>

LayUI - 极易上手拿来即用的前端 UI 框架

表单

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 - 极易上手拿来即用的前端 UI 框架

表格

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 - 极易上手拿来即用的前端 UI 框架

layui

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/surface/22697.html

发表评论

登录后才能评论