七桃资源网

七桃资源网

视图_layui_视图英文

qtfan 0 6 次浏览 技术文章
社区大狂欢:Web UI 库 Layui 2年后王者归来?

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家带来的主题是下线2年多的 Layui 重新上线的消息，也算是前端圈的一个热门话题了。话不多说，直接开始！

1.什么是 layui

Layui 是一套开源免费的 Web UI 组件库，以 MIT 许可发布，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。

Layui 风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。

Layui 开源的这些年，在 Github 上狂揽了 .1k 的 star、7.1k 的 fork、是妥妥的国内开源前端明星项目。而且使用 Layui 也非常简单，与以前前端使用 jQuery、BootStrap 非常类似，只需要在 HTML 页面中导入相应资源文件即可。



  
    
    
    Quick Start - Layui

2.Layui 的历史

年 月 日，Layui 发布了 版，此后多年被广泛应用在众多 Web 平台。

年 月 日，Layui 发布了原官网下线的公告，并将文档站点切换到了 Gitee Pages，社区及日常维护亦全面转移到了 Gitee 和 Github 平台，并呼吁大家拥抱其他更好的主流框架，导致大家误以为 Layui 停更了。事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，从当时的 一直连续迭代到如今的最新版本。

年 4 月 日，Layui 发布了 正式版，并上线了新的文档站点，这是一次朴实的回归，更是情怀的延续。 但 Layui 仍然坚持两年前那则公告中的观点， 即推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性。

而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙。Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作。作为开源创作者，应该要为这些坚持者而守望。

3.作者说 Layui 为何选择下线

Layui 为何选择下线的原因是多方面的，这一点作者贤心在知乎上也有重点介绍过，主要可以浓缩为以下几个点：

元因素

随着 ES6 的广泛普及，JavaScript 的语言特性有了质的提升，加之 IE 的主动退场，最初为简化 DOM 操作及浏览器兼容性问题的 jQuery 已经失去了核心优势，与此同时，更多被社区验证可行的方案陆续登场，诸如以 React 和 Vue 为代表的 JS 框架，使得在构建复杂 Web 界面时变得更加得心应手。

而 Layui 作为 jQuery 时代最后仅存不多的传统 UI 组件库也选择了放手，这是作者对未来的思考，也是所有 Web 开发者必须面对的现实。

不过，值得一提的是，根据 w3techs 的最新数据，目前 jQuery（%） 在国外的市场保有量还远远超过以 React （%）和 Vue （%）为代表的前端主流 JS 框架。当然，这一点可能也有 SSG 等最新的静态站点生成技术的助推。

不过可惜的是，SSG 在国内好像并不太火。而目前 ，Layui 更多的面向是国内的开发者，而且还是非专业的前端开发者，这一点也可能是构成 Layui 目前困境的一个因素。

内因素

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//jquery.cookie.min',
        'jqcookie': 'jquery-cookie//jquery.cookie.min'
    }
})

Layui 是 es3、es5 时代 AMD+ jQuery 的产物，所以它无论是在管理模块还是视图渲染上，都是在向原生妥协，一个组件从 DOM 查询到数据的动态变更，效率已不合时宜。

外因素

作者将外因素总结为以下几点：

  • 项目缺乏一个良性的生态支撑，后程驱动不足。缺少资金支持，商业化受阻
  • 项目遭受了外界不必要的干扰，让开发者失去信心。
  • 随着站长时代的谢幕，layui 官网的存在反而成为一种深深的负担。

3.今天为什么选择聊聊 Layui

年 月 日 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 新特性

更简单的构建

构建代码更简单，除字体外，只有 js 和 css 两个文件：

layui-v2.
├─ 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 实现。

舍弃 layedit

新版正式的舍弃掉了内置的富文本编辑器，算是抛掉了历史包袱。如果有需要可以自行选择其他优秀的编辑器：

  • tinymce
  • ckeditor
  • simditor
  • wangeditor
  • quill

回调增加参数

新增 success 等回调的第三个参数：即当前弹层实例对象，以便操作内部方法。

layer.open({
  type: 1,
  content: '内容',
  success: function (layero, index, that) {
    // 弹层的最外层元素的 jQuery 对象
    console.log(layero);
    // 弹层的索引值
    console.log(index);
    // 弹层内部原型链中的 this --- +
    console.log(that);
  },
});

photos 弹框增加底栏

新增 photos 层的私有属性 hideFooter，用于控制是否隐藏图片底部栏。

新增 photos 层底部栏的「查看原图」功能。

新增 photos 层对 lay-src 属性的支持。

其他更多新特性的修改包括：风格调整、新增 个字体图标、布局支持超大屏幕、动画设置、WIN10 风格弹框、众多组件支持等等，这里不再一一展开，可以参考文末资料。

5.本文总结

本文主要和大家介绍下线2年多的 Layui 重新上线的消息，也算是前端圈的一个热门话题了。因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！


参考资料

https://www.zhihu.com/question//answer/

https://www.zhihu.com/people/sentsim?utm_id=0

https://www.zhihu.com/question//answer/

https://phpreturn.com/index/a6446527cab7e0.html

https://www.oschina.net/news//layui--released

https://blog.csdn.net/u012631267/article/details/

https://layui.dev/docs/versions.html

https://github.com/layui/layui

原文链接：，转发请注明来源！
七桃资源网 › 技术文章 › 视图_layui_视图英文