@Zloy_Kot

При оценке качества кода, на что следует обратить внимание?

Господа профессиональные программисты!
Уже год занимаю программированием, хотелось бы выяснить, на что следует обращать внимания при оценке качества кода?

Код без рефакторинга.
<template>
  <v-container fluid>
    <v-row>
      <v-col
        class="pt-0"
        cols="12"
      >
        <div class="text-right">
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <v-btn
                outlined
                small
                color="indigo"
                open-delay="2000"
                v-on="on"
                @click="restaurantsAddShowDialog"
              >
                {{ $t("pages.restaurants.toolbar.new_restaurant.title") }}
              </v-btn>
            </template>
            <span>{{ $t("pages.restaurants.toolbar.new_restaurant.hint") }}</span>
          </v-tooltip>
        </div>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-simple-table
          dense
          class="table_dark"
        >
          <template v-slot:default>
            <thead>
              <tr>
                <th class="text-left" style="width: 120px">
                  ID ресторана
                </th>
                <th class="text-left">
                  Наименование
                </th>
                <th />
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in restaurants" :key="item.id">
                <td class="text-left">
                  {{ item.id }}
                </td>
                <td style="width: auto">
                  {{ item.name }}
                </td>
                <td class="text-right" style="width: 50px; border-left: none">
                  <div class="text-center">
                    <v-menu offset-y>
                      <template v-slot:activator="{ on }">
                        <v-btn
                          fab
                          dark
                          x-small
                          text
                          color="black"
                          v-on="on"
                        >
                          <v-icon dark>
                            mdi-dots-horizontal
                          </v-icon>
                        </v-btn>
                      </template>
                      <v-list>
                        <v-list-item
                          v-for="(table_options_item, table_options_item_index) in table_options"
                          :key="table_options_item_index"
                          @click="table_options_item.action(item)"
                        >
                          <v-list-item-title>{{ table_options_item.title }}</v-list-item-title>
                        </v-list-item>
                      </v-list>
                    </v-menu>
                  </div>
                </td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </v-col>
    </v-row>
    <!--  Dialog for add restaurant  -->
    <v-row justify="center">
      <v-dialog v-model="dialog_add_restaurant" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">{{ $t("pages.restaurants.dialog.add.title") }}</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12">
                  <v-text-field
                    v-model="restaurant_name"
                    :label="'* '+$t('pages.restaurants.dialog.add.restaurant_name_title')"
                    required
                  />
                  <v-textarea
                    outlined
                    name="input-7-4"
                    :label="$t('pages.restaurants.dialog.add.restaurant_description_title')"
                    value=""
                  />
                </v-col>
              </v-row>
            </v-container>
            <small>* {{ $t("this_field_is_required") }}</small>
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-tooltip
              bottom
              open-delay="1000"
            >
              <template v-slot:activator="{ on }">
                <v-btn
                  color="blue darken-1"
                  text
                  v-on="on"
                  @click="dialog_add_restaurant = false"
                >
                  {{ $t("pages.restaurants.dialog.add.actions.cancel.title") }}
                </v-btn>
              </template>
              <span>{{ $t("pages.restaurants.dialog.add.actions.cancel.hint") }}</span>
            </v-tooltip>
            <v-tooltip
              bottom
              open-delay="1000"
            >
              <template v-slot:activator="{ on }">
                <v-btn
                  color="blue darken-1"
                  text
                  v-on="on"
                  @click="restaurantsAdd"
                >
                  {{ $t("pages.restaurants.dialog.add.actions.save.title") }}
                </v-btn>
              </template>
              <span>{{ $t("pages.restaurants.dialog.add.actions.save.hint") }}</span>
            </v-tooltip>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
    <v-row>
      <msg-dialog />
    </v-row>
  </v-container>
</template>

