JS语法参考
======

JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。

#### 语法

支持ES6语法。

*   模块声明
    
    使用import方法引入功能模块：
    
    import router from '@ohos.router';
    
*   代码引用
    
    使用import方法导入js代码：
    
    import utils from '../../common/utils.js';
    

#### 对象

*   应用对象
    
    | 属性 | 类型 | 描述 |
    | :-- | :-- | :-- |
    | $def | Object | 
    使用this.$app.$def获取在app.js中暴露的对象。
    
    **说明：**
    
    应用对象不支持数据绑定，需主动触发UI更新。
    
     |
    
    示例代码
    
    // app.js
    export default {
      onCreate() {
        console.info('Application onCreate');
      },
      onDestroy() {
        console.info('Application 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元素](#获取dom元素)。 |
    | private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 |
    | public | Object | 页面的数据模型，public下的数据属性的行为与data保持一致。 |
    | props | Array/Object | props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或\_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见[Props](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-custom-props#props)。 |
    | computed | Object | 用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或\_开头，不要使用保留字。示例见[computed](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-custom-props#computed)。 |
    

#### 方法

*   数据方法
    
    | 方法 | 参数 | 描述 |
    | :-- | :-- | :-- |
    | $set | key: string, value: any | 
    添加新的数据属性或者修改已有数据属性。
    
    用法：
    
    this.$set('key',value)：添加数据属性。
    
     |
    | $delete | key: string | 
    
    删除数据属性。
    
    用法：
    
    this.$delete('key')：删除数据属性。
    
     |
    
    示例代码
    
    // index.js
    export default {
      data: {
        keyMap: {
          OS: 'OS',
          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元素](#获取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](#获取viewmodel)示例。 |
    | $parent | 无 | 获得父级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
    | $child | id: string | 
    
    获得指定id的子级自定义组件的ViewModel实例。[获取ViewModel](#获取viewmodel)示例。
    
    用法：
    
    this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。
    
     |
    
*   事件方法
    
    | 方法 | 参数 | 描述 |
    | :-- | :-- | :-- |
    | $watch | data: string, callback: string | Function | 
    观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[$watch感知数据改变](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-custom-props#watch感知数据改变)。
    
    用法：
    
    this.$watch('key', callback)：通过监听key属性值的变化，触发callback事件。
    
     |
    
*   页面方法
    
    | 方法 | 参数 | 描述 |
    | :-- | :-- | :-- |
    | scrollTo6+ | scrollPageParam: ScrollPageParam | 将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。 |
    
    **表1** ScrollPageParam6+
    
    | 名称 | 类型 | 默认值 | 描述 |
    | :-- | :-- | :-- | :-- |
    | position | number | \- | 指定滚动位置。 |
    | id | string | \- | 指定需要滚动到的元素id。 |
    | duration | number | 300 | 指定滚动时长，单位为毫秒。 |
    | timingFunction | string | ease | 
    指定滚动动画曲线，可选值参考
    
    [动画样式animation-timing-function](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-common-animation)。
    
     |
    | complete | () => void | \- | 指定滚动完成后需要执行的回调函数。 |
    
    示例：
    
    this.$rootElement().scrollTo({ position: 0 });
    this.$rootElement().scrollTo({ id: 'id', duration: 200, timingFunction: 'ease-in', complete: () => {
        console.info('滚动已完成');
    } });
    

#### 获取DOM元素

1.  通过$refs获取DOM元素
    
    <!-- index.hml -->
    <div class="container">
      <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
    </div>
    
    // 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.hml -->
    <div class="container" style="width:500px;height: 700px; margin: 100px;">
      <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
    </div>
    
    // 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();
        }
      },
    };
    

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f3/v3/VG511DEBSwiFojbgH7h1TQ/zh-cn_image_0000002625107797.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073318Z&HW-CC-Expire=86400&HW-CC-Sign=DF58F2364E368D82D5D4DDEE693C4B8E412A766BF7B1AE81E04769643D18C3BF)

#### 获取ViewModel

根节点所在页面：

<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
  <div class="container">
    <text>{{text}}</text>
    <parentComp></parentComp>
  </div>
</div>

// root.js
export default {
  data: {
    text: 'I am root!',
  },
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9c/v3/slVSTuFFQV64lagjkMKIWA/zh-cn_image_0000002594668280.png?HW-CC-KV=V1&HW-CC-Date=20260612T073318Z&HW-CC-Expire=86400&HW-CC-Sign=8525DE4F1C3AC3F301CE8C35B3CE71D36809C43302A875F96DF344E83514B6D9)

自定义parent组件：

<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="parentClicked">parent component click</text>
  <text class="text-style" if="{{showValue}}">hello parent component!</text>
  <childComp id = "selfDefineChild"></childComp>
</div>

// parent.js
export default {
  data: {
    showValue: false,
    text: 'I am parent component!',
  },
  parentClicked () {
    this.showValue = !this.showValue;
    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.hml -->
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clicked</text>
  <text class="text-style" if="{{isShow}}">hello child component</text>
</div>

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/fb/v3/b5-hFcKXSdWv_g60P-zf_g/zh-cn_image_0000002594828208.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073318Z&HW-CC-Expire=86400&HW-CC-Sign=0C19DCCC9DDA5C2D150DD2605F8C13F7FD61613921EE00523B15B2568D427C96)