GaiaX跨端模板引擎，是在阿里優(yōu)酷、淘票票、大麥內(nèi)廣泛使用的Native動(dòng)態(tài)化方案，其核心優(yōu)勢(shì)是性能、穩(wěn)定和易用。本系列文章《GaiaX開源解讀》，帶大家看看過去三年GaiaX的發(fā)展過程。
引言
在“GaiaX開源解讀系列之第一篇：《GaiaX開源解讀 | 基于優(yōu)酷業(yè)務(wù)特色的跨平臺(tái)技術(shù)》”中，為各位讀者詳細(xì)介紹了GaiaX起源背景、業(yè)務(wù)中碰到的瓶頸問題、解決問題的思路以及GaiaX技術(shù)形態(tài)的發(fā)展過程，在本篇中將進(jìn)一步深入GaiaX的各個(gè)細(xì)節(jié)，深度解讀GaiaX團(tuán)隊(duì)同學(xué)是如何進(jìn)行方案落地的，看完本篇內(nèi)容相信你一定會(huì)有所收獲。
核心概念
GaiaX是由優(yōu)酷應(yīng)用技術(shù)中心團(tuán)隊(duì)研發(fā)的一款跨端高性能渲染引擎，其本質(zhì)是個(gè)視圖還原框架，其核心理念是將模板還原成雙端的視圖組件，我們先通過一個(gè)視圖還原渲染的流程圖，看看GaiaX的上下游是如何工作的：
組件設(shè)計(jì)稿：組件設(shè)計(jì)稿是由設(shè)計(jì)同學(xué)給出，用于展示視圖組件的效果圖，開發(fā)同學(xué)需要用這個(gè)文件進(jìn)行視圖組件的開發(fā)。
GaiaStudio：
開發(fā)同學(xué)通過使用GaiaStudio，以拖拽、編寫的方式來創(chuàng)建節(jié)點(diǎn)的層級(jí)、設(shè)置節(jié)點(diǎn)的樣式、為節(jié)點(diǎn)綁定數(shù)據(jù)，最終得到模板文件。
模板文件：
模板文件也被稱作GaiaX的DSL，其中包含三個(gè)子DSL，分別是index.json、index.css、index.databinding，用來描述節(jié)點(diǎn)的層級(jí)關(guān)系、節(jié)點(diǎn)樣式、節(jié)點(diǎn)數(shù)據(jù)綁定邏輯。
GaiaX：
在雙端上通過使用SDK來解析模板的內(nèi)容，經(jīng)過節(jié)點(diǎn)樹的構(gòu)建和視圖樹的構(gòu)建、視圖樹的數(shù)據(jù)綁定等步驟后，得到Native視圖，最終交給雙端渲染。
端渲染：
經(jīng)過雙端SDK對(duì)模板的加工和處理后，在Android和iOS上可以分別得到一個(gè)View和一個(gè)UIVIew，這兩個(gè)NativeView便是最終用于渲染的視圖，只需要將其插入的原生視圖中即可展示出渲染效果。
在了解了GaiaX的上下游與涉及到的環(huán)節(jié)后，下面就介紹一下GaiaX中的兩個(gè)核心概念 - 模板、節(jié)點(diǎn)樹與視圖樹：
模板：
其描述了用于視圖還原的各種信息，模板作為自定義的DSL，其由三個(gè)子DSL構(gòu)成，分別是FlexBox、Css、Databinding，它們會(huì)被存儲(chǔ)在index.json文件、index.css文件、index.databinding文件中：
index.json文件用于存儲(chǔ)視圖的關(guān)聯(lián)關(guān)系。在該文件中，以json的格式，描述了每個(gè)視圖的層級(jí)關(guān)系、并列關(guān)系、嵌套關(guān)系等。
index.css文件用于存儲(chǔ)視圖的樣式。在該文件中，以通用的Css規(guī)范格式，描述了每個(gè)視圖節(jié)點(diǎn)的布局信息和樣式信息。
index.databinding文件用于存儲(chǔ)視圖的數(shù)據(jù)綁定邏輯。在該文件中，以json的格式，描述了每個(gè)視圖的數(shù)據(jù)綁定關(guān)系和動(dòng)態(tài)更新邏輯。這其中用到了自定義的表達(dá)式 ，它支持常規(guī)的取值、對(duì)比、條件等計(jì)算。
文章來源：http://www.zghlxwxcb.cn/news/detail-403867.html
節(jié)點(diǎn)樹與視圖樹：
如果用比喻的手法來描述節(jié)點(diǎn)樹與視圖樹，那么可以將其比作人體的骨架與血肉。節(jié)點(diǎn)樹的主體結(jié)構(gòu)由模板的index.json文件解析構(gòu)建而來&#文章來源地址http://www.zghlxwxcb.cn/news/detail-403867.html
到了這里，關(guān)于GaiaX開源解讀 | 跨端動(dòng)態(tài)化模板引擎詳解，看完你也能寫一個(gè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
