是天使仍是魔鬼？從新思考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 出現的早不少。。。

什麼樣的東西纔是好的？好用的？仍是你們都在用的？