<script>
import MsgDialog from "../components/Dialog/MsgDialog"
export default {
  name: "Restaurants",
  components: { MsgDialog },
  async asyncData ({ $axios }) {
    let restaurants = []
    await $axios.$get(`${process.env.api}/restaurants.get`, {
      params: {
        offset: 0,
        count: 10
      }
    }).then(({ count, items }) => {
      restaurants = items
    }).catch((e) => {
      // eslint-disable-next-line no-console
      console.log(e)
    })
    return {
      restaurants
    }
  },

  data () {
    return {
      dialog_add_restaurant: false,
      restaurant_name: "",
      restaurant_description: "",
      restaurants: []
    }
  },

  computed: {
    table_options () {
      return [
        {
          title: this.$t("delete"),
          action: (item) => {
            this.showConfirmDialogDeleteRestaurants(item)
          }
        },
        {
          title: this.$t("edit"),
          action: ({ id }) => {

          }
        }
      ]
    }
  },

  methods: {

    restaurantsAddShowDialog () {
      this.dialog_add_restaurant = true
    },

    /**
     * Add new restaurant
     */
    restaurantsAdd () {
      this.dialog_add_restaurant = false
      this.$axios.$post(`${process.env.api}/restaurants.add`,
        {
          name: this.restaurant_name,
          description: this.restaurant_description
        }).then(({ code, msg }) => {
        this.restaurant_name = ""
        this.restaurant_description = ""
        this.$toasted.show(msg, {
          theme: "toasted-primary",
          position: "top-right",
          duration: 3000,
          onComplete: () => {
            this.$axios.$get(`${process.env.api}/restaurants.get`, {
              params: {
                offset: 0,
                count: 10
              }
            }).then(({ count, items }) => {
              this.restaurants = items
            }).catch((e) => {
              console.log(e)
            })
          }
        })
      }).catch((e) => {
        console.log(e)
      })
    },

    showConfirmDialogDeleteRestaurants ({ id }) {
      this.$emit("msg-dialog-show", {
        title: this.$t("confirmation_request"),
        text: this.$t("are_you_sure_you_want_to_delete"),
        buttons: [
          {
            action () {},
            text: this.$t("no"),
            color: "red darken-1"
          },
          {
            action: () => {
              this.restaurantsRemove(id)
            },
            text: this.$t("yes"),
            color: "green darken-1"
          }
        ]
      })
    },

    /**
     * Restaurant Removal
     */
    restaurantsRemove (id) {
      this.$axios.$get(`${process.env.api}/restaurants.remove`,
        {
          params: {
            restaurant_id: id
          }
        }).then(({ code, msg }) => {
        this.$toasted.show(msg, {
          theme: "toasted-primary",
          position: "top-right",
          duration: 3000,
          onComplete: () => {
            this.$axios.$get(`${process.env.api}/restaurants.get`, {
              params: {
                offset: 0,
                count: 10
              }
            }).then(({ count, items }) => {
              this.restaurants = items
            }).catch((e) => {
              console.log(e)
            })
          }
        })
      }).catch((e) => {
        console.log(e)
      })
    }
  },

  head () {
    return {
      title: "Мои рестораны"
    }
  }
}
</script>

<style scoped>

</style>


Всегда преследует сомнение.
Всегда кажется, что можно что-то улучшить.

Спасибо.
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ответы на вопрос 1
Athanor
@Athanor
Лайк + Решение: не жмись, нажми
  • Работу с api лучше вынести в отдельный слой, а уже в компонентах вызывать его методы
  • воздержаться от использования инлайн стилей
  • action: (item) => {
     this.showConfirmDialogDeleteRestaurants(item)
    }
    можно записать как
    action: this.showConfirmDialogDeleteRestaurants
  • диалоговое окно можно вынести в отдельный компонент
  • добавить на v-textarea v-model
  • Разобраться с неймингом — везде рестораны в множественном числе, хотя действие производится над одним рестораном, кроме того, я бы начинал название методов с действия, а не с того, над чем это действие происходит — restaurantsRemove => removeRestaurant. Это позволит быстрей ориентироваться в коде. Так же вам стоит определиться с форматом именования сущностей, у вас сейчас snake_case вперемешку с camelCase. Надо выбрать что-то одно.
  • Такие комментарии над методами не несут никакой пользы, по названию метода и так все это понятно
  • Метод restaurantsAdd выглядит довольно объемным, из него, например, можно попробовать вытащить саму логику отображения тостера
  • Не используйте относительные импорты когда они не нужны. Это позволит вам в будущем гораздо легче делать изменения в структуре вашего приложения.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы