日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
OpenHarmonyACE源碼解析之JavaScript運(yùn)行環(huán)境初始

想了解更多內(nèi)容，請?jiān)L問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.

OpenHarmony JS UI框架簡介

ACE全稱Ability Cross-platform Environment，是OpenHarmony標(biāo)準(zhǔn)系統(tǒng)上的UI框架。ACE結(jié)合了OpenHarmony系統(tǒng)的基礎(chǔ)組件Ability，開源jsframework框架，開源js引擎quickjs，開源跨平臺(tái)UI框架flutter，開源渲染引擎skia以及各種平臺(tái)能力API等共同構(gòu)筑了OpenHarmony標(biāo)準(zhǔn)系統(tǒng)javascript應(yīng)用開發(fā)的基礎(chǔ)。

ACE UI框架的整體架構(gòu)如下圖所示：

JavaScript前端框架

目前OpenHarmony標(biāo)準(zhǔn)系統(tǒng)采用主流的類Web范式，對開源的Weex框架中的jsframework做定制化，采用ts開發(fā)，主要包括編程模型MVVM、組件、API、頁面路由以及事件處理。

https://gitee.com/openharmony/third_party_jsframework

JavaScript引擎

目前OpenHarmony標(biāo)準(zhǔn)系統(tǒng)使用的是開源quickjs引擎，提供JS語言運(yùn)行時(shí)和執(zhí)行上下文，提供js的解析和jsframework的加載。

https://gitee.com/openharmony/third_party_quickjs

中間轉(zhuǎn)換層

中間轉(zhuǎn)換層也就是JS橋接層，實(shí)現(xiàn)前端開發(fā)框架到UI后端引擎和JS引擎的對接。

https://gitee.com/openharmony/ace_ace_engine/tree/master/frameworks/bridge

聲明式UI后端引擎

由C++構(gòu)建的UI后端引擎，包括UI組件、布局視圖、動(dòng)畫事件、自繪制選軟管線。

https://gitee.com/openharmony/ace_ace_engine/tree/master/frameworks/core

渲染引擎

目前OpenHarmony標(biāo)準(zhǔn)系統(tǒng)復(fù)用了開源跨平臺(tái)UI框架flutter引擎提供基礎(chǔ)的圖形渲染能力。

https://gitee.com/openharmony/third_party_flutter

平臺(tái)適配層

目前OpenHarmony標(biāo)準(zhǔn)系統(tǒng)的適配層完成了ohos平臺(tái)和IDE的previewer的適配，將平臺(tái)依賴聚焦到平臺(tái)相關(guān)的畫布、通用線程以及事件處理機(jī)制等少數(shù)接口上，為跨平臺(tái)提供相應(yīng)的基礎(chǔ)設(shè)施，實(shí)現(xiàn)跨平臺(tái)一致化的UI渲染。

https://gitee.com/openharmony/ace_ace_engine/tree/master/adapter

能力擴(kuò)展層

為擴(kuò)展ACE能力提供的插件機(jī)制，平臺(tái)其他子系統(tǒng)可以利用插件機(jī)制開發(fā)相關(guān)能力的js接口，為應(yīng)用層提供相應(yīng)的能力支持。通過napi提供引擎無關(guān)的插件實(shí)現(xiàn)機(jī)制，保證接口的ABI兼容性。

https://gitee.com/openharmony/ace_napi

JS UI框架相關(guān)代碼目錄

 
 
 
 
    
  
  
  
  
  1. /foundation/ace/ace_engine 
    2.   
  
  
  
  2. ├── adapter                       # 平臺(tái)適配目錄 
    3.   
  
  
  
  3. │   ├── common 
    4.   
  
  
  
  4. |   ├── ohos                      # ohos平臺(tái)適配目錄 
    5.   
  
  
  
  5. │   └── preview                   # IDE preview平臺(tái)適配目錄 
    6.   
  
  
  
  6. ├── frameworks                    # 框架代碼 
    7.   
  
  
  
  7. │   ├── base                      # 基礎(chǔ)庫 
    8.   
  
  
  
  8. │   ├── bridge                    # 前后端對接層 
    9.   
  
  
  
  9. │   └── core                      # 聲明式UI后端引擎目錄 
    10.   
  
  
  
  10. /third_party/jsframework          # JavaScript前端框架 
    11.   
  
  
  
  11. /third_party/quickjs              # JavaScript引擎 
    12.   
  
  
  
  12. /third_party/flutter              # flutter engine提供跨平臺(tái)自渲染引擎 
    13.

線程模型

