Size: a a a

2021 March 23

z

zakaratcha in БЭМ
Ильдар
Всем привет. Вопрос по классическому стеку. Есть форма с кучей контролов и такой же кучей взаимосвязанного поведения. Например при выборе определенных radio часть контролов становится disabled, некоторые элементы скрываются итд. В добавок на поведение влияют модификаторы блока формы, частично меняя логику. Выглядит все очень сложно и приходится долго разбираться для внесения правок. Какой подход в подобных случаях использовать? Сейчас я выставляю модификаторы форме, но так как логика мудренная, то некоторые модификаторы внутри себя проверяют статусы других модификаторов, выглядит сложно
Стоит отделить данные от представления.

Источник состояния - данные формы + настройки (модификаторы блока формы). А отображение - функция от этих данных.

Можно наладить взаимодействие формы и её элементов через события.
При любом изменении в полях формы блок формы выстреливает событие, в котором передаёт текущие данные.
Элементы слушают эти события и выставляют своё состояние в зависимости от данных (а не в зависимости от модификаторов соседей).
источник

И

Ильдар in БЭМ
zakaratcha
Стоит отделить данные от представления.

Источник состояния - данные формы + настройки (модификаторы блока формы). А отображение - функция от этих данных.

Можно наладить взаимодействие формы и её элементов через события.
При любом изменении в полях формы блок формы выстреливает событие, в котором передаёт текущие данные.
Элементы слушают эти события и выставляют своё состояние в зависимости от данных (а не в зависимости от модификаторов соседей).
Спасибо, правильно понимаю что в результате мы имеем обработчик события в котором зашита вся логика для выставления состояний всех контролов. Будет выглядеть как if для каждого контрола в котором проверяем все условия для изменения состояния. Так?
источник

z

zakaratcha in БЭМ
Я предполагал, что контролы живут в отдельных БЭМ-сущностях и по наступлению события каждый из них выставляет только себя.
источник

z

zakaratcha in БЭМ
В целом - это такое предположение сходу. Может я и не угадал, как лучше ваш код зарефакторить.
Кажется, что строить состояние отображение от данных и взаимодействовать через события - в целом хорошая идея. Но вам, глядя на ваш конкретный код, может и другое решение подойти.
Рефакторинг - штука творческая :)
источник

И

Ильдар in БЭМ
zakaratcha
В целом - это такое предположение сходу. Может я и не угадал, как лучше ваш код зарефакторить.
Кажется, что строить состояние отображение от данных и взаимодействовать через события - в целом хорошая идея. Но вам, глядя на ваш конкретный код, может и другое решение подойти.
Рефакторинг - штука творческая :)
Мне в целом идея нравится, даже без переноса в отдельные сущности, а просто консолидировать всю логику в одном месте. Спасибо
источник

Р

Роман in БЭМ
У bem-forms немножко сложное для понимания, но очень сбалансированное API для управления формой и её контролами (работает на bem-components, т. е. если у вас своя система компонентов, API может не подойти).
источник

Prikolist Начрэл... in БЭМ
Прикольный логотип
источник

Р

Роман in БЭМ
источник

VH

Vitaly Harisov in БЭМ
источник

И

Ильдар in БЭМ
zakaratcha
В целом - это такое предположение сходу. Может я и не угадал, как лучше ваш код зарефакторить.
Кажется, что строить состояние отображение от данных и взаимодействовать через события - в целом хорошая идея. Но вам, глядя на ваш конкретный код, может и другое решение подойти.
Рефакторинг - штука творческая :)
Я делаю как мы обсудили. Зачем тогда функционал завязанный на смене модификаторов? если проект меняется на чуть более сложный, то приходится отказываться в пользу решений по типу того что вы предложили
источник

M

Michael in БЭМ
ENB server started at http://0.0.0.0:8080
/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/postcss-calc/node_modules/supports-color/index.js:5
const {env} = process;
     ^

