How to become an author
Search
Write a publication
Pull to refresh

Comments 55

В почившем в бозе rivets.js и в набирающем обороты vue.js используется примерно такой же подход к организации реактивности.

Total votes 1: ↑1 and ↓0+1
порог вхождения на порядок выше, в моем случае можно не разбираться, никакого api, если нужно только обновлять UI
Total votes 3: ↑0 and ↓3-3

Я не об этом. Про порог вхождения тоже можно поспорить — все-таки наличие многократно вычитанной документации и Q&A снимает множество вопросов.

Total votes 3: ↑3 and ↓0+3

У vue.js порог вхождения ниже чем в вашем примере имхо. Даже если не читать документацию все интуитивно понятно.

Total votes 2: ↑2 and ↓0+2
я о применении а не разборе исходников, в каком месте это https://vuejs.org/v2/examples/index.html проще чем 

let obj1 = {
	this_namespace: 'test',
	this_data: ['dataA', 'dataB']
};
obj1._sTpl();



<div data-template="dataA" data-namespace="test"></div>


даже документация не нужна
Total votes 1: ↑1 and ↓0+1

Что такое data-template? Ссылка на внешний html шаблон? А неймспейс — это… Зачем он? Да и вызов приватного метода _sTpl вообще непонятно что делает. И откуда он у пустого объекта взялся?


Тут документация нужна для каждой строчки, т.к. понятно всё только вам, как автору.

Total votes 9: ↑9 and ↓0+9
3 строчки, 3 настройки которые надо менять
Что происходит дальше описывает статья, и в реализации метода каждая строчка документирована. Еще раз повторюсь — тут задача была в показательности и простоте, без приблуд и претендования на звание фреймворка нуждающегося в документации впринципе, так что «Ссылка на внешний html шаблон?» неуместно, весь метод изначально не для этого предназначен
Total votes 1: ↑0 and ↓1-1
Да и вызов приватного метода _sTpl вообще непонятно что делает

И вообще откуда этот метод взялся? Там что — расширен прототип Object?
Total votes 3: ↑3 and ↓0+3
ссылка в статье https://jsfiddle.net/axeax/ky9zbc18/
Total votes 1: ↑0 and ↓1-1

Вы только что предложили прочитать документацию (разновидность её) по примеру, который сказали, что настолько прост, что не требует документации. Верно?

Total votes 5: ↑5 and ↓0+5
Пример — прост, реализация — для обычного использования прочтения не требуется

все верно, ок, не «не нуждается в документации», а «минимальный набор работающий из коробки со стремящимся к 0 времени затрат времени на чтение документации»
This comment wasn’t rated yet0

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


<div id="app">{{ message }}</div>

+


new Vue({ 
  el: '#app',
  data: { message: 'izi pizi' } 
});

Или ещё лучше, с помощью другого решения (не Vue):


class Some {
  message = 'izi pizi';
}

ko.applyBindings(new Some, app);

Неужели больше? Мне кажется что нет, всё очевиднее и, самое главное, прозрачнее на порядки.


Или вы со мной не согласны? Разве возникают хоть какие-то вопросы по этим примерам, аналогичные приведённым мною?

Total votes 5: ↑5 and ↓0+5
мне приходит новый message каждые n секунд, и глядя на это я не понимаю как мне его обновлять каждый раз, я не открывал документацию, но поверю что это можно сделать так же просто как message = response.message

Если хотите сказать о велосипедности — соглашусь.
А я хочу сказать другое — это разбор частного случая на вполне понятном примере
Total votes 3: ↑0 and ↓3-3

Ну это понятно. Я просто веду к тому, что утверждение, что "порог вхождения в сабжевые фреймы — выше", довольно голословное. Да, там больше плюшек, но понять как работает пользоваться всё же проще, по-моему.


P.S. Во втором случае — нет, при "message = response.message" данные не обновятся, это же просто переменная на чистом JS без какой-либо магии. Для связывания её надо объявить как обсервер (т.е. тупо завернуть внутрь функции ko.observable('izi pizi')), но это не особо важно.

Total votes 1: ↑1 and ↓0+1

Важно, т.к. мой метод как раз реализует всего одну функцию — связывает представление с данными в автоматическом режиме (если допилить несколькими строчками), максимально быстро (в моем приложении специфическое требование к производительности, на счету каждые 50-100мкс)

This comment wasn’t rated yet0

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


class Some {
  message = ko.observable('izi pizi');
}

ko.applyBindings(new Some, app);
This comment wasn’t rated yet0
Зашел по ссылке, увидел Object.prototype._sTpl = , закрыл.
Total votes 9: ↑9 and ↓0+9
спасибо что пояснили всем суть проблемы, хабр не только понимающие такой сарказм читают
Total votes 4: ↑0 and ↓4-4
Прекрасно, вы только что обрекли на это весь мир.
А если серьезно, расширять системные объекты, еще и enumerable свойствами — в лучшем случае дурной тон.
Total votes 3: ↑3 and ↓0+3

Расширять стандартные прототипы — плохо.
За всем кодом не уследить, что-то где-то сломается.


Так что по сути это Javascript-версия паттерна #define TRUE FALSE

Total votes 4: ↑4 and ↓0+4

Я написал почему так сделано

Total votes 3: ↑0 and ↓3-3
UFO just landed and posted this here
Кстати вот презентация Evan You http://www.thedotpost.com/2016/12/evan-you-reactivity-in-frontend-javascript-frameworks
Total votes 1: ↑1 and ↓0+1
Вы как-то хитро вывернули наизнанку механизм шаблонизации. Обычно шаблон должен знать, с какими данными он работает, но не наоборот. Было бы логичнее сделать так: в функцию передается объект с данными и настройки, а он возвращает объект-прокси, который выглядит точно так же, но умеет обновлять UI:

