Как правильно перенести логику объекта на Vue без data, methods и computed?

Question

[NSliM]

Есть массив array, содержащий полсотни объектов примерно следующего вида:

{
  name: "name",
  val: 1,
  is_availible: function () { return this.val >= 10; }, //например так
  do_action: function () { console.log(this.name); },
}

Старое применение:

//обходим массив и для каждого элемента и выполняем:
if ( array[index].is_availible() ) {
  array[index].do_action();
}

Объекты описаны в отдельном файле для удобства дополнения и редактирование в виде:

[
  { name: __ , val: __ , is_availible: __, do_action: __ },
  ...
  { name: __ , val: __ , is_availible: __, do_action: __ }
]

Необходимо перенести эту структуру во Vue для отображения массива примерно в следующем виде:

<template v-for="item in array">
  <button v-if="item.is_availible()" @click="item.do_action()">{{item.name}}</button>
</template>

Возможно ли реализовать такое не разбивая объекты на data, methods и computed, сохранив прежнюю структуру хранения объектов?

Answer 1

[Rustam Azizov]

Насколько я вижу логику построения структуры Vue-приложения, сделать такое нельзя. И вообще это неверный подход. Но есть воркэраунд. Можно написать функцию, которая будет мэппить ваши «плоские» js объекты в один большой Vue компонент. То есть нужно будет передать в data массив данных из полей name и val, а do_action и is_availible перенести в методы, хотя это, конечно же, нельзя считать красивым или изящным решением, так как придётся запихунть 50 методов с разными названиями в methods. Можно написать компонент, который будет отображать ваши объекты и программатически проинициализировать по экземпляру на каждый объект в массиве. Тоже не назвал бы самым красивым решением, но оно будет более изящным, хоть и более императивным, чем стоило бы быть приложению на Vue. Вы не сможете воспользоваться преимуществами темплейтинга Vue и скатитесь до JQuery подобного кода. Третий вариант — это сделать правильно, разбить данные и методы и собрать их так, чтоб можно было легко использовать с декларативным подходом Vue. Это будет самый гибкий и правильный подход. Я, если честно, не вижу практически никаких причин использовать однообразные объекты в той форме, которой делаете это вы. Зачем нужно хранить в каждом из них методы? Почему бы не вынести эти методы из объектов, ведь они должны работать на основе данных, которые у вас в name и val (или не так?). Неужели в них разная логика, в каждом из них? Если да, то вам стоит подумать о том, как правильно разделить эту логику и переиспользовать её, потому что ваш код выглядит однообразным, то есть ваши объекты, но судя по тому, как вы это делаете это не так, что может привести только к запутанному и сложноподдерживаемому коду.

Comments

[NSliM]

разбить данные и методы и собрать их так, чтоб можно было легко использовать с декларативным подходом Vue

Я так понимаю, что Вы говорите о том, чтобы вынести методы is_availible и do_action в methods, сделав их унифицированными, верно?
Дело в том, что объекты, в действительности, немного сложнее. Каждый объект - это единица оборудования в системе планово предупредительного ремонта. И условие отображения каждого объекта немного сложнее, чем я указал ранее. Например метод is_availible одного объекта вернет true если подошел срок обслуживания (сравнит значение поля с датой последнего обслуживания), тогда как другой объект содержит информацию о наработке мотор часов и необходимых расходниках, и не отображается если чего-то нет в наличии (метод is_availible этого объекта сравнивает уже другие поля объекта). Как аналогию могу привести, что каждый метод is_availible каждого объекта реализует доступность какого-либо действия для персонажа игры (например действие do_action объекта с name:"лечиться" доступно если в инвентаре есть бутылочка, а действие do_action объекта "скрафтить что-нибудь" доступно если есть нужный предмет и навык крафта прокачан до указанного уровня).
Отсюда вопрос: какую информацию должен содержать объект вместо методов? Как быть если один объект сравнивает
(условие1)
другой
((условие1)&&(условие2))
а трутий
((условие1)||((условие2)&&(условие3)))
Каждый объект содержит свой метод is_availible только потому, что я не нашел решения как его унифицировать. То же и с методом do_action.

[Rustam Azizov]

Иван, тогда вам лучше всего подойдёт второй подход. Берите объекты и мэпьте в компоненты, приблизительно как тут:
https://css-tricks.com/creating-vue-js-component-i...

[Rustam Azizov]

Иван, также вы можете просто переписать ваши объекты в структуру подобную компонентам вью:

{
  data: {
    val: __,
    name__,
  },
  methods: {
    do_action() { }
  },
  computed: {
    is_available() {}
  }
}

Тогда даже мэппер писать не придётся. Достаточно будет просто программатически зарегать объекты как компоненты и внедрить в HTML.

[NSliM]

Rustam Azizov, тогда мне придется каждый компонент вставлять на страницу вручную?

[Rustam Azizov]

Иван, по всей видимости да. То есть по типу JQuery — в цикле, но из JS, без поддержки темплейтинга.

[NSliM]

Rustam Azizov,

import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)

Я так понял, что это примерно оно?

[Rustam Azizov]

Иван, да, это оно. Я ещё подумаю как я бы сделал, но пока это лучшее, что пришло в голову.

[NSliM]

Rustam Azizov, А что? Вполне себе решение! Зачем-то ведь сделали доступ к элементам DOM ))

[Rustam Azizov]

Иван, вот вам ещё альтернатива. Я, конечно, не считаю этот правильным, но сделать правильно тут малыми усилиями вряд ли получится, так что вот, оказывается так можно:
https://codepen.io/Reenuay/pen/xxxmvOW

