小米平板5 Pro 12.4簡評：多專多能 兼顧影音娛樂的大屏利器
疫情帶來了網(wǎng)課，網(wǎng)課盤活了安卓平板，安卓平板市場雖然中途停滯了幾年，但好的一點(diǎn)就是停滯的這幾年行業(yè)又有了新的發(fā)展方向，例如超窄邊框、高刷新率、多攝鏡頭組合等，這就讓安卓
2021 年 11 月 左右，Strve 第一個(gè)版本發(fā)布，社區(qū)的反饋大部分是支持，也有少部分小伙伴提出了質(zhì)疑，這都正常。你只要在社區(qū)發(fā)布一些作品，就必須接受其他人對你的作品的評價(jià)。
當(dāng)初，開發(fā) Strve 的初衷只是受到 JSX 語法的影響，覺得在 JavaScript 中編寫 HTML 很酷，所以想能不能自己也開發(fā)一個(gè)前端框架。我最初給自己的目標(biāo)就是能在 JavaScript 中寫 HTML，然后通過編寫 JavaScript 來改變頁面狀態(tài)。經(jīng)過兩個(gè)多周的調(diào)研，發(fā)現(xiàn)自己在原地打轉(zhuǎn)。JSX 語法不能直接在瀏覽器運(yùn)行，你必須通過類似 Babel 這種編譯工具編譯才能運(yùn)行。所以，我就打算在模版字段串內(nèi)編寫 HTML。但是，又遇到了另一個(gè)問題，如何精確更新 DOM。當(dāng)時(shí)，第一個(gè)想法就是利用虛擬 DOM，所以就抽時(shí)間來學(xué)習(xí)前端框架中都是怎么利用虛擬 DOM 來精確更新。不懂得就去網(wǎng)上查資料，然后就記下來。可能有些小伙伴就會問，是什么力量讓你去做可能完成了也沒什么意義的事情。怎么說呢！當(dāng)時(shí)，我就是想要做出點(diǎn)東西來，覺得自己能做出來。至于做出來有什么意義，我沒有多想。有時(shí)候我們做一件事情之前，考慮很多未必是好事，這往往會阻礙了我們做事情的腳步。
就這樣，靠著自己的熱情，第一個(gè)版本就這么問世了。
有很多小伙伴感覺 Strve 寫法很像lit-html。說實(shí)話，開發(fā) Strve 之前，我并不知道這個(gè)框架。后來看社區(qū)反饋，才到網(wǎng)上查看了有關(guān)的資料。雖然寫法像，但并不是它的復(fù)制品。就比如 Strve 內(nèi)部使用的是虛擬 DOM，這時(shí)的虛擬 DOM 還只是一個(gè)初版，只能說是簡單的比對。
之前有看過我的文章的小伙伴，多多少少會知道 Strve。但是可能也只是停留在知道這個(gè)層面上，現(xiàn)在我通過幾點(diǎn)來重新介紹下 Strve。
Strve 是一個(gè)易用、快速、靈活且輕量級的 JavaScript 庫，用于構(gòu)建用戶界面。基于 tagged template 的 HTML 模板引擎，利用 ES6 的模板字符串來進(jìn)行模板的書寫，利用瀏覽器的原生的能力進(jìn)行模板渲染。
想要了解更多關(guān)于 Strve 的特性，可以到官方中文文檔中去探索。
https://strvejs.gitee.io/strve-doc-zh。
2023 年我陸續(xù)發(fā)布了幾個(gè)大的版本，大部分時(shí)間都是在優(yōu)化底層代碼。包括虛擬 DOM 的算法優(yōu)化、減輕使用 API 時(shí) 心智負(fù)擔(dān)等等優(yōu)化措施。
下面我們來展開看下。
如果你不打算使用構(gòu)建打包工具開發(fā)項(xiàng)目，而是直接開發(fā)。推薦使用全局構(gòu)建版本，通過 CDN 使用 Strve 時(shí)，不涉及“構(gòu)建步驟”，這使得設(shè)置更加簡單。
<script src="https://cdn.jsdelivr.net/npm/strve-js@6.6.6/dist/strve.full.prod.js"></script><script> const { html, defineComponent } = Strve; defineComponent( { mount: '#app', }, ({ setData }) => { let count = 0; function add() { setData(() => { count++; }); } return () => html`<h1 onClick=${add}>${count}</h1>`; } );</script>模板字符串來進(jìn)行模板的書寫，在一些場景中代碼智能提示、代碼格式化方面不是特別友好。所以，我們提供了一種新的編碼方式，我們可以使用 JSX 語法編寫 Strve 應(yīng)用，這樣就大大提升了用戶開發(fā)體驗(yàn)。
defineComponent(() => { const state = { msg: 'Hello', }; return () => h1>{state.msg}</h1>;});另外，我們底層采用了虛擬 DOM 的模式，虛擬 DOM 使用 diff 算法的方法來計(jì)算出真正需要更新的節(jié)點(diǎn)，最大限度地減少了 DOM 操作以及 DOM 操作帶來的排版與重繪損耗，從而顯著提高了性能。
Strve 應(yīng)用程序是由 組件 組成的。一個(gè)組件是 UI（用戶界面）的一部分，它擁有自己的邏輯和外觀。組件可以小到一個(gè)按鈕，也可以大到整個(gè)頁面。
在 Strve 中，組件就是一個(gè)函數(shù)。
const MyComponent = defineComponent(({ setData }) => { let count = 0; function add() { setData(() => { count++; }); } return () => ( <div class='MyComponent'> <p>{count}</p> <button onClick={add}>MyComponent</button> </div> );});// 復(fù)用組件defineComponent( { mount: '#app', }, ({ setData }) => { let count = 0; const add = () => { setData(() => { count++; }); }; return () => ( <div class='App'> <p>{count}</p> <button onClick={add}>App</button> <component $is={MyComponent} /> </div> ); });Strve 內(nèi)部的渲染系統(tǒng)是基于虛擬 DOM 構(gòu)建的，虛擬 DOM (Virtual DOM，簡稱 VDOM) 是一種編程概念，意為將目標(biāo)所需的 UI 通過數(shù)據(jù)結(jié)構(gòu)“虛擬”地表示出來，保存在內(nèi)存中，然后利用 Diff 算法來比對新老數(shù)據(jù)，將真實(shí)的 DOM 與之保持同步。
如何虛擬 DOM 樹過于龐大，使得 Diff 計(jì)算時(shí)間大于 16.6ms，那么就可能造成性能的卡頓。組件有一個(gè)特性就是 ”孤島“。何為“孤島”，孤島就是在 Strve 應(yīng)用中我們可以理解成一個(gè)獨(dú)立的模塊。將一個(gè)龐大的虛擬 DOM 樹分解成很多獨(dú)立的模塊，這樣 Diff 計(jì)算時(shí)間就會控制在組件級別，大大縮減了計(jì)算的時(shí)間，提高了性能。
從 API 層面，我們盡可能的貼合易用的特性，將核心 API 縮減為 2 個(gè)。分別為defineComponent和setData。框架是需要容易使用的，太多繁瑣的設(shè)置或者操作很容易增重心智負(fù)擔(dān)。
開發(fā)框架單單只有一個(gè)核心庫肯定是不夠的，你還需要其他生態(tài)工具來加以輔助。
你要有一套用于快速構(gòu)建項(xiàng)目的命令行工具，也就是說用戶可以通過輸入命令快速搭建項(xiàng)目。CreateStrveApp 是一套用于快速構(gòu)建 Strve 項(xiàng)目的命令行工具。CreateStrveApp 是使用 Vite 構(gòu)建的，這是一個(gè)新的前端構(gòu)建工具，可以顯著提升前端開發(fā)體驗(yàn)。它有幾個(gè)模版可供選擇：strve、strve-apps、strve-jsx、strve-jsx-apps。
我們開發(fā)項(xiàng)目需要跳轉(zhuǎn)多個(gè)頁面，那么就需要路由管理器。StrveRouter 是 Strve 的官方路由管理器。它與 Strve 的核心深度集成，輕松構(gòu)建單頁應(yīng)用程序。
另外，我們介紹兩款編譯時(shí)工具。BabelPluginStrve是一款 babel 插件，將 HTML 模板字符串轉(zhuǎn)化為 Virtual Dom。從之前的運(yùn)行時(shí)轉(zhuǎn)移到編譯時(shí)，大幅度提高渲染性能。如果你想使用 JSX 語法，BabelPluginJsxToStrve這款插件是必不可少的，它是一款 babel 插件，將 JSX 轉(zhuǎn)換為與 Strve 一起使用的標(biāo)記模板。CreateStrveApp 項(xiàng)目腳手架工具已默認(rèn)安裝，選擇 strve-jsx 或者 strve-jsx-apps 模版即可。我們使用 CreateStrveApp 搭建完 Strve 項(xiàng)目你會發(fā)現(xiàn)，同時(shí)安裝了 BabelPluginStrve、BabelPluginJsxToStrve，這是因?yàn)槲覀冃枰褂?BabelPluginJsxToStrve 將 JSX 轉(zhuǎn)換為標(biāo)簽?zāi)０妫笤偈褂?BabelPluginStrve 將標(biāo)簽?zāi)０孓D(zhuǎn)換為 Virtual DOM。
我們最后壓軸的一款生態(tài)工具可以說是近期更新力度最大的了。它被稱為獨(dú)立運(yùn)行的可響應(yīng)性 Strve，由 @vue/reactivity和 strve-js 提供支持的自定義元素 JavaScript 庫。
主要特性有以下幾個(gè)：
Strve 結(jié)合 Vue 組合式 API 形成了一款新的 JavaScript 庫。只要你熟悉組合式 API，就可快速上手。
// MyComponent.jsximport { ref, defineComponent, reactive } from 'strve-reactivity';const MyComponent = defineComponent(() => { const items = reactive([ { id: 1, tit: 'A', }, { id: 2, tit: 'B', }, ]); const count = ref(4); const increase = () => { items.unshift({ id: count.value++, tit: 'C', }); }; return () => ( <fragment> <button onclick={increase}>increase</button> <ul> {items.map((item) => ( <li key={item.id}> <span>{item.id}</span> <span>-</span> <span>{item.tit}</span> </li> ))} </ul> </fragment> );});我們只是口頭說 Strve 性能是非常不錯(cuò)的，沒有真憑實(shí)據(jù)那是說不過去的。跑分方面，Strve 在 js-framework-benchmark 中的表現(xiàn)比 React 要好得多。
https://krausest.github.io/js-framework-benchmark/current.html。
前端框架最近幾年來層出不窮，出現(xiàn)這種情況好嗎？我覺得是個(gè)好現(xiàn)象。大家都在為前端社區(qū)貢獻(xiàn)自己的力量，使得前端的生態(tài)生機(jī)勃勃。
大家可能非常討厭跟知名框架比較，可能有些人會說蹭熱度。其實(shí)不妨換個(gè)角度想想，為什么會比較，是因?yàn)橐谩Ｔ趺礃硬拍芨茫侵荒懿粩嗟貎?yōu)化。那么在這優(yōu)化的過程中你不光是做出一個(gè) JavaScript 庫或者前端框架，更多的是你可以從中獲得你在平時(shí)工作中得不到的東西。比如，對設(shè)計(jì)一款框架需要考慮哪些方面。作者在設(shè)計(jì) API 時(shí)為什么會這么設(shè)計(jì)等等一些非工作業(yè)務(wù)上的事情。
我開發(fā)這款 JavaScript 庫，我是另辟蹊徑嗎？我感覺并不是，我只是學(xué)習(xí)其他優(yōu)秀框架中可以借鑒的思想，并按照自己想要的方式去展現(xiàn)它。只有站在巨人的肩膀上才能望得更遠(yuǎn)！
本文鏈接：http://m.www897cc.com/showinfo-26-65871-0.html跑分方面，這款 JavaScript 庫在全球框架榜單中的表現(xiàn)比 React 要好得多
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號