openHarmony子系统之JS-UI框架子系统_openharmoney 开发框架

一、前言

前天学习了openHarmony下如何创建一个组件，可能原理讲的还不是很好，今天就来聊聊背后的子系统，开始了~~

二、简介

JS UI框架是OpenHarmony UI开发框架，提供基础类、容器类、画布类等UI组件和标准CSS动画能力，支持类Web范式编程。下面为框架图

1.类Web范式编程

JS UI框架采用类HTML(即hml，同时还有其他格式的类似htm等等)和CSS Web编程语言作为页面布局和页面样式的开发语言(即UI渲染)，页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的类Web编程范式，可以让开发者避免编写UI状态切换的代码，视图配置信息更加直观。

2. Application

应用层表示开发者使用JS UI框架开发的FA应用，这里的FA应用特指JS FA应用。FA 即 FeatureAbility，面向用户的具有界面UI的，其他ability各具特点，这里不一一进行介绍了，可以参考官网ability框架介绍

3. Framework

这部分采用主流的框架MVVM即Model-View-ViewModel，视图和处理逻辑分离的优秀架构，目前还是谷歌安卓官方推荐的架构

4. Engine

引擎层主要提供动画解析、DOM（Document Object Model）树构建、布局计算、渲染命令构建与绘制、事件管理等能力。这部分平时开发的时候涉及的比较少，属于基础领域的开发，主要用于提高用户体验和整体的性能改善。

5. Porting Layer

适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台。比如：事件对接、渲染管线对接和系统生命周期对接等。这部分主要用于系统之间的通信部分，算是一个应用和系统交互的一个桥梁。

三、系统的目录

JS UI开发框架源代码在/foundation/ace下，目录结构如下图所示：

/foundation/ace
├── ace_engine                       # JS UI框架
├── ace_engine_lite                  # 轻量级JS UI框架
└── napi                             # JS API扩展Native开发模块
1
2
3
4

这部分感兴趣的可以去翻翻源码具体感受子系统的设计部分

四、创建项目的目录

这部分就是开发应用的时候经常会看到的，即空项目的目录，JS-UI子系统主要负责界面部分，以下即任何界面都必备的三种格式的文件，以及每个项目都具有的app.js进行协调各个界面的JS文件

1.pages 目录下的 css，hml，js

这部分在昨天已经详细的讲述过了，这里再次简单的介绍一下，css用于界面的渲染，hml负责各种组件等的声明，js负责具体逻辑

2.i18n

这部分主要用于存放各个语言的js文件，主要是配合实现不同国家语言的适配和差异化

3.resources

这部分主要存放一下图片资源等等

4.app.js

这个是全局的application，作用于全部的界面，可以编写一些基础逻辑，方便各个界面之间的协调

五、总结

简单的叙述了平时接触的比较多的子系统，加深对于构建一个openHarmony应用的理解，其他子系统的学习具体可以参考官网openHarmony子系统,下一篇见~~