Какие есть свойства объекта

Мы используя Vue, разрабатываем компоненты различного рода и условий применения. Одной из ключевых частей любых компонентов — это их интерфейс. Во Vue, передаваемые свойства — являются очень важной, если не самой важной, частью интерфейса компонента.

В ситуации, когда компонент требует множество данных, можно применить несколько способов их передачи. Рассмотрим их.

Набор свойств

Одним из возможных способов — это создать для каждого атомарного значения — отдельное свойство. Посмотрим на код компонента использующий подобный подход:

Шаблон

<template>
<div>
<div>First name: {{ firstName }}</div>
<div>Last name: {{ lastName }}</div>
<div>Birth year: {{ birthYear }}</div>
</div>
</template>

Скрипт

const MIN_BIRTH_YEAR = 1900
export default {
name: ‘PersonInfo’,
props: {
firstName: {
type: String,
required: true,
validator: firstName => firstName !== »
},
lastName: {
type: String,
required: true,
validator: lastName => lastName !== »
},
birthYear: {
type: Number,
required: true,
validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear()
}
}
}

Посмотрим на использование этого компонента

<!— Other part of html template—>
<PersonInfo
first-name=»Jill»
last-name=»Smith»
:birth-year=»2000″
/>
<!— Other part of html template—>

Рассмотрим преимущества и недостатки такого подхода

Преимущества

• Все свойства — независимы. При невалидности одного из значений — сообщение об ошибке будет более точным
• Наглядно содержание передаваемых свойств
• «Плоское лучше вложенного»
• Добавление новых необязательных свойств довольно легкое дело: просто добавляем свойство, которое использует параметр default

props: {
firstName: {
type: String,
required: true,
},
lastName: {
type: String,
required: true,
},
birthYear: {
type: Number,
required: true,
validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear()
},
city: {
type: String,
default: ‘New York’
}
}

Недостатки

• Достаточно многословный код в родительском компоненте, особенно, когда данные берутся из одного объекта. Пример:

<!— Other part of html template—>
<PersonInfo
:first-name=»person.firstName»
:last-name=»person.lastName»
:birth-year=»person.birthYear»
/>
<!— Other part of html template—>

• Многословность в определении свойств (в сравнении с описанием объекта)

Свойство-объект

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

Рассмотрим пример:

Шаблон

<template>
<div>
<div>First name: {{ person.firstName }}</div>
<div>Last name: {{ person.lastName }}</div>
<div>Birth year: {{ person.birthYear }}</div>
</div>
</template>

Скрипт

import quartet from ‘quartet’ // npm validation package
const v = quartet()

const MIN_BIRTH_YEAR = 1900
export default {
name: ‘PersonInfo’,
props: {
person: {
type: Object,
required: true,
validator: v({
firstName: ‘string’,
lastName: ‘string’,
birthYear: v.and(
‘safe-integer’,
v.min(MIN_BIRTH_YEAR),
v.max(new Date().getFullYear())
)
})
}
}
}

Посмотрим на использование:

<!— Other part of html template—>
<PersonInfo :person=»person»/>
<!— or (bad) —>
<PersonInfo :person=»{ firstName: ‘Jill’, lastName: ‘Smith’, birthYear: 2000 }»/>
<!— Other part of html template—>

Рассмотрим преимущества и недостатки

Преимущества

• Код в родительском компоненте становится короче
• При наличии определённой структуры данных, которая не меняется код становится менее избыточным

Недостатки

• Все значения становятся связанными одним объектом. При невалидности одного из значений — сообщение об ошибке будет говорить о невалидности всего объекта
• При использовании объекта в родительском компоненте: содержание передаваемых данных скрывается за абстракцией этого объекта
• Дополнительный уровень вложенности в компоненте
• Добавление новых необязательных свойств со значениями внутрь объекта невозможно (не знаю как это сделать)
• Для валидации объекта в той же степени, нужно использовать дополнительные инструменты валидации (напр. библиотеку валидации quartet)

Выводы

Я пришел к таким выводам:

• использование отдельных свойств — более предпочтительно.
• Использование свойства-объекта допустимо, когда структура данных этого объекта не будет пополнятся дополнительными необязательными полями со значением по умолчанию.

P. S

Буду рад узнать ваши критерии выбора. Какой подход вы используете и почему? В прочем это и есть основная цель написания этой статьи. Может кто из вас знает лучшие практики и их обоснование? Спасибо, что уделили время.

Update 19:26, 16.01.2019

Также существует третий вариант c v-bind. Смотри обсуждение здесь

Свойство — способ доступа к внутреннему состоянию объекта, имитирующий переменную некоторого типа. Обращение к свойству объекта выглядит так же, как и обращение к структурному полю (в структурном программировании), но, в действительности, реализовано через вызов функции. При попытке задать значение данного свойства вызывается один метод, а при попытке получить значение данного свойства — другой.

При применении свойств

• можно задать значение по умолчанию, которое будет храниться в данном свойстве (или указать, что никакого значения по умолчанию не предполагается);
• можно указать, что это свойство только для чтения.

Как правило, свойство связано с некоторым внутренним полем объекта. Но свойству вообще может не быть сопоставлена ни одна переменная объекта, хотя пользователь данного объекта имеет дело с ним так, как если бы это было настоящее поле.

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

Методы свойств[править | править код]

Во многих языках программирования свойства реализуются в виде пары методов: метод, получающий текущее значение свойства, называется акцессор (accessor); метод, задающий новое значение свойства, — мутатор (mutator).[источник не указан 1490 дней] В языках программирования, не поддерживающих свойства, например, C++ и Java, пара из акцессора и мутатора является общепринятым суррогатом для их замены.

Принято называть методы свойств именем свойства с приставками get и set: например, для свойства Xyzzy — get_Xyzzy и set_Xyzzy (традиционный стиль Си) либо GetXyzzy и SetXyzzy (стиль CamelCase). В связи с этой схемой наименования за методами свойств закрепились жаргонные названия getter и setter.

Примеры[править | править код]

Свойства в C#[править | править код]

Свойства в C# — поля с логическим блоком, в котором есть ключевые слова get и set.

Пример класса со свойством:

Свойства в VB.NET[править | править код]

Пример реализации в VB.NET. Если нужно реализовать свойство только для чтения или только для записи, применяются модификаторы ReadOnly и WriteOnly. Свойство может быть параметризованным. Также может быть свойством по умолчанию, для этого необходимо добавить модификатор Default

Свойства в Delphi[править | править код]

Для описания свойства в Delphi служит слово property.

Пример класса со свойством:

Свойства в ActionScript[править | править код]

Свойства в Objective C[править | править код]

Свойства в Ruby[править | править код]

Описания свойства в Ruby ничем не отличается от описания метода. Например, для создания свойства duration у класса Song нужно описать методы duration и duration=(value)

Однако простое обращение к внутренней переменной объекта может быть заменено на вызов метода attr_accessor :duration

Более интересным будет пример создания свойства duration_in_minutes, которое будет возвращать или устанавливать время длительности в минутах:

При этом изменение свойства duration_in_minutes повлияет на свойство duration. Например

Свойства в Python[править | править код]

Набор методов с декораторами определяет способы работы со свойством (чтение, запись, удаление). Если какой-то из методов убрать (за исключением @property), теряется возможность работать со свойством соответствующим образом.

Пример класса со свойством:

См. также[править | править код]

• Событие
• Метод