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供其他页面复用。

  1. 创建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
  1. 修改 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()

        ],

};
  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 组件了。

  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>

添加后效果如下图。

总结

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

如果大家对Svelte 有更多兴趣，欢迎留言交流~

Svelte入门——Web Components实现跨框架组件复用的更多相关文章

  1. Svelte入门——Web Components实现跨框架组件复用（二）

    在上节中,我们一起了解了如何使用Svelte封装Web Component,从而实现在不同页面间使用电子表格组件. Svelte封装组件跨框架复用,带来的好处也十分明显: 1.使用框架开发,更容易维护 ...

  2. Taro Next H5 跨框架组件库实践

    作者:凹凸曼 - JJ Taro 是一款多端开发框架.开发者只需编写一份代码,即可生成各小程序端.H5 以及 React Native 的应用. Taro Next 近期已发布 beta 版本,全面完 ...

  3. Web Components实践开发Tab组件

    本文是对web components的一次实践,最终目的是做出一个tab组件,本文涉及Custom Elements(自定义元素).HTML Imports(HTML导入).HTML Template ...

  4. Taro 3 正式版发布：开放式跨端跨框架解决方案

    作者:凹凸曼 - yuche 从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验.今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望 Tar ...

  5. 前端未来趋势之原生API：Web Components

    声明:未经允许,不得转载. Web Components 现世很久了,所以你可能听说过,甚至学习过,非常了解了.但是没关系,可以再重温一下,温故知新. 浏览器原生能力越来越强. js 曾经的 JQue ...

  6. 可选的Web Components类库

    首先需要说明的是这不是一篇 Web Components 的科普文章,如果对此了解不多推荐先读<A Guide to Web Components>. 有句古话-“授人以鱼,不如授人以渔” ...

  7. React文档（二十三）Web Components

    React和web components是为了解决不同问题而创立的.web components为可重用组件提供了健壮的封装,而React提供了声明式的库来保持DOM和数据同步.这两点是互相补充的.作 ...

  8. Web Components（续）

    概述 之前我们介绍了Web Components的基本概念,现在我们给出一个使用Web Components的实例代码,并且对组件化进行一些思考.记录下来,供以后开发时参考,相信对其他人也有用. 实例 ...

  9. 腾讯发布新版前端组件框架 Omi，全面拥抱 Web Components

    Omi - 合一 下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 AP ...

随机推荐

  1. SpringBoot-集成SpringSecurity

    在 Web 开发中,安全一直是非常重要的一个方面. 安全虽然属于应用的非功能性需求,但是从应用开发的第一天就应该把安全相关的因素考虑进来,并在整个应用的开发过程中. Spring Security官网 ...

  2. 攻防世界XCTF-WEB入门全通关

    为了更好的体验,请见我的---->个人博客 XCTF的web块入门区非常简单,适合一些刚接触安全或者对网络安全常识比较了解的同学在安全搞累之余娱乐娱乐. 其主要考察下面几点: 基本的PHP.Py ...

  3. linux性能优化基础——iommu相关配置

    此篇文档介绍了IOMMU相关的信息: https://blog.chaosjohn.com/Check-VT-D-or-IOMMU-under-Linux.html iommu和vt-d都是io半虚拟 ...

  4. TypeScript中将函数中的局部变量“导出”的方法

    首先是在模块a.js中声明一个可导出(export)的数据结构,例如: export class ModelInfo{ id: string; name:string; } 其次是在模块b中声明可导出 ...

  5. SPI在JDBC中的运用

    前言 之前学习了JDK SPI的机制,本文专门讨论2个内容: 1.为什么在使用SPI后,不需要Class.forName()了? 2.SPI在JDBC中的运用. JDBC模板代码 private st ...

  6. 重学c#系列——list(十二)

    前言 简单介绍一下list. 正文 这里以list为介绍. private static readonly T[] s_emptyArray = new T[0]; public List() { t ...

  7. python查询对像所有方法

    鉴于学习时好多参数对像都不知道是什么玩意有什么方法,搜了半天一个 """arg为一个对像,下面是打印所有对像方法"""for i, func ...

  8. 上拉电阻大小对i2c总线的影响

    漏极开路上拉电阻取值为何不能很大或很小? 如果上拉电阻值过小,Vcc灌入端口的电流(Ic)将较大,这样会导致MOS管V2(三极管)不完全导通(Ib*β<Ic),有饱和状态变成放大状态,这样端口输 ...

  9. 野指针和free总结超有用的资料

    在C语言项目中,经常会遇到需要程序员手动分配内存的地方.这样做能够节省大量的内存空间,也让程序更加灵活.只要你有一定的基础,那么肯定用过 malloc 或者 ralloc和free的组合.这个组合使用 ...

  10. C语言单片机项目实战超声波雷达测距

    本实验是基于MSP430利用HC-SR04超声波传感器进行测距,测距范围是3-65cm,讲得到的数据显示在LCD 1602液晶屏上. 模块工作原理如下 (1)采用 IO 触发测距,给至少 10us 的 ...