前言
兩年前 Layui 官網宣佈了下線宣告,說實話當時內心確實感慨萬千畢竟這個免費為我們後端程式設計師提供的一個前端快熟開發框架的官網就這樣下線了確實十分的惋惜,但是慶幸的是官網的下線,只是單純一個網站自身生命週期的結束,它並不意味著 Layui 這樣一個開源專案的停更,Layui 仍然在 Github 和 Gitee 保持活躍,並不存在所謂的停止更新,甚至從 2.6.9 一直迭代到今天的最新版本。兩年來,Layui 始終處於沒有中心文件的窘迫境地,雖然也一度以 Gitee Pages 為文件的承載,但似乎很難形成一個焦點和歸屬感。隨著 2.8.0 正式版本的釋出,它所包含的上百項的內容更新,使得全新的文件站呼之欲出。Layui 新官網於 2023年4月 Layui 2.8.0 正式釋出,全新文件站樸實歸來。
Layui是什麼?
Layui 是一套開源免費的 Web UI 元件庫,採用自身輕量級模組化規範,遵循原生態的 HTML/CSS/JavaScript
開發模式,極易上手,拿來即用。其風格簡約輕盈,而內在雅緻豐盈,甚至包括文件在內的每一處細節都經過精心雕琢,非常適合網頁介面的快速構建。Layui 區別於一眾主流的前端框架,卻並非逆道而行,而是信奉返璞歸真之道。確切地說,它更多是面向於追求簡單的務實主義者,即無需涉足各類構建工具,只需面向瀏覽器本身,便可將頁面所需呈現的元素與互動信手拈來。
Layui過往七年的開源歷程
作者心聲:Layui 雖不是前端主流,但也早已不是作者個人的 Layui,而是所有仍在堅持使用它的人的 Layui,它仍然支撐著許多專案,也代表著許多人的工作,作為開源創作者的我們,應該要為這些堅持者而守望。
在 Layui 過往七年的開源歷程中,從未用多達二十個預覽版去為一個正式版而引路。顯然,2.8.0 是 Layui 一次樸實的迴歸,更是情懷的延續。但卻並不是想以此呼籲人們重新去選擇它,我們仍然堅持兩年前那則《Layui 原官網下線公告》中的觀點, 即仍然推薦大家去擁抱主流,始終保持對前沿技術的無限熱愛,是開發者們都應具備的思維屬性。而 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 會持續陪伴著所有為之熱愛的人們,共同去論證 Layui 開發模式的可行性。
持續更新維護
新文件站
此次上線的新版文件站,旨在為樸實歸來的 Layui 提供一個新的精神「基站」,它基於 laytpl 和 markdown 驅動,在版面上進行了大量最佳化,內容重新編寫、力求精簡,以輔助大家更好地使用 Layui。 同時,Layui 文件也已和 Layui 本身一同開源在專案中,以供大家線上和離線都能閱讀以及協同維護。
風格調整
新版調整主色調為#16baaa
,在原有的墨綠基礎上賦予了清新。
更簡單的構建
構建程式碼更簡單,除字型外,只有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實現。
Layui 2.8 升級指南
Layui 2.8
總體向下相容,但仍有以下變更需要注意:
2.8
剔除了layedit元件,若是之前用到該元件的,注意採用第三方成熟富文字元件替換,詳見:#I5JSE3:? 關於將在 v2.8.0 版本中正式剔除 layedit 元件的公告2.8
調整了table
的page,limit
屬性,當page
未開啟時,則預設不再向後端傳遞這兩個引數2.8
調整了table
的特定屬性名。序號:LAY_INDEX
→LAY_NUM
;下標:LAY_TABLE_INDEX
→LAY_INDEX
,若是之前用到這幾個特定屬性,需更換為新版名稱。2.8
調整了checkbox
的lay-skin
屬性預設為原始風格,原來的標籤風格可透過lay-skin="tag"
來設定。2.8
調整了checkbox
的私有屬性lay-text
,採用統一的title
屬性替代2.8
調整了util.fixbar
的showHeight
屬性名稱為margin
2.7.6 升級到 2.8
2.8
對 2.7.6
最友好,可直接覆蓋升級,只需按照上述提到的幾點進行適配即可。
2.6.x 升級到 2.8
該跨度相對較大,主要是中間的 2.6.11
和 2.7.x
的幾處調整要適配,包括:
- 重要:
2.6.11
調整了laytpl
的{{ d.field }}
標籤的輸出為預設開啟編碼。即與 {{= d.field }} 等同。因此,若輸出內容包含HTML
且需要正常渲染的,需採用{{- d.field }}
的標籤語句。詳細可參考:#I5AXSP:? 從 2.6.11 開始,對 laytpl 輸出 HTML 語句和 table 預設 escape 屬性的重要調整 2.6.11
調整了table
元件的escape
屬性預設為true
,即預設開啟編碼功能(之前預設為false
)2.7.5
調整了table
表頭的edit
屬性,支援函式寫法,且單元格是否編輯不再以<td>
標籤上的data-edit
屬性為準,而是統一以cols
屬性中的edit
屬性為準,詳細可參考新版文件關於edit
的用法:https://layui.dev/docs/2.8/table/#cols.edit
2.6.0 以下版本 升級到 2.8
若當前用的版本低於 2.6.0
,一般不建議升級。但如果非升級不可,除了結合上述提到的變更外,還要重點參考 2.6.0
的更新日誌中提到的「重要提示」進行適配:https://layui.dev/2.7/docs/base/changelog.html#2.6.0
同時,還要特別注意,2.6.0
之前的版本是按需載入內建元件,從 2.6.0
開始,統一構建到 layui.js
中。因此,要注意下之前引入的 JS
業務程式碼的放置位置,若是放在 <head>
區域,需調整放置到 <body>
標籤內部的尾端。
layuiAdmin 主題升級 Layui 到 2.8
主要還是根據當前主題中所用的 Layui 的版本,進行對應的適配,尤其是單頁版中的動態模板,需按照前面提到的 laytpl
的調整進行修改。具體也可以參考:#I65D80:layuiAdmin 舊版本中的 Layui 如何適配升級 2.7 版本
其他細節
若按照以上調整後仍然存在相容性問題,也可以詳細閱讀過往所有版本的更新日誌:
https://layui.dev/docs/2.8/versions.html
或新建 Issue
進行詳細反饋。
極簡模組化Web UI 元件庫
動畫設定
透過anim
引數實現四個彈出方向的動畫類,可實現邊緣抽屜彈出,同時關閉時自動匹配對應的動畫。
WIN10風格彈框
新增了一個win10風格的確認框,當你給客戶打包成客戶端時,或許能要到更多的預算?
Layui開源專案相關連線地址
- Layui社群:https://gitee.com/layui/layui/issues
- Layui專案原始碼地址:https://gitee.com/layui/layui
- Layui-Vue專案原始碼地址:https://gitee.com/layui/layui-vue
- Layui 2.8 升級指南:https://gitee.com/layui/layui/issues/I6Z07Z
- Layui2.8正式釋出,本文詳細介紹所有新特性:https://gitee.com/layui/layui/issues/I6YKF3
- 文件協作: https://github.com/layui/layui/tree/2.x/docs
- 文件閱讀: https://layui.dev