《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是前端頁(yè)面區(qū)塊管理框架——Magix。
隨著前端領(lǐng)域的不斷發(fā)展，現(xiàn)代的網(wǎng)站變得越來越龐大，頁(yè)面變得越來越復(fù)雜。在這個(gè)情況下，Magix以將站點(diǎn)分離為一個(gè)個(gè)頁(yè)面，將頁(yè)面分離成一個(gè)個(gè)區(qū)塊的思想，用區(qū)塊連接的方式使用一個(gè)個(gè)相互獨(dú)立的區(qū)塊來構(gòu)建頁(yè)面，讓無(wú)論多復(fù)雜的頁(yè)面都能像拼拼圖一樣，實(shí)現(xiàn)化繁為簡(jiǎn)。
功能特性
- 簡(jiǎn)單易用：采用最原汁原味的語(yǔ)法，只要掌握html、css、JAVAscript即可開箱即用
- 高效率：區(qū)塊之間相互獨(dú)立，意味著在任何地方都可復(fù)用定義好的區(qū)塊，讓工作事半功倍
- 面向未來：針對(duì)復(fù)雜龐大的項(xiàng)目時(shí)，Magix天然的微前端架構(gòu)，經(jīng)過簡(jiǎn)單配置，讓獨(dú)立的項(xiàng)目也如區(qū)塊一般順滑接入
magix適合什么項(xiàng)目
- Magix適合做單頁(yè)應(yīng)用(SPA)的項(xiàng)目，最初的設(shè)計(jì)目標(biāo)也是做單頁(yè)應(yīng)用的
- Magix也可以做傳統(tǒng)的展示型頁(yè)面，當(dāng)頁(yè)面越復(fù)雜時(shí)，用Magix越值得
- 也可以只把頁(yè)面上某一塊應(yīng)用Magix，不要求是整個(gè)頁(yè)面
- Magix不支持多個(gè)實(shí)例，即同一個(gè)頁(yè)面只能有一個(gè)Magix存在。即使如此，Magix仍然可以與別的框架混用。甚至頁(yè)面上某幾塊想用Magix的功能也是可以的，Magix具有高自由度和可拓展性
安裝
magix的使用目前依賴腳手架工具thx-cli，因此magix項(xiàng)目的開發(fā)、環(huán)境運(yùn)行、打包編譯等功能都需要在thx-cli的基礎(chǔ)之上。
首先我們需要在全局先安裝thx-cli
// npm
npm install -g thx-cli
// yarn
yarn global add thx-cli
thx-cli在安裝完成后會(huì)注冊(cè)thx作為全局命令，我們可以直接使用thx <command>[options]來進(jìn)行使用
因此我們可以使用thx -v命令來驗(yàn)證是否安裝成功，如果顯示了版本號(hào)則表示安裝成功
應(yīng)用初始化
在安裝完成thx-cli之后，我們就可以開始應(yīng)用的初始化了。
我們可以使用thx init這個(gè)命令來進(jìn)行應(yīng)用的初始化。如果我們是第一次進(jìn)行應(yīng)用的初始化，thx-cli會(huì)提示安裝magix相關(guān)的套件（thx-kit-magix），如下：
在安裝好套件之后，選擇我們初始化的模板
最后輸入應(yīng)用名稱
應(yīng)用的運(yùn)行與打包構(gòu)建
本地運(yùn)行開發(fā)
thx-cli提供了dev命令用于應(yīng)用的本地運(yùn)行開發(fā)，在成功啟動(dòng)應(yīng)用后會(huì)自動(dòng)打開瀏覽器
打包構(gòu)建
thx-cli同樣也提供了build命令用來對(duì)應(yīng)用進(jìn)行打包構(gòu)建，構(gòu)建后的文件輸出在build目錄下
View基礎(chǔ)
View的組成
和原生的前端開發(fā)一樣，view通常也是由三個(gè)文件構(gòu)成的：
- html文件：模版文件，結(jié)合數(shù)據(jù)渲染出頁(yè)面
- css文件：樣式文件，當(dāng)前頁(yè)面相關(guān)的樣式
- JavaScript文件：必不可少的文件，承擔(dān)所有邏輯的執(zhí)行
在編譯器的支持下，其中css文件可由less文件替代，同時(shí)也支持了typescript。并且針對(duì)不同的區(qū)塊功能差異，html文件與css文件也并非是必須的，例如：在當(dāng)前的view只是提供功能上的拓展時(shí)，與模版、樣式上的需要時(shí)，便允許只有一個(gè)js文件
那么這三個(gè)文件是通過什么來進(jìn)行連接的呢？答案是：@:占位符
接下來請(qǐng)看具體示例：
當(dāng)一個(gè)view相關(guān)文件的結(jié)構(gòu)為：
- index.ts
- index.html
- index.less
在index.ts文件中的代碼如下：
import Magix from 'magix'
// 關(guān)聯(lián)樣式文件
magix.ApplyStyle('@:./index.less')
export default Magix.View.extend({
tmpl:'@:./index.html' // 關(guān)聯(lián)html文件
assign(extra) {
this.set(extra)
},
async render() {
await this.digest()
}
})
可見，@:占位符的重要性，但它并非只有連接文件的功能，還有比如：引入css變量等功能。
View中數(shù)據(jù)渲染
我們?cè)谇懊嫣岬剑琱tml文件中會(huì)結(jié)合js文件中的數(shù)據(jù)來渲染頁(yè)面，這又是怎么實(shí)現(xiàn)的呢？首先我們需要了解的是每個(gè)view都有一個(gè)數(shù)據(jù)對(duì)象。相信你在前面的代碼中已經(jīng)看到了這兩個(gè)函數(shù)：this.set()、this.digest()。這兩個(gè)函數(shù)便是對(duì)數(shù)據(jù)對(duì)象進(jìn)行操作。
其中set函數(shù)的作用是設(shè)置view中的數(shù)據(jù)，當(dāng)調(diào)用該函數(shù)時(shí)傳入一個(gè)對(duì)象，該對(duì)象就會(huì)被混入到當(dāng)前view的數(shù)據(jù)對(duì)象中。
而digest函數(shù)的功能為渲染視圖，將模版轉(zhuǎn)化為真正的dom。它也同時(shí)支持接收一個(gè)對(duì)象作為參數(shù)，表示設(shè)置數(shù)據(jù)并同時(shí)渲染視圖。
this.set({username:123}).digest()
// 等同于
this.digest({username:123})
當(dāng)html文件中的模版獲取到動(dòng)態(tài)的數(shù)據(jù)后，接下來只需要使用簡(jiǎn)單的模版語(yǔ)法就能將其渲染出來：<div>{{= username}}</div>。最終該節(jié)點(diǎn)的渲染結(jié)果為<div>123</div>
View之間的連接
我們已經(jīng)了解了一個(gè)view的組成與渲染了。那不同的view之間又是怎么建立起聯(lián)系的呢？magix是怎么做到區(qū)塊之間的靈活使用的呢？
現(xiàn)在我們舉個(gè)例子：有兩個(gè)view，分別為a和b，我們想要在a中展示b，也就是我們想要在a中引入b，該怎么做呢？
假設(shè)目錄結(jié)構(gòu)如下：
- a.ts
- a.html
- a.less
- b.ts
- b.html
- b.less
在這里我們就要介紹一個(gè)屬性了mx-view，magix就是通過該屬性來將不同的區(qū)塊進(jìn)行連接。具體比如在a中引入b，只需在a.html中這樣寫即可：<div mx-view="@:./b"></div>
或者你也可以使用magix自帶的標(biāo)簽來實(shí)現(xiàn)：<mx-vframe src="@./b" />，經(jīng)過編譯器的編譯后，也會(huì)被編譯的與前者相同。同樣的，組件庫(kù)中的組件，在經(jīng)過編譯后，也會(huì)變?yōu)?lt;div mx-view=" "></div>這種形式的節(jié)點(diǎn)。
示例
父子組件通信
動(dòng)態(tài)掛載view
—END—
開源協(xié)議：MIT
開源地址：
https://github.com/thx/magix
