JSX 和 template 隨想

標籤：不能   機器   特殊   vue   lin   編譯   識別   避免   維護   

就目前而言，我用到的前端頁面開發架構主要有兩種：以JSX為主的react和以template為主的vue。

雖然這兩種方式各有千秋，但我其實更偏愛template多一些。為什嗎？

相較於靈活的JSX，template顯得有些獃滯，但我認為它更符合我們的書寫習慣（想想我們最開始是如何編寫html的），簡單、直觀、更好維護是我偏愛模板的三大理由。

直到某天一個bug的出現，讓我對template有了新的思考。

// 出現 bug 的程式碼片段<template v-if="oitem.show">  <div class="a-text-light" v-for="(oitem, j) in item.content" :key="j">    {{ooitem.date}} {{oitem.week}}  </div></template >

注意上面的代碼，由於~手誤~手殘，在第一個oitem前多寫了一個o。eslint沒有發現，編譯過程也沒報錯，由於對應業務的特殊性，測試中也沒有觸發錯誤。

於是上線，boom！

多一個字母，讓整個應用崩潰掉了。該死！

這種錯誤不應該犯，但卻又不能完全避免，怎麼辦？人總會犯錯，但機器不會。所以，應該把錯誤檢查交給機器執行。

有沒有一種方法使得再編碼或者編譯過程中就能識別這個錯誤呢？

JSX將拯救你我於水火。

用JSX重構上面的代碼：

let dateDiv = item.show   ? item.content.map(oitem => (<div className="a-text-light">{ooitem.date} {oitem.week}</div>) )  : ‘‘;

由於JSX是型別安全的，在編譯過程中就能發現錯誤，所以上面的ooitem就會被識別粗來。

從此不必在擔驚受怕。

JSX 和 template 隨想