ACE JS應(yīng)用啟動(dòng)時(shí)會(huì)創(chuàng)建一系列線程，形成獨(dú)立的線程模型，以實(shí)現(xiàn)高性能的渲染流程。

  • Platform線程：當(dāng)前平臺(tái)的主線程，也就是應(yīng)用的主線程，主要負(fù)責(zé)平臺(tái)層的交互、應(yīng)用生命周期以及窗口環(huán)境的創(chuàng)建
  • JS線程：JS前端框架的執(zhí)行線程，應(yīng)用的JS邏輯以及應(yīng)用UI界面的解析構(gòu)建都在該線程執(zhí)行
  • UI線程：引擎的核心線程，組件樹的構(gòu)建以及整個(gè)渲染管線的核心邏輯都在該線程：包括渲染樹的構(gòu)建、布局、繪制以及動(dòng)畫調(diào)度
  • GPU線程：現(xiàn)代的渲染引擎，為了充分發(fā)揮硬件性能，都支持GPU硬件加速，在該線程上，會(huì)通過系統(tǒng)的窗口句柄，創(chuàng)建GPU加速的OpenGL環(huán)境，負(fù)責(zé)將整個(gè)渲染樹的內(nèi)容光柵化，直接將每一幀的內(nèi)容渲染合成到該窗口的Surface上并送顯
  • IO線程：主要為了異步的文件IO讀寫，同時(shí)該線程會(huì)創(chuàng)建一個(gè)離屏的GL環(huán)境，這個(gè)環(huán)境和 GPU線程的GL環(huán)境是同一個(gè)共享組，可以共享資源，圖片資源解碼的內(nèi)容可直接在該線程上傳生成GPU紋理，實(shí)現(xiàn)更高效的圖片渲染

ACE框架類圖

Javascript運(yùn)行環(huán)境初始化時(shí)序圖及源碼解析

1.AceAbility繼承自Ability，當(dāng)應(yīng)用啟動(dòng)時(shí)首先應(yīng)用程序框架會(huì)調(diào)用AceAbility的生命周期函數(shù)OnStart()，其中通過Ability的api獲取Hap包的路徑，通過讀取配置文件manifest.json獲取應(yīng)用程序配置的前端的類型;

目前支持的前端類型包括enum class FrontendType { JSON, JS, JS_CARD, DECLARATIVE_JS }，當(dāng)前我們只關(guān)注JS前端;

