优化微信小程序js代码

Question

小白一枚，我为每个选项标签都定义好了一个事件，而每个选项标签需要有个data-的自定义属性来记录用户是否有点击操作，但是在js代码中，要为每个选项标签定义一个响应函数，这样的代码过于冗余且后期不好维护，各位大佬们有什么好办法来简化js代码吗？

尝试过封装成函数，但在微信js文件的sdk不被允许。

<!--wxml-->
<text bindtap='chcolor' style='background-color:{{color}};color:{{tcolor}}' data-color="{{select}}">知识提问</text>
<text bindtap='chcolor2' style='background-color:{{color2}};color:{{tcolor2}}' data-color2="{{select2}}">日常</text>
<text bindtap='chcolor3' style='background-color:{{color3}};color:{{tcolor3}}' data-color3="{{select3}}">社交</text>
<text bindtap='chcolor4' style='background-color:{{color4}};color:{{tcolor4}}' data-color4="{{select4}}">周边推荐</text>

// js
chcolor: function (e) {
    var bgcolor = e.target.dataset.color
    console.log(bgcolor)
    if (bgcolor == undefined || bgcolor == false) {
        this.setData({ color: '#78ff85', select: true, tcolor: 'white' })
    }

    if (bgcolor == true) {
        this.setData({ color: '#e0e3da57', select: false, tcolor: 'black' })
    }
},

chcolor2: function (e){
    var bgcolor2 = e.target.dataset.color2
    if (bgcolor2 == undefined || 'false') {
        this.setData({ color2: '#78ff85', select2: 'true', tcolor2: 'white' })
    }

    if (bgcolor2 == 'true') {
        this.setData({ color2: '#e0e3da57', select2: 'false', tcolor2: 'black' })
    }    
} ,

chcolor3: function (e) {
    var bgcolor3 = e.target.dataset.color3
    if (bgcolor3 == undefined || 'false') {
        this.setData({ color3: '#78ff85', select3: 'true', tcolor3: 'white' })
    }

    if (bgcolor3 == 'true') {
        this.setData({ color3: '#e0e3da57', select3: 'false', tcolor3: 'black' })
    }
} ,

chcolor4: function (e) {
    var bgcolor4 = e.target.dataset.color4
    if (bgcolor4 == undefined || 'false') {
        this.setData({ color4: '#78ff85', select4: 'true', tcolor4: 'white' })
    }

    if (bgcolor4 == 'true') {
        this.setData({ color4: '#e0e3da57', select4: 'false', tcolor4: 'black' })
    }
} ,

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

为了优化微信小程序中的JS代码，可以考虑以下几个方面：

1. 使用@event装饰器将事件绑定到元素上。这可以减少重复的JS代码，并使代码更易于阅读和维护。

2. 将数据属性（例如颜色和选择状态）存储在一个单独的数据结构中，而不是在每个元素上直接设置它们。这样可以提高性能并减少不必要的DOM操作。

3. 如果可能的话，使用v-model或@input等Vue.js特性来监听用户的交互。这将使得代码更加简洁，并且更容易进行测试。

以下是针对上述建议的示例代码：

// wxml
<template>
  <View class="message">
    <Text bindTap="chColor" :style="{ background-color: @color, color: @tColor }" data-color="@select" />
    <Text bindTap="chColor2" :style="{ background-color: @color2, color: @tColor2 }" data-color2="@select2" />
    <Text bindTap="chColor3" :style="{ background-color: @color3, color: @tColor3 }" data-color3="@select3" />
    <Text bindTap="chColor4" :style="{ background-color: @color4, color: @tColor4 }" data-color4="@select4" />
  </View>
</template>

// js
import { ref } from "vue";

const data = {
  color: "",
  select: false,
  tColor: "black",
};

function chColor(e) {
  const { dataset } = e.target;
  const bgColor = dataset.color;
  data.color = bgColor;
}

function chColor2(e) {
  const { dataset } = e.target;
  const bgColor2 = dataset.color2;
  data.color2 = bgColor2;
}

function chColor3(e) {
  const { dataset } = e.target;
  const bgColor3 = dataset.color3;
  data.color3 = bgColor3;
}

function chColor4(e) {
  const { dataset } = e.target;
  const bgColor4 = dataset.color4;
  data.color4 = bgColor4;
}

export default {
  setup() {
    return { data };
  },
};

在这个例子中，我们创建了data对象来存储颜色、选择状态和其他属性。然后，在每个组件实例中，我们都可以访问这些数据以执行计算属性或其他逻辑。这种方法比在每个元素上设置相同的数据属性要简单得多，并且可以根据实际需要动态地修改这些属性。

此外，我们还使用了@event装饰器来捕获用户对文本框的点击事件，并将回调传递给相应的函数。这样，即使在不同的地方使用相同的文本框，也可以保持一致的行为。