# JS语法参考 - [语法](#zh-cn_topic_0000001173164729_s6ca2e99746664509961f65b82d11ab58) - [对象](#zh-cn_topic_0000001173164729_s7493791622a248fbb2e03703149bb3b5) - [方法](#zh-cn_topic_0000001173164729_s4e1ff24ec78e41948502d8977d24e44c) - [获取DOM元素](#zh-cn_topic_0000001173164729_section1560185062215) - [获取ViewModel](#zh-cn_topic_0000001173164729_section13798143717421) JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。 ## 语法支持ES6语法。 - 模块声明使用import方法引入功能模块： ``` import router from '@system.router'; ``` - 代码引用使用import方法导入js代码： ``` import utils from '../../common/utils.js'; ``` ## 对象 - 应用对象

属性	类型	描述
$def	Object	使用this.$app.$def获取在app.js中暴露的对象。说明：应用对象不支持数据绑定，需主动触发UI更新。

示例代码 ``` // app.js export default { onCreate() { console.info('AceApplication onCreate'); }, onDestroy() { console.info('AceApplication onDestroy'); }, globalData: { appData: 'appData', appVersion: '2.0', }, globalMethod() { console.info('This is a global method!'); this.globalData.appVersion = '3.0'; } }; ``` ``` // index.js页面逻辑代码 export default { data: { appData: 'localData', appVersion:'1.0', }, onInit() { this.appData = this.$app.$def.globalData.appData; this.appVersion = this.$app.$def.globalData.appVersion; }, invokeGlobalMethod() { this.$app.$def.globalMethod(); }, getAppVersion() { this.appVersion = this.$app.$def.globalData.appVersion; } } ``` - 页面对象

属性	类型	描述
data	Object/Function	页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。 data与private和public不能重合使用。
$refs	Object	持有注册过ref 属性的DOM元素或子组件实例的对象。示例见获取DOM元素。
private	Object	页面的数据模型，private下的数据属性只能由当前页面修改。
public	Object	页面的数据模型，public下的数据属性的行为与data保持一致。
props	Array/Object	props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见自定义组件。
computed	Object	用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见自定义组件。

## 方法 - 数据方法

方法	参数	描述
$set	key: string, value: any	添加新的数据属性或者修改已有数据属性。用法： this.$set('key',value)：添加数据属性。
$delete	key: string	删除数据属性。用法： this.$delete('key')：删除数据属性。

方法

参数

描述

$set

key: string, value: any

添加新的数据属性或者修改已有数据属性。

用法：

this.$set('key',value)：添加数据属性。

$delete

key: string

删除数据属性。

用法：

this.$delete('key')：删除数据属性。

示例代码 ``` export default { data: { keyMap: { OS: 'OpenHarmony', Version: '2.0', }, }, getAppVersion() { this.$set('keyMap.Version', '3.0'); console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 this.$delete('keyMap'); console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined } } ``` - 公共方法

方法	参数	描述
$element	id: string	获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见获取DOM元素。用法： <div id='xxx'></div> this.$element('xxx')：获得id为xxx的组件对象。 this.$element()：获得根组件对象。
$rootElement	无	获取根组件对象。用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。
$root	无	获得顶级ViewModel实例。获取ViewModel示例。
$parent	无	获得父级ViewModel实例。获取ViewModel示例。
$child	id: string	获得指定id的子级自定义组件的ViewModel实例。获取ViewModel示例。用法： this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。

- 事件方法

方法	参数	描述
$watch	data: string, callback: string \| Function	观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见自定义组件。用法： this.$watch('key', callback)

方法

参数

描述

$watch

data: string, callback: string | Function

观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见自定义组件。

用法：

this.$watch('key', callback)

- 页面方法

方法	参数	描述
scrollTo⁶⁺	scrollPageParam: ScrollPageParam	将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。

**表 1** ScrollPageParam⁶⁺

名称	类型	默认值	描述
position	number	-	指定滚动位置。
id	string	-	指定需要滚动到的元素id。
duration	number	300	指定滚动时长，单位为毫秒。
timingFunction	string	ease	指定滚动动画曲线，可选值参考 animation-timing-function。
complete	() => void	-	指定滚动完成后需要执行的回调函数。

示例： ``` this.$rootElement.scrollTo({position: 0}) this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) ``` ## 获取DOM元素 1. 通过$refs获取DOM元素 ```

``` ``` // index.js export default { data: { images: [ { src: '/common/frame1.png' }, { src: '/common/frame2.png' }, { src: '/common/frame3.png' }, ], }, handleClick() { const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 const state = animator.getState(); if (state === 'paused') { animator.resume(); } else if (state === 'stopped') { animator.start(); } else { animator.pause(); } }, }; ``` 2. 通过$element获取DOM元素 ```

``` ``` // index.js export default { data: { images: [ { src: '/common/frame1.png' }, { src: '/common/frame2.png' }, { src: '/common/frame3.png' }, ], }, handleClick() { const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 const state = animator.getState(); if (state === 'paused') { animator.resume(); } else if (state === 'stopped') { animator.start(); } else { animator.pause(); } }, }; ``` ## 获取ViewModel 根节点所在页面： ```

``` ``` // root.js export default { data: { text: 'I am root!', }, } ``` 自定义parent组件： ```

parent component click hello parent component!

``` ``` // parent.js export default { data: { show: false, text: 'I am parent component!', }, parentClicked () { this.show = !this.show; console.info('parent component get parent text'); console.info(`${this.$parent().text}`); console.info("parent component get child function"); console.info(`${this.$child('selfDefineChild').childClicked()}`); }, } ``` 自定义child组件： ```

child component clicked hello child component

``` ``` // child.js export default { data: { show: false, text: 'I am child component!', }, childClicked () { this.show = !this.show; console.info('child component get parent text'); console.info('${this.$parent().text}'); console.info('child component get root text'); console.info('${this.$root().text}'); }, } ```