请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

dexteryao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

124

主题

8928

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
13548

讲师达人悬赏达人元老葡萄SpreadJS 认证SpreadJS 高级认证微信认证勋章

dexteryao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-8-31 14:29  /   查看:1908  /  回复:0
本帖最后由 dexteryao 于 2021-8-31 15:58 编辑

image.png685519103.png
Svelte推出后一直不温不火,没有成为继Angular、React和VUE成为第四大框架,也没有失去热度无人问津。
Svelte像React和VUE一样开发,但却没有虚拟DOM,Svelte将代码编译为体积小,不依赖于框架的JS代码,这种方式看似美好但却没有得到大项目成功的实践。


在多团队完成的大项目中,各个团队可能使用不同的框架版本,甚至不同的框架,这让不同项目之间的组件复用变得不可能。“write one,run anywhere“就是一句空话。这时Svelte却变成了跨越框架鸿沟的桥梁,使用Svelte开发的无框架依赖的Web Components,可以在各个框架间复用,同时Svelte的开发方式也不像写pure js那样繁琐。

下面以SpreadJS集成为例,介绍如何用svelte开发一款spread-sheets Web Component供其他页面复用。
1. 创建Svelte template工程。
svelte 官方提供了template 工程,只要colne或者下载项目即可。 https://github.com/sveltejs/component-template
  1. npx degit sveltejs/component-template my-new-component
  2. cd my-new-component
  3. npm install # or yarn
复制代码
2. 修改 rollup.config.js添加 customElement: true 配置,输出为web component组件
添加后的rollup.config.js
  1. import svelte from 'rollup-plugin-svelte';
  2. import resolve from '@rollup/plugin-node-resolve';
  3. import pkg from './package.json';

  4. const name = pkg.name
  5.         .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
  6.         .replace(/^\w/, m => m.toUpperCase())
  7.         .replace(/-\w/g, m => m[1].toUpperCase());

  8. export default {
  9.         input: 'src/index.js',
  10.         output: [
  11.                 { file: pkg.module, 'format': 'es' },
  12.                 { file: pkg.main, 'format': 'umd', name }
  13.         ],
  14.         plugins: [
  15.                 svelte({
  16.                         customElement: true,
  17.                 }),
  18.                 resolve()
  19.         ],
  20. };
复制代码
3. 更新 src/Component.svelte,创建spread-sheets组件
  1. <svelte:options tag="spread-sheets" />
  2. <script>
  3.     import { createEventDispatcher, onMount } from 'svelte';
  4.     // Event handling
  5.     const dispatch = createEventDispatcher();
  6.     export let value ="";
  7.     $: valueChanged(value);
  8.     function valueChanged(newValue) {
  9.       console.log("value changed", newValue);
  10.       if(spread){
  11.         let sheet = spread.getActiveSheet();
  12.         sheet.setValue(0, 0, value);
  13.       }
  14.     }

  15.     let spreadHost;
  16.     let spread;
  17.     function dispatchEvent(name, e) {
  18.       // dispatch(name, e);
  19.       const event = new CustomEvent(name, {
  20.         detail: e,
  21.         bubbles: true,
  22.         cancelable: true,
  23.         composed: true, // this line allows the event to leave the Shadow DOM
  24.       });
  25.       // console.log(event)
  26.       spreadHost.dispatchEvent(event);
  27.     }
  28.       onMount(() => {
  29.           spread = new GC.Spread.Sheets.Workbook(spreadHost);
  30.           let sheet = spread.getActiveSheet();
  31.           sheet.setValue(0, 0, value);
  32.           spread.bind(GC.Spread.Sheets.Events.ValueChanged, function(s, e){
  33.             e.evnetName = "ValueChanged";
  34.             dispatchEvent("changed", e);
  35.           });
  36.           spread.bind(GC.Spread.Sheets.Events.RangeChanged, function(s, e){
  37.             e.evnetName = "RangeChanged";
  38.             dispatchEvent("changed", e);
  39.           });
  40.       });



  41.   </script>
  42.   <style>
  43.       
  44.   </style>
  45.   <div bind:this={ spreadHost} style="width: 100%; height:100%"></div>
复制代码

这样我们自定义组件就创建好了,只需要调用npm run build,就能编译出spread-sheets 组件了。

4. 在页面引用组件
创建index.html页面,并引用编译好的js文件。同时引入spreadjs相关资源
直接使用spread-sheets标签添加SpreadJS
  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta name="spreadjs culture" content="zh-cn" />
  5.     <meta charset="utf-8" />
  6.     <title>My Counter</title>
  7.     <base href="/">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">

  9.     <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">
  10.   </head>
  11.   <body>
  12.     <!-- <spread-sheets-designer></spread-sheets-designer> -->
  13.     <button onclick="getJSON()">GetJSON</button>
  14.     <spread-sheets value="123" style="display:block; width: 80%; height: 400px;"></spread-sheets>


  15.     <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>

  16.     <script type="text/javascript" src="/dist/index.js"></script>
  17.     <script type="text/javascript">

  18.       document.querySelector("spread-sheets").addEventListener("changed", function(){
  19.         console.log(arguments)
  20.       })

  21.       window.onload = function(){
  22.         document.querySelector("spread-sheets").setAttribute("value", "234");
  23.       }

  24.     </script>
  25.   </body>
  26. </html>
复制代码


添加后效果如图

image.png560953368.png

不过用Svelte 开发的Web Component也有一些限制,比如只能传递string 属性;绑定的attribute是单向绑定 ,想要获取组件内部更新值,需要绑定event获取。
如果对Svelte 感兴趣,欢迎大家评论交流




0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部