當前位置: 妍妍網 > 碼農

時隔五年, Quill 2.0 終於釋出!重回富文本巔峰!

2024-05-11碼農

前言

大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心~

Quill 2.0 來啦!

自最初的 1.0 版本釋出以來,Quill 見證了來自快速發展的初創公司、知名品牌和老牌財富 500 強公司的眾多成功案例,這些公司已將 Quill 納入其面向使用者的產品的一些最重要和核心的部份

Quill 使用者數很多,所以發新版本的時候,無縫銜接很重要,在提高了 Quill 功能的同時,也要讓開發人員的使用負擔降到最低~

隨著 Quill 2.0 的正式釋出,GitHub 儲存庫已從上次釋出 Quill 1.3.7 時的 23k star 增加到超過 41k star

接下來講解一下,Quill 2.0 做了哪些更新~

TypeScript的支持

Quill的原始碼已經完全遷移到TypeScript,從中我們獲得了早期錯誤檢測、改進的可維護性以及更好的工具支持等諸多優勢。這使得我們的程式碼庫更為強大,也為Quill和我們的開發者社群帶來了更多好處。

在此之前,開發者需要單獨安裝@types/quill這個包,才能獲取到TypeScript的定義。然而,這種方式有時並不夠準確,甚至可能與Quill的實際型別不符合,因為這個包是由我們更廣泛的社群維護的,因此與核心Quill包的更新也不一定同步。

但是,有了Quill 2.0,這些麻煩和出錯的機會都將成為過去。開發者現在可以直接從源頭獲取型別資訊。要進行升級,只需從計畫中移除@types/quill包,TypeScript將自動從Quill中選擇相應的聲明。

表格的支持

2.0 從功能上來說,我覺得最大的變化就是支持表格的操作

效能提升

Quill 2.0 做了許多效能最佳化工作,其中最為重要的是提升了對大型內容的渲染速度

  • 這些最佳化包括增加了 insertBefore 函式,並且盡可能地使用 insertBefore 來提高 setContents 函式的效能

  • 透過對 getRange 函式進行最佳化,提升了同時渲染多個 Quill 例項的效能,經過最佳化後,即使在同一個頁面上同時渲染了4000個 Quill 例項,其渲染效能也提升了近10倍

  • 最佳化了 Quill 例項的初始化邏輯,當內容為空時,無需執行 setContents 函式

  • 在渲染4000個 Quill 例項的情況下,經過最佳化前後載入時間的對比如下:

    註冊多個 Quill 用例

    隨著Quill變得越來越流行並被廣泛使用,我們開始經常看到各種用例,有時一個頁面上甚至會同時出現多個例項。

    比如說,在一個部落格平台上,Quill可能被用來為部落格貼文提供一個全功能的編輯界面,包括編輯標題、插入圖片和程式碼塊;而在同一個頁面上,Quill也可能被用於評論區,提供基本的文本格式化功能,如加粗、斜體和插入連結。

    Quill 2.0引入的新登錄檔(registry)功能支持了這種場景,使得同一個頁面上可以存在多個配置各異的編輯器例項,而且它們之間不會互相沖突。欲了解更多關於登錄檔的資訊,請參閱文件

    文件:https://slab.com/blog/announcing-quill-2-0/

    結語

    我是林三心

  • 一個待過 小型toG型外包公司、大型外包公司、小公司、潛力型創業公司、大公司 的作死型前端選手;

  • 一個偏前端的全幹工程師;

  • 一個不正經的金塊作者;

  • 逗比的B站up主;

  • 不帥的小紅書博主;

  • 喜歡打鐵的籃球菜鳥;

  • 喜歡歷史的乏味少年;

  • 喜歡rap的五音不全弱雞如果你想一起學習前端,一起摸魚,一起研究簡歷最佳化,一起研究面試進步,一起交流歷史音樂籃球rap,可以來俺的摸魚學習群哈哈,點這個,有7000多名前端小夥伴在等著一起學習哦 -->