Можно ли извлечь правила vuetify во внешний файл, чтобы использовать его повторно?

Question

Можно ли извлечь правила vuetify во внешний файл, чтобы использовать его повторно?

В программировании OO мы хотим как можно больше инкапсулировать данные. Скрыть как можно больше фактическую реализацию, абстрагируя типы как можно выше.

В этом контексте я бы ответил , чтобы вернуть только то, что имеет смысл . Имеет ли смысл понимать, что возвращаемое значение является конкретным классом? Ака в вашем примере спросите себя: будет ли кто-нибудь использовать метод LinkedList для возвращаемого значения foo?

Если нет, просто используйте интерфейс более высокого уровня. Это намного более гибко и позволяет вам изменять бэкэнд
. Если да, спросите себя: не могу ли я реорганизовать свой код, чтобы вернуть интерфейс более высокого уровня? :)

Чем более абстрактным является ваш код, тем меньше изменений требуется делать при смене бэкэнд. Это так просто.

Если, с другой стороны, вы в конечном итоге добавляете возвращаемые значения в конкретный класс, и это сильный знак того, что вы, вероятно, должны скорее вернуться к конкретному классу. Ваши пользователи / команды не должны знать о более или менее неявных контрактах: если вам нужно использовать конкретные методы, просто для того, чтобы явным образом вернуть конкретный класс.

В двух словах: абстрактное содержание кода, но явно :)

0

vue.js vue-component vuetify.js

задан Fernando Cebollada Aucejo 28 February 2019 в 11:32

1 ответ

Другие вопросы по тегам:

vue.js vue-component vuetify.js

Похожие вопросы:

score 0 · Answer 1

Вы можете записать свои правила во внешний файл. Вот пример, где правила находятся в переменной js:

Vue.use(Vuetify)

// or : import externalRules from '@/rules/MyRules.js'
var externalRules = [
  v => !!v || 'Name is required',
  v => (v && v.length <= 10) || 'Name must be less than 10 characters'
]

new Vue({
  el: "#app",
  data: {
    valid: true,
    name: '',
    nameRules: externalRules
  },
  methods: {
    validate() {
      if (this.$refs.form.validate()) {
        this.snackbar = true
      }
    },
    reset() {
      this.$refs.form.reset()
    },
    resetValidation() {
      this.$refs.form.resetValidation()
    }
  }
})

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>

  <div id="app">
    <v-app>
      <v-form ref="form" v-model="valid" lazy-validation>
        <v-text-field v-model="name" :counter="10" :rules="nameRules" label="Name" required></v-text-field>

        <v-btn :disabled="!valid" color="success" @click="validate">
          Validate
        </v-btn>

        <v-btn color="error" @click="reset">
          Reset Form
        </v-btn>

        <v-btn color="warning" @click="resetValidation">
          Reset Validation
        </v-btn>
      </v-form>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
</body>
</html>