在本文中我們將回顧一下DevExtreme在之前官方發(fā)布的重要版本中的一些更改，包括樣式表遷移到SCSS、ES6模塊的引入和TypeScript增強。

DevExtreme v21.2正式版下載

支持SCSS

與純 CSS 相比，大多數(shù)前端開發(fā)人員更喜歡CSS語言擴展（例如 Less 或 Sass），這些擴展支持變量、可重用樣式、模塊化設(shè)計，并允許開發(fā)人員像編寫代碼一樣編寫樣式。

DevExtreme從一開始就一直在使用CSS語言擴展，以前我們的樣式表是用Less編寫的，在過去幾年里，Sass（特別是Sass的SCSS語法）在前端社區(qū)和主要項目（如Bootstrap和Material）中越來越受歡迎，但Less和Sass樣式表彼此不兼容。簡單地說，Less樣式表不能用于Sass項目，基于使用情況和內(nèi)部指標，官方研發(fā)團隊將DevExtreme樣式表遷移到Sass。

從v20.2開始，devextreme npm包包括SCSS源，您可以根據(jù)需要修改SCSS變量和導(dǎo)入來創(chuàng)建自定義主題。由于樣式表是模塊化的，所以您只能編譯在項目中積極使用的那些樣式。

ES6 模塊

在v21.1發(fā)布周期中，官方將一組 ES6 模塊添加到npm包中，ES6 模塊允許通過 Tree Shaking 優(yōu)化，DevExtreme代碼并與現(xiàn)代 JS 封裝器的兼容。

請注意，npm 包還包含舊 CommonJS 版本的 DevExtreme 模塊，以實現(xiàn)向后兼容性。 在大多數(shù)情況下，您的捆綁器會自動切換到 ES6 版本。

盡管 ES6 模塊的引入是朝著包大小優(yōu)化邁出的一大步，但仍有改進的空間。官方即將發(fā)布的新版本目標是將模塊進一步拆分為更小、更獨立的部分。

TypeScript增強

同樣在v21.1的主要版本中，官方繼續(xù)增強了事件參數(shù)類型和分離 jQuery 類型，現(xiàn)在每個事件參數(shù)都包含一個可以在代碼中使用的命名類型：

import { AppointmentUpdatingEvent } from 'devextreme/ui/scheduler';

function handleAppointmentUpdating (e: AppointmentUpdatingEvent): void {
// ...
}

這些類型包含有關(guān)事件對象的可選和只讀屬性的信息：

type AppointmentUpdatingEvent = EventInfo<dxScheduler> & {
readonly oldData: any;
readonly newData: any;
cancel?: boolean | PromiseLike<boolean>;
}

官方團隊還分離了 jQuery 類型以確保它們僅與 jQuery 一起使用，例如以前有以下類型的屬性：Promise<T> 和 JQueryPromise<T>。 即使您的項目沒有使用 jQuery，也可以為這些屬性分配jQuery promise。從 v21.1 開始，屬性僅在使用 jQuery 時接受 JQueryPromise<T>，否則接受 Promise<T>。

此外還繼續(xù)擴展TS定義，在未來的發(fā)布周期中，您可以期待以下增強功能：

• 更嚴格的類型（無）
• 增強的數(shù)據(jù)層類型
• 更多可重用類型

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群6：600715373      歡迎一起進群討論