织梦网站熊掌号改造怎么做,wordpress附件详情,wordpress怎么编辑导航菜单,安全员考试成绩查询网关键词 前端框架、编译器、响应式、模板 介绍 Svelte /svelt/ adj. 苗条的#xff1b;线条清晰的#xff1b;和蔼的 Svelte是一个前端组件框架#xff0c;就像它的英文名字一样#xff0c;Svelte的目标是打造一个更高性能的响应性前端框架。 Svelte类似于React和Vue框架线条清晰的和蔼的 Svelte是一个前端组件框架就像它的英文名字一样Svelte的目标是打造一个更高性能的响应性前端框架。 Svelte类似于React和Vue框架提供模板语法和响应式编程。但是有一个重要的区别Svelte是一个编译时的框架在编译的过程中生成组件运行时的代码并实现响应式而React和Vue则是基于虚拟DOM及Diff实现运行时的响应式。 这正是Svelte宣传的提高性能的核心实现。我们知道原生的性能肯定是最高的没有中间多余的转换和对比等框架层的逻辑消耗性能。或许有同学就会问那我们在JQuery时代写的代码性能不是更好吗为什么感觉上却没有比react和Vue写的应用性能好呢。我想这主要是以下几个原因 现在的硬件和网络带宽等资源已经比以往有了大幅度的提升所以就算应用的体积较以往比较大相比硬件等资源的提升反而会感觉上性能更好 JQuery是基于原生的DOM API封装和扩展了统一的接口屏蔽了浏览器底层的差异。但是很多开发人员在使用时并没有考虑DOM变更对性能带来的影响只是简单的用JQuery对DOM进行粗暴的全局更新 Vue和React虽然是引入虚拟DOM需要Diff等逻辑维护和更新实际的DOM树但是框架本身做了优化Diff算法和更新策略也有很大的提升所以性能上并没有感觉比原生的差很多。 虽然Vue和React如今已经满足了前端大部分的场景Svelte的目标是追求更好的性能 (所以前端是真的卷总有人乐此不疲的遭轮子但也正是这些人在推动着前端的不断发展) 。Svelte提供类似Vue单文件组件的模板语法然后编译成原生JavaScript提供了一套相对于我们自己操作DOM更优雅更高效的更新方案。我们可以基于Svelte官网提供的REPL直观的了解一下编译的过程 组件文件源码App.svelte实现了一个简单的点击按钮统计点击次数的功能。 // App.sveltescript let clickCount 0; function click() { clickCount 1; }/scriptbutton on:click{ click }click me { clickCount } { clickCount 1 ? times : time }/buttonstylebutton { cursor: pointer;}/style 通过Svelte编译之后的代码如下可以具体查看我的注释进行了解 /* App.svelte generated by Svelte v4.1.1 */import { SvelteComponent, append, append_styles, attr, detach, element, init, insert, listen, noop, safe_not_equal, set_data, space, text} from svelte/internal;import svelte/internal/disclose-version;// 插入组件样式Svelte会自动生成一个全局唯一的类名function add_css(target) { append_styles(target, svelte-1hvi0n4, button.svelte-1hvi0n4{cursor:pointer});}// 1、生成HTML片段function create_fragment(ctx) { let button; let t0; let t1; let t2; let t3_value (/*clickCount*/ ctx[0] 1 ? times : time) ; let t3; let mounted; let dispose; return { // c -- create 创建 c() { button element(button); t0 text(click me ); t1 text(/*clickCount*/ ctx[0]); t2 space(); t3 text(t3_value); attr(button, class, svelte-1hvi0n4); }, // m -- mount 挂载 m(target, anchor) { insert(target, button, anchor); append(button, t0); append(button, t1); append(button, t2); append(button, t3); // 绑定事件 if (!mounted) { dispose listen(button, click, /*click*/ ctx[1]); mounted true; } }, // p -- update 更新 p(ctx, [dirty]) { if (dirty /*clickCount*/ 1) set_data(t1, /*clickCount*/ ctx[0]); if (dirty /*clickCount*/ 1 t3_value ! (t3_value (/*clickCount*/ ctx[0] 1 ? times : time) )) set_data(t3, t3_value); }, i: noop, o: noop, // d -- destroy 销毁 d(detaching) { if (detaching) { detach(button); } mounted false; dispose(); } };}// 实例对应上面的ctx传参数function instance($$self, $$props, $$invalidate) { let clickCount 0; function click() { $$invalidate(0, clickCount 1); } return [clickCount, click];}class App extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, {}, add_css); }}export default App; 开始使用 官方推荐使用SvelteKit来创建Svelte应用项目具体命令如下 npm create sveltelatest svelte-democd svelte-demonpm installnpm run dev Svelte会将.svelte组件文件编译成.js文件去创造真实的DOM和对应的.css样式文件工具同时提供了开发服务器、路由、编译部署、SSR等支持。SvelteKit利用Vite去编译代码。 如果你不想使用SvelteKit你还可以通过Vite来创建Svelte应用项目具体命令如下 # 选择svelte模板npm init vite# 生成HTMLJSCSS文件到dist文件夹npm run build 编辑器支持 Svelte团队维护了一个VsCode的插件Svelte for VS Code支持语法提示、高亮、格式化等功能。 总结 Svelte是一个编译时的响应式前端组件框架目标是减少ReactVue等框架引入虚拟DOM和Diff实现响应式的性能损耗。 Svelte的实现原理理论上比React和Vue等框架性能要好但是考虑到虚拟DOM技术的成熟和优化客户端的硬件和网络资源提升这部分的性能提升带来的收益或许不明显。 当前要不要追求极致的性能而选择Svelte我的答案是否定的。一是Svelte当前的成熟度和生态丰富度都没React和Vue好开发体验和效率相对会没那么好二是上面说了Svelte带来的性能提升收益或许并不会那么明显。 那我们要不要关注和学习Svelte? 我的答案是肯定的。Svelte框架背后的实现原理、思路以及技术都是值得我们去了解和学习的。而且未来Svelte的生态丰富了或许开发体验和效率会越来越好我们也多一种选择。总之保持热爱保持好奇保持学习吧 参考 官方文档 Svelte 3: Rethinking reactivity deep-dive-into-svelte Svelte vs. React: A Comprehensive Comparison 联系我 E-mail 个人博客 本文由 mdnice 多平台发布
