是天使仍是魔鬼？从新思考jsx

最近团队里的PM想要给项目都加上埋点，而后问题由此产生。

先说需求

就一个简单的埋点。嗯，就这样，你们都懂。

埋点就是，用来统计各类事件数据传递。好比说页面访问量，按钮的点击，代码的错误日志的统计......

项目就是一个react项目。。。

再说遇到的问题

老大但愿可以有一种统1、优雅、不侵入业务的方式，处理各类埋点事件。

好比点击事件，用户点击了某个按钮发送一个埋点数据。

棘手就棘手在不在用户的点击事件处理函数中处理埋点的逻辑......

开始怀疑人生

由于我我的是三种前端框架都有熟练使用过的经验。上面的那个问题我就开始在想Angular和Vue中有什么比较优雅的处理方式。

原本是想类比借鉴过来，在React中也相似的作一下。但结果倒是更加悲伤。。。

在Angular和Vue中，咱们可使用自定义指令的形式，这样就可以完美的处理埋点的需求而且不侵入业务。

举个例子

下图是使用自定义指令实现鼠标移动在文字上，使文字背景颜色改变的例子

它的指令使用代码以下

<p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>
复制代码

实现原理和代码以下

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input() defaultColor: string;

  @Input('appHighlight') highlightColor: string;
  // 监听鼠标移入
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
  }
  // 监听鼠标移出
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
  // 更改背景颜色
  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}
复制代码

而后我意识到，这玩意在jsx中是不可能实现的，jsx中要作相似的事是封装一个高阶组件，可是代价就是，我得把全部要处理埋点的地方封装成一个组件再用这个高阶组件包裹一下。。。。

我感受我要是这样告诉老大，会被打死。。。。

更多发现

有些糟心的玩意，你平时不注意到还好，你一旦注意了，你会发现有不少相似的糟心玩意。

埋点事件还没结束，咱们的移动端的一个项目又发现了bug。由于fastclick致使的页面跳转失效：进入一个页面以后，当即返回，再次进入须要点击两次才能有效果。

解决方法用了另外一个奇(歪)技(门)淫(邪)巧(术)给解决了。可是，做为一个追求理想(下班)抱负(睡觉)的大好青年(不想背锅)。总以为fastclick给惹了太多麻烦。因而乎，个人目光盯上了hammerjs。

通过我苦心钻研(谷歌搜索)，我发现，若是你要想在React中使用这种移动端的手势库，麻烦的不是一点半点，你要本身处理一波，要否则React不认识你的自定义事件。。。。

可是，我记得Angular中我是能够直接使用的啊。例如这样的代码swipeleft和swiperight

<div>
    <h4>Swipe Avatars with HammerJS</h4>
    <!-- loop each avatar in our avatar list -->
    <div class="swipe-box" *ngFor="let avatar of avatars; let idx=index" (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)" [class.visible]="avatar.visible" [class.hidden]="!avatar.visible">
        <div>
            <img [src]="avatar.image" [alt]="avatar.name">
        </div>
        <div>
            <a class="header">{{avatar.name}}</a>
        </div>
    </div>
</div>
复制代码

我就在想Why，而后我点开了hammerjs的官网，仔细的看了眼首页。有这么一段代码

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
	console.log(ev);
});
复制代码

嗯？？？我就不想看了。。。

若是非要再加一个，那就是React DnD吧。

这里你们想了解的能够查一下React DnD实现拖拽效果和Angular使用Angular CDK实现拖拽还有Vue的vue-smooth-dnd实现拖拽的方式都有啥天差地别吧。

例如Angular中想要实现拖拽效果也就只须要加上一个指令，彻底不须要更改其它的代码

<!--加上cdkDrag指令就可使这个元素能够拖拽-->
<div class="example-box" cdkDrag>
  Drag me around
</div>
复制代码

更过例子

以上种种都是在讲一个问题: jsx类型的组件，在拓展新的功能的时候，那种无力和繁琐。

结语

记得当初刚开始学习前端的时候，html，css，js 这三个是分离的。你们说这样多好多好，而后忽然有一天 jsx 成了突破创新。你们都说好，我也跟着喊好。

记得周末和朋友聊天，他说他以前和一个朋友聊天谈到了 Flutter，感受原生的开发方式都要被完全抛弃了似的。说 Flutter 多么优秀优秀。但最后问到他是否使用过，获得的回答倒是否认的，也就仅是看看 demo。朋友接着说相似 Flutter 的跨端模式还有微软的 blazor，这个要比 fultter 出现的早不少。。。

什么样的东西才是好的？好用的？仍是你们都在用的？