魔天记忘语小说,怎样写网络小说,最好看的小说排行

張亮亮

深圳開鴻數字產業發展有限公司

簡介

JS UI 框架引擎ACE全稱 Ability Cross-platform Environment，是 OpenHarmony 標準系統上的UI框架。ACE：結合了 OpenHarmony 系統的基礎組件 Ability，開源 jsframework 框架，開源 js 引擎 quickjs，開源跨平臺 UI 框架 flutter，開源渲染引擎 skia 以及各種平臺能力 API 等共同構筑了 OpenHarmony 標準系統 javacript 應用開發的基礎。

1.1 OpenHarmony 架構圖

1.2 ACE UI框架引擎圖

1.3 ACE 主要構成

1. JavaScript前端框架

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

2. JavaScript引擎

目前 OpenHarmony 標準系統使用的是開源 quickjs 引擎，提供 JS 語言運行時和執行上下文，提供 js 的解析和 jsframework 的加載。

3. 中間轉換層

中間轉換層也就是 JS 橋接層，實現前端開發框架到 UI 后端引擎和 JS 引擎的對接。

4. 聲明式UI后端引擎

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

5. 渲染引擎

目前 OpenHarmony 標準系統復用了開源跨平臺 UI 框架 flutter 引擎提供基礎的圖形渲染能力。

6. 平臺適配層

目前 OpenHarmony 標準系統的適配層完成了 OpenHarmony 平臺和 IDE 的 previewer 的適配，將平臺依賴聚焦到平臺相關的畫布、通用線程以及事件處理機制等少數接口上，為跨平臺提供相應的基礎設施，實現跨平臺一致化的 UI 渲染。

7. 能力擴展層

為擴展 ACE 能力提供的插件機制，平臺其他子系統可以利用插件機制開發相關能力的 js 接口，為應用層提供相應的能力支持。通過 napi 提供引擎無關的插件實現機制，保證接口的 ABI 兼容性。

基礎知識

2.1 代碼結構

/foundation/ace/ace_engine├── adapter                       # 平臺適配目錄│   ├── common|   ├── ohos                      # ohos平臺適配目錄│   └── preview                   # IDE preview平臺適配目錄├── frameworks                    # 框架代碼│   ├── base                      # 基礎庫│   ├── bridge                    # 前后端對接層│   └── core                      # 聲明式UI后端引擎目錄/third_party/jsframework          # JavaScript前端框架/third_party/quickjs              # JavaScript引擎/third_party/flutter#flutterengine提供跨平臺自渲染引擎

2.2 ACE框架類圖

（點擊圖片查看高清大圖） 2.3 線程模型

ACE JS 應用啟動時會創建一系列線程，形成獨立的線程模型，以實現高性能的渲染流程。

Platform線程：當前平臺的主線程，也就是應用的主線程，主要負責平臺層的交互、應用生命周期以及窗口環境的創建。

JS線程：JS 前端框架的執行線程，應用的 JS 邏輯以及應用 UI 界面的解析構建都在該線程執行。

UI線程：引擎的核心線程，組件樹的構建以及整個渲染管線的核心邏輯都在該線程：包括渲染樹的構建、布局、繪制以及動畫調度。

GPU線程：現代的渲染引擎，為了充分發揮硬件性能，都支持 GPU 硬件加速，在該線程上，會通過系統的窗口句柄，創建 GPU 加速的 OpenGL 環境，負責將整個渲染樹的內容光柵化，直接將每一幀的內容渲染合成到該窗口的 Surface 上并送顯。

IO線程：主要為了異步的文件 IO 讀寫，同時該線程會創建一個離屏的 GL 環境，這個環境和 GPU 線程的 GL 環境是同一個共享組，可以共享資源，圖片資源解碼的內容可直接在該線程上傳生成 GPU 紋理，實現更高效的圖片渲染。

Javascript運行環境初始化

3.1 時序圖

（點擊圖片查看高清大圖）

3.2 源碼解析

1.OnStart()

