Svelte入门——Web Components实现跨框架组件复用
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 有更多兴趣，欢迎留言交流~
Svelte入门——Web Components实现跨框架组件复用的更多相关文章
- Svelte入门——Web Components实现跨框架组件复用（二）
在上节中,我们一起了解了如何使用Svelte封装Web Component,从而实现在不同页面间使用电子表格组件. Svelte封装组件跨框架复用,带来的好处也十分明显: 1.使用框架开发,更容易维护 ...
- Taro Next H5 跨框架组件库实践
作者:凹凸曼 - JJ Taro 是一款多端开发框架.开发者只需编写一份代码,即可生成各小程序端.H5 以及 React Native 的应用. Taro Next 近期已发布 beta 版本,全面完 ...
- Web Components实践开发Tab组件
本文是对web components的一次实践,最终目的是做出一个tab组件,本文涉及Custom Elements(自定义元素).HTML Imports(HTML导入).HTML Template ...
- Taro 3 正式版发布：开放式跨端跨框架解决方案
作者:凹凸曼 - yuche 从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验.今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望 Tar ...
- 前端未来趋势之原生API：Web Components
声明:未经允许,不得转载. Web Components 现世很久了,所以你可能听说过,甚至学习过,非常了解了.但是没关系,可以再重温一下,温故知新. 浏览器原生能力越来越强. js 曾经的 JQue ...
- 可选的Web Components类库
首先需要说明的是这不是一篇 Web Components 的科普文章,如果对此了解不多推荐先读<A Guide to Web Components>. 有句古话-“授人以鱼,不如授人以渔” ...
- React文档（二十三）Web Components
React和web components是为了解决不同问题而创立的.web components为可重用组件提供了健壮的封装,而React提供了声明式的库来保持DOM和数据同步.这两点是互相补充的.作 ...
- Web Components（续）
概述 之前我们介绍了Web Components的基本概念,现在我们给出一个使用Web Components的实例代码,并且对组件化进行一些思考.记录下来,供以后开发时参考,相信对其他人也有用. 实例 ...
- 腾讯发布新版前端组件框架 Omi，全面拥抱 Web Components
Omi - 合一 下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 AP ...
随机推荐
- hd-cg辉度通用代码生成器
HD-CG 辉度通用代码生成器 主要特点: 1. 自定义代码模板:通过简单的默认变量自行编写代码模板,如果默认变量不满足需求,也可增加自定义变量. 2. 自定义数据源:可自定义添加多个项目的数据库,数 ...
- Java基础之（十二）：数组
数组 数组概述 定义 数组是相同类型数据的有序集合. 数组描述的是相同类型的若干数据,按照一定的先后次序排列组合而成. 其中,每一个数据称作一个数组元素,每个数组元素可以通过一个下标来访问它们. 数组 ...
- SSM框架项目的mvc拦截器
为了防止用户在不登录的情况下通过并接请求直接访问系统,我们需要通过session和拦截器来防止这样的情况. 拦截器的配置: 为拦截器建立一个包:interceptor,并在包里建立 LoginInte ...
- Go语言核心36讲（Go语言基础知识六）--学习笔记
06 | 程序实体的那些事儿 (下) 在上一篇文章,我们一直都在围绕着可重名变量,也就是不同代码块中的重名变量,进行了讨论.还记得吗? 最后我强调,如果可重名变量的类型不同,那么就需要引起我们的特别关 ...
- 解决npm : 无法加载文件 D:\Code\renren-fast-vue\node_modules\.bin\npm.ps1,因为在......
解决这个问题: 看看错误信息: npm : 无法加载文件 D:\DevPath\nodejs\npm.ps1,因为在此系统上禁止运行脚本.有关详细信息,请参阅 https:/go.microsoft. ...
- NX Open 图层说
我也是偶然发现的,在一次调试下,竟然会报警. 所以我写了测试代码,进行测试:结果如下 纳尼???还有271层?还能设置大于256层?NX open可以的.
- Convolutional Neural Network-week2编程题1（Keras tutorial - 笑脸识别）
本次我们将: 学习到一个高级的神经网络的框架,能够运行在包括TensorFlow和CNTK的几个较低级别的框架之上的框架. 看看如何在几个小时内建立一个深入的学习算法. 为什么我们要使用Keras框架 ...
- Linux服务器装Anaconda&TensorFlow
远程Linux服务器装Anaconda&指定版本TensorFlow 说明: 由于疫情影响,原先使用的服务器已断电,故重选了一台服务器对环境重选进行搭建,正好补上这篇博文. 01 下载Anac ...
- Noip模拟72 2021.10.9
T1 出了个大阴间题 真就以为他出了个大阴间题就没写,打个暴力就跑了 数据范围显然摆明是状压 设$f[sta][0/1]$表示在已经选择的集合$sta$中,$A$的最大值是$A$还是$A+1$ 然后按 ...
- KMP算法-字符匹配
字符匹配模式-KMP算法 j直接跳到了2的位置,因为在之前的都相同. 那么就需要求如果不等了之后,j需要回跳的位置next[j] 如果tk'与tj相等,则next [j+1]=k'+1 如果tk'与t ...