#星光计划2.0#forky说国人发明的编程语言ets 原创 精华

forky
发布于 2021-12-10 11:07
浏览
1收藏

【本文正在参与51CTO HarmonyOS技术社区创作者激励计划-星光计划2.0】https://harmonyos.51cto.com/posts/9422

 

  • 在软件行业,编程语言是基础中的基础。

一切软件都需要从编程语言开始写起。

就像人类的文字交流,必须用一种文字,中文或者英文,来表达一样。

软件程序员和机器的交互。必须通过编程语言来表达软件程序员的思想。

 

  • 而很多编程语言都是由国外人发明的。

比如c语言。大语言Python语言还有JavaScript语言。

唯一的一个vue js框架,虽然算不上不能严格的说上,说是一种语言,但是也是类似于一种编程语言。是由一个在中国在中国上了高中。但是在美国上的大学后来又就只有Google的一个中国人发明的。

华为的华为的鸿蒙系统,是迄今为止,第一个中国人,中国公司方面的5安装设备达到以规模化的一种系统。目前华为为鸿蒙系统。发明了一天ets语言。e t s是可以说是第一款。可以大规模使用的一种中国人发明的开发语言。这个开发语言是华为鸿蒙系统。以后的主,打开发语言。

 

  • 华为什么要开发一款新的编程语言呢?

开发过安卓软件的程序员都知道。And我的界面开发需要很多的代码来完成。并且对于不同尺寸的屏幕,需要写好几份。虽然这几份代码中有很多重复的东西。

而且如果要用代码来写出一些动画效果的话,是非常复杂的。

 

所以华为开发了。有新的开发编程语言ets,他可以让程序员只写一份代码就可以在手机车机电视机等不同尺寸的设备上完美展现。

并且靠几行代码就可以实现一些炫酷的动画效果哎。

在编写界面时,所使用的代码量比较小。

而且在整个变成过程中,是一种直线式思维方式。而不是安卓的那种编程模式式的编程思路,这样就更有利于新手学习。并且在阅读别人写的代码时更快速。

 

  • 下面我们来看一个例子。

Rich(中国人)实现了一个翻页照片的动画效果,只用了50行代码。

 #星光计划2.0#forky说国人发明的编程语言ets-鸿蒙开发者社区#星光计划2.0#forky说国人发明的编程语言ets-鸿蒙开发者社区

@Entry
@Component
struct Hdc2021Album {
  private readonly IMAGE_PATHS: string[] = [ // 相册图片路径
    '/res/img/0.jpg',
    '/res/img/1.jpg',
    '/res/img/2.jpg',
    '/res/img/3.jpg',
    '/res/img/4.jpg',
    '/res/img/5.jpg',
    '/res/img/6.jpg',
    '/res/img/7.jpg',
    '/res/img/8.jpg',
    '/res/img/9.jpg'
  ]
  private readonly PHOTO_WIDTH = 280 // 相片宽度
  private readonly PHOTO_HEIGHT = 508 // 相片高度
  private readonly RINGS_WIDTH = 40 // 装订环宽度
  private readonly RINGS_HEIGHT = 480 // 装订环高度
  private readonly RINGS_MARGIN_LEFT = (360 - this.PHOTO_WIDTH - this.RINGS_WIDTH / 2) / 2 // 装订环 margin left
  private readonly PHOTO_MARGIN_LEFT = this.RINGS_MARGIN_LEFT + this.RINGS_WIDTH / 2 // 相片 margin left
  @State private currentPhotoIndex: number = 0 // 当前相片索引
  @State private lastPhotoWidth: number = 0 // 上一张相片(即翻页相片)的宽度,做翻页动画用

  build() {
    Stack({ alignContent: Alignment.Start }) {
      // 当前相片
      Image(this.IMAGE_PATHS[this.currentPhotoIndex%this.IMAGE_PATHS.length]) // 为了让相册能循环翻页,使用 %this.IMAGE_PATHS.length
        .objectFit(ImageFit.Fill)
        .width(this.PHOTO_WIDTH)
        .height(this.PHOTO_HEIGHT)
        .margin({ left: this.PHOTO_MARGIN_LEFT })
        .shadow({ radius: 50, color: Color.Black, offsetX: 15, offsetY: 15 }) // 阴影
        .onClick(() => {
          this.currentPhotoIndex++;
          this.lastPhotoWidth = this.PHOTO_WIDTH
          animateTo({
            curve: Curve.EaseInOut // 动画曲线
          }, () => this.lastPhotoWidth = 0)
        })
      // 上一张相片(即翻页相片),做翻页动画用
      Image(this.IMAGE_PATHS[(this.currentPhotoIndex - 1)%this.IMAGE_PATHS.length])
        .objectFit(ImageFit.Fill)
        .width(this.lastPhotoWidth) // 可变的宽度,做动画用
        .height(this.PHOTO_HEIGHT)
        .margin({ left: this.PHOTO_MARGIN_LEFT })
        .shadow({ radius: 4, color: Color.White, offsetX: 4 }) // 右边加了点白色阴影,为了翻页的时候能看到两张相片的交界
      // 装订环
      Image('/res/img/rings.png')
        .objectFit(ImageFit.Fill)
        .width(this.RINGS_WIDTH)
        .height(this.RINGS_HEIGHT)
        .margin({ left: this.RINGS_MARGIN_LEFT })
    }
    .width('100%')
    .height('100%')
  }
}

 

  • 下面我们来讲解一下这些代码。

大写的Image是一个对象。小写的width是他的方法。我们靠一个一个的方法来描述着界面的显示效果。

Stack是一种界面布局的方式。

build()和struct 、 component这些都是是固定的,每个界面都有。

state标记是为了给子组件绑定数据。

Entry是程序入口组件的标注。就和c的main一样。

 

  • ets的基本语法结构是和ts编程语言类似的。

他是ts编程语言的一个扩展。ts呢又是JavaScript的一个变种。

ets没有JavaScript的css和HTML文件。也没有安卓的xml的界面布局文件。

一个文件,你就可以完成整个界面的布局加动作。

 

重复代码也可以通过共享组件的方式进行抽取。

 

  • 自动化测试

对于自动化测试这一块儿,我还没有看到如何是能满足自动化测试的。界面的自动化测试,是所有编程语言的一个难题。

 

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-12-10 11:33:45修改
4
收藏 1
回复
举报
1条回复
按时间正序
/
按时间倒序
陈浩南xxx
陈浩南xxx

错别字好多

回复
2021-12-13 09:44:06
回复
    相关推荐