[翻譯] 深入解析QML引擎, 第1部分:QML文件加載

原文?QML Engine Internals, Part 1: QML File Loading

譯者注:這個解析QML引擎的文章共4篇,分析非常透徹,在國內幾乎沒有找到類似的分析,為了便于國內的QT/QML愛好者和工作者也能更好的學習和理解QML引擎,故將這個系列的4篇文章翻譯過來。翻譯并不是完全直譯,有不足之處,請指正,謝謝!

———————————————————————————————————————————

在這個系列的博文中,我們將深入探尋隱藏在QML引擎背后的那些不為人知的玄機,一步步揭曉它內部實現的原理。這些博文都是基于Qt5版本的QtQuick,QtQuick 2.0來深入分析的。

眾所周知,QML文件中每個元素都對應于一個C++類。QML引擎在加載QML文件時,會為文件中的所有元素以某種方式創建相應的C++對象。在這篇博文中,我們將探尋QML引擎從解析QML文件開始,到形成一棵完整的C++對象樹的整個過程。Qt官方文檔已經大篇幅地闡述了QML和C++是如何協同工作的,這些內容值得你花上一些時間評鑒一番。在這個系列的博文中,我假設你已經對該官方文檔有所了解。

例子

首先我們將使用一個不怎么有用,也不怎么令人感到興奮,但卻能體現QML有趣的地方的例子:

圖1 QML例子

上面這個QML文件包含三個元素:Rectangle(矩形)、Text(文本)和MouseArea(鼠標區域)。這些元素分別對應于C++類:QQuickRectangle、 QQuickText和QQuickMouseArea。這些類只被導出到QML中,在C++版本中它們是私有的,不能被Qt用戶使用。這些元素將被繪制在一個OpenGL scenegraph中,繪制及事件處理都是由QQuickView控制的。我們可以利用KDAB的Qt自檢工具GammaRay來驗證QML文件對應的C++對象樹:

圖2 例子程序在GammaRay工具中顯示的對象圖

和我們預想的一樣,QQuickMouseArea和QQuickText類顯示在對象樹中。但QQuickRectangle_QML_0又是什么呢?在Qt的源代碼中壓根沒有同名的C++類! 這個問題我們會在后續的博文中解答,你可以暫時假設它就是QQuickRectangle類型的一個對象。

讓我們更進一步,用QML分析器(QML profiler)來運行并分析這個例子程序:

圖3 例子程序在QML分析器中的輸出結果圖

如上圖所示,在場景設置過程中,執行了少許的繪制,這和我們預想的一樣。后續的創建階段花費了大量的時間。但還有一個編譯階段,編譯階段是個啥啊? 都干些什么事?是在創建機器碼嗎?看來是時候更深入一點地分析加載QML文件的代碼了。

QML文件加載步驟

當加載QML文件時,會執行三個不同的步驟,接下來我們將深入研究這些步驟:

1.解析

2.編譯

3.創建

解析

首先,QML文件是由QQmlScript::Parser這個解析器來解析的。該解析器內部的絕大多數內容都是由??語法文件自動生成的。我們這個例子的抽象語法樹(AST)看起來是這樣的:

圖4 AST?

這個AST是比較底層的東西,緊接著,它將被轉換成更高層級結構的對象屬性。這是通過使用一個訪問器遍歷AST來完成的。這一步的對象就和QML中的元素一一對應上了,且對象的屬性/值和QML元素的屬性/值也一一對應上。我們的例子中Rectangle元素的屬性“color”,其對應的值是“lightsteelblue”,它們就是屬性/值的關系。即使像onClicked這樣的信號處理程序也被看作只是屬性/值的關系,屬性是onClicked,值就是JavaScript函數體。

編譯

在理論上,對象,屬性和值已經足夠用于創建對應的C++對象,并給屬性賦上對應的值。但這些對象,屬性和值依然過于原始,在創建C++對象之前,還需要進行一些后置處理。這些后置處理是由QQmlCompiler來完成的,這對應于QML分析器(QML profiler)輸出中看到的編譯階段。該編譯器會為QML文件創建了一個QQmlCompiledData對象。 用QQmlCompiledData創建C++對象比直接使用對象、屬性和值來創建C++對象快了很多。當多次使用同一個QML文件,該文件也只會編譯一次。比如在一個工程中,其他所有的QML文件都會用到的Button.qml,編譯時Button.qml只會被編譯一次。Button.qml的QQmlCompiledData會一直保存,每次使用該按鈕組件時,都會根據這個Button.qml的QQmlCompiledData來創建C++對象。在編譯之后,就是創建階段,這在QML分析器(QML profiler)的輸出中可以看到。

綜上所述:解析和編譯QML文件都只會做一次,在此之后,都是直接使用QQmlCompiledData對象來快速創建C++對象。

創建

我不會深入研究QQmlCompiledData的細節,但有一個東西可能會引起你的注意:“QByteArray?bytecode”成員變量。實際上,創建C++對象并給它的屬性賦值的指令會被編譯為了字節碼,之后由字節碼解析器解析!字節碼包含了一堆指令,當這些指令執行時,QQmlCompiledData的其余部分僅是輔助數據。

在創建階段,字節碼是由QQmlVME類解析的。閱讀QQmlVME::run()這個函數的代碼,里面有一個循環用于遍歷字節碼包含的所有指令,在循環體內部,有一個很大的判定不同指令類型的switch語句。運行帶有QML_COMPILER_DUMP=1的例子程序,我們可以看到字節碼所包含的每個指令:

圖6 例子程序對應指令圖

CREATE_SIMPLE 指令是最重要的,它會創建一個C++對象,然后注冊到QQmlMetaType中的一個用于注冊對象的數據庫。

STORE_INTEGER 指令為屬性賦一個整數類型值。

STORE_SIGNAL 指令用于創建信號的處理器。

STORE_ * _BINDING 指令用于創建一個屬性的綁定。更多關于綁定的內容會在這個系列的下一篇博文中說明。

SETID 指令設置一個對象的標識(id),它不是一個普通的屬性。

VME有一個對象棧,STORE_*的所有指令都操作棧頂對象,FETCH指令在堆頂放置一個特定對象,POP指令會移除頂部對象。所有指令都大量使用整數索引,例如STORE_COLOR指令寫入屬性41,41就是目標對象的元對象的屬性索引。

綜上所述:一旦一個QML文件編譯完成,創建它的實例就只和編譯后的字節碼的執行有關。

結論

在這篇博文的最后,我們已經揭示了一個QML文件是如何進行解析、處理、編譯的,以及VME是如何創建對象的。我希望你已經更加深入地理解了QML引擎。

下一篇的博文將進一步探討屬性綁定是如何進行的,敬請關注!

最后,希望這篇譯文對你能夠有所幫助,如果你是對技術(不止限于QML)研究有興趣的朋友,歡迎加入我們進行討論(QQ群:280689979)。

下一篇:綁定(Bindings)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,963評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,348評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,083評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,706評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,442評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,802評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,795評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,983評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,542評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,287評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,486評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,030評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,710評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,116評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,412評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,224評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,462評論 2 378

推薦閱讀更多精彩內容