152019.10

小评 Svelte.js 框架

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也不是没有可取之处,例如它的编译,竟然可以在浏览器中完成(看它的在线教程编辑器),可见他们团队在编译这个中间环节下了大功夫,才能在撰写语法上如此优雅。

01:10:11 已有0条回复
132019.10

Purgecss:移除无用的css

092019.10

在 nautil 中发明 react 双向绑定的功能,原来早有前人实践过了,而且还是 react 官方博客发布。从思路和用法上几乎一样,只是官方方法仅支持 input 等表单组件,而无法满足自定义组件的使用。不过,值得骄傲的是,我发明的 createTwoWayBinding 函数还是有不错的思想,而且借助了 Proxy 的力量。总之,自己以为很牛叉的东西,可能前人早都做过了,我们总是在炒冷饭中自鸣得意。

14:05:22 已有0条回复
072019.10

babel remove class static properties

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

21:05:27 已有0条回复
272019.9

网络安全标准一览表

网络安全标准

15:44:01 已有0条回复
232019.9

echarts x 轴最后一个刻度右对齐

在我们的数据图表中,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 隐藏起来。

20:36:29 已有0条回复
192019.9

touches, targetTouches, changedTouches

在移动端 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 中每个触点和其他触点的具体对应关系了。

15:06:38 已有0条回复
312019.8

带摩擦因子的加速度距离计算公式

因为要写一个库,用以模拟现实世界的运动逻辑。在经典力学里,我们常常用匀速运动来说事,但现实中哪有那么好的事情,摩擦力等阻力会让速度慢下来,重力加速度会让速度越来越快等等。

已知:某物体以 v1 的初始速度被加速前进,t1 秒后,速度达到了 v2(v2 > v1)。

求:t2(t2 > t1)时停止加速,物体滑行多长距离之后停下来?

当看到这个题目,作为文科生,我完全懵逼,把毕生学到当物理学知识翻出来也找不到快速解决的办法。所以,只能通过自己的推演慢慢解决这道题目。

分析

这道题的特别之处在于受到了阻力影响,且运动过程分为两段。那么接下来我们来进行受力分析。

第 1 阶段由于受到比 f 大的 F 力的助推,所以呈实际受力为 F - f 的推力,匀加速运动。第 2 阶段由于只受 f 阻力,所以呈匀减速运动。

关于加速运动用到的公式有如下:

  • 求加速度公式 a = (v2 - v1) / t
  • 求距离公式 s = v1t + at2/2

且公式中如果 v1 为 0,那么更加简单。

由于第 2 阶段物体停下来,只受 f 阻力影响,因此,我们只需要知道 f 所带来的减速度,以及 t2 时的即时速度即可算出滑行需要的时间,进而算出滑行距离

开始解题

1.计算第一阶段加速度

a1 = (v2 - v1) / t

2.计算到达 t2 时的速度

vx = a1 * t2 = (v2 - v1) * t2 / t

3.计算计算阻力减速度

即时速度比较好算,但是 f 所带来的减速度是多少呢?

根据牛顿第二定律 F = ma。因为质量固定,所以摩擦力 f 所产生的减速度 ax 是固定的。同时根据动摩擦力公式 f = µFn = µG = µmg(µ 为动摩擦因子)。质量和重力加速度都是固定的,所以最终 ax 的大小仅仅和动摩擦因子有关,也就是物质表面的粗糙程度,ax = ƒ(µ)。

现在,我们假设在没有阻力的情况下所产生的加速度为 a0

kµ = ax / a0

即损失加速度与理想状态(无阻力)加速度之比,k 为一个常量系数,表示摩擦因子与加速度损失之间的某种特定关系,那么

ax = ƒ(µ) ≈ µa0

而对于同一个事物,µ 是固定不变的。又因为

ax = a0 - a1

所以

ax = µa0 = a0 - a1
=> a0 = a1 / (1 - µ)
=> ax = a0 - a1 = a1 / (1 - µ) - a1
=> ax = µa1 / (1 - µ) = µ(v2 - v1) / t(1 - µ)

现在我们得到了摩擦力带来的减速度。

4. 计算停下来要花的时间

我们就可以得到从 t2 开始减速到停止所需要花费的时间:

tx = vx / a

5. 计算停下来之前滑行的路程

在该时间内物体前进的距离是多少呢?

sx = ax * tx/ 2

经过上面这些步骤我们就算出了物体滑行的距离。

12:44:20 已有0条回复
302019.8

多端统一开发

这段时间关注了一些利用 react 实现跨平台开发的方案,几乎无一例外,都不能很好的满足我的需要。我的理想是,特别针对移动端开发,写一份代码,然后编译到不同平台,直接运行,除了修改编译工具配置和少量的全局覆盖以外,不对应用本身的代码做任何修改。

我写 Nautil 的目的也是这样。

目前我接触到的跨端开发方案有:

  • taro 京东出品,相对比较成熟,需要理解其工作原理,在写法上需要开发者自己遵循一些规则
  • kbone 微信小程序团队自己成员开发的针对微信小程序方案,理念上提供虚拟 DOM 挂载节点,从而让整个应用像运行在 web 内部一样,不需要考虑兼容性问题
  • remax 理念上和 kbone 很像,同时提供自己的一整套构建、框架,不足在于需要根据不同的小程序引入不同的库,当然,这个可以用构建工具来 alias

目前我自己使用了 kbone 希望能出现更好的方案来解决我的需求。

10:01:05 已有0条回复