前端又出最强 DX 新框架!这次是 Dlight.js!

liuian 2024-12-30 05:16 51 浏览

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Dlight

DX-frist UI Rendering Library Resources

Dlight 是 DX-first 的 UI 渲染库。

具有以下核心特征：

开发简单：借助直观且用户友好的 API，无论开发者是构建简单的网站还是复杂的 Web 应用程序，使用 Dlight 进行 Web 开发都变得毫不费力。
高性能：DLight 的文件大小仅为 5KB，速度极快且超轻量，无需手动优化即可提供最佳性能。
? DX-first：DLight 使用函数调用和点符号的语法使开发更加容易，无需编写过时且难以阅读的 XML 代码。
直观简单：DLight 天生具有响应性，设计直观简单，具有极简的 API，无需记忆复杂的函数或库。

目前 Dlight 在 Github 通过 MIT 协议开源，短短几个月有超过 1k 的 star，是一个值得关注的前端开源项目。

如何使用 Dlight

响应性非常简单

Dlight 没有 ref()、 useState()、 createSignal()、$ 标记的计算状态、 memo()。如果想要状态、设置属性、计算属性可以设置另外一个属性，而且永远不会有冗余渲染。

@View
class MusicChooser {
  @Prop musics
  musicIdx = this.random()
  music = this.musics[this.musicIdx]
  random() {
    return Math.floor(Math.random() * this.musics.length)
  }
  Body() {
    PrettyBtn("Get a new song!")
      .onClick(() => {
        this.musicIdx = this.random()
      })
    MusicDisplay(music)
  }
}

无需三元运算符

DLight 采用 if 语句，开发者可以使用熟悉的条件语句（如 if-else、switch-case），就像编写普通 JavaScript 程序一样构建 UI。

@View
class MusicFavoriteItem {
  @Prop musicItem

  Body() {
    MusicItem(this.musicItem)
    div().onClick(this.musicItem.toggleFavorite); {
      if (this.musicItem.favorite) {
        FavoriteFilled()
      } else {
        FavoriteBorderOutlined()
          .title("Like this song!")
      }
    }
  }
}

for 循环

在 DLight.js 中不会有任何新语法，如果要渲染数据数组只需使用 for 循环：

@View
class MusicList {
  @Prop musicList
  heading = `${this.musicList.length} ${
    this.musicList.length > 1 ? "songs" : "song"
  } by Lana Del Rey`

  Body() {
    section(); {
      h1(this.heading)
      for (const music of this.musicList) {
        MusicItem(music)
      }
    }
  }
}

上下文的新范式

在所有框架中，没有一种解决方案可以让数据像传递 props 一样轻松地穿过不同的组件层。在 DLight.js 中，引入了一个名为 “Environment” 的概念，可以让开发者上下文数据传递比以往更加轻松。

@View
class Home {
  @Env language
  Body() {
    h1(this.language === "zh" ? "音乐列表" : "Music List")
    MusicList()
  }
}
@View
class App {
  language = "en"
  Body() {
    ChangeLanguageBtn()
      .onClick(() => {
        this.language = this.language === "en" ? "zh" : "en"
      })
    env().language(this.language); {
      Home()
    }
  }
}

更多关于 DLight.js 的用法和示例可以参考文末资料，本文不再过多展开。