var obj = {
    dataA: 1,
    dataB: 2
};
var proxy = template(obj, 'test', ['dataA', 'dataB']);
proxy.dataA = 2; // обновляем UI

P.S. По поводу именования переменных с префиксом — попробуйте Typescript, он позволит больше не заниматься сизифовым трудом.
Total votes 5: ↑5 and ↓0+5
шаблон должен знать, с какими данными он работает

— это можно реализовать пробежавшись по DOM, я писал об этом, но не применил, т.к. это уже другая история.

Про объект-прокси скажу: как логичнее — решается для конкретной задачи.
До typescript я еще не дорос
This comment wasn’t rated yet0
Если мы говорим о хорошей архитектуре приложения, то его компоненты должны быть максимально независимы друг от друга и пересекаться только в определенных местах, которые называются точками композиции. Тогда приложение будет легко разрабатывать и тестировать.

Шаблон не может не знать о модели данных. В вашем случае атрибутом data-template="dataA" вы описываете контракт: для шаблона необходим объект, содержащий поле dataA. Это нормально и по-другому никак не сделаешь. А вот ссылка из модели на шаблон явно лишняя.
This comment wasn’t rated yet0
А вот ссылка из модели на шаблон явно лишняя.

Так одни и те-же данные можно доставать из разных экземпляров
This comment wasn’t rated yet0
Хорощий старт, ещё несколько месяцев и вы напишите свой vue.js/marteshka.js

не стал добавлять возможность использования в шаблонах каких-то даже примитивных операций (например dataA + dataB)
«a + b» — это не логика, а вид представления данных, так же как и «firstname + ' ' + lastname», который можно разложить в `{{firstname}} {{lastname}}`

такая возможность была и там пришлось по-быстрому использовать eval.
Не так все просто, вам бы тогда пришлось бы делать паресер выражения и отслеживать все зависимости т.е. +10кб кода, а если прсто eval — то это будет dirtychecking который нужно будет дергать на каждый чих.

распихиваем его в нужные объекты через Object.assign — это будет работать.
Это не все, нужно рекурсивно конвертировать объеты ну и с биндингами что-то делать.
Total votes 2: ↑1 and ↓10
В случае с {{firstname}} {{lastname}} мы можем обернуть это в отдельные теги или дополнительно парсить такие конструкции.
eval в рамках нужной области видимости работал прекрасно, а рекурсивно конвертировать объекты не так сложно, да и если набор данных статичен то в этом нет необходимости.
This comment wasn’t rated yet0
Посмотрите ractive.js — порог вхождения минимальный, всё очень просто, и не требует переделки всего легаси под него.
Total votes 1: ↑1 and ↓0+1

Расширение прототипа? В 2017? Это ведь не серьезно!?

Total votes 6: ↑5 and ↓1+4

Да видно же что человек из прошлого, да и по месяцам промах, апрель ещё не скоро.

This comment wasn’t rated yet0
UFO just landed and posted this here

Лучше все же использовать Array.from:


Array.from(document.querySelectorAll('.button')).forEach(...)

То, что сейчас проект "ваш", и вы помните о том, что нахимичили с браузерными прототипами, не значит, что другие разработчики это заметят вовремя. Мы же о коммерческой разработке говорим, а не личных домашних веб-страничках

Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here

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

This comment wasn’t rated yet0
UFO just landed and posted this here

Какое решение? С расширением прототипа — это плохое решение

Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here

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


Сейчас это работает ради обратной совместимости, в документации явно написано, что такой подход не рекомендуется.

Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
А теперь вы внимательно почитайте спеку. HTMLCollection и NodeList — array-like объекты, которые не подразумевают некоторых методов Array.
Total votes 2: ↑2 and ↓0+2
UFO just landed and posted this here

Есть оправдание только для новых фич, которые в будущем поддержатся нативно. Поэтому обычно и пишут так


if(!Array.prototype.forEach) {
  Array.prototype.forEach = function () {...}
}

А ваша идея с присвоением метода к NodeList — это отсебятина.
И я бы бежал поскорее от работы с проектом, где такое встречу.

Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
UFO just landed and posted this here

Как интересно, спасибо за информацию.


Только одного forEach мало, обычно еще нужны filter и map хотя бы.
Так что от Array.from(nodes) или [...nodes] никуда не деться

Total votes 1: ↑1 and ↓0+1
Была бы возможность закрыть, давно бы закрыли. Пол мира легаси библиотек живет на этой «возможности», и это не значит, что это должно поощраться. Разработчики и eval, и with предоставили, но вы же не пользуетесь, где попало.
Есть здравые рекомендации по поводу расширения прототипов, и они касаются только расширения недостающими по стандарту свойствами, т.е. годятся только для полифиллов.

UPD: justboris одновременно указали на мдн :)
Total votes 1: ↑1 and ↓0+1

JS был разработан за 10 дней одним человеком, в нем есть и неудачные моменты, и это нормально.


На данный момент консенсус такой, что расширять прототипы кастомными методами считается плохой практикой. Судьба Prototype.js о чем-то да говорит.


Другое дело полифиллы, потому что они future proof.

Total votes 1: ↑1 and ↓0+1
Не так интересна статья, как комментарии под ней =)
Total votes 2: ↑2 and ↓0+2
Sign up to leave a comment.

Articles

Show the best of all time
Unlock dark mode

Your account

Sections

Information

Services

Support
© 2006–2024, Habr