AceAbility繼承自Ability，當應用啟動時首先應用程序框架會調用AceAbility的生命周期函數OnStart()；
通過Ability的api獲取Hap包的路徑，通過讀取配置文件manifest.json獲取應用程序配置的前端的類型；
當前我們只關注JS前端，目前支持的前端類型包括enum class FrontendType { JSON, JS, JS_CARD, DECLARATIVE_JS }；
根據前端類型調用ACE核心聚合類AceContainer的靜態方法CreateContainer，這個類是ACE框架平臺適配層的核心類，接下來的前端核心類和JS引擎的創建都是在其中完成的。

//foundationaceace_engineadapterpreviewentranceace_ability.cppvoid AceAbility::OnStart(const Want& want){    ...        //獲取打包的js bundle文件，取出配置文件，獲取前端類型    auto packagePathStr = GetBundleCodePath();    auto moduleInfo = GetHapModuleInfo();    if (moduleInfo != nullptr) {        packagePathStr += "/" + moduleInfo->name + "/";    }    FrontendType frontendType = GetFrontendTypeFromManifest(packagePathStr);
    // create container    //創建AceContainer：內部初始化時創建了js線程，load了js engine，創建了JsFrontend    Platform::CreateContainer(        abilityId_, frontendType, this,        std::make_unique([this]() {            TerminateAbility();        }));    ...    ...
    //運行page    Platform::RunPage(        abilityId_, Platform::GetContainer(abilityId_)->GeneratePageId(),        parsedPageUrl, want.GetStringParam(START_PARAMS_KEY));
    ...}

2. CreateContainer

在AceContainer::CreateContainer中，首先創建了AceContainer對象；
在構造函數中創建了FlutterTaskerExecutor對象用于多線程的任務管理；
此處主要關注JS線程的創建和初始化，在InitJsThread()中創建了JS線程并獲取保存了jsRunner_用于JS任務的派發；

//foundationaceace_engineadapterpreviewentranceace_container.cppvoid AceContainer::CreateContainer(int32_t instanceId, FrontendType type, AceAbility* aceAbility,    std::unique_ptr callback){    auto aceContainer = AceType::MakeRefPtr(instanceId, type, aceAbility, std::move(callback));    AceEngine::Get().AddContainer(instanceId, aceContainer);    auto front = aceContainer->GetFrontend();    if (front) {        front->UpdateState(Frontend::ON_CREATE);        front->SetJsMessageDispatcher(aceContainer);    }}
AceContainer::AceContainer(int32_t instanceId, FrontendType type, AceAbility* aceAbility,    std::unique_ptr callback) : instanceId_(instanceId), type_(type), aceAbility_(aceAbility){    ACE_DCHECK(callback);    //創建和初始化FlutterTaskerExecutor用于封裝管理Flutter ACE中涉及的多個線程：platform，UI，JS，GPU，IO，統一post任務到各線程執行    auto flutterTaskExecutor = Referenced::MakeRefPtr();    //初始化platform線程，將flutter platform線程的TaskerRunner適配到ohos平臺主線程的EventRunner    flutterTaskExecutor->InitPlatformThread();    //初始化JS線程，這個線程用于解析JS，不歸flutter管理，因此是單獨在ACE里使用的    flutterTaskExecutor->InitJsThread();    //taskExector_封裝了所有線程任務調度的接口，因此會傳給Frontend用于JS前端解析任務和PipelineContext后端渲染UI和GPU IO相關    taskExecutor_ = flutterTaskExecutor;    if (type_ != FrontendType::DECLARATIVE_JS) {        //zll:初始化前端        InitializeFrontend();    }
    platformEventCallback_ = std::move(callback);}
