Svelte是构建 Web 应用程序的一种新方法,推出后一直不温不火,没有继Angular、React和VUE成为第四大框架,但也没有失去热度,无人问津。造成这种情况很重要的一个原因是,Svelte 的核心思想在于【通过静态编译减少框架运行时的代码量】,它可以像React和VUE一样开发,但却没有虚拟DOM,使它可以将代码编译为体积小、不依赖于框架的JS代码。 看起来满满优点,但因为过于灵活,导致大家无法写出高度一致的业务代码,以上优点并没有在实际的大项目中得到很好的体现。
Svelte这款框架并不完美,却又没有在残酷的市场竞争中死掉,是因为它拥有一本特殊秘籍,使它成为其他框架无法替代的一员。这本秘籍的名字就叫做——Web Components。 在多团队协同完成的大项目中,各个团队可能使用不同的框架版本,甚至不同的框架,这让不同项目之间的组件复用变得困难。“write one,run anywhere”就是一句空话。这种情况下Svelte就变成了跨越框架鸿沟的桥梁,使用Svelte开发的无框架依赖的Web Components,可以在各个框架间复用。同时,Svelte的开发方式也不像写pure js那样繁琐。 下面以SpreadJS集成为例,介绍如何用Svelte开发一款spread-sheets Web Component供其他页面复用。
1. 创建Sveltetemplate工程。
svelte 官方提供了template 工程,只要clone或者下载项目即可。 - npx degit sveltejs/component-template my-new-component
- cd my-new-component
- npm install # or yarn
复制代码2. 修改 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()
- ],
- };
复制代码3.更新 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 组件了。
4. 在页面引用组件。
创建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>
复制代码
添加后效果如下图。
总结 虽然看起来WebComponent完美解决了组件之间的复用问题,但是用Svelte 开发的Web Component也存在一些限制:比如,只能传递string 属性;绑定的attribute是单向绑定,想要获取组件内部更新值,需要绑定event获取。 如果大家对Svelte 有更多兴趣,欢迎留言交流~
SpreadJS | 下载试用纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。 如下资源列表,可以为您评估产品提供帮助:
|