当前位置: 首页 > Web前端 > HTML

web-compiler-mvvm实现思路

时间:2023-04-02 16:36:04 HTML

最近注意到一个前端框架,叫Svelte。它与Vue等前端框架最大的区别在于它采用了编译解决方案来实现。这是官网上的介绍。Svelte是一种构建用户界面的全新方法。React和Vue等传统框架在浏览器中完成大量工作,而Svelte则在构建应用程序的编译阶段处理这些工作。与虚拟DOM不同。Svelte编写的代码可以在应用程序状态发生变化时通过外科手术更新DOM。代码,然后想到了Svelte组件。大致思路是定义一套dsl,然后通过Svelte编译成jscss代码,通过js生成html对应的dom。按照这个想法,我写了一个最小的mvvm示例clickme{{a}}对应的编译代码可以是这样的//watchercorefunctioncreateWatcher(){让观察者={};函数watch(key,cb){if(!watcher[key]){watcher[key]=[];}watcher[key].push(cb);}functiontrigger(key){watcher[key].forEach(cb=>cb());}return{watch,trigger}}let{watch,trigger}=createWatcher();leta=10;functionhandler(){a++;//框架注入触发器trigger('a');}letbtn=document.createElement('button')btn.addEventListener('click',handler)btn.innerHTML='Clickme'+a;//框架注入watchwatch('a',()=>{btn.innerHTML='Clickme'+a;})文档。body.appendChild(btn)的核心思想是实现一个watcher观察者,它触发脚本中因变量值变化的触发器。获取值的地方是通过watch注册的,在trigger'a'的时候调用observe'a'后面函数一览,依次调用,总结一下编译的过程就是植入watch、trigger和conversion的过程,比如在handler中赋值和改变a,那么有两种实现方式。一种是重写++或=获取左值赋值并触发操作,另一种是分析是否存在对外部顶层变量的依赖然后进行代码植入,转换是对植入的进行二次处理代码,比如把button的html标签转成js的dom形式。补充a的赋值和改变也可以通过proxysetter实现