ovs
是一个类似于swiftUI的声明式UI框架，内部使用vue的渲染函数实现，核心竞争力是实现了前端的语法创新
项目地址
为什么要做这个UI框架
起因是我在使用vue开发一个社交业务型的UI框架时遇到的困扰，vue组件的灵活性、扩展性很差
我有一个MineView（我的）的基础页面，这个页面支持各种元素的插入，比如默认我只支持显示个人的头像、昵称、年龄、城市，由于不同的业务使用这个基础组件时，我需要扩展各种类型，比如有的业务需要这个页面显示手机号，需要在底部加个相册等等吧，就是各种你想想不到的扩展，如果使用插槽来做，我需要考虑各种情况，设计出各个位置的插槽，然后直接被替代，我如果想要基于以前的插槽内容扩展又做不到，只能再把默认插槽中的内容封装成组件，这样有需要制作很多组件，很繁琐
使用oop、class编程范式解决问题
这就让我想到oop、class的编程范式，如果用class来做就会很容易，继承父类，子类方法中使用父类、并在调用父类之前、父类之后随意增加逻辑，或者重写父类的某些小方法，要是能操作页面对象和操作普通对象一样容易该多好，如果可以用class的方式来实现UI该多美好
理想中的代码是什么样的，伪代码
基础组件MineView(我的)
//声明一个我的页面组件
Component MineView : div {
//我的页面组件中的header部分，类似于vue的插槽，slot name="header"，给MineView组件设置一个可渲染的组件属性，属性名：渲染内容
header: div {
avatar: div{ 头像 }
nickname:span{ 昵称 }
age: span { 年龄 }
}
}
新业务扩展, MineView加个相册
一个新业务，需要给我的页面，加个相册，我们直接使用MineView
Component PhotoMineView extend MineView : div {
header:super.header,
photo:div{
//不设置属性名
div{照片1}
div{照片2}
div{照片3}
}
}
又一个新业务，给MineView的header加个性别内容
Component AddGenderMineView extend MineView : div {
header {
const newHeader = super.header
//在header的avatar属性之后增加一个属性age，感觉jquery又回来了
newHeader.appendAfter(newHeader.avatar, gender:div{
性别
})
return newHeader
}
}
你是否也期待这样灵活的前端UI语法
那么业内有没有基于class的成熟的ui解决方案呢，我找到了swiftUI和flutter，都是声明式的语法，那么能不能在前端也设计这样一种语法呢
让我们先看一下swiftUI的语法
SwiftUI 声明式代码
//
struct ContentView: View {
var body: some View {
Text("Hello, World!").padding()
}
}
关于ovs
于是开始了OVS的开发之路
ovs语法解析
最开始我使用的是chevrotain，一个自定义语法的语法解析库，但是在语法转换这部分不太好用，我需要将 div{ 123}转换为vue的渲染函数 h('div',123) ,于是我模仿chevrotain开发了一个 subhuti
更多内容可看
# 告别 HTML、Template、JSX，像 Flutter 和 Swift 一样用 OOP 语法开发 Web 前端的新尝试
#【编译原理创新尝试（二）】generator代码生成篇：不再写代码生成器generator，用类ebnf语法实现不同编程语言的自动转换
# 【非标题党】用二十几行代码实现一个属于自己的编程语言编译器，我开源了一个js实现的语法编译器框架subhuti，轻松入门编译原理
ovs的体验
体验的项目地址 gitee.com/alamhubb/vi…
git clone https://gitee.com/alamhubb/vitesuhutiov.git
npm i
npm run dev
