在本文中我们将回顾一下DevExtreme在之前官方发布的重要版本中的一些更改,包括样式表迁移到SCSS、ES6模块的引入和TypeScript增强。
支持SCSS
与纯 CSS 相比,大多数前端开发人员更喜欢CSS语言扩展(例如 Less 或 Sass),这些扩展支持变量、可重用样式、模块化设计,并允许开发人员像编写代码一样编写样式。
DevExtreme从一开始就一直在使用CSS语言扩展,以前我们的样式表是用Less编写的,在过去几年里,Sass(特别是Sass的SCSS语法)在前端社区和主要项目(如Bootstrap和Material)中越来越受欢迎,但Less和Sass样式表彼此不兼容。简单地说,Less样式表不能用于Sass项目,基于使用情况和内部指标,官方研发团队将DevExtreme样式表迁移到Sass。
从v20.2开始,devextreme npm包包括SCSS源,您可以根据需要修改SCSS变量和导入来创建自定义主题。由于样式表是模块化的,所以您只能编译在项目中积极使用的那些样式。
ES6 模块
在v21.1发布周期中,官方将一组 ES6 模块添加到npm包中,ES6 模块允许通过 Tree Shaking 优化,DevExtreme代码并与现代 JS 封装器的兼容。
请注意,npm 包还包含旧 CommonJS 版本的 DevExtreme 模块,以实现向后兼容性。 在大多数情况下,您的捆绑器会自动切换到 ES6 版本。
尽管 ES6 模块的引入是朝着包大小优化迈出的一大步,但仍有改进的空间。官方即将发布的新版本目标是将模块进一步拆分为更小、更独立的部分。
TypeScript增强
同样在v21.1的主要版本中,官方继续增强了事件参数类型和分离 jQuery 类型,现在每个事件参数都包含一个可以在代码中使用的命名类型:
import { AppointmentUpdatingEvent } from 'devextreme/ui/scheduler';
function handleAppointmentUpdating (e: AppointmentUpdatingEvent): void {
// ...
}
这些类型包含有关事件对象的可选和只读属性的信息:
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>。
此外还继续扩展TS定义,在未来的发布周期中,您可以期待以下增强功能:
- 更严格的类型(无)
- 增强的数据层类型
- 更多可重用类型
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress技术交流群6:600715373 欢迎一起进群讨论