void FlutterTaskExecutor::InitJsThread(bool newThread){    //創建并初始化JS線程，獲取保存js線程的TaskRunner    //JS線程是ACE平臺特有，不通過flutter創建管理    if (newThread) {        jsThread_ = std::make_unique(GenJsThreadName());        jsRunner_ = jsThread_->GetTaskRunner();    } else {        jsRunner_ = uiRunner_;    }}

3. JsFrontend

完成JS線程的初始化后，如果前端類型不是DECLARATIVE_JS，會調用InitializeFrontend()對前端進行初始化。
首先創建前端對象，Frontend::Create定義在js_frontend.cpp中，創建的是JsFrontend實例；
然后通過JsEngineLoader::Get()動態加載QjsEngineLoader；
再通過QjsEngineLoader創建QjsEngine并設置給JsFrontend；最后對JsFrontend對象做初始化；
JsFrontend是ACE框架從后端進入前端的唯一入口，AceAbility、AceContainer和JsFrontend是一一對應的關系；

//foundationaceace_engineadapterpreviewentranceace_container.cppvoid AceContainer::InitializeFrontend(){    if (type_ == FrontendType::JS) {        //目前Frontend::Create定義在js_frontend.cpp中，創建的是JsFrontend實例        frontend_ = Frontend::Create();        auto jsFrontend = AceType::DynamicCast(frontend_);        //創建并初始化js engine，此處是通過dlopen加載的qjs engine管理對象        jsFrontend->SetJsEngine(Framework::Get().CreateJsEngine(instanceId_));        ...    } else if (type_ == FrontendType::DECLARATIVE_JS) {        ...    } else {        ...    }    ACE_DCHECK(frontend_);    //初始化前端和js engine    frontend_->Initialize(type_, taskExecutor_);}

4. QjsEngine

接下來我們繼續分析一下JS引擎管理對象的創建；
首先通過dlopen動態加載libace_engine_qjs.z.so通過入口函數創建獲取QjsEngineLoader單例對象；
然后通過QjsEngineLoader::CreateJsEngine()創建QjsEngine；

//foundationaceace_engineframeworksridgejs_frontendenginecommonjs_engine_loader.cpp//"libace_engine_qjs.z.so"動態庫的入口，在qjs_engine_loader.cpp中定義constexpr char JS_ENGINE_ENTRY[] = "OHOS_ACE_GetJsEngineLoader";constexpr char QUICK_JS_ENGINE_SHARED_LIB[] = "libace_engine_qjs.z.so";...const char* GetSharedLibrary(){    return QUICK_JS_ENGINE_SHARED_LIB;}JsEngineLoader& GetJsEngineLoader(const char* sharedLibrary){    void* handle = dlopen(sharedLibrary, RTLD_LAZY);    ...    //    auto loader = reinterpret_cast(entry());    ...
    return *loader;}...//通過加載動態鏈接庫的形式獲取qjs橋接模塊的入口函數并創建QjsEngineLoaderJsEngineLoader& JsEngineLoader::Get(){    static JsEngineLoader& instance = GetJsEngineLoader(GetSharedLibrary());    return instance;}
//foundationaceace_engineframeworksridgejs_frontendenginequickjsqjs_engine_loader.cppRefPtr QjsEngineLoader::CreateJsEngine(int32_t instanceId) const{    return AceType::MakeRefPtr(instanceId);}

5. JS線程

在完成了QjsEngine的創建并設置給JsFrontend后，調用JsFrontend::Initialize()；
這里主要完成了FrontendDelegateImpl對象的創建和初始化將對JS引擎的相關操作委派給這個對象；
以及Post JS引擎初始化的任務到JS線程的TaskRunner的message queue；

//foundationaceace_engineframeworksridgejs_frontendjs_frontend.cppbool JsFrontend::Initialize(FrontendType type, const RefPtr& taskExecutor){    LOGI("JsFrontend initialize begin.");    type_ = type;    ACE_DCHECK(type_ == FrontendType::JS);    //創建并初始化FrontendDelegate對象，具體實現為FrontendDelegateImpl    InitializeFrontendDelegate(taskExecutor);    //在JS線程初始化js engine，真正的啟動JS引擎運行時并創建上下文    taskExecutor->PostTask(        [weakEngine = WeakPtr(jsEngine_), delegate = delegate_] {            auto jsEngine = weakEngine.Upgrade();            if (!jsEngine) {                return;            }            jsEngine->Initialize(delegate);        },        TaskExecutor::JS);
    LOGI("JsFrontend initialize end.");    return true;}

6. jsframework

在JS線程執行QjsEngine對象的初始化，初始化JS運行環境；
初始化JS引擎運行時上下文和初始化JavaScript框架層jsframework；

