Dlight.js
https://www.toutiao.com/article/7372357688276713999/
什么是 Dlight
DX-frist UI Rendering Library Resources
Dlight 是 DX-first 的 UI 渲染库。
参考资料
https://github.com/dlight-js/dlight
https://juejin.cn/post/7341593721100124200
具有以下核心特征：
开发简单：借助直观且用户友好的 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 的用法和示例可以参考文末资料，本文不再过多展开。
参考资料
https://github.com/dlight-js/dlight
https://juejin.cn/post/7341593721100124200
