Svelte入门——Web Components实现跨框架组件复用

2021年11月24日 阅读数:10
这篇文章主要向大家介绍Svelte入门——Web Components实现跨框架组件复用,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

Svelte 是构建 Web 应用程序的一种新方法,推出后一直不温不火,没有继Angular、React和VUE成为第四大框架,但也没有失去热度,无人问津。形成这种状况很重要的一个缘由是,Svelte 的核心思想在于【经过静态编译减小框架运行时的代码量】,它能够像React和VUE同样开发,但却没有虚拟DOM。,使它能够Svelte能够将代码编译为体积小、不依赖于框架的JS代码。javascript

看起来满满优势,但由于过于灵活,致使你们没法写出高度一致的业务代码,以上优势并无在实际的大项目中获得很好的体现。css

Svelte 这款框架并不完美,却又没有在残酷的市场竞争中死掉,是由于它拥有一本特殊秘籍,一些使它成为其余框架没法替代的一员的功能。。html

而对于 Svelte 来讲,这本秘籍的名字就叫作——Web Components。java

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

下面以SpreadJS集成为例,介绍如何用Svelte开发一款spread-sheets Web Component供其余页面复用。git

  1. 建立Svelte template工程。
    svelte 官方提供了template 工程,只要clone或者下载项目便可。

https://github.com/sveltejs/component-templategithub

npx degit sveltejs/component-template my-new-component
cd my-new-component
npm install # or yarn
  1. 修改 rollup.config.js,添加 customElement: true 配置,输出为web component组件。

添加后的rollup.config.js以下。web

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()
        ],
};
  1. 更新 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 组件了。npm

  1. 在页面引用组件。
    建立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>

添加后效果以下图。json

总结

虽然看起来Web Component完美解决了组件之间的复用问题,可是用Svelte 开发的Web Component也存在一些限制:好比,只能传递string 属性;绑定的attribute是单向绑定,想要获取组件内部更新值,须要绑定event获取。

若是你们对Svelte 有更多兴趣,欢迎留言交流~