高等前端进阶
本日给大家带来的主题是下线2年多的 Layui 重新上线的，也算是前端圈的一个热门话题了。话不多说，直接开始！
Layui 是一套开源免费的 Web UI 组件库，以 MIT 容许发布，采取自身轻量级模块化规范，遵照原生态的 HTML/CSS/JavaScript 开拓模式，极易上手，拿来即用。
Layui 风格简约轻盈，而内在文雅丰盈，乃至包括文档在内的每一处细节都经由精心雕琢，非常适宜网页界面的快速构建。Layui 差异于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求大略的务实主义者，即无需涉足各种构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
Layui 开源的这些年，在 Github 上狂揽了 27.1k 的 star、7.1k 的 fork、是妥妥的海内开源前端明星项目。而且利用 Layui 也非常大略，与以前前端利用 jQuery、BootStrap 非常类似，只须要在 HTML 页面中导入相应资源文件即可。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Quick Start - Layui</title> <link href="./layui/css/layui.css" rel="stylesheet" /> </head> <body> <!-- HTML 内容 --> <script src="./layui/layui.js"></script> <script> // 遵照AMD模块规范 layui.use(function () { var layer = layui.layer; layer.msg('Hello World', { icon: 6 }); }); </script> </body></html>2.Layui 的历史
2016 年 10 月 14 日，Layui 发布了 1.0.0 版，此后多年被广泛运用在浩瀚 Web 平台。
2021 年 10 月 13 日，Layui 发布了原官网下线的公告，并将文档站点切换到了 Gitee Pages，社区及日常掩护亦全面转移到了 Gitee 和 Github 平台，并呼吁大家拥抱其他更好的主流框架，导致大家误以为 Layui 停更了。事实上，自那往后，Layui 仍旧在 Github 和 Gitee 保持生动，并不存在所谓的停滞更新，从当时的 2.6.8 一贯连续迭代到如今的最新版本。
2023 年 4 月 24 日，Layui 发布了 2.8.0 正式版，并上线了新的文档站点，这是一次朴实的回归，更是情怀的延续。 但 Layui 仍旧坚持两年前那则公告中的不雅观点， 即推举大家去拥抱主流，始终保持对前沿技能的无限热爱，是开拓者们都应具备的思维属性。
而 Layui 所做的，是为补充主流之外的那些略显狭小的空隙。Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持利用它的人的 Layui，它仍旧支撑着许多项目，也代表着许多人的事情。作为开源创作者，该当要为这些坚持者而守望。
3.作者说 Layui 为何选择下线Layui 为何选择下线的缘故原由是多方面的，这一点作者贤心在知乎上也有重点先容过，紧张可以浓缩为以下几个点：
2.1 元成分随着 ES6 的广泛遍及，JavaScript 的措辞特性有了质的提升，加之 IE 的主动退场，最初为简化 DOM 操作及浏览器兼容性问题的 jQuery 已经失落去了核心上风，与此同时，更多被社区验证可行的方案陆续登场，诸如以 React 和 Vue 为代表的 JS 框架，使得在构建繁芜 Web 界面时变得更加得心应手。
而 Layui 作为 jQuery 时期末了仅存不多的传统 UI 组件库也选择了放手，这是作者对未来的思考，也是所有 Web 开拓者必须面对的现实。
不过，值得一提的是，根据 w3techs 的最新数据，目前 jQuery（94.6%） 在国外的市场保有量还远远超过以 React （4.1%）和 Vue （1.0%）为代表的前端主流 JS 框架。当然，这一点可能也有 SSG 等最新的静态站点天生技能的助推。
不过可惜的是，SSG 在海内彷佛并不太火。而目前 ，Layui 更多的面向是海内的开拓者，而且还是非专业的前端开拓者，这一点也可能是构成 Layui 目前困境的一个成分。
2.2 内成分AMD 是 Asynchronous Module Definition 的简称，即异步模块定义，是从 CommonJS 谈论中出身的。AMD 优先照顾浏览器的模块加载场景，利用了异步加载和回调的办法。浏览器端异步加载库 Require.js 实现的便是AMD规范。
AMD 模块比较于CommonJS，AMD 规范采取了异步加载策略，利用的是前端措辞，合营 require.js开拓项目。
reruire.config({ path1: 'https://cdnjs.cloudflare.com/ajax/libs/', paths: { 'jquery': 'jquery/1.12.4/jquery.cookie.min', 'jqcookie': 'jquery-cookie/1.4.1/jquery.cookie.min' }})
Layui 是 es3、es5 时期 AMD+ jQuery 的产物，以是它无论是在管理模块还是视图渲染上，都是在向原生妥协，一个组件从 DOM 查询到数据的动态变更，效率已不合时宜。
2.3 外成分作者将外成分总结为以下几点：
项目缺少一个良性的生态支撑，后程驱动不敷。短缺资金支持，商业化受阻项目遭受了外界不必要的滋扰，让开发者失落去信心。随着站永劫期的谢幕，layui 官网的存在反而成为一种深深的包袱。3.本日为什么选择聊聊 Layui2021 年 10 月 13 日 Layui 原官网下线，我没有把稳到它，本日看到铺天盖地的 Layui 官网重新上线的，我以为有必要带着大家一起聊聊它。
Layui 的作者贤心在知乎上有这么一段问答：
layui 并非面向于前端开拓者，以是没有采取主流的 MVVM 模式，而是选择为相称一部分非前端技能栈的开拓者探求快速的前端界面开拓方案，与 BootStrap 类似。
layui 定义为“经典模块化”，绝非是自吹自有多精良，也并非是刻意强调“模块”理念，而是故意避开当下 JS 社区的主流方案，试图以最大略的办法去诠释高效！
Layui 所谓的经典，是在于对返璞归真的执念，以当前浏览器普通认可的办法去组织模块。Layui 认为这种轻量的组织办法，仍旧可以补充 Webpack 以外的场景。以是 Layui 坚持采取经典模块化，也正是能让开发者避开工具的繁芜配置，回归到大略而原生态的 HTML/CSS/JavaScript！
总体来看，由于 Layui 的受众更多的是后端开拓者，以是这可能也是当时为什么没有关注到它存在的缘故原由。jQuery 的时期我也亲自经历过，有太多拿来即用的东西，但是短缺一个完全的办理方案。从这一点来看，如果当时我和 Layui 相遇，我该当也会重点考虑它。
以模块化规范来说， AMD、CMD、UMD等规范确实是上一个时期的产物，也是当时的经典前端口试题。然而，目前随着主流浏览器对 ESM 的支持，这些模块化已经很少人提及。更何况在大多数前端场景下，兼容性已经得到了极大的改进，功能优先已经成为第生平产力，以是统统的改造、乃至革“命”也就随之而来。
打包工具对付后端来说确实有一定的门槛，但是随着前端工具的不断推陈出新，各种开箱即用、一站式支配平台也随之而来，这也会给 Layui 等传统的开拓模式带来一定的冲击。
值得一提的是，目前前端主流的 Vue 框架便是前面 MVVM 模式的范例实现者，用于分离视图 View 和模型 Model，提高开拓效率。
4.Layui 新特性4.1 更大略的构建构建代码更大略，除字体外，只有 js 和 css 两个文件：
layui-v2.8.0├─ css│ └─ layui.css├─ font│ ├─ iconfont.eot│ ├─ iconfont.svg│ ├─ iconfont.ttf│ ├─ iconfont.woff│ └─ iconfont.woff2└─ layui.js比较原有的目录构造：
layui├─ css│ ├─ modules│ │ ├─ laydate│ │ │ └─ default│ │ │ └─ laydate.css│ │ ├─ layer│ │ │ └─ default│ │ │ ├─ icon-ext.png│ │ │ ├─ icon.png│ │ │ ├─ layer.css│ │ │ ├─ loading-0.gif│ │ │ ├─ loading-1.gif│ │ │ └─ loading-2.gif│ │ └─ code.css│ └─ layui.css├─ font│ ├─ iconfont.eot│ ├─ iconfont.svg│ ├─ iconfont.ttf│ ├─ iconfont.woff│ └─ iconfont.woff2└─ layui.js将原来 layer/laydate/code 的 css 统一构建到 layui.css，以只管即便减少要求，同时原有的图片资源全部更换为纯 CSS 实现。
4.2 舍弃 layedit新版正式的舍弃掉了内置的富文本编辑器，算是抛掉了历史包袱。如果有须要可以自行选择其他精良的编辑器：
tinymceckeditorsimditorwangeditorquill4.3 回调增加参数新增 success 等回调的第三个参数：即当前弹层实例工具，以便操作内部方法。
layer.open({ type: 1, content: '内容', success: function (layero, index, that) { // 弹层的最外层元素的 jQuery 工具 console.log(layero); // 弹层的索引值 console.log(index); // 弹层内部原型链中的 this --- 2.8+ console.log(that); },});4.4 photos 弹框增加底栏新增 photos 层的私有属性 hideFooter，用于掌握是否隐蔽图片底部栏。
新增 photos 层底部栏的「查看原图」功能。
新增 photos 层对 lay-src 属性的支持。
其他更多新特性的修正包括：风格调度、新增 18 个字体图标、布局支持超大屏幕、动画设置、WIN10 风格弹框、浩瀚组件支持等等，这里不再逐一展开，可以参考文末资料。
5.本文总结本文紧张和大家先容下线2年多的 Layui 重新上线的，也算是前端圈的一个热门话题了。由于篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料供应了精良文档以供学习。末了，欢迎大家点赞、评论、转发、收藏！
参考资料
https://www.zhihu.com/question/58435239/answer/157761706
https://www.zhihu.com/people/sentsim?utm_id=0
https://www.zhihu.com/question/495133208/answer/2194363344
https://phpreturn.com/index/a6446527cab7e0.html
https://www.oschina.net/news/238339/layui-2-8-released
https://blog.csdn.net/u012631267/article/details/127722324
https://layui.dev/docs/versions.html
https://github.com/layui/layui
