一、前言
前天学习了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开发模块这部分感兴趣的可以去翻翻源码具体感受子系统的设计部分
四、创建项目的目录
这部分就是开发应用的时候经常会看到的，即空项目的目录，JS-UI子系统主要负责界面部分，以下即任何界面都必备的三种格式的文件，以及每个项目都具有的app.js进行协调各个界面的JS文件
1.pages 目录下的 css，hml，js
这部分在昨天已经详细的讲述过了，这里再次简单的介绍一下，css用于界面的渲染，hml负责各种组件等的声明，js负责具体逻辑
2.i18n
这部分主要用于存放各个语言的js文件，主要是配合实现不同国家语言的适配和差异化
3.resources
这部分主要存放一下图片资源等等
4.app.js
这个是全局的application，作用于全部的界面，可以编写一些基础逻辑，方便各个界面之间的协调
五、总结
简单的叙述了平时接触的比较多的子系统，加深对于构建一个openHarmony应用的理解，其他子系统的学习具体可以参考官网openHarmony子系统,下一篇见~~
