Kbone 簡(jiǎn)介

　　1、導(dǎo)語(yǔ)

　　小程序作為一種新興地鏈接用戶與服務(wù)的方式，相信大家都或多或少接觸過(guò)。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，它是一種類似 Web 但又不同于 Web 的開(kāi)發(fā)模式，它提供了一套自定義的 API 和文件組織方式，這無(wú)疑帶給開(kāi)發(fā)者一定的學(xué)習(xí)成本和維護(hù)成本，所以我們也在嘗試能否提供一個(gè)方案來(lái)抹平這個(gè)差異。——引自Kbone作者june在云加社區(qū)微信群中的分享

　　隨著小程序的發(fā)展，Web 端和小程序同構(gòu)的呼聲也越來(lái)越大，為此微信官方提供了 Kbone 這一套方案。旨在讓開(kāi)發(fā)者可以用最熟悉的方式來(lái)完成一個(gè)多端 APP 的開(kāi)發(fā)，降低開(kāi)發(fā)門(mén)檻。

　　Kbone——微信小程序同構(gòu)方案新思路。

　　微信小程序的底層模型和 Web 端不同，我們想直接把 Web 端的代碼挪到小程序環(huán)境內(nèi)執(zhí)行是不可能的。kbone 的誕生就是為了解決這個(gè)問(wèn)題，它實(shí)現(xiàn)了一個(gè)適配器，在適配層里模擬出了瀏覽器環(huán)境，讓 Web 端的代碼可以不做什么改動(dòng)便可運(yùn)行在小程序里。

　　2、Kbone的優(yōu)勢(shì)

　　因?yàn)?kbone 是通過(guò)提供適配器的方式來(lái)實(shí)現(xiàn)同構(gòu)，所以它的優(yōu)勢(shì)很明顯：

　　· 大部分流行的前端框架都能夠在 kbone 上運(yùn)行，比如 Vue、React、Preact 等。

　　· 支持更為完整的前端框架特性，因?yàn)?kbone 不會(huì)對(duì)框架底層進(jìn)行刪改(比如 Vue 中的 v-html 指令、Vue-router 插件)。

　　· 提供了常用的 dom/bom 接口，讓用戶代碼無(wú)需做太大改動(dòng)便可從 Web 端遷移到小程序端。

　　· 在小程序端運(yùn)行時(shí)，仍然可以使用小程序本身的特性(比如像 live-player 內(nèi)置組件、分包功能)。

　　· 提供了一些 Dom 擴(kuò)展接口，讓一些無(wú)法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)。

　　3、Kbone 誕生背景

　　首先我們先進(jìn)入背景部分的介紹。之所以會(huì)有 Kbone 這個(gè)方案出現(xiàn)，源自于一個(gè)需求：微信開(kāi)放社區(qū)當(dāng)時(shí)只有 Web 端，為了讓信息可以更方便地傳播、分享和使用，希望實(shí)現(xiàn)社區(qū)小程序版，交互體驗(yàn)盡量貼近于 Web 端。

　　此次同構(gòu)到小程序端需要考慮幾個(gè)因素：多端代碼復(fù)用、盡可能支持已有的特性和性能要有保證。其實(shí)最主要的就是要在盡量不改動(dòng)現(xiàn)有代碼的情況下來(lái)完成小程序的開(kāi)發(fā)。

　　4、選擇

　　業(yè)內(nèi)其實(shí)已經(jīng)出現(xiàn)了很多關(guān)于同構(gòu)的解決方案了，每個(gè)方案都有自己的優(yōu)劣，不存在能夠完美解決所有問(wèn)題的方案。kbone 也一樣，它的優(yōu)勢(shì)在上面提到過(guò)，而它的不足也是它的實(shí)現(xiàn)原理帶來(lái)的。kbone 是使用一定的性能損耗來(lái)?yè)Q取更為全面的 Web 端特性支持。

　　所以關(guān)于性能方面，如果你對(duì)小程序的性能特別苛刻，建議直接使用原生小程序開(kāi)發(fā);如果你的頁(yè)面節(jié)點(diǎn)數(shù)量特別多(通常在 1000 節(jié)點(diǎn)以上)，同時(shí)還要保證在節(jié)點(diǎn)數(shù)無(wú)限上漲時(shí)仍然有穩(wěn)定的渲染性能的話，可以嘗試一下業(yè)內(nèi)采用靜態(tài)模板轉(zhuǎn)譯的方案;其他情況就可以直接采用 kbone 了。