贤心不语，只是一味地在更新 Layui 2。

“自今年三月份开始，Layui 的版本迭代突然加速，接连发布了许多具有重要意义的更新，其中包含的一些新特性，也为 Layui 2 增添了一定的「生命力」”

动态

• 关于 Layui 不同版本的浏览器兼容说明：https://layui.dev/notes/browser-support.html

• 记录 Layui 2.x 系列版本主要升级变化：https://github.com/layui/layui/discussions/2565

• Layui ts 类型声明文件，在编辑器中添加 Layui 的代码补全和文档提示：https://github.com/layui/layui/discussions/2598

新特性

新增 component 组件构建器

一直以来，Layui 的很多组件自成一体，使得无法对组件进行统一管理。尽管 Layui 也曾努力尝试改善这个问题，但很多时候为了向下兼容而又不得不保留许多旧有的特性，随着组件的增加，该问题也显得越加明显。

而 2.10 新增的 component 模块可以很好地填补这一缺憾，它的初衷正是为了确保 Layui 组件的一致性，如核心逻辑和 API 设计等，主要意义在于：给 Layui 2 系列版本提供一个构建通用组件的方式。

现在，您可以这样去创建 Layui 组件：

/**
 * tabs
 * 标签页组件
 */
layui.define('component', function(exports) {
  // 创建组件
  var component = layui.component({
    name: 'tabs', // 组件名称
    config: { // 组件默认配置项
      // …
    },
    render: function() { // 组件渲染逻辑
      // …
    },
    // 其他选项
  });
  // 将创建组件时返回的 `component` 对象作为组件的接口输出
  // 组件将继承通用的基础接口，如 render, reload, set 等方法
  exports(component.CONST.MOD_NAME, component);
});

通过 component 创建的组件可继承它提供的全部基础接口，如：

这意味着你现在可以更加灵活地重构和扩展 Layui 组件了。

Layui 当前已经完成了对 tabs, rate 组件的重构，后续在条件允许的情况下，还有望通过 component 重构更多组件。

新增 tabs 组件加强版

tabs 是通过 component 重构的首个组件，它来自于最早试图发布的 Layui 3.0（后因为 3.0 技术路线的变化，而整理放至 2.10+ 版本中），目的是将 element 模块中的 tab 组件进行解耦，增强其可扩展性。

新 tabs 组件主要包含以下功能：

• 支持 标签头部左右滚动模式，以应对复杂的多标签页使用场景

• 支持 关闭当前标签和批量关闭「其他、右侧、全部」标签

• 支持 关闭前后、切换前后等周期事件

• 支持 标签「自动渲染、方法渲染、任意绑定」三种渲染方式

• 支持 原 tab 组件的全部功能，并重新优化了界面和交互体验

为了给开发者必要的时间缓冲，Layui 旧 tab 组件会仍然保留在后续的若干版本中，但会在合适的时机对旧 tab 组件进行剔除，建议开发者尽量提前过渡到当前新的 tabs 组件。

增强 input-number 组件

• 新增 限制允许输入的字符功能

• 新增 lay-step-strictly 属性，可开启步长严格模式，只能输入步长的倍数

• 新增 lay-wheel 属性，可通过鼠标滚轮或触摸板改变数值功能

• 新增 按 Up/Down 键时改变数值功能

新增「无缝扩展任意外部模块」功能

Layui 在 2.11 版本新增了无缝扩展任意外部模块的支持，即无需遵循 Layui 模块规范的第三方库也能通过 Layui 去加载，并且无需对外部模块做任何的代码改动，只需在 layui.extend() 方法中声明模块名、路径和接口即可。

// 扩展任意外部模块
layui.extend({
  marked: {
    src: 'https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.7/marked.min.js', // 模块路径
    api: 'marked' // 接口名称
  },
  Prism: {
    src: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
    api: 'Prism'
  }
});
// 加载扩展模块
layui.use(['marked', 'Prism'], function() {
  console.log('任意外部模块 loaded: ')
  console.log('  > marked: ', layui.marked);
  console.log('  > Prism: ', layui.Prism);
});

重构 laytpl 模板引擎

Layui 2.11 为 laytpl 赋予了面向更多复杂模板结构的解析能力。

• 新增 cache 选项，用于是否开启模板缓存

• 新增 condense 选项，用于是否压缩模板空白符

• 新增 tagStyle 选项，用于设置标签风格。默认仍采用 < 2.11 版本风格

• 新增 laytpl.extendVars() 方法，用于扩展模板内部变量

• 新增 compile 实例方法，用于清除缓存后以便渲染时重新对模板进行编译

• 新增 在模板中通过 include() 方法导入子模板的功能

• 新增 新的标签风格：{{ 语句 }} {{= 转义输出 }} {{- 原文输出 }} {{# 注释 }}

• 新增 模板错误行捕获，可更精准地找到模板出错区域

• 提升 模板解析的整体性能及稳定性

• 适配 Node.js 和浏览器端的使用场景

导入子模版示例：

<template id="ID-demo-tpl-header">
  <div>头部公共模板</div>
</template>
<template id="ID-demo-tpl-list">
  <ul>
    {{ d.items.forEach(function(item, index) { }}
      <li>
        <span>{{= item.title }}</span>
        {{ if(item.children) { }}
          {{- include('ID-demo-tpl-list', { items: item.children }) }}
        {{ } }}
      </li>
    {{ }); }}
  </ul>
</template>
<template id="ID-demo-tpl-main">
  {{- include('ID-demo-tpl-header') }}
  <h3>循环输出：</h3>
  {{- include('ID-demo-tpl-list', { items: d.items }) }}
</template>

更多更新

Layui 还将 jQuery 升级到 v3.7.1，并调整将最低浏览器兼容标准过渡到 IE9（如需兼容 IE8，可使用 2.9.x 版本），以及优化 layui.js 大量核心。

具体更新日志可前往官网文档和 Github 查看：

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

• https://github.com/layui/layui/releases

后续计划

官方曾公布过 Layui 3.0 版本计划：

基于当前国内外的前端技术格局，以及 Layui 既有的受众形态，我们决定启动 Layui 3.0 的升级计划。同时，也为进一步体现 Web UI 组件库的多样化和差异化，Layui 3.0 将采用纯原生的 JavaScript CSS HTML 进行开发，以更好地适应于未来。

…

Layui 3.0 是一次需要毅力、信心及其他多重条件允许的重大更新，既是对 2.x 开发模式的部分延续，更是一次全方位的加强，力图为国内的 Web 应用开发提供多一种的技术选型，继续发挥它应有的历史价值。

https://layui.dev/notes/3.0/milestone.html

不少 Layui 使用者都在关心 Layui 3 的进展。

作者不语，只是一味地在更新 Layui 2。

尽管 2.x 已基本够用了。

虽然具体的发布日期无法获悉，但对于 3.0 的内容有以下几点可以明确：

• Layui 3 将剔除 jQuery 的依赖，也不打算采用当前主流的前端基础库或框架，而是基于纯原生的 JavaScript CSS HTML 进行完全重构，以更加轻量的姿态适应未来。

• Layui 3 将全面拥抱 ES Modules、Web Components 等更多现代浏览器技术，理论上可用于 Vue, React 等任何技术栈。

• Layui 3 有望支持多语言。

期待 Layui 能在灿若繁星的 Web UI 组件库中贡献一份多样化的选择。

借用团队的一句原话作为结语：

我们的主要精力将放在构建全新版本上，继续维持 Layui 存在的合理性，维持一种温度、一种希望。

“冷知识：Layui  最早发布于 2016 年。3.0 正好「十年之约」💖”