[[351663]]

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

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

https://harmonyos.51cto.com/#zz

 簡(jiǎn)介

JS應(yīng)用開(kāi)發(fā)框架，提供了一套跨平臺(tái)的類(lèi)web應(yīng)用開(kāi)發(fā)框架，通過(guò)Toolkit將開(kāi)發(fā)者編寫(xiě)的HML、CSS和JS 文件編譯打包成JS Bundle，解析運(yùn)行JS Bundle，生成native UI View組件樹(shù)并進(jìn)行渲染顯示。通過(guò)支持三方開(kāi)發(fā)者使用聲明式的API進(jìn)行應(yīng)用開(kāi)發(fā)，以數(shù)據(jù)驅(qū)動(dòng)視圖變化，避免大量的視圖操作，大大降低應(yīng)用開(kāi)發(fā)難度，提升開(kāi)發(fā)者開(kāi)發(fā)體驗(yàn)。

JS應(yīng)用框架模塊組成如下圖所示：

目錄

JS應(yīng)用開(kāi)發(fā)框架源代碼在/foundation/ace下，目錄結(jié)構(gòu)如下圖所示：

/foundation/ace 
├── frameworks # 框架代碼 
│   └── lite 
│       ├── examples # 示例代碼目錄 
│       ├── include # 對(duì)外暴露頭文件存放目錄 
│       ├── packages # 框架JS實(shí)現(xiàn)存放目錄 
│       ├── src # 源代碼存放目錄 
│       ├── targets # 各目標(biāo)設(shè)備配置文件存放目錄 
│       └── tools # 工具代碼存放目錄 
├── interfaces # 對(duì)外接口存放目錄 
│   └── innerkits # 對(duì)內(nèi)部子系統(tǒng)暴露的頭文件存放目錄 
│       └── builtin # JS應(yīng)用框架對(duì)外暴露JS三方module API接口存放目錄 

 約束

語(yǔ)言版本：

C++11版本或以上

JavaScript ES5.1

框架運(yùn)行內(nèi)存通常分為如下組成部分：

JS引擎運(yùn)行時(shí)內(nèi)存：可調(diào)，取決于具體設(shè)備應(yīng)用復(fù)雜度，通常建議64K~512K

框架本身native內(nèi)存：在百K級(jí)的內(nèi)存設(shè)備上，建議預(yù)分配一個(gè)與native UI共用的內(nèi)存池，用于native內(nèi)存的管理

框架針對(duì)不同的芯片平臺(tái)和底層OS能力，規(guī)格有所區(qū)別：

Cortex-M RAM/ROM

• JS引擎內(nèi)存池: 建議大于48K
• RAM：建議與native UI共用內(nèi)存池，大于80K
• ROM: > 300K (包含JS應(yīng)用框架，以及native UI和JS引擎等強(qiáng)相關(guān)子系統(tǒng))

Cortex-A RAM/ROM

• JS引擎內(nèi)存池: 建議大于128K
• RAM：建議大于512K
• ROM：> 2M (包含JS應(yīng)用框架，以及native UI和JS引擎等強(qiáng)相關(guān)子系統(tǒng))

使用targets

JS應(yīng)用框架實(shí)現(xiàn)主要包含兩部分：

native部分：使用C++進(jìn)行編寫(xiě)，是框架主體實(shí)現(xiàn);

JavaScript部分：提供JS應(yīng)用框架對(duì)用戶(hù)JS文件的運(yùn)行時(shí)支持，并通過(guò)向引擎暴露一些全局方法和對(duì)象，支撐JS運(yùn)行時(shí)與native框架之間的交互。

JS應(yīng)用框架通過(guò)一些特性宏來(lái)定制不同平臺(tái)上參與編譯的功能代碼，該部分特性宏定義在 foundation/ace/frameworks/lite/targets 目錄下頭文件內(nèi)，目錄結(jié)構(gòu)如下：

/foundation/ace/frameworks/lite/targets 
├── default/ 
│   └── acelite_config.h 
├── linux/ # linux環(huán)境配置文件目錄 
│   └── acelite_config.h 
├── liteos_a/ # LiteOS A核環(huán)境配置文件目錄 
│   └── acelite_config.h 
├── liteos_m/ # LiteOS M核環(huán)境配置文件目錄 
│   └── acelite_config.h 
├── platform_adapter.cpp 
├── platform_adapter.h 
└── simulator/ # 模擬器環(huán)境配置文件目錄 
    └── win/ 
        └── acelite_config.h* 

 在編譯不同的平臺(tái)目標(biāo)時(shí)，需要使用對(duì)應(yīng)平臺(tái)目錄下的acelite_config.h頭文件，這可以通過(guò)配置編譯時(shí)的搜索路徑來(lái)進(jìn)行，以下以ninja和cmake構(gòu)建工具為例進(jìn)行示例：

ninja：

if (ohos_kernel_type == "liteos_a" || ohos_kernel_type== "liteos_m" || 
     ohos_kernel_type == "liteos_riscv") { // 通過(guò)目標(biāo)內(nèi)核平臺(tái)選擇不同的頭文件搜索路徑 
   include_dirs += [ "targets/liteos-a" ] 
 } else if (ohos_kernel_type == "linux") { 
   include_dirs += [ "targets/linux" ] 
 } 

 cmake： 

