Svelte 是构建 Web 应用程序的一种新办法，推出后始终不温不火，没有继Angular、React和VUE成为第四大框架，但也没有失去热度，无人问津。造成这种状况很重要的一个起因是，Svelte 的核心思想在于【通过动态编译缩小框架运行时的代码量】，它能够像React和VUE一样开发，但却没有虚构DOM。，使它能够Svelte能够将代码编译为体积小、不依赖于框架的JS代码。
看起来满满长处，但因为过于灵便，导致大家无奈写出高度一致的业务代码，以上长处并没有在理论的大我的项目中失去很好的体现。
Svelte 这款框架并不完满，却又没有在残暴的市场竞争中死掉，是因为它领有一本非凡秘籍，一些使它成为其余框架无奈代替的一员的性能。。
而对于 Svelte 来说，这本秘籍的名字就叫做——Web Components。
在多团队协同实现的大我的项目中，各个团队可能应用不同的框架版本，甚至不同的框架，这让不同我的项目之间的组件复用变得艰难。"write one，run anywhere"就是一句空话。这种状况下Svelte就变成了沟通逾越框架鸿沟的桥梁，应用Svelte开发的无框架依赖的Web Components，能够在各个框架间复用。同时，Svelte的开发方式也不像写pure js那样繁琐。
上面以SpreadJS集成为例，介绍如何用Svelte开发一款spread-sheets Web Component供其余页面复用。
- 创立Svelte template工程。
svelte 官网提供了template 工程，只有clone或者下载我的项目即可。
https://github.com/sveltejs/component-template
npx degit sveltejs/component-template my-new-componentcd my-new-componentnpm install # or yarn- 批改 rollup.config.js，增加 customElement: true 配置，输入为web component组件。
增加后的rollup.config.js如下。
import svelte from 'rollup-plugin-svelte';import resolve from '@rollup/plugin-node-resolve';import pkg from './package.json';const name = pkg.name .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3') .replace(/^\w/, m => m.toUpperCase()) .replace(/-\w/g, m => m[1].toUpperCase());export default { input: 'src/index.js', output: [ { file: pkg.module, 'format': 'es' }, { file: pkg.main, 'format': 'umd', name } ], plugins: [ svelte({ customElement: true, }), resolve() ],};- 更新 src/Component.svelte，创立spread-sheets组件。
<svelte:options tag="spread-sheets" /><script> import { createEventDispatcher, onMount } from 'svelte'; // Event handling const dispatch = createEventDispatcher(); export let value =""; $: valueChanged(value); function valueChanged(newValue) { console.log("value changed", newValue); if(spread){ let sheet = spread.getActiveSheet(); sheet.setValue(0, 0, value); } } let spreadHost; let spread; function dispatchEvent(name, e) { // dispatch(name, e); const event = new CustomEvent(name, { detail: e, bubbles: true, cancelable: true, composed: true, // this line allows the event to leave the Shadow DOM }); // console.log(event) spreadHost.dispatchEvent(event); } onMount(() => { spread = new GC.Spread.Sheets.Workbook(spreadHost); let sheet = spread.getActiveSheet(); sheet.setValue(0, 0, value); spread.bind(GC.Spread.Sheets.Events.ValueChanged, function(s, e){ e.evnetName = "ValueChanged"; dispatchEvent("changed", e); }); spread.bind(GC.Spread.Sheets.Events.RangeChanged, function(s, e){ e.evnetName = "RangeChanged"; dispatchEvent("changed", e); }); }); </script> <style> </style> <div bind:this={ spreadHost} style="width: 100%; height:100%"></div>这样咱们的自定义组件就创立好了，只须要调用npm run build，就能编译出spread-sheets 组件了。
- 在页面援用组件。
创立index.html页面，并援用编译好的js文件。同时引入spreadjs相干资源。
间接应用spread-sheets标签增加SpreadJS。
<!doctype html><html lang="en"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <title>My Counter</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> </head> <body> <!-- <spread-sheets-designer></spread-sheets-designer> --> <button onclick="getJSON()">GetJSON</button> <spread-sheets value="123" style="display:block; width: 80%; height: 400px;"></spread-sheets> <script src="https://demo.grapecity.com.cn/SpreadJS/WebDesigner/lib/spreadjs/scripts/gc.spread.sheets.all.14.1.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="/dist/index.js"></script> <script type="text/javascript"> document.querySelector("spread-sheets").addEventListener("changed", function(){ console.log(arguments) }) window.onload = function(){ document.querySelector("spread-sheets").setAttribute("value", "234"); } </script> </body></html>增加后成果如下图。
总结
尽管看起来Web Component完满解决了组件之间的复用问题，然而用Svelte 开发的Web Component也存在一些限度：比方，只能传递string 属性；绑定的attribute是单向绑定，想要获取组件外部更新值，须要绑定event获取。
如果大家对Svelte 有更多趣味，欢送留言交换~