Svelte 碼半功倍
2021-02-28 06:30:04 企業開發
你未注意到的最重要的指標，
注意：原文發表于2019-04-20，隨著框架不斷演進，部分內容可能已不適用，
所有代碼都有 BUG，你寫的越多，BUG 越多，這很合情合理，
同時，寫的越多，費時越多，留給其他事情的就更少，比如代碼優化、功能完善或者去戶外瀟灑而不是蜷縮在筆記本面前，
其實眾所周知，專案研發時間和 BUG 的數量，會隨著代碼庫的膨脹呈二次增長，而非線性增長，
這也與我們的直覺相吻合：一個只有 10 行代碼的 Pull Request 和 100 行的對比，其適用的審查級別就有所不同，
一旦某個模塊肥胖到單屏無法顯示完整的話，那么理解這個模塊所需的認知和背負的壓力便會劇增，然后我們只能通過重構和添加注釋（幾乎總是導致寫更多的代碼）來補償，
這是一個惡性回圈，
我們沉溺在性能指標、打包大小以及其他任何可以衡量的指標，
唯獨很少關注代碼量，
可讀性至關重要
我的本意當然并非是將代碼壓縮為近乎緊湊形式的這類不惜以犧牲可讀性為代價的技巧，也不是說千方百計減少代碼行數就是可取的目標，
因為這樣相當于鼓勵原本還算可讀的代碼 ……
for (let i = 0; i <= 100; i += 1) {
if (i % 2 === 0) {
console.log(`${i} is even`);
}
}
硬生生寫成難以理解的代碼：
for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`);
恰恰相反，我主張的是，我們應該傾向于那些能夠讓我們自然而然就可以寫出更少代碼的語言和模式，
沒錯，我要吹爆 Svelte
Svelte 致力減少你必須撰寫的代碼量，
為了講清楚這一點，我們對比一下分別用 React、Vue 和 Svelte 三者來實作的一個非常簡單的組件，
先來看看 Svelte 的版本：
<script>
let a = 1;
let b = 2;
</script>
<input type="number" bind:value=https://www.cnblogs.com/qianduanziyu/p/{a}>
{a} + {b} = {a + b}
然后看看 React 版本是什么樣的，它可能是這樣寫的：
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) {
setA(+event.target.value);
}
function handleChangeB(event) {
setB(+event.target.value);
}
return (
<div>
<input type="number" value=https://www.cnblogs.com/qianduanziyu/p/{a} onChange={handleChangeA}/>
{a} + {b} = {a + b}
);
};
最后是使用 Vue 實作的同等功能的版本：
<template>
<div>
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<p>{{a}} + {{b}} = {{a + b}}</p>
</div>
</template>
<script>
export default {
data: function() {
return {
a: 1,
b: 2
};
}
};
</script>
換而言之，同等功能的組件，用 React 來實作，你需要痛擊 442 個字符，Vue 是狠打 263 個字符，而 Svelte 只消輕敲 145 個字符，（我是復制原始碼到粘貼板，然后在終端運行 pbpaste | wc -c 得到的計數結果），
React 版本足足胖了三倍！
差異是如此明顯，反而揭示了它的不同尋常，依據我的經驗來看，React 組件普遍比同等功能的 Svelte 組件大 40% 左右，
接下來我們看看 Svelte 的設計特點，它可以幫助開發者更清晰地表達想法：
頂級元素
在 Svelte 中，一個組件的頂級元素可以有任意多個，隨心所欲，
而 React 或 Vue，組件必須只能有一個頂級元素，如果嘗試在 React 中的組件函式想任性地一次回傳兩個頂級元素，就會導致語法無效，（你可以使用 <> 代替 <div>，其實道理還是一樣的嘛，還會導致額外多一層縮進呢）
在 Vue 中，標記必須放在 <template> 元素中，是不是有點多此一舉了，
系結
在 React 中，要回應輸入事件你需要親力親為：
function handleChangeA(event) {
setA(+event.target.value);
}
這么干除了霸占了更多的顯示幕螢屏空間外，還為 BUG 提供充分的滋養環境，
按理論來講，輸入的值需要自動系結到 a，反之亦然，不過可惜，這種關系你是不容易清晰地表達出來的，
我們反而有兩個緊密耦合在一起 —— 但物理上卻是若即若離的代碼塊（事件處理程式和 value=https://www.cnblogs.com/qianduanziyu/p/{a} 屬性），
漏屋偏逢連夜雨，你還必須記得使用前置的 + 號來強制轉換字串為數字，否則 2+2 就得到 22 而 不是 4 了，
與 Svelte 一樣，Vue 確實提供了一種系結運算式：v-model 屬性，我們仍然需要在使用 v-model.number 時小心謹慎，就算它專門用于數字輸入，
狀態
在 Svelte 中，可以直接使用賦值運算子來更新組件的狀態：
let count = 0;
function increment() {
count += 1;
}
而在 React 中，我們使用 useState 這個 Hook：
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
這看著是多么的拖沓冗長、絮絮叨叨 —— 其實它倆要表達的意思是一模一樣的，字符數卻相差了近 60%，
閱讀原始碼的時候，就需要消耗你更多的腦細胞來理解作者的意圖，
而 Vue 則使用 default export 的方式匯出一個 data 函式，該函式回傳一個物件字面量，其屬性與我們區域變數是相對應的，
像 helper 函式和子組件這類東西，你不能簡簡單單地匯入并在模板中使用，而是必須通過將它們放置到 export default 合適的位置來“注冊”一下，
樣板代碼之殤
以上只是管中窺豹，不過是 Svelte 幫助你在構建用戶界面時減少麻煩的冰山一角，
咱還有很多殺手锏的 —— 你比方說回應式的宣告，實質上 Svelte 無須顯山露水，就已完美替代了 React 的 useMemo、useCallback 和 useEffect 這些樣板代碼（或者那些在每次狀態變化時創建的行內函式和陣列的垃圾被回收的開銷），
這是咋弄的？
其實不過是一些與眾不同的約束的抉擇罷了，
因為 Svelte 實際上是一個編譯器，因此不必拘泥于 JavaScript 的特性：我們可以為如何方便撰寫一個組件量身定制一個創作體驗的程序，而無需百般逢迎 JavaScript 的語意，
這更符合編碼的習慣，例如自然而然會使用變數而不是那些代理或者 Hooks，同時還能生成更高性能的程式，
魚與熊掌，孰能兼得？
< The End >
- 窗明幾凈，靜候時日變遷 -
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/264424.html
標籤：JavaScript
上一篇：純生js實作Element中input組件的部分功能（慢慢完善）并封裝成組件
下一篇：es6 快速入門 系列 —— 迭代器 (Iterator) 和 生成器 (Generator)
