Layui 首个版本发布,经典模块化前端UI框架

简介:

Layui 出蛋于2016年金秋的今日,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。

获得 Layui

你可以在官网首页下载到 Layui 的最新版,也可以通过 GitHub 得到Layui的开源包。目前我们只同步维护这两处资源渠道。一般如果你是用于实际项目,我们推荐你直接从官网下载。layui构建后的结构(也就是你获得的包)如下:

├─css //css目录
    │  └─modules //模块css目录(一般如果模块相对较大,我们会单独提取)
    │      ├─laydate
    │      ├─layer
    │      │  └─default
    │      └─layim
    │          └─skin
    ├─font  //字体图标目录
    ├─images //图片资源目录(一些表情等)
    │  └─face
    └─lay //JS目录
        ├─dest //经过合并的完整模块
        ├─lib //部分组件依赖到的第三方库(目前只有jquery)
        └─modules //各模块/组件

你还可以在GitHub 上 Fork Layui为我们贡献方案

经典,因返璞归真

近几年,尤其是今年,常常会听到猿们吐槽“现在想简简单单的写个前端怎么就变得这么难呢?”。嗯的,前端目前正处于一个超出常理,且疯狂造轮子的黄金时代,标准化的逐步设想与浏览器本身的现状所形成的滞后感,让一些尚未得到官方推广的方案开始引领着前端社区,那仿佛是一场“五代十国”般的颠覆,这期间,你看不到一个所谓的新鲜轮子可以维持超过三年的光环,因为它很快就会被另一个新轮子所替代。你必须保持对技术的高度狂热,透过未来的加锁去追逐那些层出不穷的,工具!是的,他们只是工具,准确地说是一种标准化最终形成的过度!

透过那些高逼格工具的本质,最终仍然是 HTML、CSS、JavaScript 三驾马车的真实面貌。与工具不同的是,它们是最终标准的归属者。所以工具在发展,三驾马车本身同样也在高速发展,那既然如此,我们为何不能跟随原生态的稳健脚步,安安静静地撸会码呢?

Layui 定义为“经典模块化”,并非是自吹她自身有多优秀,而是绕开JS社区的喧嚣,以最简单的方式去诠释高效!她的所谓经典,是在于对返璞归真的执念,她以当前浏览器普通认可的方式去组织模块!我们认为,这恰是符合当下国内绝大多数程序员从旧时代过度到未来新标准的最佳指引。

所以 Layui 本身也并不是完全遵循于AMD时代,准确地说,她试图建立自己的模式,所以你会看到:

//layui模块的定义
layui.define([mods], function(exports){
  
  //……
  
  exports('mod', api);
});  
 
//layui模块的使用
layui.use(['mod1', 'mod2'], function(args){
  var mod = layui.mod1;
  
  //……
  
});

没错,她具备AMD的影子,又并非受限于commonjs的那些条条框框,Layui认为这种轻量的组织方式,比WebPack更符合绝大多数场景。所以她坚持采用经典模块化,也正是能让人避开工具的复杂配置,回归简单,安静高效地撸一会原生态的HTML、CSS、JavaScript。

但是 Layui 又并非是Requirejs那样的模块加载器,而是一款UI解决方案,她与Bootstrap最大的不同恰恰在于她糅合了自身对经典模块化的理解。

快速上手

获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:

./layui/css/layui.css
./layui/layui.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.js"></script>
<script>
 
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form();
  
  layer.msg('Hello World');
});
</script> 
  
</body>
</html>

如果你想快速使用Layui的组件,你还是跟平时一样script标签引入你的js文件,然后在你的js文件中使用layui的组件。但我们更推荐你遵循Layui的模块规范,建立一个自己的模块作为入口:

<script>
layui.config({
  base: '/res/js/modules/' //你的模块目录
}).use('index'); //加载入口
</script>

上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:

/**
项目JS主入口
以依赖Layui的layer和form模块为例

**/    
layui.define(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form();
  
  layer.msg('Hello World');
});

好了,不管你采用什么样的方式,从现在开始,尽情地使用Layui吧!但愿这是你的一段美妙的旅程。

目录
相关文章
|
1月前
|
前端开发
如何解决前端工程化中出现的版本冲突问题?
如何解决前端工程化中出现的版本冲突问题?
48 4
|
2月前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
162 3
|
1月前
|
Rust JavaScript 前端开发
ES6 awaitRust UI 框架
ES6 awaitRust UI 框架
28 0
|
1月前
|
前端开发 JavaScript
electron ui框架
Electron是一个使用JavaScript, HTML和CSS等前端技术构建跨平台桌面应用程序的框架。
74 0
|
1月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
95 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
2月前
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
52 3
|
2月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
78 2
|
2月前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
2月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
127 1
|
2月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
108 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
下一篇
DataWorks