HarmonyOS NEXT函数和自定义构建函数

举报
鸿蒙开发工程师 发表于 2025/03/29 21:44:56 2025/03/29
149 0 0
【摘要】 函数实例// 有名函数function add(x:number, y:number) { return x + y;}console.log("add",add(1,2)); // 匿名函数(lambda表达式)let myAdd = (x:number, y:number) => { return x + y;};console.log("myAdd",myAdd(1,2)); //...

函数
实例

// 有名函数
function add(x:number, y:number) {
  return x + y;
}
console.log("add",add(1,2)); 

// 匿名函数(lambda表达式)
let myAdd = (x:number, y:number) => {
  return x + y;
};
console.log("myAdd",myAdd(1,2)); 

//typescript是如何确保输入输出的准确性
//1.入参指定数据类型
console.log("add2",add(1,'2')); 
//2.函数指定数据类型
function newAdd(x:number, y:number):number {
  return "newAdd:"+x+y;
}
console.log("newAdd",newAdd(1,2)); 

//可选参数
function buildName(firstName: string, lastName?: string):string {
    if (lastName)
        return firstName + ' ' + lastName;
    else
        return firstName;
}
let result1 = buildName('Bob');
let result2 = buildName('Bob', 'Adams');
console.log("result1",result1);
console.log("result2",result2);

//剩余参数,个数不限的可选参数。 可以一个都没有,也可以有任意个。使用省略号( ...)进行定义
function getEmployeeName(firstName: string, ...restOfName: string[]):string {
  return firstName + ' ' + restOfName.join(' ');
}
let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');
console.log("employeeName",employeeName);

自定义构建函数
ArkUI提供了一种轻量的UI元素复用机制@Builder,其内部UI结构固定,仅与使用方进行数据传递,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

为了简化语言,@Builder装饰的函数也称为“自定义构建函数”。

@Builder装饰器有两种使用方式,分别是定义在自定义组件内部的私有自定义构建函数和定义在全局的全局自定义构建函数。

定义在自定义组件内部的私有自定义构建函数:

@Entry
@Component
struct BuilderDemo {
  @Builder
  showTextBuilder() {
    Text('Hello World')
      .fontSize(30)
      .fontWeight(FontWeight.Bold)
  }
  @Builder
  showTextValueBuilder(param: string) {
    Text(param)
      .fontSize(30)
      .fontWeight(FontWeight.Bold)
  }
  build() {
    Column() {
      // 无参数
      this.showTextBuilder()
      // 有参数
      this.showTextValueBuilder('Hello @Builder')
    }
  }
}

定义在全局的全局自定义构建函数

@Builder
function showTextBuilder() {
  Text('Hello World')
    .fontSize(30)
    .fontWeight(FontWeight.Bold)
}
@Entry
@Component
struct BuilderDemo {
  build() {
    Column() {
      showTextBuilder()
    }
  }
}

参数传递规则
自定义构建函数的参数传递有按值传递和按引用传递两种,均需遵守以下规则:

  • 参数的类型必须与参数声明的类型一致,不允许undefined、null和返回undefined、null的表达式。
  • 在@Builder修饰的函数内部,不允许改变参数值。
  • @Builder内UI语法遵循UI语法规则。
  • 只有传入一个参数,且参数需要直接传入对象字面量才会按引用传递该参数,其余传递方式均为按值传递。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。