老规矩，开头先上正菜：

官网：dlight.dev

Github：dlight.dev

现在关注这个框架还是非常非常早的。但是无妨让我们来探索、了解它。

现在官网首页已经有汉化了，我们看看它的code style，DX真的是Max：

@View
class MusicChooser {
@Prop musics
musicIdx = this.random()
music = this.musics[this.musicIdx]
random() {
return Math.floor(Math.random() * this.musics.length)
}

View() {
PrettyBtn("Get a new song!")
.onClick(() => {
this.musicIdx = this.random()
})
MusicDisplay(music)
}
}

让我们从最基础的开始

声明一个div，非常简单:

div("Hello world")

改变div的样式？添加div的class/id？添加div的事件？也非常简单，采用链式语法，一路.下去：

div("Hello world")
// 添加行内样式
.style({ padding: "10px" })
// 设置Id
.id("app")
// 设置class
.class("root")
// 添加事件
.onClick(() => {
// 在这里添加逻辑
})

如果你了解过鸿蒙的ArkTS，又或者是做过苹果的原生Swift UI的开发，你应该能倍感亲切；但是有些东西还是和ArkTS是不一样的，比如自定义一个元素内部的内容，dlight.js是这么写的：

div().onClick(() => {
// 在这里添加逻辑
}); {
// 在这里自定义内容
}

而ArkTS的语法是这样的：

Text() {
// 在这里自定义内容
}.onClick(() => {
// 在这里添加逻辑
})

可以看到，dlight.js的div()，实际上由;分号隔了两段，实际上是由两段代码组合而成的；那么，怎么渲染到页面上呢？

没错，Babel插件嘛。仓库是Monorepo的，看到这个文件夹，我就已经知道了（）

有兴趣的可以看看：dlight/packages/core/babel-preset-dlight

再谈流程控制，都直接{}了，你想要在这个{}中操作整个View类的上下文干什么都可以了，比如亲爱的if/else、switch-case、for循环：

响应式

一般的字符串，和数字，直接声明一个类属性即可：

@View
class MusicChooser {
// 如果这个属性在View函数中用了，它就是响应式的；
// 如果没有用，它就是正常的类变量。非常智能了属于是
test: string = "Hello world"

View() {}
}

Props，也能很好地响应：

@View
class MusicChooser {
// 有这个@Prop，就是一个prop
// 如果 = 了required，就表示是必传的
@Prop
test: string = required

View() {}
}

TypeScript支持

特别是子组件，非常需要TypeScript的支持，因为dlight的组件设计是去除new关键字的组件，所以导出一个组件的时候，必须要用一个比较蹩脚的as any as T：

interface MyCompProps {
/** 这是 prop1 */
prop1: string
/** Prop2是一个number */
prop2: number
/** Prop3是一个布尔值 */
prop3: boolean
}

@View
class MyComp implements MyCompProps {
@Prop prop1 = required
@Prop prop2 = required
@Prop prop3 = required
  
View() {}
}

// 这个Pretty实际上就是any更语义化，语义化一点嘛（
export default MyComp as Pretty as Typed<MyCompProps>

性能

这方面文档上没有明说，但是据说与solid.js差不多哦，贴一个dlight团队发的链接，可以看到benchmark：

https://link.juejin.cn/?target=https%3A%2F%2Fkrausest.github.io%2Fjs-framework-benchmark%2Fcurrent.html

整体大概这么多。整个看下来，这个框架无疑是极好的（（（（就是还没生态

现在Dlight还有一个叫Model的东西，类似React hook Vue hook这种，用于抽象API，以方便在视图中使用，但是文档现在还没有，再等等吧（）

作者：文博知浅
链接：https://juejin.cn/post/7341593721100124200