唐霜的博客

Svelte是2019年才火起来的新前端框架，它的热度虽然不如react和vue，但是确实很热，大有冲击RAV之后第四大框架之势。对它的文档进行阅读之后，我来说一说自己的一些看法。这些看法不一定成熟，毕竟没有使用它开发过项目，但是话说回来，目前在国内，使用它进行前端项目开发的可能性仍然停留在观望阶段，没有一家公司会尝试一个不一定发展很久的框架。

Svelte的第一眼真是非常爽。你说它像vue不错，但是它比vue更爽：

<script>
let a = 0
</script>

<div on:click="{() => a ++}">{a}</div>

如此漂亮的语法，简直像是重新定义了HTML。而且这个写法和我当初写virtual dom框架的初衷一样，感觉相见恨晚。

但是，当我发现它发明了新语法$:之后，就有些开始不是很舒服了。

$: b = a + 1

这个语法要实现的是vue里面的计算属性，它具有依赖响应的效果，当a发生变化时，b也会随之发生变化。但是，为了计算属性的效果，我觉得可以忍，毕竟不麻烦。

当发现它来发明了新的循环语法时，我有点开始不适应了。

{#each books as book}
  <div>{book.name}</div>
{/each}

这……感觉回到了php模板时代，怎么说好呢？有点拒绝。

再到后面，它的事件冒泡居然要声明：

<div on:click>
  <Inner />
</div>

如果不声明，事件不冒泡。此时，我内心有种MMP的感觉，这是反人类么。。。

随后的文档中，出现了各种奇淫巧技，我心想啊，未来这东西还能维护吗？其中store部分，蹭了rxjs的热度，提供了多种模式的存储器，把数据管理搞出了越来越难理解的高度，也是大写的服。

Svelte虽然想要做出点什么不一样的东西出来，但是我个人觉得，有点太过了，像玩具一样，不具备可长期维护的可能性。而且它依赖编译，和vue不同，vue可以直接运行时，在html文件中引入后就像jquery一样，马上可以撸。总体上而言，svelte除了一开始让人眼前一亮外，没有超出vue所提供的功能，很难说服开发者从vue转向svelte。更别提react了。

在我看来，react仍然是最好的框架，除了jsx之外，它完全遵循js本身的运行原理，没有解析器去自己实现一套语法（jsx是语法糖，可以不用，写原生代码）。也正因为如此，它才有可能是未来10年都可能持续可维护的代码，对于开发者而言，他可以很容易从一个文件中读懂所有的逻辑，因为它本身就是js，没有其他需要理解的知识（jsx除外），而vue即使很简单，也需要了解它的模板语法。

不过，svelte也不是没有可取之处，例如它的编译，竟然可以在浏览器中完成（看它的在线教程编辑器），可见他们团队在编译这个中间环节下了大功夫，才能在撰写语法上如此优雅。

在开发 nautil 过程中我发现，react 本身会在 production 模式下去掉 prop-types 的校验，但是在我们自己写的业务代码中，会给每个 class 增加 propTypes，于是找到了一个 babel 插件，这个插件可以去掉 react 组件类中声明的 propTypes 这个静态属性。于是我想直接用这个插件，可以删除 nautil 中的 props 属性吗？最后发现是不以的，这个插件写死了被移除的属性是 propTypes，所以，我必须自己写一个插件来实现这个功能。经过对该插件的改造，我增加了一个 properties 参数，可以实现移除任意类的静态属性。并且发布到了 npm，你可以在这里了解。

在我们的数据图表中，x 轴的最后一个 label 应该是右对齐的。echarts 官方没有参数来配置这个功能，导致文字被截掉了半截。挺失望的，这种情况实在是太有需求了。在不能修改源码的情况下，我们只能通过自己手动来实现这个需求。

xAxis: {
type: 'category',
boundaryGap: true,
data: xAxisData,
axisTick: {
  show: false,
},
axisLine: {
  lineStyle: {
    width: 1,
    color: '#ccc',
  }
},
axisLabel: {
  color: '#89889C',
  showMinLabel: true,
  showMaxLabel: true,
  formatter: (() => {
    let currentYear = ''
    return (value, index) => {
      const year = value.substr(0, 4)
      const month = value.substr(4, 2)
      const shouldNotShowYear = index > 0 && currentYear === year
      const isLast = value === xAxisData[xAxisData.length - 1]
      const text = shouldNotShowYear ? month : year + '/' + month
      const label = isLast && !shouldNotShowYear ? `{a|${text}}` : text

      currentYear = year

      return label
    }
  })(),
  rich: {
    a: {
      width: 70,
      align: 'left',
    },
  },
},

上面红色部分是关键，我们要让最后一个 label 靠右对齐，但是它受到宽度的限制，所以我们干脆来了一个宽度，直接将 label 的宽度和文字的整体高度相等，这样就可以让文字显示完整了。

但是，你可能会说，我怎么知道文字的总体宽度是多少？label 的字数可多可少，不可控啊。我会告诉你，有一个东西可以帮助你在 canvas 中获取文本的宽高，你听说过吗？通过 canvas 计算文字宽高之后，赋值给 rich 里面的 width。echarts 内部会根据你给定的宽度重新布局 x 轴文本的展示，由于我们设置了 showMaxLabel，所以，无论如何最后一个 label 都会展示，如果空间不够，它会把前一个 label 隐藏起来。

在移动端 touch 事件中，有 touches, targetTouches, changedTouches 这三个属性，它们都是一个 Touch 对象的列表，但它们所代表的意思不同：

• touches: 当前在屏幕上的触点，因为同一时间，用户可能有多个手指同时触摸在屏幕上，touches 中保存了所有触点信息
• changedTouches: 触发当前这个 touch 事件的真正触点信息，当然，也可能有两个以上的手指同时触发，比如 touchmove 事件，可以由两个以上手指同时触发
• targetTouches: 列出 touches 中与 touchstart 事件时所在 target element 相同的 Touch 对象，如果由于 touchmove 移动出了 touchstart 时的 element，那么 targetTouches 不会包含不在 element 中的那些触点信息。

因为 touch 事件和 mouse 事件不同，touch 事件指出事件发生时屏幕上的所有触点信息，表明可能存在多个触点。但是由于事件是不连续的，为了区分触点，Touch 对象会有一个 identifier 属性，它是一个 0 开始的索引值。手指放到屏幕时，会用一个 identifier 标记它，这样开发者就可以知道当前 changedTouches 中每个触点和其他触点的具体对应关系了。