SingUI - 用纯原生 JS 写现代前端

[ClassicOldSong]

大家好，我又来了

这次发帖据上次的玩具贴已经过去一段时间了，SingUI 的用法和功能上已经发生了很大的变化。各位前端大佬们可以感受一下施了魔法的纯原生 JS 能做成什么样。

• 在线 Demo
• GitHub Repo

这个项目起初只是想做一个可行性验证，想看看在不魔改 JS 语法 /语义的情况下用纯 JS 可以把现代前端开发做成什么样，然后发现可行性还挺高，就稍微完善了一下。目前还没有文档，如果有人觉得这个项目有意思的话我会考虑写一份比较完善认真的文档。

目前未压缩体积为 3.9KB ，gzip 完仅为 1.5KB 。

欢迎各位来试用体验以及 Star ，以及提出宝贵的建议～

[YunYouJun]

所以其实是纯运行时的方案吗？
很有意思，我总感觉有那么可能一种场景需要这种方案，但是又没想到具体有什么必须的。

[angrylid]

感谢分享。这下我领悟到了 JSX 和 Vue 模板的优越性了。

[ClassicOldSong]

@YunYouJun 纯 runtime ，没有任何形式的 parsing/compiling

使用场景比如。。。出门在外只带了个 iPad 但突然要写个页面。。。。。

其实我是想用在嵌入式 JS 运行时的。。

[codingBug]

html 烫手吗？

[X_Del]

挺有趣的，抱着气一下楼上和楼主的心态写了这个 Demo：

https://stackblitz.com/edit/singui-demo-1uarbb?file=index.js

[ClassicOldSong]

@codingBug 烫手，闭合标签写起来想打人

@X_Del 挺好的啊，侧面证明了这套思路的完备性，而且有机会解决有人提出的视觉 hint 的问题（虽然又再次引入了 parsing ）。。我还在琢磨怎么套个自定义的 markdown 解析器上去好往里面插可编辑的代码块

[SuperMild]

如果不执着于纯原生的话，可以看看这个 https://github.com/ahui2016/mj.js

在 jquery 的基础上，非常简洁地实现组件化，组件之间可以交流，组件可以有自己的方法，而且语法完全是 jquery 的语法学习成本接近零。

由于本质上就是 jquery ，因此当然可以直接用于生产。

[bojackhorseman]

@SuperMild 哈哈，应该有很多人跟我一样 jQuery 基本处于不看文档完全不会的地步，这种情况显然是 vue 和 react 更合适

[ClassicOldSong]

@SuperMild 恕我直言，类似思路的东西太多了，从我开始跟其他人讨论 singui 开始这已经是第二个了。。。。这种形式有几个问题：一是全是“.”，二是组织结构的时候必须用一堆逗号双引号太局促，而我想试试看把纯 js 写成类似 jsx 的组织方式会怎么样。而且这种形式不够 self-contain ，即无法在一个 code block 内完成对一个元素 /组件自身的描述。以及内容复用的问题，singui 可以做到类似 hooks 的使用形式，轻松实现组合式编程。

[ClassicOldSong]

@SuperMild 我这种做法不是没有问题，比如用于组织 UI 的代码辨识度过低就是一个挺头大的事情

这一点我没想到更好的方法，毕竟项目初衷就是使用纯 js ，避免产生对字符串的 parsing 。如果各位有更好的思路的话欢迎提出讨论

[huxiaofan1223]

很新奇，但感觉过度创造了。

[ClassicOldSong]

@huxiaofan1223 可以 share 一下怎样算不过度吗。。我真的没想到写起来更方便的形式

[ClassicOldSong]

@X_Del 帮你整理了一个更可用的版本（ x

https://stackblitz.com/edit/singui-demo-w2quet?file=index.js

[huxiaofan1223]

@ClassicOldSong 前端主要是模板来写的吧，你这个写的方式很难让大众接受。。就看 Tailwand 来说，开发难度可能不大，但是就很多人用。尽量避免手敲样式，前端可能就很舒服了吧

[makelove]

其实 jsx/html 比这种好读多了，闭合标签可以知道是闭合的哪个，而一堆)]}谁知道谁闭合谁

[ClassicOldSong]

@makelove 你们写代码都不带缩进的吗。。。。

[makelove]

@ClassicOldSong 有缩进不也只能手动眼睛配对，看到 ) 是结束哪个组件还要往上看，ui 刚好是嵌套多的地方
类似于函数式编程后面几十个))))))，谁受得了

[shunia]

这个 demo 看的我脑子嗡嗡的，我觉得最大的问题是不具有统一性，没办法一眼就看出来如果我自己要实现一个东西应该怎么写。
你这个如果把 tag() 方法实现成参数是 object 其实就是 vue ，比如 tag({ setup });
如果实现成正常传参就是 react, 比如 tag(props, { });
你刚好卡在缝里选择了传入一个方法，在下佩服。

[ClassicOldSong]

@shunia 不要把方法当方法，当成作用域隔离区块就行了

不然你没有发现 attr/prop 明明是全局声明的，却可以在恰当的时候指向恰当的 tag 吗

而且这些方法可以直接抽出来变成 hook ，灵活性相当强

没必要把思路框在已有的范畴里。。。

[w4ngzhen]

我还准备用 canvas 直接画各种控件哈哈哈哈。