每個前端同學(xué)都可以擁有自己的框架，然后去完善它——[email protected]正式發(fā)布
不忘初心
從 Strve.js 正式發(fā)布到現(xiàn)在已經(jīng)將近半年了，收到很多建議，也收到很多贊揚(yáng)，謝謝大家！平時抽空的時候，我也在不斷地完善這個框架，希望可以更加的健壯。
我提到很多次，大家也經(jīng)常問我。為什么要開發(fā)這個框架？你的初衷是什么？其實(shí)，我的動機(jī)特別簡單，完全受 JSX 語法的影響。剛接觸 JSX 語法的時候，就被它那種魔法深深地吸引住了，可以在 JS 中寫 HTML。所以，我就想我自己可不可以也搞一個類似 JSX 語法的庫或者框架呢！一方面可以鍛煉自己的代碼能力，另一方面體驗(yàn)開發(fā)框架的整個流程，也方便我以后更全面的學(xué)習(xí)其他框架（Vue.js、React.js 等）。
我剛開始開發(fā) Strve.js 時，借鑒了一個迷你 JSX 的庫，但是做著做著就覺得做不下去了。感覺還是偏離了方向，我決定用簡單的方式去實(shí)現(xiàn)我所想要的效果。
在 JS 中可以寫 HTML，除了借助 Babel 來轉(zhuǎn)譯 JSX 語法外，還有一種就是利用 ES6 語法中 的模板字符串。利用模板字符串可以做到直接渲染到頁面中，如果是改變數(shù)據(jù)的話，也能實(shí)現(xiàn)。但是問題是，它并不那么靈活，并且需要操作大量 DOM 節(jié)點(diǎn)。
減少操作真實(shí) Dom 帶來的性能代價，目前合理的方案是利用虛擬 Dom，將 HTML 標(biāo)簽對象化，轉(zhuǎn)化成一個 JS 對象。最后利用 Diff 算法進(jìn)行新舊 Dom 對比，來更新差異。雖然這樣也會操作真實(shí) Dom，但是比起之前的量級少了太多。
虛擬 Dom 的量級也得控制一定范圍，不然計算量太大，頁面也會卡頓。Vue2 相比于 Vue1 引入了虛擬 Dom，組件內(nèi)利用虛擬 Dom 來進(jìn)行更新數(shù)據(jù)，把虛擬 Dom 的量級控制在組件級別；而 React.js 則引入 Fiber 架構(gòu)，借鑒了操作系統(tǒng)時間分片的概念，利用空閑時間計算 Diff。所以，針對于 Strve.js，如果引入虛擬 Dom 的話，虛擬 Dom 的量級必須在考慮范圍之內(nèi)。
[email protected]之前的版本都沒有解決虛擬 Dom 量級的問題，都是全量的對比。另外，如果想操作 Dom，必須要為其創(chuàng)建一個 Dom 對象，綁定到虛擬 Dom 上，這樣才能調(diào)用 Dom API，之前的版本都是為每一個 Dom 節(jié)點(diǎn)都創(chuàng)建一個 Dom 對象，一些靜態(tài)節(jié)點(diǎn)沒有必要，還有它也不會進(jìn)行 Diff 算法。
[email protected]是 3.x 正式版本中第一個版本，也是之前 2.x 版本之后的第一次重大升級。算是給自己在 2022 年第一個禮物吧！之前聽過尤大的一次分享，他說：“做開源從 90%到 100%這個過程中，是特別難的”。是的，這次我親身體會到了。Strve.js 我會繼續(xù)維護(hù)下去，但是我不會逼自己去一定要做成什么樣，保持一顆初心就夠了。
[email protected]升級了什么
這次大方面一方面是修改了 API，更簡短也容易記，減輕了心智負(fù)擔(dān)；另一方面是上面提到了 Diff 算法的優(yōu)化。
以下是更新日志：
修改 API:
舊 API 新 API StrvecreateApprenderhupdateViewsetDatawatchDOMChangewatchDomemitEventemitstrveVersionversiondeepCloneDataclone調(diào)整
createAppAPI；useFkey標(biāo)記改為useFirstKey；添加標(biāo)記
$key、$name；加入組件標(biāo)簽
調(diào)整
setDataAPI；優(yōu)化 Diff 算法；
TypeScript 重構(gòu)代碼；
官方文檔又更新了
此次對文檔內(nèi)容進(jìn)行了大的改動，主要是對使用項(xiàng)。
除了對文檔中內(nèi)容的改寫，還加入了實(shí)時代碼的功能，你可以在線編輯代碼，看到自己想看到的效果。
Strve Router 也更新了
Strve Router 這次更新也算是大版本升級，升級到 2.1.0，可以通過下面這個示例簡單了解下 Strve Router。
html>
<html?lang="en">
?<head>
??<meta?charset="UTF-8"?/>
??<title>strve-routertitle>
?head>
?<body>
??<div?id="app">div>
??<script?type="module">
???import?{
????h,
????createApp,
????setData,
???}?from?'https://cdn.jsdelivr.net/npm/[email protected]/dist/strve.esm.min.js';
???import?{
????initRouter,
????linkTo,
???}?from?'https://cdn.jsdelivr.net/npm/[email protected]/dist/strve-router.esm.js';
???class?Home?{
????constructor()?{
?????this.state?=?{
??????count:?0,
?????};
????}
????useAdd?=?()?=>?{
?????setData(()?=>?{
??????this.state.count++;
?????});
????};
????goAbout?=?()?=>?{
?????linkTo('/about');
????};
????render?=?()?=>?{
?????return?h`
?????????????${this.goAbout} >goAbout
?????????????${this.useAdd} ?$key>${this.state.count}
?????????????`;
????};
???}
???class?About?{
????constructor()?{
?????this.state?=?{
??????msg:?'About',
?????};
????}
????render?=?()?=>?{
?????return?h`
???????????????${this.goHome} >goHome
???????????????${this.useChange}?$key>${this.state.msg}
?????????????`;
????};
????useChange?=?()?=>?{
?????setData(()?=>?{
??????this.state.msg?=?'Changed';
?????});
????};
????goHome?=?()?=>?{
?????linkTo('/');
????};
???}
???const?router?=?initRouter(
????[
?????{
??????path:?'/',
??????template:?[Home,?'render'],
?????},
?????{
??????path:?'/about',
??????template:?[About,?'render'],
?????},
????],
????setData
???);
???function?App()?{
????return?h`
????????????
????????????????${router.view()}
???????????? ????????????`;
???}
???const?app?=?createApp(App);
???app.mount('#app');
??script>
?body>
html>
其他詳情更新
還有很多更新，詳情內(nèi)容可以訪問下面官方文檔地址：
https://maomincoding.gitee.io/strvejs-doc/zh/
如果你想幫我點(diǎn) Star
如果你手上有 ??，歡迎幫我點(diǎn)點(diǎn)哦~
https://github.com/maomincoding/strve
這是我的 Github 個人主頁
https://github.com/maomincoding