SyntaxError: Unexpected token {
   at exports.runInThisContext (vm.js:53:16)
   at Module._compile (module.js:413:25)
   at Object.Module._extensions..js (module.js:452:10)
   at Module.load (module.js:355:32)
   at Function.Module._load (module.js:310:12)
   at Module.require (module.js:365:17)
   at require (module.js:384:17)
   at Object.<anonymous> (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/postcss-calc/node_modules/postcss/lib/css-syntax-error.js:6:45)
   at Module._compile (module.js:434:26)
   at Object.Module._extensions..js (module.js:452:10)

npm ERR! Linux 5.4.0-58-generic
npm ERR! argv "/home/lemitooo/.nvm/versions/node/v4.0.0/bin/node" "/home/lemitooo/.nvm/versions/node/v4.0.0/bin/npm" "start"
npm ERR! node v4.0.0
npm ERR! npm  v2.14.2
npm ERR! code ELIFECYCLE
npm ERR! whitepaper-stub@0.0.1 start: enb server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the whitepaper-stub@0.0.1 start script 'enb server'.
npm ERR! This is most likely a problem with the whitepaper-stub package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     enb server
npm ERR! You can get their info via:
npm ERR!     npm owner ls whitepaper-stub
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/lemitooo/Рабочий стол/my-whitepaper-project/npm-debug.log
источник

A

Anton in БЭМ
Michael
ENB server started at http://0.0.0.0:8080
/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/postcss-calc/node_modules/supports-color/index.js:5
const {env} = process;
     ^

SyntaxError: Unexpected token {
   at exports.runInThisContext (vm.js:53:16)
   at Module._compile (module.js:413:25)
   at Object.Module._extensions..js (module.js:452:10)
   at Module.load (module.js:355:32)
   at Function.Module._load (module.js:310:12)
   at Module.require (module.js:365:17)
   at require (module.js:384:17)
   at Object.<anonymous> (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/postcss-calc/node_modules/postcss/lib/css-syntax-error.js:6:45)
   at Module._compile (module.js:434:26)
   at Object.Module._extensions..js (module.js:452:10)

npm ERR! Linux 5.4.0-58-generic
npm ERR! argv "/home/lemitooo/.nvm/versions/node/v4.0.0/bin/node" "/home/lemitooo/.nvm/versions/node/v4.0.0/bin/npm" "start"
npm ERR! node v4.0.0
npm ERR! npm  v2.14.2
npm ERR! code ELIFECYCLE
npm ERR! whitepaper-stub@0.0.1 start: enb server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the whitepaper-stub@0.0.1 start script 'enb server'.
npm ERR! This is most likely a problem with the whitepaper-stub package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     enb server
npm ERR! You can get their info via:
npm ERR!     npm owner ls whitepaper-stub
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/lemitooo/Рабочий стол/my-whitepaper-project/npm-debug.log
object destructuring не работает в node 4, проверь требования пректа по nvmrc или engine в package.json
или самостоятельно попробуй пользоваться текущей LTS
источник

M

Michael in БЭМ
Anton
object destructuring не работает в node 4, проверь требования пректа по nvmrc или engine в package.json
или самостоятельно попробуй пользоваться текущей LTS
16:03:51.552 - [failed] [desktop.bundles/hello/hello.min.css] borschik
/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/vow/lib/vow.js:105
           throw e;
           ^

Error: ENOENT: no such file or directory, open '/home/lemitooo/Рабочий%20стол/my-whitepaper-project/desktop.bundles/hello/hello.css'
   at Object.openSync (fs.js:476:3)
   at Object.readFileSync (fs.js:377:35)
   at res.read (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/lib/tech.js:116:42)
   at res.createFile (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/lib/tech.js:27:37)
   at res.process (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/lib/tech.js:35:24)
   at Cmd.<anonymous> (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/lib/coa.js:139:38)
   at /home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/node_modules/coa/lib/cmd.js:416:45
   at _fulfilled (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/q/q.js:854:54)
   at /home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/q/q.js:883:30
   at Promise.promise.promiseDispatch (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/q/q.js:816:13) {
 type: 'Error',
 '$error': '$error',
 errno: -2,
 syscall: 'open',
 code: 'ENOENT',
 path: '/home/lemitooo/Рабочий%20стол/my-whitepaper-project/desktop.bundles/hello/hello.css'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! whitepaper-stub@0.0.1 start: enb server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the whitepaper-stub@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/lemitooo/.npm/_logs/2021-03-23T13_03_51_593Z-debug.log
lemitooo@lemitooo:~/Рабочий стол/my-whitepaper-project$ events.js:292
     throw er; // Unhandled 'error' event
     ^

Error [ERR_IPC_CHANNEL_CLOSED]: Channel closed
   at process.target.send (internal/child_process.js:705:16)
   at callback (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/worker-farm/lib/child/index.js:29:17)
   at Array.<anonymous> (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/vow/lib/vow.js:713:56)
   at Immediate.callFns [as _onImmediate] (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/vow/lib/vow.js:24:35)
   at processImmediate (internal/timers.js:461:21)
Emitted 'error' event on process instance at:
   at internal/child_process.js:709:35
   at processTicksAndRejections (internal/process/task_queues.js:75:11) {
 code: 'ERR_IPC_CHANNEL_CLOSED'
}
источник

AT

Alexey Terehin in БЭМ
Michael
16:03:51.552 - [failed] [desktop.bundles/hello/hello.min.css] borschik
/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/vow/lib/vow.js:105
           throw e;
           ^

Error: ENOENT: no such file or directory, open '/home/lemitooo/Рабочий%20стол/my-whitepaper-project/desktop.bundles/hello/hello.css'
   at Object.openSync (fs.js:476:3)
   at Object.readFileSync (fs.js:377:35)
   at res.read (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/lib/tech.js:116:42)
   at res.createFile (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/lib/tech.js:27:37)
   at res.process (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/lib/tech.js:35:24)
   at Cmd.<anonymous> (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/lib/coa.js:139:38)
   at /home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/borschik/node_modules/coa/lib/cmd.js:416:45
   at _fulfilled (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/q/q.js:854:54)
   at /home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/q/q.js:883:30
   at Promise.promise.promiseDispatch (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/q/q.js:816:13) {
 type: 'Error',
 '$error': '$error',
 errno: -2,
 syscall: 'open',
 code: 'ENOENT',
 path: '/home/lemitooo/Рабочий%20стол/my-whitepaper-project/desktop.bundles/hello/hello.css'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! whitepaper-stub@0.0.1 start: enb server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the whitepaper-stub@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/lemitooo/.npm/_logs/2021-03-23T13_03_51_593Z-debug.log
lemitooo@lemitooo:~/Рабочий стол/my-whitepaper-project$ events.js:292
     throw er; // Unhandled 'error' event
     ^

Error [ERR_IPC_CHANNEL_CLOSED]: Channel closed
   at process.target.send (internal/child_process.js:705:16)
   at callback (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/worker-farm/lib/child/index.js:29:17)
   at Array.<anonymous> (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/vow/lib/vow.js:713:56)
   at Immediate.callFns [as _onImmediate] (/home/lemitooo/Рабочий стол/my-whitepaper-project/node_modules/vow/lib/vow.js:24:35)
   at processImmediate (internal/timers.js:461:21)
Emitted 'error' event on process instance at:
   at internal/child_process.js:709:35
   at processTicksAndRejections (internal/process/task_queues.js:75:11) {
 code: 'ERR_IPC_CHANNEL_CLOSED'
}
Держать в пути к файлу кириллицу не есть хорошая практика
источник

M

Michael in БЭМ
Alexey Terehin
Держать в пути к файлу кириллицу не есть хорошая практика
Но это не решит проблему)
источник

M

Michael in БЭМ
Alexey Terehin
Держать в пути к файлу кириллицу не есть хорошая практика
или решит?
источник

AT

Alexey Terehin in БЭМ
файл лежит на .../Рабочий стол/...
а запрос идет на .../Рабочий%20стол/...
источник

AT

Alexey Terehin in БЭМ
Нода не умеет хорошо работать с кириллицей.
Во избежание проблем, лучше папку с проектом перенести
источник

M

Michael in БЭМ
Ура-ура! Помогло. Спасибо... Тупая ошибка(получается, в linux mint на русском языке(или кириллице) вообще не рекомендуется хранить проекты)) Еще раз спасибо
источник

AT

Alexey Terehin in БЭМ
Пожалуйста)
Только дело не в операционной системе, а в самой node.js
источник