• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# JS语法参考
2
3
4JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计。下面讲述JS文件的编译和运行的支持情况。
5
6
7## 语法
8
9支持ES6语法。轻量级智能穿戴支持的ES6语法有限，仅支持以下ES6 语法：
10
111. let/const
12
132. arrow functions
14
153. class
16
174. default value
18
195. destructuring assignment
20
216. destructuring binding pattern
22
237. enhanced object initializer
24
258. for-of
26
279. rest parameter
28
2910. template strings
30
31- 模块声明
32  使用import方法引入功能模块：
33
34
35  ```
36  import router from '@ohos.router';
37  ```
38
39- 代码引用
40  使用import方法导入js代码：
41
42
43  ```
44  import utils from '../../common/utils.js';
45  ```
46
47
48## 对象
49
50- 页面对象
51    | 属性    | 类型              | 描述                                       |
52    | ----- | --------------- | ---------------------------------------- |
53    | data  | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for,&nbsp;if,&nbsp;show,&nbsp;tid。<br/> |
54    | $refs | Object          | 持有注册过ref&nbsp;属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 |
55
56
57## 获取DOM元素
58
591. 通过$refs获取DOM元素
60
61   ```html
62   <!-- index.hml -->
63   <div class="container">
64     <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
65   </div>
66   ```
67
68
69   ```js
70   // index.js
71   export default {
72     data: {
73       images: [
74         { src: '/common/frame1.png' },
75         { src: '/common/frame2.png' },
76         { src: '/common/frame3.png' },
77       ],
78     },
79     handleClick() {
80       const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
81       const state = animator.getState();
82       if (state === 'paused') {
83         animator.resume();
84       } else if (state === 'stopped') {
85         animator.start();
86       } else {
87         animator.pause();
88       }
89     },
90   };
91   ```
92
93
94## 生命周期接口
95
96- 页面生命周期
97    | 属性        | 类型       | 参数   | 返回值  | 描述     | 触发时机                |
98    | --------- | -------- | ---- | ---- | ------ | ------------------- |
99    | onInit    | Function | 无    | 无    | 页面初始化  | 页面数据初始化完成时触发，只触发一次。 |
100    | onReady   | Function | 无    | 无    | 页面创建完成 | 页面创建完成时触发，只触发一次。    |
101    | onShow    | Function | 无    | 无    | 页面显示   | 页面显示时触发。            |
102    | onHide    | Function | 无    | 无    | 页面消失   | 页面消失时触发。            |
103    | onDestroy | Function | 无    | 无    | 页面销毁   | 页面销毁时触发。            |
104
105    页面A的生命周期接口的调用顺序：
106  - 打开页面A：onInit() -&gt; onReady() -&gt; onShow()
107
108  - 在页面A打开页面B：onHide() -&gt; onDestroy()
109
110  - 从页面B返回页面A：onInit() -&gt; onReady() -&gt; onShow()
111
112  - 退出页面A：onHide() -&gt; onDestroy()
113
114  - 页面隐藏到后台运行：onHide()
115
116  - 页面从后台运行恢复到前台：onShow()
117
118- 应用生命周期
119    | 属性        | 类型       | 参数   | 返回值  | 描述   | 触发时机      |
120    | --------- | -------- | ---- | ---- | ---- | --------- |
121    | onCreate  | Function | 无    | 无    | 应用创建 | 当应用创建时调用。 |
122    | onDestroy | Function | 无    | 无    | 应用退出 | 当应用退出时触发。 |
123