根據(jù)前端類型調(diào)用ACE核心聚合類AceContainer的靜態(tài)方法CreateContainer，這個(gè)類是ACE框架平臺(tái)適配層的核心類，接下來的前端核心類和JS引擎的創(chuàng)建都是在其中完成的。

 
 
 
 
    
  
  
  
  
  1. //foundation\ace\ace_engine\adapter\preview\entrance\ace_ability.cpp 
    2.   
  
  
  
  2. void AceAbility::OnStart(const Want& want) 
    3.   
  
  
  
  3. { 
    4.   
  
  
  
  4.     ... 
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.     //獲取打包的js bundle文件，取出配置文件，獲取前端類型 
    7.   
  
  
  
  7.     auto packagePathStr = GetBundleCodePath(); 
    8.   
  
  
  
  8.     auto moduleInfo = GetHapModuleInfo(); 
    9.   
  
  
  
  9.     if (moduleInfo != nullptr) { 
    10.   
  
  
  
  10.         packagePathStr += "/" + moduleInfo->name + "/"; 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12.     FrontendType frontendType = GetFrontendTypeFromManifest(packagePathStr); 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.     // create container 
    15.   
  
  
  
  15.     //創(chuàng)建AceContainer：內(nèi)部初始化時(shí)創(chuàng)建了js線程，load了js engine，創(chuàng)建了JsFrontend 
    16.   
  
  
  
  16.     Platform::AceContainer::CreateContainer( 
    17.   
  
  
  
  17.         abilityId_, frontendType, this, 
    18.   
  
  
  
  18.         std::make_unique([this]() { 
    19.   
  
  
  
  19.             TerminateAbility(); 
    20.   
  
  
  
  20.         })); 
    21.   
  
  
  
  21.     ... 
    22.   
  
  
  
  22.     ... 
    23.   
  
  
  
  23.  
    24.   
  
  
  
  24.     //運(yùn)行page 
    25.   
  
  
  
  25.     Platform::AceContainer::RunPage( 
    26.   
  
  
  
  26.         abilityId_, Platform::AceContainer::GetContainer(abilityId_)->GeneratePageId(), 
    27.   
  
  
  
  27.         parsedPageUrl, want.GetStringParam(START_PARAMS_KEY)); 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.     ... 
    30.   
  
  
  
  30. } 
    31.

2.在AceContainer::CreateContainer中，首先創(chuàng)建了AceContainer對象，在構(gòu)造函數(shù)中創(chuàng)建了FlutterTaskerExecutor對象用于多線程的任務(wù)管理，此處我們主要關(guān)注JS線程的創(chuàng)建和初始化，在InitJsThread()中創(chuàng)建了JS線程并獲取保存了jsRunner_用于JS任務(wù)的派發(fā)。

 
 
 
 
    
  
  
  
  
  1. //foundation\ace\ace_engine\adapter\preview\entrance\ace_container.cpp 
    2.   
  
  
  
  2. void AceContainer::CreateContainer(int32_t instanceId, FrontendType type, AceAbility* aceAbility, 
    3.   
  
  
  
  3.     std::unique_ptr callback) 
    4.   
  
  
  
  4. { 
    5.   
  
  
  
  5.     auto aceContainer = AceType::MakeRefPtr(instanceId, type, aceAbility, std::move(callback)); 
    6.   
  
  
  
  6.     AceEngine::Get().AddContainer(instanceId, aceContainer); 
    7.   
  
  
  
  7.     auto front = aceContainer->GetFrontend(); 
    8.   
  
  
  
  8.     if (front) { 
    9.   
  
  
  
  9.         front->UpdateState(Frontend::State::ON_CREATE); 
    10.   
  
  
  
  10.         front->SetJsMessageDispatcher(aceContainer); 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12. } 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. AceContainer::AceContainer(int32_t instanceId, FrontendType type, AceAbility* aceAbility, 
    15.   
  
  
  
  15.     std::unique_ptr callback) : instanceId_(instanceId), type_(type), aceAbility_(aceAbility) 
    16.   
  
  
  
  16. { 
    17.   
  
  
  
  17.     ACE_DCHECK(callback); 
    18.   
  
  
  
  18.     //創(chuàng)建和初始化FlutterTaskerExecutor用于封裝管理Flutter ACE中涉及的多個(gè)線程：platform，UI，JS，GPU，IO，統(tǒng)一post任務(wù)到各線程執(zhí)行 
    19.   
  
  
  
  19.     auto flutterTaskExecutor = Referenced::MakeRefPtr(); 
    20.   
  
  
  
  20.     //初始化platform線程，將flutter platform線程的TaskerRunner適配到ohos平臺(tái)主線程的EventRunner 
    21.   
  
  
  
  21.     flutterTaskExecutor->InitPlatformThread(); 
    22.   
  
  
  
  22.     //初始化JS線程，這個(gè)線程用于解析JS，不歸flutter管理，因此是單獨(dú)在ACE里使用的 
    23.   
  
  
  
  23.     flutterTaskExecutor->InitJsThread(); 
    24.   
  
  
  
  24.     //taskExector_封裝了所有線程任務(wù)調(diào)度的接口，因此會(huì)傳給Frontend用于JS前端解析任務(wù)和PipelineContext后端渲染UI和GPU IO相關(guān) 
    25.   
  
  
  
  25.     taskExecutor_ = flutterTaskExecutor; 
    26.   
  
  
  
  26.     if (type_ != FrontendType::DECLARATIVE_JS) { 
    27.   
  
  
  
  27.         //zll:初始化前端 
    28.   
  
  
  
  28.         InitializeFrontend(); 
    29.   
  
  
  
  29.     } 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.     platformEventCallback_ = std::move(callback); 
    32.   
  
  
  
  32. } 
    33.   
  
  
  
  33.  
    34.   
  
  
  
  34. void FlutterTaskExecutor::InitJsThread(bool newThread) 
    35.   
  
  
  
  35. { 
    36.   
  
  
  
  36.     //創(chuàng)建并初始化JS線程，獲取保存js線程的TaskRunner 
    37.   
  
  
  
  37.     //JS線程是ACE平臺(tái)特有，不通過flutter創(chuàng)建管理 
    38.   
  
  
  
  38.     if (newThread) { 
    39.   
  
  
  
  39.         jsThread_ = std::make_unique(GenJsThreadName()); 
    40.   
  
  
  
  40.         jsRunner_ = jsThread_->GetTaskRunner(); 
    41.   
  
  
  
  41.     } else { 
    42.   
  
  
  
  42.         jsRunner_ = uiRunner_; 
    43.   
  
  
  
  43.     } 
    44.   
  
  
  
  44. } 
    45.

3.完成JS線程的初始化后，如果前端類型不是DECLARATIVE_JS，會(huì)調(diào)用InitializeFrontend()對前端進(jìn)行初始化。

首先創(chuàng)建前端對象，F(xiàn)rontend::Create定義在js_frontend.cpp中，創(chuàng)建的是JsFrontend實(shí)例;

然后通過JsEngineLoader::Get()動(dòng)態(tài)加載QjsEngineLoader;

再通過QjsEngineLoader創(chuàng)建QjsEngine并設(shè)置給JsFrontend;

最后對JsFrontend對象做初始化。

JsFrontend是ACE框架從后端進(jìn)入前端的唯一入口，AceAbility、AceContainer和JsFrontend是一一對應(yīng)的關(guān)系。

 
 
 
 
    
  
  
  
  
  1. //foundation\ace\ace_engine\adapter\preview\entrance\ace_container.cpp 
    2.   
  
  
  
  2. void AceContainer::InitializeFrontend() 
    3.   
  
  
  
  3. { 
    4.   
  
  
  
  4.     if (type_ == FrontendType::JS) { 
    5.   
  
  
  
  5.         //目前Frontend::Create定義在js_frontend.cpp中，創(chuàng)建的是JsFrontend實(shí)例 
    6.   
  
  
  
  6.         frontend_ = Frontend::Create(); 
    7.   
  
  
  
  7.         auto jsFrontend = AceType::DynamicCast(frontend_); 
    8.   
  
  
  
  8.         //創(chuàng)建并初始化js engine，此處是通過dlopen加載的qjs engine管理對象 
    9.   
  
  
  
  9.         jsFrontend->SetJsEngine(Framework::JsEngineLoader::Get().CreateJsEngine(instanceId_)); 
    10.   
  
  
  
  10.         ... 
    11.   
  
  
  
  11.     } else if (type_ == FrontendType::DECLARATIVE_JS) { 
    12.   
  
  
  
  12.         ... 
    13.   
  
  
  
  13.     } else { 
    14.   
  
  
  
  14.         ... 
    15.   
  
  
  
  15.     } 
    16.   
  
  
  
  16.     ACE_DCHECK(frontend_); 
    17.   
  
  
  
  17.     //初始化前端和js engine 
    18.   
  
  
  
  18.     frontend_->Initialize(type_, taskExecutor_); 
    19.   
  
  
  
  19. } 
    20.

4.接下來我們繼續(xù)分析一下JS引擎管理對象的創(chuàng)建。首先通過dlopen動(dòng)態(tài)加載libace_engine_qjs.z.so通過入口函數(shù)創(chuàng)建獲取QjsEngineLoader單例對象;然后通過QjsEngineLoader::CreateJsEngine()創(chuàng)建QjsEngine。

 
 
 
 
    
  
  
  
  
  1. //foundation\ace\ace_engine\frameworks\bridge\js_frontend\engine\common\js_engine_loader.cpp 
    2.   
  
  
  
  2. //"libace_engine_qjs.z.so"動(dòng)態(tài)庫的入口，在qjs_engine_loader.cpp中定義 
    3.   
  
  
  
  3. constexpr char JS_ENGINE_ENTRY[] = "OHOS_ACE_GetJsEngineLoader"; 
    4.   
  
  
  
  4. constexpr char QUICK_JS_ENGINE_SHARED_LIB[] = "libace_engine_qjs.z.so"; 
    5.   
  
  
  
  5. ... 
    6.   
  
  
  
  6. const char* GetSharedLibrary() 
    7.   
  
  
  
  7. { 
    8.   
  
  
  
  8.     return QUICK_JS_ENGINE_SHARED_LIB; 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10. JsEngineLoader& GetJsEngineLoader(const char* sharedLibrary) 
    11.   
  
  
  
  11. { 
    12.   
  
  
  
  12.     void* handle = dlopen(sharedLibrary, RTLD_LAZY); 
    13.   
  
  
  
  13.     ... 
    14.   
  
  
  
  14.     // 
    15.   
  
  
  
  15.     auto loader = reinterpret_cast(entry()); 
    16.   
  
  
  
  16.     ... 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.     return *loader; 
    19.   
  
  
  
  19. } 
    20.   
  
  
  
  20. ... 
    21.   
  
  
  
  21. //通過加載動(dòng)態(tài)鏈接庫的形式獲取qjs橋接模塊的入口函數(shù)并創(chuàng)建QjsEngineLoader 
    22.   
  
  
  
  22. JsEngineLoader& JsEngineLoader::Get() 
    23.   
  
  
  
  23. { 
    24.   
  
  
  
  24.     static JsEngineLoader& instance = GetJsEngineLoader(GetSharedLibrary()); 
    25.   
  
  
  
  25.     return instance; 
    26.   
  
  
  
  26. } 
    27.   
  
  
  
  27.  
    28.   
  
  
  
  28. //foundation\ace\ace_engine\frameworks\bridge\js_frontend\engine\quickjs\qjs_engine_loader.cpp 
    29.   
  
  
  
  29. RefPtr QjsEngineLoader::CreateJsEngine(int32_t instanceId) const 
    30.   
  
  
  
  30. { 
    31.   
  
  
  
  31.     return AceType::MakeRefPtr(instanceId); 
    32.   
  
  
  
  32. } 
    33.

5.在完成了QjsEngine的創(chuàng)建并設(shè)置給JsFrontend后，調(diào)用JsFrontend::Initialize()，這里主要完成了FrontendDelegateImpl對象的創(chuàng)建和初始化將對JS引擎的相關(guān)操作委派給這個(gè)對象，以及Post JS引擎初始化的任務(wù)到JS線程的TaskRunner的message queue。

 
 
 
 
    
  
  
  
  
  1. //foundation\ace\ace_engine\frameworks\bridge\js_frontend\js_frontend.cpp 
    2.   
  
  
  
  2. bool JsFrontend::Initialize(FrontendType type, const RefPtr& taskExecutor) 
    3.   
  
  
  
  3. { 
    4.   
  
  
  
  4.     LOGI("JsFrontend initialize begin."); 
    5.   
  
  
  
  5.     type_ = type; 
    6.   
  
  
  
  6.     ACE_DCHECK(type_ == FrontendType::JS); 
    7.   
  
  
  
  7.     //創(chuàng)建并初始化FrontendDelegate對象，具體實(shí)現(xiàn)為FrontendDelegateImpl 
    8.   
  
  
  
  8.     InitializeFrontendDelegate(taskExecutor); 
    9.   
  
  
  
  9.     //在JS線程初始化js engine，真正的啟動(dòng)JS引擎運(yùn)行時(shí)并創(chuàng)建上下文 
    10.   
  
  
  
  10.     taskExecutor->PostTask( 
    11.   
  
  
  
  11.         [weakEngine = WeakPtr(jsEngine_), delegate = delegate_] { 
    12.   
  
  
  
  12.             auto jsEngine = weakEngine.Upgrade(); 
    13.   
  
  
  
  13.             if (!jsEngine) { 
    14.   
  
  
  
  14.                 return; 
    15.   
  
  
  
  15.             } 
    16.   
  
  
  
  16.             jsEngine->Initialize(delegate); 
    17.   
  
  
  
  17.         }, 
    18.   
  
  
  
  18.         TaskExecutor::TaskType::JS); 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.     LOGI("JsFrontend initialize end."); 
    21.   
  
  
  
  21.     return true; 
    22.   
  
  
  
  22. } 
    23.

6.接著上面的分析，在JS線程執(zhí)行QjsEngine對象的初始化，初始化JS運(yùn)行環(huán)境，主要包含兩部分初始化JS引擎運(yùn)行時(shí)上下文和初始化JavaScript框架層jsframework。

 
 
 
 
    
  
  
  
  
  1. //foundation\ace\ace_engine\frameworks\bridge\js_frontend\engine\quickjs\qjs_engine.cpp 
    2.   
  
  
  
  2. bool QjsEngine::Initialize(const RefPtr& delegate) 
    3.   
  
  
  
  3. { 
    4.   
  
  
  
  4.     ACE_SCOPED_TRACE("QjsEngine::Initialize"); 
    5.   
  
  
  
  5.     LOGI("Initialize"); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     JSRuntime* runtime = nullptr; 
    8.   
  
  
  
  8.     JSContext* context = nullptr; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.     // put JS_NewContext as early as possible to make stack_top in context 
    11.   
  
  
  
  11.     // closer to the top stack frame pointer of JS thread. 
    12.   
  
  
  
  12.     runtime = JS_NewRuntime(); 
    13.   
  
  
  
  13.     if (runtime != nullptr) { 
    14.   
  
  
  
  14.         context = JS_NewContext(runtime); 
    15.   
  
  
  
  15.     } 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.     ... 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.     engineInstance_ = AceType::MakeRefPtr(delegate, instanceId_); 
    20.   
  
  
  
  20.     return engineInstance_->InitJsEnv(runtime, context); 
    21.   
  
  
  
  21. } 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23. bool QjsEngineInstance::InitJsEnv(JSRuntime* runtime, JSContext* context) 
    24.   
  
  
  
  24. { 
    25.   
  
  
  
  25.     ... 
    26.   
  
  
  
  26.     context_ = context; 
    27.   
  
  
  
  27.     //1.初始化js運(yùn)行時(shí),上下文 
    28.   
  
  
  
  28.     if (!InitJsContext(context_, MAX_STACK_SIZE, instanceId_, this)) { 
    29.   
  
  
  
  29.         LOGE("Qjs cannot allocate JS context"); 
    30.   
  
  
  
  30.         EventReport::SendJsException(JsExcepType::JS_ENGINE_INIT_ERR); 
    31.   
  
  
  
  31.         JS_FreeRuntime(runtime_); 
    32.   
  
  
  
  32.         return false; 
    33.   
  
  
  
  33.     } 
    34.   
  
  
  
  34.     ... 
    35.   
  
  
  
  35.     //2.加載JS Framework，初始化JS前端框架 
    36.   
  
  
  
  36.     //加載jsframework，js_framework和js_framework_size是quickjs編譯器編譯jsframework的ts生成的c文件 
    37.   
  
  
  
  37.     //quickjs通過JS_ReadObject讀取生成的cbytecode，并通過JS_EvalFunction(ctx, obj)執(zhí)行相應(yīng)的函數(shù) 
    38.   
  
  
  
  38.     //在這里最終調(diào)用的函數(shù)是jsframework/runtime/preparation/index.ts中的initFramework()函數(shù) 
    39.   
  
  
  
  39.     JSValue retVal = LoadJsFramework(GetQjsContext(), js_framework, js_framework_size, instanceId_); 
    40.   
  
  
  
  40.     bool result = JS_IsException(retVal) ? false : true; 
    41.   
  
  
  
  41.     if (context) { 
    42.   
  
  
  
  42.         JS_FreeValue(context, retVal); 
    43.   
  
  
  
  43.     } 
    44.   
  
  
  
  44.     ... 
    45.   
  
  
  
  45.  
    46.   
  
  
  
  46.     return result; 
    47.   
  
  
  
  47. } 
    48.

7.上面初始化JS引擎運(yùn)行時(shí)上下文是在InitJsContext完成的，其中初始化了Ace模塊并將模塊導(dǎo)入到了JS運(yùn)行時(shí)上下文中，為jsframework框架層提供了ACE功能相關(guān)的接口，jsframework可以通過調(diào)用ACE模塊的接口完成Page上Dom元素到后端聲明式UI元素節(jié)點(diǎn)的創(chuàng)建，同時(shí)往JS運(yùn)行時(shí)上下文全局對象掛載了日志打印的函數(shù)用于對接平臺(tái)日志打印功能。

 
 
 
 
    
  
  
  
  
  1. //foundation\ace\ace_engine\frameworks\bridge\js_frontend\engine\quickjs\qjs_engine.cpp 
    2.   
  
  
  
  2. //ace模塊向js context暴露的函數(shù)，（js函數(shù)名，參數(shù)個(gè)數(shù)，對應(yīng)的C函數(shù)） 
    3.   
  
  
  
  3. const JSCFunctionListEntry JS_ACE_FUNCS[] = { 
    4.   
  
  
  
  4.     JS_CFUNC_DEF_CPP("domCreateBody", 5, JsDomCreateBody), 
    5.   
  
  
  
  5.     JS_CFUNC_DEF_CPP("domAddElement", 9, JsDomAddElement), 
    6.   
  
  
  
  6.     JS_CFUNC_DEF_CPP("updateElementAttrs", 3, JsUpdateElementAttrs), 
    7.   
  
  
  
  7.     JS_CFUNC_DEF_CPP("updateElementStyles", 3, JsUpdateElementStyles), 
    8.   
  
  
  
  8.     JS_CFUNC_DEF_CPP("onCreateFinish", 0, JsOnCreateFinish), 
    9.   
  
  
  
  9.     JS_CFUNC_DEF_CPP("onUpdateFinish", 0, JsOnUpdateFinish), 
    10.   
  
  
  
  10.     JS_CFUNC_DEF_CPP("removeElement", 2, JsRemoveElement), 
    11.   
  
  
  
  11.     JS_CFUNC_DEF_CPP("callNative", 1, JsCallNative), 
    12.   
  
  
  
  12.     JS_CFUNC_DEF_CPP("callComponent", 3, JsCallComponent), 
    13.   
  
  
  
  13.     JS_CFUNC_DEF_CPP("loadIntl", 0, JsLoadIntl), 
    14.   
  
  
  
  14.     JS_CFUNC_DEF_CPP("loadLocaleData", 0, JsLoadLocaleData), 
    15.   
  
  
  
  15. #ifdef ENABLE_JS_DEBUG 
    16.   
  
  
  
  16.     JS_CFUNC_DEF_CPP("compileAndRunBundle", 4, JsCompileAndRunBundle), 
    17.   
  
  
  
  17. #endif 
    18.   
  
  
  
  18. }; 
    19.   
  
  
  
  19. ... 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. bool InitJsContext(JSContext* ctx, size_t maxStackSize, int32_t instanceId, const QjsEngineInstance* qjsEngineInstance) 
    22.   
  
  
  
  22. { 
    23.   
  
  
  
  23.     ... 
    24.   
  
  
  
  24.      
    25.   
  
  
  
  25.     //將ace模塊注入到上下文中，使得jsframework可以通過注冊的接口調(diào)用ace的相關(guān)功能 
    26.   
  
  
  
  26.     // Inject ace native functions module 
    27.   
  
  
  
  27.     InitAceModules(ctx); 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.     JSValue globalObj, perfUtil; 
    30.   
  
  
  
  30.     globalObj = JS_GetGlobalObject(ctx); 
    31.   
  
  
  
  31.     perfUtil = JS_NewObject(ctx); 
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33.     InitJsConsoleObject(ctx, globalObj); 
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35.     JS_SetPropertyStr(ctx, perfUtil, "printlog", JS_NewCFunction(ctx, JsPerfPrint, "printlog", 0)); 
    36.   
  
  
  
  36.     JS_SetPropertyStr(ctx, perfUtil, "sleep", JS_NewCFunction(ctx, JsPerfSleep, "sleep", 1)); 
    37.   
  
  
  
  37.     JS_SetPropertyStr(ctx, perfUtil, "begin", JS_NewCFunction(ctx, JsPerfBegin, "begin", 1)); 
    38.   
  
  
  
  38.     JS_SetPropertyStr(ctx, perfUtil, "end", JS_NewCFunction(ctx, JsPerfEnd, "end", 1)); 
    39.   
  
  
  
  39.     JS_SetPropertyStr(ctx, globalObj, "perfutil", perfUtil); 
    40.   
  
  
  
  40.  
    41.   
  
  
  
  41.     ... 
    42.   
  
  
  
  42.  
    43.   
  
  
  
  43.     JSValue hiView; 
    44.   
  
  
  
  44.     hiView = JS_NewObject(ctx); 
    45.   
  
  
  
  45.     JS_SetPropertyStr(ctx, hiView, "report", JS_NewCFunction(ctx, JSHiViewReport, "report", 2)); 
    46.   
  
  
  
  46.     JS_SetPropertyStr(ctx, globalObj, "hiView", hiView); 
    47.   
  
  
  
  47.  
    48.   
  
  
  
  48.     JSValue i18nPluralRules; 
    49.   
  
  
  
  49.     i18nPluralRules = JS_NewObject(ctx); 
    50.   
  
  
  
  50.     JS_SetPropertyStr(ctx, i18nPluralRules, "select", JS_NewCFunction(ctx, JsPluralRulesFormat, "select", 1)); 
    51.   
  
  
  
  51.     JS_SetPropertyStr(ctx, globalObj, "i18nPluralRules", i18nPluralRules); 
    52.   
  
  
  
  52.      
    53.   
  
  
  
  53.     //將ace模塊導(dǎo)入到cxt指定的js 上下文中 
    54.   
  
  
  
  54.     const char* str = "import * as ace from 'ace';\n" 
    55.   
  
  
  
  55.                       "var global = globalThis;\n" 
    56.   
  
  
  
  56.                       "global.ace = ace;\n" 
    57.   
  
  
  
  57. #ifdef ENABLE_JS_DEBUG 
    58.   
  
  
  
  58.                       "global.compileAndRunBundle = ace.compileAndRunBundle;\n" 
    59.   
  
  
  
  59. #endif 
    60.   
  
  
  
  60.                       "global.callNative = ace.callNative;\n"; 
    61.   
  
  
  
  61.  
    62.   
  
  
  
  62.     if (JS_CALL_FAIL == CallEvalBuf(ctx, str, strlen(str), "", JS_EVAL_TYPE_MODULE, instanceId)) { 
    63.   
  
  
  
  63.         LOGW("Qjs created JS context but failed to init Ace modules!"); 
    64.   
  
  
  
  64.     } 
    65.   
  
  
  
  65.  
    66.   
  
  
  
  66.     JS_FreeValue(ctx, globalObj); 
    67.   
  
  
  
  67.     return true; 
    68.   
  
  
  
  68. } 
    69.

8.完成了JS運(yùn)行時(shí)上下文的初始化之后，緊接著加載初始化了jsframework，為JS應(yīng)用程序提供javascript應(yīng)用框架。這個(gè)地方使用了quickjs的運(yùn)行bytecode的方法，在編譯時(shí)通過qjsc(quickjs編譯器)將jsframework編譯成c文件，c文件的內(nèi)容就是一個(gè)bytecode的組數(shù)和數(shù)組大小，指定了jsframework的入口函數(shù)，在這里對應(yīng)jsframework/runtime/preparation/index.ts 中的initFramework()完成jsframework的初始化。jsframework初始化完成的工作主要包括掛載到j(luò)s運(yùn)行時(shí)上下文全局對象上提供給native調(diào)用的jsframework函數(shù)，注冊到j(luò)sframework的ACE提供的模塊及其中的方法和jsframework提供的與native一一對應(yīng)的組件及其方法。

 
 
 
 
    
  
  
  
  
  1. //foundation\ace\ace_engine\frameworks\bridge\js_frontend\engine\quickjs\qjs_engine.cpp 
    2.   
  
  
  
  2. JSValue LoadJsFramework(JSContext* ctx, const uint8_t buf[], const uint32_t bufSize, int32_t instanceId) 
    3.   
  
  
  
  3. { 
    4.   
  
  
  
  4.     ACE_SCOPED_TRACE("LoadJsFramework"); 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     LOGI("Qjs loading JS framework"); 
    7.   
  
  
  
  7.     //等同于調(diào)用jsframework/runtime/preparation/index.ts 中的initFramework() 
    8.   
  
  
  
  8.     JSValue ret = CallReadObject(ctx, buf, bufSize, true, instanceId); 
    9.   
  
  
  
  9.     if (JS_IsException(ret)) { 
    10.   
  
  
  
  10.         LOGD("Qjs loading JSFramework failed!"); 
    11.   
  
  
  
  11.         QjsUtils::JsStdDumpErrorAce(ctx, JsErrorType::LOAD_JS_FRAMEWORK_ERROR, instanceId); 
    12.   
  
  
  
  12.     } 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.     return ret; 
    15.   
  
  
  
  15. } 
    16.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. //third_party\jsframework\runtime\preparation\init.ts 
    2.   
  
  
  
  2. export function initFramework(): void { 
    3.   
  
  
  
  3.   for (const serviceName in i18n) { 
    4.   
  
  
  
  4.     service.register(serviceName, i18n[serviceName]); 
    5.   
  
  
  
  5.   } 
    6.   
  
  
  
  6.   for (const serviceName in dpi) { 
    7.   
  
  
  
  7.     service.register(serviceName, dpi[serviceName]); 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9.   //jsframework提供的可供Ace native在QjsEngine對象中調(diào)用的TS方法 
    10.   
  
  
  
  10.   const globalMethods: GlobalInterface = { 
    11.   
  
  
  
  11.     'createInstance': globalApi.createInstance, 
    12.   
  
  
  
  12.     'registerModules': globalApi.registerModules, 
    13.   
  
  
  
  13.     'appDestroy': globalApi.appDestroy, 
    14.   
  
  
  
  14.     'appError': globalApi.appError, 
    15.   
  
  
  
  15.     'destroyInstance': globalApi.destroyInstance, 
    16.   
  
  
  
  16.     'getRoot': globalApi.getRoot, 
    17.   
  
  
  
  17.     'callJS': globalApi.callJS 
    18.   
  
  
  
  18.   }; 
    19.   
  
  
  
  19.   //注冊modules，這些modules是ACE module提供的，調(diào)用這些模塊的方法，會(huì)通過調(diào)用注冊到qjs_engine的ace模塊中的callNative方法 
    20.   
  
  
  
  20.   //會(huì)最終通過ace module的callNative調(diào)用到qjs_engine中的JsCallNative-->JsHandleModule-->然后調(diào)用對應(yīng)的native方法 
    21.   
  
  
  
  21.   // registerModules and registerComponents 
    22.   
  
  
  
  22.   ModulesInfo.forEach(modules => { 
    23.   
  
  
  
  23.     globalMethods['registerModules'](modules); 
    24.   
  
  
  
  24.   }); 
    25.   
  
  
  
  25.    
    26.   
  
  
  
  26.   //注冊components組件，對組件方法的調(diào)用，最終會(huì)通過ace module的callComponent調(diào)用到qjs_engine中的JsCallComponent 
    27.   
  
  
  
  27.   ComponentsInfo.forEach((name) => { 
    28.   
  
  
  
  28.     if (name && name.type && name.methods) { 
    29.   
  
  
  
  29.       NativeElementClassFactory.createNativeElementClass( 
    30.   
  
  
  
  30.         name.type, 
    31.   
  
  
  
  31.         name.methods 
    32.   
  
  
  
  32.       ); 
    33.   
  
  
  
  33.     } 
    34.   
  
  
  
  34.   }); 
    35.   
  
  
  
  35.   //全局方法，這些方法可以被Qjs engine通過JS_GetPropertyStr(ctx, globalObj, "methodNamge")獲取并調(diào)用，從而實(shí)現(xiàn)了從native到j(luò)s的調(diào)用 
    36.   
  
  
  
  36.   for (const methodName in globalMethods) { 
    37.   
  
  
  
  37.     global[methodName] = (...args: any) => { 
    38.   
  
  
  
  38.       const res: any = globalMethods[methodName](...args); 
    39.   
  
  
  
  39.       if (res instanceof Error) { 
    40.   
  
  
  
  40.         Log.error(res.toString()); 
    41.   
  
  
  
  41.       } 
    42.   
  
  
  
  42.       return res; 
    43.   
  
  
  
  43.     }; 
    44.   
  
  
  
  44.   } 
    45.   
  
  
  
  45. } 
    46.

總結(jié)

以上內(nèi)容首先對OpenHarmony標(biāo)準(zhǔn)系統(tǒng)上JS UI框架ACE的邏輯架構(gòu)及相關(guān)模塊進(jìn)行了簡單的介紹，給出了ACE架構(gòu)中相關(guān)模塊涉及的部分類的類圖，結(jié)合本次重點(diǎn)分析的Javascript運(yùn)行環(huán)境初始化的時(shí)序圖詳細(xì)分析了Javascript運(yùn)行環(huán)境初始化的整個(gè)流程。

想了解更多內(nèi)容，請?jiān)L問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.


本文標(biāo)題：OpenHarmonyACE源碼解析之JavaScript運(yùn)行環(huán)境初始
路徑分享：http://www.5511xx.com/article/djggshh.html