《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項目的欄目，包括技術、學習、實用與各種有趣的內(nèi)容。本期推薦的是前端頁面區(qū)塊管理框架——Magix。

隨著前端領域的不斷發(fā)展，現(xiàn)代的網(wǎng)站變得越來越龐大，頁面變得越來越復雜。在這個情況下，Magix以將站點分離為一個個頁面，將頁面分離成一個個區(qū)塊的思想，用區(qū)塊連接的方式使用一個個相互獨立的區(qū)塊來構(gòu)建頁面，讓無論多復雜的頁面都能像拼拼圖一樣，實現(xiàn)化繁為簡。

功能特性

簡單易用：采用最原汁原味的語法，只要掌握html、css、JAVAscript即可開箱即用
高效率：區(qū)塊之間相互獨立，意味著在任何地方都可復用定義好的區(qū)塊，讓工作事半功倍
面向未來：針對復雜龐大的項目時，Magix天然的微前端架構(gòu)，經(jīng)過簡單配置，讓獨立的項目也如區(qū)塊一般順滑接入

magix適合什么項目

Magix適合做單頁應用(SPA)的項目，最初的設計目標也是做單頁應用的
Magix也可以做傳統(tǒng)的展示型頁面，當頁面越復雜時，用Magix越值得
也可以只把頁面上某一塊應用Magix，不要求是整個頁面
Magix不支持多個實例，即同一個頁面只能有一個Magix存在。即使如此，Magix仍然可以與別的框架混用。甚至頁面上某幾塊想用Magix的功能也是可以的，Magix具有高自由度和可拓展性

安裝

magix的使用目前依賴腳手架工具thx-cli，因此magix項目的開發(fā)、環(huán)境運行、打包編譯等功能都需要在thx-cli的基礎之上。

首先我們需要在全局先安裝thx-cli

// npm
npm install -g thx-cli

// yarn
yarn global add thx-cli

thx-cli在安裝完成后會注冊thx作為全局命令，我們可以直接使用thx <command>[options]來進行使用

因此我們可以使用thx -v命令來驗證是否安裝成功，如果顯示了版本號則表示安裝成功

應用初始化

在安裝完成thx-cli之后，我們就可以開始應用的初始化了。

我們可以使用thx init這個命令來進行應用的初始化。如果我們是第一次進行應用的初始化，thx-cli會提示安裝magix相關的套件（thx-kit-magix），如下：

在安裝好套件之后，選擇我們初始化的模板

最后輸入應用名稱

應用的運行與打包構(gòu)建

本地運行開發(fā)

thx-cli提供了dev命令用于應用的本地運行開發(fā)，在成功啟動應用后會自動打開瀏覽器

打包構(gòu)建

thx-cli同樣也提供了build命令用來對應用進行打包構(gòu)建，構(gòu)建后的文件輸出在build目錄下

View基礎

View的組成

和原生的前端開發(fā)一樣，view通常也是由三個文件構(gòu)成的：

html文件：模版文件，結(jié)合數(shù)據(jù)渲染出頁面
css文件：樣式文件，當前頁面相關的樣式
JavaScript文件：必不可少的文件，承擔所有邏輯的執(zhí)行

在編譯器的支持下，其中css文件可由less文件替代，同時也支持了typescript。并且針對不同的區(qū)塊功能差異，html文件與css文件也并非是必須的，例如：在當前的view只是提供功能上的拓展時，與模版、樣式上的需要時，便允許只有一個js文件

那么這三個文件是通過什么來進行連接的呢？答案是：@:占位符

接下來請看具體示例：

當一個view相關文件的結(jié)構(gòu)為：

- index.ts
- index.html
- index.less

在index.ts文件中的代碼如下：

import Magix from 'magix'

// 關聯(lián)樣式文件
magix.ApplyStyle('@:./index.less')

export default Magix.View.extend({
  tmpl:'@:./index.html' // 關聯(lián)html文件
  assign(extra) {
  	this.set(extra)
	},
  async render() {
    await this.digest()
  }
})

可見，@:占位符的重要性，但它并非只有連接文件的功能，還有比如：引入css變量等功能。

View中數(shù)據(jù)渲染

我們在前面提到，html文件中會結(jié)合js文件中的數(shù)據(jù)來渲染頁面，這又是怎么實現(xiàn)的呢？首先我們需要了解的是每個view都有一個數(shù)據(jù)對象。相信你在前面的代碼中已經(jīng)看到了這兩個函數(shù)：this.set()、this.digest()。這兩個函數(shù)便是對數(shù)據(jù)對象進行操作。

其中set函數(shù)的作用是設置view中的數(shù)據(jù)，當調(diào)用該函數(shù)時傳入一個對象，該對象就會被混入到當前view的數(shù)據(jù)對象中。

而digest函數(shù)的功能為渲染視圖，將模版轉(zhuǎn)化為真正的dom。它也同時支持接收一個對象作為參數(shù)，表示設置數(shù)據(jù)并同時渲染視圖。

this.set({username:123}).digest()
// 等同于
this.digest({username:123})

當html文件中的模版獲取到動態(tài)的數(shù)據(jù)后，接下來只需要使用簡單的模版語法就能將其渲染出來：<div>{{= username}}</div>。最終該節(jié)點的渲染結(jié)果為<div>123</div>

View之間的連接

我們已經(jīng)了解了一個view的組成與渲染了。那不同的view之間又是怎么建立起聯(lián)系的呢？magix是怎么做到區(qū)塊之間的靈活使用的呢？

現(xiàn)在我們舉個例子：有兩個view，分別為a和b，我們想要在a中展示b，也就是我們想要在a中引入b，該怎么做呢？

假設目錄結(jié)構(gòu)如下：

- a.ts
- a.html
- a.less
- b.ts
- b.html
- b.less

在這里我們就要介紹一個屬性了mx-view，magix就是通過該屬性來將不同的區(qū)塊進行連接。具體比如在a中引入b，只需在a.html中這樣寫即可：<div mx-view="@:./b"></div>

或者你也可以使用magix自帶的標簽來實現(xiàn)：<mx-vframe src="@./b" />，經(jīng)過編譯器的編譯后，也會被編譯的與前者相同。同樣的，組件庫中的組件，在經(jīng)過編譯后，也會變?yōu)?lt;div mx-view=" "></div>這種形式的節(jié)點。