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

JS應用框架模塊組成如下圖所示：

目錄

JS應用開發(fā)框架源代碼在/foundation/ace下，目錄結(jié)構如下圖所示：

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

約束

語言版本：

C++11版本或以上

JavaScript ES5.1

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

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

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

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

Cortex-M RAM/ROM

JS引擎內(nèi)存池: 建議大于48K

RAM：建議與native UI共用內(nèi)存池，大于80K

ROM: > 300K （包含JS應用框架，以及native UI和JS引擎等強相關子系統(tǒng)）

Cortex-A RAM/ROM

JS引擎內(nèi)存池: 建議大于128K

RAM：建議大于512K

ROM：> 2M （包含JS應用框架，以及native UI和JS引擎等強相關子系統(tǒng)）

使用targets

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

native部分：使用C++進行編寫，是框架主體實現(xiàn)；

JavaScript部分：提供JS應用框架對用戶JS文件的運行時支持，并通過向引擎暴露一些全局方法和對象，支撐JS運行時與native框架之間的交互。

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

/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*

在編譯不同的平臺目標時，需要使用對應平臺目錄下的acelite_config.h頭文件，這可以通過配置編譯時的搜索路徑來進行，以下以ninja和cmake構建工具為例進行示例：

ninja：

? if (ohos_kernel_type == "liteos_a" || ohos_kernel_type== "liteos_m" ||? ? ? ohos_kernel_type == "liteos_riscv") { // 通過目標內(nè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/winset(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 filesinclude_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主要用于對應平臺的特性宏開關，也可用來進行一些屏蔽平臺差異的定義。如不同平臺由于使用的文件系統(tǒng)不一致，可能存在一些固定目錄路徑名不一樣的情況，這些有區(qū)別的常量可以放在這里進行定義，如下：

liteos-a/acelite_config.h

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

simulator/win/acelite_config.h

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

使用runtime-core

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

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

支持的NPM 命令有：

npm run build

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

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

npm run test

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

涉及倉

ace_lite_jsfwk

ace_interfaces_innerkits_builtin