鸿蒙应用框架开发札记：构建高效视图组件

productDetail/
├─ view/      # 视图组件
├─ model/     # 数据模型
├─ logic/     # 业务逻辑
└─ utils/     # 工具类

@Component
struct ImageCarousel {
  @Link @Watch('onIndexChange') currentIndex: number
  
  private onIndexChange() {
    // 执行平滑动效
    animateTo({ duration: 300 }, () => {})
  }

  build() {
    Swiper() {
      ForEach(this.imageList, (img, index) => {
        Image(img.url)
          .objectFit(ImageFit.Contain)
          .onClick(() => this.handleClick(index))
      })
    }
    .indicator(this.$r('app.integer.carousel_style'))
  }
}

@Observed
class SpecModel {
  selectedId: string = ''
  stockMap: Map<string, number> = new Map()

  // 响应规格选择
  setSelected(id: string) {
    if (this.stockMap.get(id) > 0) {
      this.selectedId = id
    }
  }
}

export class PriceService {
  private static instance: PriceService
  
  static getInstance() {
    if (!PriceService.instance) {
      PriceService.instance = new PriceService()
    }
    return this.instance
  }

  // 组合优惠策略
  calculateFinalPrice(base: number) {
    return DiscountStrategy.applyAll(base)
  }
}

@Prop({ deepWatch: true }) skuList: Array<SkuItem>

LazyForEach(this.dataSource, item => {...}, item => item.id)
.cachedCount(5)  // 保留5项缓存

aboutToDisappear() {
  this.timer?.destroy()
  this.imageCache.clear()
}