开源项目模块化前端框架,你确定你了解吗?
hello,小伙伴们大家好,今天给大家分享的开源项目是一个经典模块化前端框架,由职业前端倾情打造,面向全层次的前后端开发者,低门槛开箱即用的前端 UI 解决方案。
什么是Layui?
layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
//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 //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.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>
模版样式
项目链接:https://github.com/sentsin/layui/
项目文档:https://www.layui.com/
有兴趣的小伙伴可以下载尝试应用一下,如果在使用期间遇到问题请在下方留言或私信我!
今天的推荐不知道大家喜欢吗?如果你们喜欢话,请在文章底部留言和点赞,以表示对我的支持,你们的留言,点赞和转发关注是我持续更新的动力哦!
关注我的公众号回复:"1024",免费领取一大波学习资源,先到先得哦!
原文地址:https://www.cnblogs.com/zhijieju/p/12707108.html
- (52) 抽象容器类 / 计算机程序的思维逻辑
- mysql的查询、子查询及连接查询
- 简陋的分布式爬虫(附项目代码地址)
- 使用PowerShell简化我的工作
- 几个提高工作效率的Python内置小工具
- J2EE相关总结
- (53) 剖析Collections - 算法 / 计算机程序的思维逻辑
- Flask使用Blueprint进行多模块应用的编写
- 优雅的在终端中编写Python
- Eclipse相关问题
- (54) 剖析Collections - 设计模式 / 计算机程序的思维逻辑
- Django 博客教程(三):创建应用和编写数据库模型
- package-info.java文件详解
- 在Spring下集成ActiveMQ
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java8实战——通过行为参数化传递代码 顶
- Angular component的一个例子
- 初识mybatis中的缓存
- 【卷积神经网络结构专题】ResNet及其变体的结构梳理、有效性分析
- Steganographer:能帮助在图片中隐藏数据的Python隐写工具
- 内网横向移动:Kerberos认证与(哈希)票据传递攻击
- 诺禾致源linux下数据下载
- 技巧 | OpenCV中如何绘制与填充多边形
- Swift guard
- PyTorch实现TPU版本CNN模型
- 使用NLP检测和对抗AI假新闻
- kallisto --genomebam报错解决(GTF文件的坑)
- linux查找文件
- TCP 协议面试灵魂 12 问,问到你怀疑人生!
- 方差分析简介(结合COVID-19案例)