//foundationaceace_engineframeworksridgejs_frontendenginequickjsqjs_engine.cppbool QjsEngine::Initialize(const RefPtr& delegate){    ACE_SCOPED_TRACE("QjsEngine::Initialize");    LOGI("Initialize");
    JSRuntime* runtime = nullptr;    JSContext* context = nullptr;
    // put JS_NewContext as early as possible to make stack_top in context    // closer to the top stack frame pointer of JS thread.    runtime = JS_NewRuntime();    if (runtime != nullptr) {        context = JS_NewContext(runtime);    }
    ...
    engineInstance_ = AceType::MakeRefPtr(delegate, instanceId_);    return engineInstance_->InitJsEnv(runtime, context);}
bool QjsEngineInstance::InitJsEnv(JSRuntime* runtime, JSContext* context){    ...    context_ = context;    //1.初始化js運行時,上下文    if (!InitJsContext(context_, MAX_STACK_SIZE, instanceId_, this)) {        LOGE("Qjs cannot allocate JS context");        EventReport::JS_ENGINE_INIT_ERR);        JS_FreeRuntime(runtime_);        return false;    }    ...    //2.加載JS Framework，初始化JS前端框架    //加載jsframework，js_framework和js_framework_size是quickjs編譯器編譯jsframework的ts生成的c文件    //quickjs通過JS_ReadObject讀取生成的cbytecode，并通過JS_EvalFunction(ctx, obj)執行相應的函數    //在這里最終調用的函數是jsframework/runtime/preparation/index.ts中的initFramework()函數    JSValue retVal = LoadJsFramework(GetQjsContext(), js_framework, js_framework_size, instanceId_);    bool result = JS_IsException(retVal) ? false : true;    if (context) {        JS_FreeValue(context, retVal);    }    ...
    return result;}

7. ACE模塊

初始化JS引擎運行時上下文是在InitJsContext完成；
其中初始化Ace模塊并將模塊導入JS運行時上下文中，為jsframework框架層提供了ACE功能相關的接口；
jsframework可以通過調用ACE模塊的接口完成Page上Dom元素到后端聲明式UI元素節點的創建；
同時往JS運行時上下文全局對象掛載了日志打印的函數用于對接平臺日志打印功能；

//foundationaceace_engineframeworksridgejs_frontendenginequickjsqjs_engine.cpp//ace模塊向js context暴露的函數，（js函數名，參數個數，對應的C函數）const JSCFunctionListEntry JS_ACE_FUNCS[] = {    JS_CFUNC_DEF_CPP("domCreateBody", 5, JsDomCreateBody),    JS_CFUNC_DEF_CPP("domAddElement", 9, JsDomAddElement),    JS_CFUNC_DEF_CPP("updateElementAttrs", 3, JsUpdateElementAttrs),    JS_CFUNC_DEF_CPP("updateElementStyles", 3, JsUpdateElementStyles),    JS_CFUNC_DEF_CPP("onCreateFinish", 0, JsOnCreateFinish),    JS_CFUNC_DEF_CPP("onUpdateFinish", 0, JsOnUpdateFinish),    JS_CFUNC_DEF_CPP("removeElement", 2, JsRemoveElement),    JS_CFUNC_DEF_CPP("callNative", 1, JsCallNative),    JS_CFUNC_DEF_CPP("callComponent", 3, JsCallComponent),    JS_CFUNC_DEF_CPP("loadIntl", 0, JsLoadIntl),    JS_CFUNC_DEF_CPP("loadLocaleData", 0, JsLoadLocaleData),#ifdef ENABLE_JS_DEBUG    JS_CFUNC_DEF_CPP("compileAndRunBundle", 4, JsCompileAndRunBundle),#endif};...
bool InitJsContext(JSContext* ctx, size_t maxStackSize, int32_t instanceId, const QjsEngineInstance* qjsEngineInstance){    ...        //將ace模塊注入到上下文中，使得jsframework可以通過注冊的接口調用ace的相關功能    // Inject ace native functions module    InitAceModules(ctx);
    JSValue globalObj, perfUtil;    globalObj = JS_GetGlobalObject(ctx);    perfUtil = JS_NewObject(ctx);
    InitJsConsoleObject(ctx, globalObj);
    JS_SetPropertyStr(ctx, perfUtil, "printlog", JS_NewCFunction(ctx, JsPerfPrint, "printlog", 0));    JS_SetPropertyStr(ctx, perfUtil, "sleep", JS_NewCFunction(ctx, JsPerfSleep, "sleep", 1));    JS_SetPropertyStr(ctx, perfUtil, "begin", JS_NewCFunction(ctx, JsPerfBegin, "begin", 1));    JS_SetPropertyStr(ctx, perfUtil, "end", JS_NewCFunction(ctx, JsPerfEnd, "end", 1));    JS_SetPropertyStr(ctx, globalObj, "perfutil", perfUtil);
    ...
    JSValue hiView;    hiView = JS_NewObject(ctx);    JS_SetPropertyStr(ctx, hiView, "report", JS_NewCFunction(ctx, JSHiViewReport, "report", 2));    JS_SetPropertyStr(ctx, globalObj, "hiView", hiView);
    JSValue i18nPluralRules;    i18nPluralRules = JS_NewObject(ctx);    JS_SetPropertyStr(ctx, i18nPluralRules, "select", JS_NewCFunction(ctx, JsPluralRulesFormat, "select", 1));    JS_SetPropertyStr(ctx, globalObj, "i18nPluralRules", i18nPluralRules);        //將ace模塊導入到cxt指定的js 上下文中    const char* str = "import * as ace from 'ace';
"                      "var global = globalThis;
"                      "global.ace = ace;
"#ifdef ENABLE_JS_DEBUG                      "global.compileAndRunBundle = ace.compileAndRunBundle;
"#endif                      "global.callNative = ace.callNative;
";
    if (JS_CALL_FAIL == CallEvalBuf(ctx, str, strlen(str), "", JS_EVAL_TYPE_MODULE, instanceId)) {        LOGW("Qjs created JS context but failed to init Ace modules!");    }
    JS_FreeValue(ctx, globalObj);    return true;}

