关于compiler:webcompilermvvm-的实现思路
最近一段时间留意到一个叫Svelte的前端框架，它与Vue 等前端框架的最大不同是采纳了编译的计划进行的实现，这是官网的介绍 Svelte 是一种全新的构建用户界面的办法。传统框架如 React 和 Vue 在浏览器中须要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来解决。与应用虚构（virtual）DOM 差别比照不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。code而后想了一下Svelte 组件 大体思路定义一套dsl,而后通过Svelte编译成js css 代码，html对应的dom通过js生成。顺着这个思路写了一个最小化的 mvvm 的示例 <script> let a = 10; function handler(){ a++; } let str = "hello";</script><button @click="handler()"> click me {{a}}</button>其对应的编译后代码能够是这个样子 // watcher corefunction createWatcher(){ let watcher = {}; function watch(key, cb){ if(!watcher[key]){ watcher[key] = []; } watcher[key].push(cb); } function trigger(key){ watcher[key].forEach(cb => cb()); } return { watch, trigger }}let {watch, trigger} = createWatcher();let a = 10;function handler(){ a++; // 框架注入trigger trigger('a');}let btn = document.createElement('button')btn.addEventListener('click', handler)btn.innerHTML = 'Click me'+a;// 框架注入watchwatch('a', () => { btn.innerHTML = 'Click me'+a;})document.body.appendChild(btn)外围思路是实现一个watcher 观察者，对于script 里被依赖的变量 值产生变更触发trigger, 获取值的中央通过watch注册, 当trigger 'a' 时 获取到察看'a'的callback函数列表 ，顺次进行调用。 ...