提交 6fca5bb1 编写于 作者: Y yamila

update ets-language

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 247f0ef8
......@@ -9,15 +9,17 @@
- 开发基础知识
- [应用包结构说明(FA模型)](package-structure.md)
- [应用包结构说明(Stage模型)](stage-structure.md)
- [初始ets语言](ets-language.md)
- eTS语法(声明式UI)
- [基本UI描述](ets-ui.md)
- 状态管理
- [基本概念](ets-state-management-concepts.md)
- [页面级变量的状态管理](ets-managing-component-states.md)
- [应用级变量的状态管理](ets-managing-application-states.md)
- [动态构建UI元素](ets-dynamically-build-ui-elememts.md)
- [渲染控制](ets-syntactic-usage.md)
- [使用限制与扩展](ets-usage-restrictions-and-extensions.md)
- [SysCap说明](syscap.md)
- [HarmonyAppProvision配置文件](app-provision-structure.md)
\ No newline at end of file
- [HarmonyAppProvision配置文件](app-provision-structure.md)
- 学习eTS语言
- [初识ets语言](ets-get-started.md)
- eTS语法(声明式UI)
- [基本UI描述](ets-basic-ui-description.md)
- 状态管理
- [基本概念](ets-state-mgmt-concepts.md)
- [页面级变量的状态管理](ets-state-mgmt-page-level.md)
- [应用级变量的状态管理](ets-state-mgmt-application-level.md)
- [动态构建UI元素](ets-dynamic-ui-elememt-building.md)
- [渲染控制](ets-rendering-control.md)
- [使用限制与扩展](ets-restrictions-and-extensions.md)
\ No newline at end of file
# 初始eTs语言
# 初识eTS语言
eTS(extended TypeScript)是OpenHarmony优选的主力应用开发语言。eTS基于TypeScript(简称TS)语言扩展而来,是TS的超集。
- eTS继承了TS的所有特性。
- 当前,eTS在ts基础上主要扩展了[声明式UI](ets-ui.md)能力,让开发者以更简洁、更自然的方式开发高性能应用。
- 当前,eTS在TS基础上主要扩展了[声明式UI](ets-basic-ui-description.md)能力,让开发者以更简洁、更自然的方式开发高性能应用。
当前扩展的声明式UI包括如下特性。
- [基本UI描述](ets-state-management-concepts.md):eTS定义了各种装饰器、自定义组件、UI描述机制,再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了UI开发的主体。
- [状态管理](ets-managing-component-states.md):eTS提供了多维度的状态管理机制,在UI开发框架中,和UI相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,也可以是全局范围内的传递,还可以是 跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
- [动态构建UI元素](ets-dynamically-build-ui-elememts.md):eTS提供了动态构建UI元素的能力,不仅可以自定义组件内部的UI结构,还可复用组件样式,扩展原生组件。
- [渲染控制](ets-syntactic-usage.md):eTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的部分内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。
- [使用限制与扩展](ets-usage-restrictions-and-extensions.md):eTS在使用过程中存在限制与约束,同时也扩展了双向绑定等能力。
- [基本UI描述](ets-basic-ui-description.md):eTS定义了各种装饰器、自定义组件、UI描述机制,再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了UI开发的主体。
- [状态管理](ets-state-mgmt-page-level.md):eTS提供了多维度的状态管理机制,在UI开发框架中,和UI相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,也可以是全局范围内的传递,还可以是 跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
- [动态构建UI元素](ets-dynamic-ui-elememt-building.md):eTS提供了动态构建UI元素的能力,不仅可以自定义组件内部的UI结构,还可复用组件样式,扩展原生组件。
- [渲染控制](ets-rendering-control.md):eTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的部分内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。
- [使用限制与扩展](ets-restrictions-and-extensions.md):eTS在使用过程中存在限制与约束,同时也扩展了双向绑定等能力。
- 未来,eTS会结合应用开发/运行的需求持续演进,逐步提供并行和并发能力增强、类型系统增强、分布式开发范式等更多特性。
下面我们以一个具体的示例来说明eTS的基本组成。如下图所示的代码示例,UI界面会两段文本和一个按钮,当开发者点击按钮时,文本内容会从'Hello World'变为 'Hello ArkUI'。
![ets-get-started](figures/ets-get-started.png)
这个示例中所包含的eTS声明式开发范式的基本组成说明如下:
- 装饰器: 用于装饰类、结构、方法以及变量,赋予其特殊的含义,如上述示例中@Entry、@Component和@State都是装饰器。 具体而言,@Component表示这是个自定义组件;@Entry则表示这是个入口组件;@State表示组件中的状态变量,这个状态变换会引起UI变更。
......@@ -25,4 +27,4 @@ eTS(extended TypeScript)是OpenHarmony优选的主力应用开发语言。eT
- UI描述:声明式的方法来描述UI的结构,例如build()方法中的代码块。
- 内置组件:eTS中默认内置的基本组件和布局组件,开发者可以直接调用,如Column、Text、Divider、Button等。
- 属性方法:用于组件属性的配置,如fontSize()、width()、height()、color()等,可通过链式调用的方式设置多项属性。
- 事件方法:用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。
\ No newline at end of file
- 事件方法:用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。
......@@ -34,14 +34,14 @@ Column() {
## 循环渲染
开发框架提供循环渲染(ForEach组件)来迭代数组,并为每个数组项创建相应的组件。当循环渲染的元素较多时,会出现页面加载变慢的情况,出于性能考虑,建议使用[LazyForEach](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md)代替。ForEach定义如下:
通过循环渲染(ForEach组件)来迭代数组,并为每个数组项创建相应的组件,可减少代码复杂度。
```
ForEach(
arr: any[], // Array to be iterated
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)
ForEach(
arr: any[],
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)
```
**参数:**
......@@ -63,6 +63,7 @@ ForEach(
> ```
> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }),
> item => Text(`${item.i}. item.data.label`),
> item => item.data.id.toString())
> ```
## 示例
......
......@@ -381,12 +381,9 @@ Provide作为数据的提供方,可以更新其子孙节点的数据,并触
表2 @Consume
| 名称 | 说明 |
| -------------- | ------------------------------------------------------------ |
| 装饰器参数 | 是一个string类型的常量,用于给装饰的变量起别名。如果规定别名,则提供对应别名的数据更新。如果没有,则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 |
| 同步机制 | @Provide的变量类似@State,可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量,反向修改@State变量。 |
| 初始值 | 不可设置默认值。 |
| 页面重渲染场景 | 触发页面渲染的修改: <br/>- 基础类型(boolean,string,number)变量的改变; <br/>- @Observed class类型变量及其属性的修改; <br/>- 添加,删除,更新数组中的元素。 |
| 类型 | 说明 |
| ------ | ---------------- |
| 初始值 | 不可设置默认值。 |
### 示例
......
......@@ -12,7 +12,7 @@
- [资源文件的分类](ui-ts-basic-resource-file-categories.md)
- [资源访问](ts-resource-access.md)
- [像素单位](ts-pixel-units.md)
- 声明式语法
- 深入理解组件化
- [自定义组件初始化](ts-custom-component-initialization.md)
- [自定义组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册