8. 初始化完成

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

//foundationaceace_engineframeworksridgejs_frontendenginequickjsqjs_engine.cppJSValue LoadJsFramework(JSContext* ctx, const uint8_t buf[], const uint32_t bufSize, int32_t instanceId){    ACE_SCOPED_TRACE("LoadJsFramework");
    LOGI("Qjs loading JS framework");    //等同于調用jsframework/runtime/preparation/index.ts 中的initFramework()    JSValue ret = CallReadObject(ctx, buf, bufSize, true, instanceId);    if (JS_IsException(ret)) {        LOGD("Qjs loading JSFramework failed!");        QjsUtils::JsStdDumpErrorAce(ctx, JsErrorType::LOAD_JS_FRAMEWORK_ERROR, instanceId);    }
    return ret;}

//third_partyjsframework
untimepreparationinit.tsexport function initFramework(): void {  for (const serviceName in i18n) {    service.register(serviceName, i18n[serviceName]);  }  for (const serviceName in dpi) {    service.register(serviceName, dpi[serviceName]);  }  //jsframework提供的可供Ace native在QjsEngine對象中調用的TS方法  const globalMethods: GlobalInterface = {    'createInstance': globalApi.createInstance,    'registerModules': globalApi.registerModules,    'appDestroy': globalApi.appDestroy,    'appError': globalApi.appError,    'destroyInstance': globalApi.destroyInstance,    'getRoot': globalApi.getRoot,    'callJS': globalApi.callJS  };  //注冊modules，這些modules是ACE module提供的，調用這些模塊的方法，會通過調用注冊到qjs_engine的ace模塊中的callNative方法  //會最終通過ace module的callNative調用到qjs_engine中的JsCallNative-->JsHandleModule-->然后調用對應的native方法  // registerModules and registerComponents  ModulesInfo.forEach(modules => {    globalMethods['registerModules'](modules);  });    //注冊components組件，對組件方法的調用，最終會通過ace module的callComponent調用到qjs_engine中的JsCallComponent  ComponentsInfo.forEach((name) => {    if (name && name.type && name.methods) {      NativeElementClassFactory.createNativeElementClass(        name.type,        name.methods      );    }  });  //全局方法，這些方法可以被Qjs engine通過JS_GetPropertyStr(ctx, globalObj, "methodNamge")獲取并調用，從而實現了從native到js的調用  for (const methodName in globalMethods) {    global[methodName] = (...args: any) => {      const res: any = globalMethods[methodName](...args);      if (res instanceof Error) {        Log.error(res.toString());      }      return res;    };  }}