...... 
set(ACE_LITE_CONFIG_PATH "${CMAKE_CURRENT_SOURCE_DIR}/targets/simulator/win") # 模擬器編譯搜索路徑使用targets/simulator/win 
set(JSFWK_INCLUDE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/include") 
set(JSFWK_SOURCE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/src/core") 
set(UIKIT_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../ui") 
set(THIRTY_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../third_party") 
set(JSFWK_SIMULATOR_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../tools/simulator") 
set(JS_API_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../api/emui_band/MoltenCore/application/framework/ace/api") 
set(JSFWK_SIMULATOR_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../tools/simulator") 
set(AAFWK_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../../../aafwk") 
 
# header files 
include_directories( 
    ${ACE_LITE_CONFIG_PATH} 
    ${JSFWK_INCLUDE_PATH}/async 
    ${JSFWK_INCLUDE_PATH}/base 
    ${JSFWK_INCLUDE_PATH}/context 
    ${JSFWK_INCLUDE_PATH}/jsi 
    ${JSFWK_SOURCE_PATH} 
    ...... 

acelite_config.h主要用于對(duì)應(yīng)平臺(tái)的特性宏開(kāi)關(guān)，也可用來(lái)進(jìn)行一些屏蔽平臺(tái)差異的定義。如不同平臺(tái)由于使用的文件系統(tǒng)不一致，可能存在一些固定目錄路徑名不一樣的情況，這些有區(qū)別的常量可以放在這里進(jìn)行定義，如下：

liteos-a/acelite_config.h

#define JS_FRAMEWORK_PATH "//system/ace/bin/" 

simulator/win/acelite_config.h

#define JS_FRAMEWORK_PATH "..\\..\\..\\jsfwk\\packages\\runtime-core\\build" 

使用runtime-core

為了實(shí)現(xiàn)單向數(shù)據(jù)綁定機(jī)制，JS應(yīng)用框架使用JavaScript語(yǔ)言實(shí)現(xiàn)了一套簡(jiǎn)單的數(shù)據(jù)劫持框架，稱(chēng)之為runtime-core，目錄結(jié)構(gòu)如下所示：

/foundation/ace/frameworks/lite/packages 
└── runtime-core 
    ├── .babelrc # babel配置文件 
    ├── .editorconfig # IDE配置文件 
    ├── .eslintignore # ESLint配置文件，可以設(shè)置不進(jìn)行ESLint掃描的目錄或文件 
    ├── .eslintrc.js # ESLint配置文件，可以配置掃描規(guī)則 
    ├── .gitignore 
    ├── package.json # NPM包管理文件 
    ├── package-lock.json # NPM依賴(lài)版本鎖定文件 
    ├── .prettierrc # 代碼格式化規(guī)則配置文件 
    ├── scripts # 編譯腳本存放目錄 
    │   ├── build.js # 編譯腳本 
    │   └── configs.js # Rollup配置文件 
    ├── .size-snapshot.json 
    └── src # 源代碼 
        ├── core # ViewModel核心實(shí)現(xiàn)目錄 
        │   └── index.js 
        ├── index.js 
        ├── observer # 數(shù)據(jù)劫持部分代碼實(shí)現(xiàn)目錄 
        │   ├── index.js 
        │   ├── observer.js 
        │   ├── subject.js 
        │   └── utils.js 
        ├── profiler # profiler目錄 
        │   └── index.js 
        └── __test__ # 測(cè)試用例目錄 
            └── index.test.js 

支持的NPM 命令有：

npm run build

JS應(yīng)用框架所集成的JS引擎僅支持ES5.1語(yǔ)法，runtime-core源代碼是使用ES6語(yǔ)法書(shū)寫(xiě)的。因此選擇使用rollup做為打包工具，配合babel實(shí)現(xiàn)對(duì)語(yǔ)法進(jìn)行降級(jí)處理。命令行中執(zhí)行npm run build，會(huì)在build目錄下輸出打包結(jié)果，輸出結(jié)果如下所示：

build/ 
├── framework-dev.js // 開(kāi)發(fā)環(huán)境使用的框架代碼（未壓縮混淆） 
├── framework-dev.min.js // 開(kāi)發(fā)環(huán)境使用的框架代碼（已壓縮混淆） 
├── framework.js // 生產(chǎn)環(huán)境使用的框架代碼（未壓縮混淆） 
└── framework.min.js // 生產(chǎn)環(huán)境使用的框架代碼（已壓縮混淆） 

 npm run test

runtime-core使用jest進(jìn)行單元測(cè)試，在命令行中執(zhí)行npm run test即可觸發(fā)。

涉及倉(cāng)

ace_lite_jsfwk

ace_interfaces_innerkits_builtin

附件為輕量級(jí)JS核心開(kāi)發(fā)框架相關(guān)代碼

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

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

https://harmonyos.51cto.com/#zz