关于前端:Svelte入门Web-Components实现跨框架组件复用

62次阅读

共计 3708 个字符，预计需要花费 10 分钟才能阅读完成。

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-component
cd my-new-component
npm 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 有更多趣味，欢送留言交换~

正文完