Зачем создаётся переменная originalData и что она собой представляет? Зачем создаётся метод data()?

Question

Возникли проблемы с пониманием кода, который представлен ниже. Vue.js:

class Errors {
  constructor() {
    this.errors = {};
  }

  has(field) {
    return  this.errors.hasOwnProperty(field);
  }

  any() {
    return Object.keys(this.errors).length > 0;
  }

  get(field) {
    if(this.errors[field]) {
      return this.errors[field][0];
    }
  }


  record(errors) {
    this.errors = errors;
  }

  clear(field) {
    if (field) delete this.errors[field];
    this.errors = {};
  }
}

class Form {
  constructor(data) {
    this.originalData = data;

    for (let field in data) {
      this[field] = data[field];
    }

    this.errors = new Errors();
  }

  data() {
    let data = Object.assign({}, this);
    delete data.originalData;
    delete data.errors;
    return data;
  }

  reset() {
    for(let field in originalData) {
      this[field] = '';
    }
  }

  submit(requestType, url) {
    axios[requestType](url, this.data())
    .then(this.onSuccess.bind(this))
    .catch(this.onFail.bind(this))
  }

  onSuccess(response) {
    alert(response.data.message);
    this.errors.clear();
  }

  onFail(error) {
    this.errors.record(error.response.data.errors);
  }
}

new Vue({
  el: '#app',
  data: {
    form: new Form({
      name: '',
      description: ''
    })
  },


  methods: {
    onSubmit() {
      this.form.submit('post', '/projects')
    }
  }
});

create.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
    <style>body { padding-top: 40px; }</style>
</head>

<body>
    <div id="app" class="container">
        @include ('projects.list')

        <form method="POST" action="/projects" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
            <div class="control">
                <label for="name" class="label">Project Name:</label>

                <input type="text" id="name" name="name" class="input" v-model="form.name">
                <span class ="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
            </div>

            <div class="control">
                <label for="description" class="label">Project Description:</label>

                <input type="text" id="description" name="description" class="input" v-model="form.description">

                <span class ="help is-danger" v-if="form.errors.has('description')" v-text="form.errors.get('description')"></span>
            </div>

            <div class="control">
                <button class="button is-primary" :disabled = "form.errors.any()">Create</button>
            </div>
        </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script src="/js/vue-app.js"></script>
</body>
</html>

Конкретно в чём заключается непонимание:

Что из себя представляет originalData - пустые строки для name и description? В методе reset(), когда проходим цикл через все поля в originalData мы сбрасываем свойства объекта?
Для чего нужен метод data()? Что означает this в случае let data = Object.assign({}, this)? Создаётся копия свойств объекта? Если да, то для чего?

Answer 1

Да, второй пункт - создается копия объекта вместо передачи самого объекта для избежания мутаций исходного объекта. см. Иммутабельность.

Первый пункт - originalData - это ссылка на объект переданный в конструктор класса. То есть исходный объект на основании которого создается результирующий. в ресете очищаются только те поля , которые имеют одинаковые ключи с исходным объектом (originalData).

БЛОГ НА HUSL

Зачем создаётся переменная originalData и что она собой представляет? Зачем создаётся метод data()?

Ответы (1 шт):