“ 自今年三月份開始，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() { }, }); 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 組件
新增「無縫擴展任意外部模塊」功能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 查看：
官方曾公布過 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 的進展。雖然具體的發布日期無法獲悉，但對于 3.0 的內容有以下幾點可以明確：- Layui 3 將剔除 jQuery 的依賴，也不打算采用當前主流的前端基礎庫或框架，而是基于純原生的 JavaScript CSS HTML 進行完全重構，以更加輕量的姿態適應未來。
- Layui 3 將全面擁抱 ES Modules、Web Components 等更多現代瀏覽器技術，理論上可用于 Vue, React 等任何技術棧。
期待 Layui 能在燦若繁星的 Web UI 組件庫中貢獻一份多樣化的選擇。我們的主要精力將放在構建全新版本上，繼續維持 Layui 存在的合理性，維持一種溫度、一種希望。
“冷知識：Layui 最早發布于 2016 年。3.0 正好「十年之約」??”
閱讀原文：原文鏈接
該文章在 2025/4/17 10:18:06 編輯過
400 186 1886
