在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
Svelte问世很久了,一直想写一篇好懂的原理分析文章,拖了这么久终于写了。 Demo1首先来看编译时,考虑如下 <h1>{count}</h1> <script> let count = 0; </script> 这段代码经由编译器编译后产生如下代码,包括三部分:
// 省略部分代码… function create_fragment(ctx) { let h1; return { c() { h1 = element("h1"); h1.textContent = `${count}`; }, m(target, anchor) { insert(target, h1, anchor); }, d(detaching) { if (detaching) detach(h1); } }; } let count = 0; class App extends SvelteComponent { constructor(options) { super(); init(this, options, null, create_fragment, safe_not_equal, {}); } } export default App; create_fragment首先来看
h1 = element("h1"); h1.textContent = `${count}`;
insert(target, h1, anchor);
function insert(target, node, anchor) { target.insertBefore(node, anchor || null); }
if (detaching) detach(h1);
function detach(node) { node.parentNode.removeChild(node); } 仔细观察流程图,会发现 这是因为 可以发现, SvelteComponent每个组件对应一个继承自 class App extends SvelteComponent { constructor(options) { super(); init(this, options, null, create_fragment, safe_not_equal, {}); } } 总结一下,流程图中虚线部分在
可以改变状态的Demo现在修改 <h1 on:click="{update}">{count}</h1> <script> let count = 0; function update() { count++; } </script> 编译产物发生变化, // 从module顶层的声明语句 let count = 0; // 变为instance方法 function instance($$self, $$props, $$invalidate) { let count = 0; function update() { $$invalidate(0, count++, count); } return [count, update]; }
// 模版中定义3个App <App/> <App/> <App/> // 当count不可变时,页面渲染为:<h1>0</h1> <h1>0</h1> <h1>0</h1> 当 <h1>0</h1> <h1>3</h1> <h1>1</h1> 所以每个
一旦发现,就会将该变量提取到 同时,如果执行如上操作的语句可以通过模版被引用,则该语句会被 在
所以编译后的 // 源代码中的update function update() { count++; } // 编译后instance中的update function update() { $$invalidate(0, count++, count); }
c() { h1 = element("h1"); // count的值变为从ctx中获取 t = text(/*count*/ ctx[0]); }, m(target, anchor) { insert(target, h1, anchor); append(h1, t); // 事件绑定 dispose = listen(h1, "click", /*update*/ ctx[1]); }, p(ctx, [dirty]) { // set_data会更新t保存的文本节点 if (dirty & /*count*/ 1) set_data(t, /*count*/ ctx[0]); }, d(detaching) { if (detaching) detach(h1); // 事件解绑 dispose(); }
在 // UI中引用多个状态 <h1 on:click="{count0++}">{count0}</h1> <h1 on:click="{count1++}">{count1}</h1> <h1 on:click="{count2++}">{count2}</h1> 对应 p(new_ctx, [dirty]) { ctx = new_ctx; if (dirty & /*count*/ 1) set_data(t0, /*count*/ ctx[0]); if (dirty & /*count1*/ 2) set_data(t2, /*count1*/ ctx[1]); if (dirty & /*count2*/ 4) set_data(t4, /*count2*/ ctx[2]); },
以上就是JavaScript开发Svelte实现原理详解的详细内容,更多关于Svelte实现原理的资料请关注极客世界其它相关文章! |
请发表评论