登录
又一个跨端框架——万字长文解析 ReactLynx 实现原理
2025年4月16日 19:19
字节近期开源了 Lynx 这一跨端框架，同时也开源了 ReactLynx，使得开发者可以用 React 的心智模型开发 Lynx 原生应用。
上期探讨了sv-print简单的插件机制，以及实现了参数的重写，项目是TS创建的，参数的写法就显得那么格格不入了。所以本期探索探索 用ES6的写法来重构它，让后续编写更加的方便。
前言
如果你对 ES6 或者 原型链不熟悉。那么本期，你将有所收获，本着授人以鱼不如授人以渔的思想。 本篇从调试分析，到实战落地。
调试分析
上篇说的，它几个核心的方法: createTarget、getValue、setValue、destroy 以及 可选的 css。
见下方代码，看着就难受😢
const fieldOptionFun = (configs: any) => {
return function () {
function t() {
this.name = "field";
}
return (
(t.prototype.createTarget = function (t, i, e) {
}),
(t.prototype.getValue = function () {
}),
(t.prototype.setValue = function (t: any) {
}),
(t.prototype.destroy = function () {
}),
t
);
}
};
看不懂先别慌，发个朋友圈先(console.log)
const testFun = filedOption();
const test = new testFun();
console.log(test);
思考🤔： 为什么要这样写？ 咱们可以复制的函数，让 AI 解释一下。
亮相参数对象：
ES6改写
为了继承，为了简洁。
新增一个基类：baseOption.ts
export interface BaseOption {
/**
* 参数名称
*/
name: string;
/**
* 会修改 DOM 样式的属性才需要: eg: color, backgroundColor
* @param printElement 元素对象
* @param value 该属性值
*/
css?(printElement: HTMLElement, value: string | number | boolean): void;
/**
* 创建参数DOM
* @param printElement 元素对象
* @param options 元素参数
* @param printElementType 元素类型对象
*/
createTarget(printElement: any, options: any, printElementType: any): HTMLElement;
getValue(): string | number | boolean;
setValue(value: string | number | boolean): void;
destroy(): void;
}
重新实现fieldOption
新建一个 fieldOption.ts
export class FieldOption implements BaseOption {
public name: string = "field";
isSelect: boolean = false;
target: any = null;
vueApp: any = null;
vueAppIns: any = null;
configs: any = {};
constructor(configs: any) {
this.configs = configs;
}
createTarget(printElement: any, options: any, printElementType: any): HTMLElement {
const fileds = printElement.getFields();
this.isSelect = fileds && fileds.length > 0;
const el = globalThis.$(
`<div class="hiprint-option-item hiprint-option-item-row">
<div class="hiprint-option-item-label">字段名</div>
<div class="hiprint-option-item-field">
<div id="fieldOption">
</div>
</div>
`
);
this.target = el;
this.vueApp = createApp(fieldVueApp, {
onChange: (value) => {
console.log("onChange", value);
printElement && printElement.submitOption();
},
options: fileds || this.configs.fieldList,
dialog: this.configs.dialog,
});
this.vueApp.use(Button);
this.vueApp.use(Modal);
this.vueApp.use(AutoComplete);
setTimeout(() => {
this.vueAppIns = this.vueApp.mount("#fieldOption");
}, 0);
return this.target;
}
getValue(): string | number | boolean {
return this.vueAppIns && this.vueAppIns.getValue();
}
setValue(value: string | number | boolean): void {
setTimeout(() => {
if (this.vueAppIns) {
this.vueAppIns.setValue(value);
}
}, 0);
}
destroy(): void {
if (this.vueApp) {
this.vueApp.unmount();
}
this.target.remove();
}
}
稍微改吧改吧，亮个相，测试一下效果，它的原型链是否正常：
可以看到，核心方法在原型链上。 咱们存储为全局变量测试一下方法
啊哈，能调用就行成了~ 但是整体流程还是有报错的，如下图：
不要慌，不要慌，报错意思是咱们传的不是一个构造函数。
嘿嘿，那不就好说了嘛。 套一套
export const FieldOptionFun = (configs: any) => {
return function () {
return new FieldOption(configs);
};
};
咱们对比输出看看实际对象：
后者，我们明显可以看到对象的痕迹。
看看整个fieldOption.ts文件
这样思路一打开，咱们可以有更好的去拓展实现参数的处理。
所以控制台是再基础不过的调试手段了。大家一定要仔细探索观察输出的对象格式。
总结
本篇深入探索了参数对象的格式，在控制台中寻找到了重要线索。结合AI可以快速知晓函数具体作用。以及匿名函数、立即执行函数。
控制台输出的对象，其实也是很细致的，比如文本、字符串它的颜色是不一样的，function 也有特殊的标识。
问题并没有你想象的那么难处理，重要的是找对方法。
如果需要源码，公众号回复：plugin-demo
如果看到这里，你还是疑问，想要一对一技术指导，欢迎私信联系我。
记得点个赞咯~
评论区也可交流，想要不简说说什么技术，疑难解答。
下期再见👋🏻
