• B/S端界面组件DevExtreme——支持TypeScript、SCSS & ES6模块


    在本文中我们将回顾一下DevExtreme在之前官方发布的重要版本中的一些更改,包括样式表迁移到SCSS、ES6模块的引入和TypeScript增强。

    DevExtreme v21.2正式版下载

    支持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 | 下载试用

    DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。


    DevExpress技术交流群6:600715373      欢迎一起进群讨论

    更多DevExpress线上公开课、中文教程资讯请上中文网获取

  • 相关阅读:
    shift
    start
    exit
    call
    goto
    Activity生命周期(二)
    color 和 mode
    pause 和 title
    day 4 飞机大战-面向对象
    day 3 创建窗口,移动-函数版
  • 原文地址:https://www.cnblogs.com/AABBbaby/p/16362011.html
Copyright © 2020-2023  润新知