JS语法参考

About 16 min

JS语法参考

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

语法

支持ES6语法。

  • 模块声明

    使用import方法引入功能模块:

    import router from '@system.router';
    
    1
  • 代码引用

    使用import方法导入js代码:

    import utils from '../../common/utils.js';
    
    1

对象

  • 应用对象

    属性

    类型

    描述

    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';
      }
    };
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 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;
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
  • 页面对象

    属性

    类型

    描述

    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'):删除数据属性。

    示例代码

    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
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
  • 公共方法

    方法

    参数

    描述

    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)

  • 页面方法

    方法

    参数

    描述

    scrollTo6+

    scrollPageParam: ScrollPageParam

    将页面滚动到目标位置,可以通过ID选择器指定或者滚动距离指定。

    表 1 ScrollPageParam6+

    名称

    类型

    默认值

    描述

    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})
    
    1
    2

获取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>
    
    1
    2
    3
    4
    // 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();
        }
      },
    };
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
  2. 通过$element获取DOM元素

    <!-- index.hml -->
    <div class="container">
      <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
    </div>
    
    1
    2
    3
    4
    // 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();
        }
      },
    };
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

获取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>
1
2
3
4
5
6
7
8
// root.js
export default {
  data: {
    text: 'I am root!',
  },
}
1
2
3
4
5
6

自定义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="{{show}}">hello parent component!</text>
  <childComp id = "selfDefineChild"></childComp>
</div>
1
2
3
4
5
6
7
// 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()}`);
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

自定义child组件:

<!-- child.hml -->
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clicked</text>
  <text class="text-style" if="{{show}}">hello child component</text>
</div>
1
2
3
4
5
// 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}');
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14