失业状况(请跳过)
失业在家快一年了,刚过 40 岁,有点不知所措。刚拿到赔偿金那天还很高兴,当天就去自驾游了,但玩得很内疚,总感觉在浪费时间,想是不是该沉下心来学习?于是玩了一周就回家了。 回来后,几个月都在打兼职,写 AI 工具,总共就赚了五千块,还借了六七千块钱给个在创业的朋友(估计是要不回来了)。
后面感觉做兼职是浪费时间,转头研究 AI Agent ,自已写了个本地对话工具,基于 Ollama ,但是本地电脑算力不够,而且 ollama 不支持 mcp ,bridge 写得头大,放弃了。(遗产: https://gitee.com/james-yin01/viviwawa )
又转头研究腾讯的 KuiklyUI ,自研个“贷款计算 App”,但发现 Kuikly 非常不成熟,文档不全,bug 多,功能不完善,社区没人,果断放弃。(遗产: https://gitee.com/james-yin01/lc-loan-calculator )
最后,心想还是做自已最擅长的东西吧(我十多年 web 前端开发),于是就花一个月写了个 web 框架。当然,目前只是原型阶段,只是跑通了基本的几个小场景,问题肯定还有很多,所以想在这儿问问大佬们这玩意有没有搞头,有的话就继续写写看,没有的话就放弃搞别的去了。
框架简述
框架名为 LazyCoffee ,是一款设计为面向对象开发的 web 框架。框架地址: https://gitee.com/james-yin01/lc_ood_framework
为什么要开发这个框架?
实话实说,我也是个讨厌重复造轮子的人,没事找事,感觉像刷 KPI 。但我写前端这么多年了,用了巨多框架,各种优点缺点我都心中有数,所以想能不能造个能解决某些痛点,又简单好用的框架,于是就萌生了写框架的想法,绝不是简单的造轮子。
失控的状态变量
我是从 ie6 那年代过来的,我特别喜欢原生开发,有一种掌控全局的感觉,到后面 angular, react, vue ,我发现项目变大后,有种失控的感觉,例如一个 dom 元素会被 state, props, redux 等各种变量控制,产生这样的问题是因为不同的变量有不同的作用域,你必须从上到下传递变量或者利用 redux 这样的框架全局把控。随着代码贡献的人变多,思路不一致,会发现项目的组件像口袋里的有线耳机一样混乱,例如明明可以组件内控制的变量非要用 props 传过来。
举个经典例子:弹窗。我们要做很多个弹窗,所以会有一个叫 Modal 的组件统一显示弹窗,弹窗内容通过props.children传过来,开关通过props.isOpen控制。因为你有很多不同的弹窗,所以你要一个数组来控制所有的弹窗变量,这就需要 redux 之类的状态管理工具来全局把控了。如果要关闭某个弹窗,你要遍历,变更状态,触发更新,麻烦的很。
解决单向流的痛点
其实造成上面的问题的根本原因就是 react, vue 都一直尊循的原则:状态变量单向流,你的状态变量只能从上层往下层传递,如果你的下层组件想变更上层状态变量,是不允许的,如果想实现,只能把状态变量统一提取到全局作用域,下层组件通过变更全局变量才能实现。
为了解决这个问题 LazyCoffee 框架利用了两个古老但实用的设计:元素查找和属性代理。
元素查找和属性代理
如果有两个平行的组件,例如两个弹窗,你不能在一个组件里变更另一个组件的变量,只能改为上下级或者通过共同父组件来控制。但 LazyCoffee 框架就可以,你只要找到另一个组件的实例,然后调用实例方法即可,看下面伪代码:
import { queryOne } from 'lc_ood_framework'; function submit() { const anotherModal = queryOne('#confirm'); anotherModal.open('Are you sure?', function () { // do something }); } 是不是很熟悉的感觉?这不就是 jquery 老一辈的设计嘛?是的,朋友,是的。queryOne就是元素查找的方法,anotherModal就是元素的实例,open就是元素的方法,这个方法就是通过属性代理实现的。 通过这种设计,不管你的组件是平行的,还是上下级,都可以直接操控别的组件,从单向流的桎梏中解脱出来。
是不是有别的办法?
我在想,是不是有别的办法解决上面说的痛点,有必要另外写个框架?有的,朋友,当然有。利用 redux 或 pinia 之类的状态管理库,统一管控起来,然后让团队成员遵守代码规范,做好代码检视,一般是能实现的。我之所有写框架,是想更优雅解决这个痛点,提供一个与众不同的思路。
没了,就这样
框架的其他设计几乎都是照抄 react ,就是代码实现上自已另外造了个轮子,没找到复用的方法(有想到的告诉我,维护一个 jsx 实现是很难的)。
请大佬们指点迷津,谢谢!
另外,有需要前端老中医的欢迎联系我,我失业中,谢谢!


