簡介
JS應用開發框架,提供了一套跨平臺的類web應用開發框架,通過Toolkit將開發者編寫的HML、CSS和JS 文件編譯打包成JS Bundle,解析運行JS Bundle,生成native UI View組件樹並進行渲染顯示。通過支持三方開發者使用聲明式的API進行應用開發,以數據驅動視圖變化,避免大量的視圖操作,大大降低應用開發難度,提升開發者開發體驗。
JS應用框架模塊組成如下圖所示:
目錄
JS應用開發框架原始碼在/foundation/ace下,目錄結構如下圖所示:
/foundation/ace├── frameworks # 框架代碼│ └── lite│ ├── examples # 示例代碼目錄│ ├── include # 對外暴露頭文件存放目錄│ ├── packages # 框架JS實現存放目錄│ ├── src # 原始碼存放目錄│ ├── targets # 各目標設備配置文件存放目錄│ └── tools # 工具代碼存放目錄├── interfaces # 對外接口存放目錄│ └── innerkits # 對內部子系統暴露的頭文件存放目錄│ └── builtin# JS應用框架對外暴露JS三方module API接口存放目錄約束
語言版本:C++11版本或以上JavaScript ES5.1框架運行內存通常分為如下組成部分:JS引擎運行時內存:可調,取決於具體設備應用複雜度,通常建議64K~512K框架本身native內存:在百K級的內存設備上,建議預分配一個與native UI共用的內存池,用於native內存的管理框架針對不同的晶片平臺和底層OS能力,規格有所區別:JS引擎內存池: 建議大於128KRAM:建議大於512KROM:> 2M (包含JS應用框架,以及native UI和JS引擎等強相關子系統)JS引擎內存池: 建議大於48KRAM:建議與native UI共用內存池,大於80KROM: > 300K (包含JS應用框架,以及native UI和JS引擎等強相關子系統)Cortex-M RAM/ROMCortex-A RAM/ROM使用targets
JS應用框架實現主要包含兩部分:
native部分:使用C++進行編寫,是框架主體實現;JavaScript部分:提供JS應用框架對用戶JS文件的運行時支持,並通過向引擎暴露一些全局方法和對象,支撐JS運行時與native框架之間的交互。JS應用框架通過一些特性宏來定製不同平臺上參與編譯的功能代碼,該部分特性宏定義在 foundation/ace/frameworks/lite/targets 目錄下頭文件內,目錄結構如下:
/foundation/ace/frameworks/lite/targets├── default/│ └── acelite_config.h├── linux/ # linux環境配置文件目錄│ └── acelite_config.h├── liteos_a/ # LiteOS A核環境配置文件目錄│ └── acelite_config.h├── liteos_m/ # LiteOS M核環境配置文件目錄│ └── acelite_config.h├── platform_adapter.cpp├── platform_adapter.h└── simulator/ # 模擬器環境配置文件目錄 └── 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") { // 通過目標內核平臺選擇不同的頭文件搜索路徑 include_dirs += [ "targets/liteos-a" ] } elseif (ohos_kernel_type == "linux") { include_dirs += [ "targets/linux" ] }acelite_config.h主要用於對應平臺的特性宏開關,也可用來進行一些屏蔽平臺差異的定義。如不同平臺由於使用的文件系統不一致,可能存在一些固定目錄路徑名不一樣的情況,這些有區別的常量可以放在這裡進行定義,如下:
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
為了實現單向數據綁定機制,JS應用框架使用JavaScript語言實現了一套簡單的數據劫持框架,稱之為runtime-core,目錄結構如下所示:
/foundation/ace/frameworks/lite/packages└── runtime-core ├── .babelrc # babel配置文件 ├── .editorconfig # IDE配置文件 ├── .eslintignore # ESLint配置文件,可以設置不進行ESLint掃描的目錄或文件 ├── .eslintrc.js # ESLint配置文件,可以配置掃描規則 ├── .gitignore ├── package.json # NPM包管理文件 ├── package-lock.json # NPM依賴版本鎖定文件 ├── .prettierrc # 代碼格式化規則配置文件 ├── scripts # 編譯腳本存放目錄 │ ├── build.js # 編譯腳本 │ └── configs.js # Rollup配置文件 ├── .size-snapshot.json └── src # 原始碼 ├── core # ViewModel核心實現目錄 │ └── index.js ├── index.js ├── observer # 數據劫持部分代碼實現目錄 │ ├── index.js │ ├── observer.js │ ├── subject.js │ └── utils.js ├── profiler # profiler目錄 │ └── index.js └── __test__ # 測試用例目錄 └── index.test.js支持的NPM 命令有:
npm run buildJS應用框架所集成的JS引擎僅支持ES5.1語法,runtime-core原始碼是使用ES6語法書寫的。因此選擇使用rollup做為打包工具,配合babel實現對語法進行降級處理。命令行中執行npm run build,會在build目錄下輸出打包結果,輸出結果如下所示:build/├── framework-dev.js // 開發環境使用的框架代碼(未壓縮混淆)├── framework-dev.min.js // 開發環境使用的框架代碼(已壓縮混淆)├── framework.js // 生產環境使用的框架代碼(未壓縮混淆)└── framework.min.js // 生產環境使用的框架代碼(已壓縮混淆)npm run testruntime-core使用jest進行單元測試,在命令行中執行npm run test即可觸發。項目地址
項目地址:https://gitee.com/openharmony/ace_lite_jsfwk