1# JavaScript 2 3 4You can use a **.js** file in the ECMAScript compliant JavaScript language to define the service logic of an HML page. With dynamic typing, JavaScript can make your application more expressive with a flexible design. The following describes the JavaScript compilation and running. 5 6 7## Syntax 8 9The ECMAScript 6.0 syntax is supported. Lite wearables only support the following ECMAScript 6.0 syntax: 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- Module declaration 32 Import functionality modules. 33 34 35 ``` 36 import router from '@ohos.router'; 37 ``` 38 39- Code reference 40 Import JavaScript code. 41 42 43 ``` 44 import utils from '../../common/utils.js'; 45 ``` 46 47 48## Objects 49 50- Page objects 51 | Attribute | Type | Description | 52 | ----- | --------------- | ---------------------------------------- | 53 | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).<br>| 54 | $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element).| 55 56 57## Obtaining a DOM Element 58 59Use **$refs** to obtain a DOM element. 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; // Obtain the DOM element whose $refs attribute is animator. 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## Lifecycle APIs 95 96- Page lifecycle APIs 97 | Name | Type | Parameter | Return Value | Description | Triggered When | 98 | --------- | -------- | ---- | ---- | ------ | ------------------- | 99 | onInit | Function | N/A | N/A | Listens for page initialization. | Page initialization is complete. This API is called only once in the page lifecycle.| 100 | onReady | Function | N/A | N/A | Listens for page creation.| A page is created. This API is called only once in the page lifecycle. | 101 | onShow | Function | N/A | N/A | Listens for page display. | The page is displayed. | 102 | onHide | Function | N/A | N/A | Listens for page disappearance. | The page disappears. | 103 | onDestroy | Function | N/A | N/A | Listens for page destruction. | The page is destroyed. | 104 105 The lifecycle APIs of page A are called in the following sequence: 106 - Open page A: onInit() -> onReady() -> onShow() 107 108 - Open page B on page A: onHide() -> onDestroy() 109 110 - Go back to page A from page B: onInit() -> onReady() -> onShow() 111 112 - Exit page A: onHide() -> onDestroy() 113 114 - Hide page A: onHide() 115 116 - Show background page A on the foreground: onShow() 117 118- Application lifecycle APIs 119 | Name | Type | Parameter | Return Value | Description | Triggered When | 120 | --------- | -------- | ---- | ---- | ---- | --------- | 121 | onCreate | Function | N/A | N/A | Listens for application creation.| The application is created.| 122 | onDestroy | Function | N/A | N/A | Listens for application exit.| The application exits.| 123