[Rustam Azizov]

Иван, да, не всегда есть возможность всё сделать декларативно и правильно одновременно. Ваш случай такой. Это больше задача для ООП, чем для функциональщины. В случае JS, конечно. На функциональном языке это решалось бы проще.

[NSliM]

Rustam Azizov, Да, я так пробовал )) Объект замыкается в себе, т.к. this ссылается на сам объект. А кроме array есть и другие поля и объекты приложения

[Rustam Azizov]

Иван, я подозревал, что есть подвох.

[Rustam Azizov]

Иван, вопрос, а чем отличаются ваши объекты, они имеют идентификаторы? Является ли идентификатором поле name?

[NSliM]

Rustam Azizov, Благодарю за решение. Теперь снова есть над чем подумать

[Rustam Azizov]

Иван, мне самому тоже интересна ваша задача. Люблю такие вызовы, так что и вам спасибо.

[Rustam Azizov]

Иван, вообще, мне в голову ещё вариант пришёл. Написать 2 глобальные функции — do_action и is_available , которые по идентификатору объекта определяли бы его логику и обрабатывали бы его. То есть вынести всю логику методов в отдельные от объектов функции. Этот подход функциональный, так делают в функциональных языках и в принципе, в вашем случае он неплох. По-сути такая функция — это большой свитч. Функцию можно разбить на более мелкие, если нужно, каждая из которых реализовывала бы свою ветку свитча. К сожалению JS не поддерживает красивого синтаксиса аля паттерн матчинг, но всё-же выглядеть будет всё равно неплохо.

[NSliM]

Rustam Azizov,

вопрос, а чем отличаются ваши объекты, они имеют идентификаторы? Является ли идентификатором поле name?

Да. Поле name уникально для каждого объекта

[NSliM]

Rustam Azizov,

По-сути такая функция — это большой свитч

Я примерно об этом тоже думал:
вместо is_availible указывать объект вроде

{
service_limit: 60, // ветка свитч сравнивающая значение с датой последнего обслуживания (два месяца)
materials: ['material1','material2'] // ветка проверяющая наличие расходников
}

Но проблемка была в том, какую логическую операцию применять, И или ИЛИ. И как быть с их различными комбинациями. Например вариант выше сравнивает по &&, т.к. должно подойти время обслуживания и должно быть наличие ТМЦ. А во тут

{
service_limit: 150, // ветка свитч сравнивающая значение с датой последнего обслуживания
motor_hour_limit: 200 // ветка сравнивающая наработку мотор часов
}

и тут сравнение идет (пора по сроку) || (пора по наработке часов)

[Rustam Azizov]

Иван, я имел ввиду нечто такое: https://codepen.io/Reenuay/pen/KKKJMpE
При этом каждый объект обязывается внутри себя хранить только данные, методы выносятся в эту большую функцию-свитч. У пена, который я скинул есть, конечно, одна проблема. Нет гарантии, что объекты, передаваемые в функцию будут следовать конвенциям. Как видно, каждый объект должен содержать поле name, но ввиду динамической природы JS нет никаких гарантий. Чтоб повысить отказоустойчивость кода и уменьшить возможность потенциальных ошибок, можно применить ООП подход. Вместо просто объектов использовать экземпляры классов. Создаёте базовый класс и каждый айтем от него наследуете. Так вы получите поддержку компилятора в коде и более консистентный код. Вот пример: https://codepen.io/Reenuay/pen/NWWorgo Минус — много бойлерплейт кода и даже просто, много кода. Гарантий всё равно никаких нет, потому что JS от этого не становится статическим, но в целом, если писать код одинаково, то вероятность ошибок сильно снижается. Выбирайте, что больше нравится. В обоих случаях данные и методы разделены, поэтому вы легко можете поместить их в экземпляр Vue в нужные разделы.

[NSliM]

Rustam Azizov, в общем решил задачу так (опишу код условно):
1. В основном коде приложения в data завел поле self, которое содержит ссылку на this. (т.е. просто self: this,)
2. Создал компонент item, и передаю в него self и имя нужного item'а:

<item :app="self" name="item1" />   
<item :app="self" name="item2" />

3. Описания item'ов вынес в отдельный .js файл:

export default {
	item1: {
		name: 'Item_1',
		is_availible: function (app) {
			return app.var1>2 || app.var2=1;
		},
		do_action:function (app) {
			app.doSomeAction();
		}			
	},

	item2: {
		name: 'Item_2',
		is_availible: function (app) {
			return app.var3 && (app.var4||app.var5);
		},
		do_action:function (app) {
			app.doAnotherAction();
		}			
	},
}

4. В коде компонента импортирую объект с описанием item'ов и назначаю поля в data:

import data from '@/items.js'
export default {
	props: {
		name: String,
		app: Object
	},
	data: function () {
		return {
			item_name: data[this.name].name,
			isavailible: data[this.name].is_availible,
			doaction: data[this.name].do_action,
		}
	},
}

5. Определяю is_availible как computed-свойство, а do_action как method:

computed: {
	is_availible () {
		return this.isavailible(this.app);
	}
},
methods: {
	do_action () {
		this.doaction(this.app);
	}
}

6. В template прописываю внешний вид и действие:

<template>
	<p v-if="is_availible" @click="do_action()">{{item_name}}</p>
</template>

В дальнейшем просто добавляю описание нового item'а в .js файл, и добавляю очередной тэг item.

[Rustam Azizov]

Иван, интересное решение)