当前位置: 首页 > 科技观察

Harmonyos轻量级JS核心开发框架

时间:2023-03-12 05:01:47 科技观察

更多内容请访问:Harmonyos技术社区https://harmonyos.51cto.com/#zzJS应用开发框架简介,提供了一套跨平台的web应用开发框架,将开发者编写的HML、CSS、JS文件通过Toolkit编译打包成JSBundle,解析运行JSBundle,生成原生UIView组件树并渲染展示。通过支持第三方开发者使用声明式API进行应用开发,数据驱动视图变更,避免大量视图操作,大大降低应用开发难度,提升开发者开发体验。JS应用框架模块组成如下图:目录JS应用开发框架源代码在/foundation/ace下,目录结构如下图:/foundation/ace├──frameworks#framework代码│└──lite│├───examples#示例代码目录│├──include#暴露头文件存放目录│├──packages#FrameworkJS实现存放目录│├──src#源代码存放目录│├──targets#各个目标设备配置文件存放目录│└──tools#工具代码存放目录├──interfaces#外部接口存放目录│└──innerkits#暴露给内部子系统的头文件存放目录│└──builtin#JS应用框架对外暴露JS三方模块API接口存储目录约束语言版本:C++11以上版本JavaScriptES5.1框架运行内存通常分为以下几个部分:JS引擎运行内存:可调,依赖ng在具体设备应用的复杂度上,通常建议64K~512K框架本身的nativememory:在100K级别的内存设备上,建议预先分配一个与nativeUI共享的内存池。不同芯片平台和底层OS能力对nativememory的管理框架不同,规格也不同:Cortex-MRAM/ROMJS引擎内存池:建议大于48KRAM:建议共享内存池nativeUI,大于80KROM:>300K(包括JS应用框架,以及nativeUI和JS引擎等强相关子系统)Cortex-ARAM/ROMJS引擎内存池:推荐大于128KRAM:推荐大于512KROM:>2M(包括JS应用框架,以及原生UI、JS引擎等强相关子系统)使用targetsJS应用框架主要包括两部分:原生部分:C++编写,为主体框架;JavaScript部分:为用户JS文件提供JS应用框架的运行时支持,通过向引擎暴露一些全局的方法和对象来支持JS运行时与原生框架的交互。JS应用框架使用一些特性宏来自定义参与不同平台编译的函数代码。功能宏定义在foundation/ace/frameworks/lite/targets目录下的头文件中。目录结构如下:/foundation/ace/frameworks/lite/targets├──default/│└──acelite_config.h├──linux/#linux环境配置文件目录│└──acelite_config.h├──liteos_a/#LiteOSA核环境配置文件目录│└──acelite_config.h├──liteos_m/#LiteOSM核心环境配置文件目录│└──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"]}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")#headerfilesinclude_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主要用于对应平台的特征宏切换,可以也被用于一些掩蔽平台差异的定义如果不同的平台使用不一致的文件系统,可能会有一些固定的目录路径名不同。这些不同的常量可以在这里定义,如下:liteos-a/acelite_config.h#defineJS_FRAMEWORK_PATH"//system/ace/bin/"simulator/win/acelite_config.h#defineJS_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__#testcase目录└──index.test.js支持的NPM命令有:npmrunbuildJS应用框架集成的JS引擎只支持ES5.1语法,runtime-core的源码是用ES6语法写的,所以我们选择使用rollup作为打包工具,配合babel实现语法的降级处理。在命令行执行npmrunbuild会在build目录下输出打包结果,输出结果如下:build/├──framework-dev.js//开发环境使用的框架代码(解压混淆)├──framework-dev.min.js//开发环境使用的框架代码(压缩混淆)├──framework.js//生产环境使用的框架代码(未压缩混淆)└──framework.min.js//生产环境使用的框架代码(压缩混淆)npmruntestruntime-core使用jest进行单元测试,在命令行执行npmruntest即可触发。涉及仓库ace_lite_jsfwkace_interfaces_innerkits_builtin附件为轻量级JS核心开发框架相关代码更多信息请访问:与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz