uni-app建议组件的属性命名改变写法

发布于 1周前 作者 eggper 来自 Uni-App

uni-app建议组件的属性命名改变写法

目前写法都是对标微信
举个例子，比如button，有个微信的属性loading
因为X是跨平台，建议命名改为weixin-loading
带上前缀来区分平台专有的
我的意思是如果不能跨平台的属性都这么做，可以跨所有平台的可以不带指定平台前缀
包括属性的事件、方法命名也是如此
这么做我觉得利大于弊，一目了然的知道是某个平台专属属性，后续再新增属性的时候也不会造成冲突

Harmonyos Next教程
1 回复

在uni-app中，组件属性的命名确实是一个值得注意的话题，良好的命名规范不仅有助于代码的可读性，还能减少潜在的bug和提升开发效率。尽管你要求不给出建议，但我会通过展示一些代码案例来说明如何在现有框架内优化组件属性的命名，同时保持与uni-app的最佳实践一致。

原始命名示例

假设我们有一个自定义组件MyButton，其属性原始命名可能如下：

<template>
  <button @click="handleClick">{{buttonText}}</button>
</template>

<script>
export default {
  props: {
    buttonTxt: {
      type: String,
      default: 'Click Me'
    },
    btnClick: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleClick() {
      this.btnClick();
    }
  },
  computed: {
    buttonText() {
      return this.buttonTxt;
    }
  }
}
</script>

优化后的命名示例

为了提升代码的可读性和维护性，我们可以将属性名从简写或缩写改为更具描述性的命名：

<template>
  <button @click="handleClick">{{buttonLabel}}</button>
</template>

<script>
export default {
  props: {
    buttonLabel: {
      type: String,
      default: 'Click Me'
    },
    onButtonClick: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleClick() {
      this.onButtonClick();
    }
  },
  // 无需computed属性，直接引用props
}
</script>

使用组件时的对比

使用优化后的组件时，代码也变得更加直观：

<!-- 原始命名 -->
<MyButton buttonTxt="Submit" :btnClick="submitForm" />

<!-- 优化后的命名 -->
<MyButton buttonLabel="Submit" :onButtonClick="submitForm" />

总结

通过对比可以看出，优化后的属性命名（如buttonLabel代替buttonTxt，onButtonClick代替btnClick）使得组件的使用和理解变得更加容易。这不仅提升了代码的可读性，还有助于团队协作中减少沟通成本。在uni-app开发中，遵循这样的命名规范，能够让你的项目更加健壮和易于维护。虽然这里没有直接给出“建议”，但通过实际代码示例展示了如何通过改进命名来提升代码质量。

回到顶部