Задать вопрос

i

Ответы пользователя по тегу JavaScript

  • Что насчет JS и префиксов в БЭМ (BEM)?

    @ilyarsoftware
    Из истории развития БЭМ https://ru.bem.info/methodology/history/
    2005 год... Классам блоков мы добавили префиксы (b-, c-, g-), чтобы отличать их от внутренних классов...

    Настоящие
    Исторически они появились в переходный период для того, чтобы отличать новый код, написаный по БЭМ, от старого. Со временем мы от них отказались.
    https://ru.bem.info/forum/158/ и https://ru.bem.info/forum/806/

    Соглашение по именованию/Имя блока:
    Иногда к именам блоков могут добавляться различные префиксы.




    Пример: https://codepen.io/ilyar/pen/WZzzmP?editors=1010#0

    <div class="myBlock i-bem" data-bem='{"myBlock":{"param": "val"}}'>
    ...
</div>

    modules.define('myBlock', ['i-bem-dom'], function (provide, bemDom) {

    provide(bemDom.declBlock(this.name, /* методы экземпляра */ {

            onSetMod: {
                'js': {
                    'inited': function () {
                        this.domElem[0].innerHTML = this.__self.parseParams(this.params);
                    }
                }
            }

        }, /* статические методы */ {

            parseParams: function (params) {
                return '<pre>' + JSON.stringify(params, null, ' ') + '</pre>';
            }

        }
    ));

});


    Еще есть реализация БЭМ + React.js https://github.com/bem/bem-react-core, пример https://scrimba.com/c/cQR4bTr и теория https://www.youtube.com/playlist?list=PLAmtJdts5To...
    Ответ написан
    2 комментария
    2 комментария

  • Как взаимодействуют стили и скрипты в BEMjson?

    @ilyarsoftware
    Если рассматривать сборку настроенную в bem/project-stub то все начинается с desktop.bundles/project/project.bemjson.js:

    • упомянутые блоки в project.bemjson.js формируют декларацию project.bemdecl.js;
    • по декларации project.bemdecl.js вычисляются зависимости project.deps.js;
    • используя знания о зависимостях собираются цели project.js и project.css.
    uXNvQ2lOOEgTRcojbeobCz4NWVg.svg

    Подробности: Технология для описания зависимостей и Сборка БЭМ-проекта.

    Рекомендую пройти по шагам статьи: Создаем свой проект на БЭМ в процессе может быть полезен рабочий пример проекта ilyar/start-with-project-stub, коммиты организованы по главам статьи.

    После прохождения стать должно стать понятнее, а по вопросам которые статья не раскрывает полностью обязательно можно найти материал подробного описания.
    Ответ написан
    2 комментария
    2 комментария

  • Возможен dom в json формате?

    @ilyarsoftware
    Да это возможно, например BEMJSON:
    {
  tag : 'div',
  attrs : {
    id : 'anchor1',
    name : 'BEM',
  },
  content : [
    {
      tag : 'div',
      attrs : {
        id : 'anchor2',
        name : 'BEM 2',
      },
      content : 'BEM text'
    },
  ]
}

    После прогона через стандартные шаблоны BEMHTML получим (живой пример):
    <div id="anchor1" name="BEM">
    <div id="anchor2" name="BEM 2">BEM text</div>
</div>


    Еще может быть для вашей задаче подойдет BEMTREE. При помощи BEMTREE описывается шаблон обработки JSON-данных, который преобразует данные в BEMJSON и далее через BEMHTML получаем HTML. Пример:

    Есть данные:

    {
  "content": "BEM Block!",
  "title": "I am BEM"
}


    Описываем трансформацию данных в BEMJSON на технологии BEMTREE:

    block( 'someBlock' )(
  def()( function () {
    var data = this.ctx.data || {};
    this.ctx.content = [
      { elem : 'title', content : data.title || 'Empty title' },
      { elem : 'content', content : data.content || 'Empty content' },
    ];
    return applyNext();
  } )
);


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

    Тут jsfiddle.net/ilyar/5dw8Q и тут https://goo.gl/GRGSFf — живой пример применения BEMTREE в браузере (можно и на сервере применяя те же шаблоны).
    Ответ написан
    1 комментарий
    1 комментарий

  • Добавление цены к товару при отправки его в корзину UMI?

    @ilyarsoftware
    Как можно отправить запрос с ценой = 1 000?

    Если кратко, то никак. Подробнее можно прочитать в документации по макросу %emarket basket()% именно он используется для взаимодействие с корзиной для текущего пользователя.

    Ниже опишу возможные варианты применения применения коэффициента для цены.

    Используйте валюты, системная валюта "фантики", в модуле Интернет магазин устанавливаете курс рублей 10, на посетителю показываете рубли. Создаем новою валюту, и устанавливаем ее в качестве системной валюты в config.ini, Код валюты по умолчанию: default-currency = "RUR", можно использовать существующие, если только у вас отключено обновление валют, в противном случае курс будет обновятся.

    Более простой вариант для применения коэффициента к цене можно задействовать функционал скидок.

    Для реализации более сложной логики применения коэффициента следует использовать API UMI.CMS, например реализовать обработчик событий umiObjectProperty_loadPriceValue для отображения цены и order_refresh (в зависимости от требований может потребоваться использовать событие orderItem_refresh) для расчета заказа (подробнее смотри документацию Разработка нестандартного функционала / Событийная...).

    Как вариант использования API UMI.CMS сделать собственную реализацию процесса работы с корзиной и оформления товара это будет проще чем делать с нуля, но сложнее чем реализация обработчиков событий, зато получаем больше контроля.
    Ответ написан
    4 комментария
    4 комментария

  • Альтернатива html шаблонизотру от Bem?

    @ilyarsoftware
    Любой, а точнее в вашем случае с поддержкой JSON, например NANO, хотя, грубо говоря, ближе к BH/BEMHTML, можно назвать json2html, пример использования json2html с CSS из bem-components:

    var data = [
  {
    'text': 'BEM — BEM Easy Makeup',
    'url': 'https://ru.bem.info/',
  },
];

var template = {
  tag: 'a',
  class: 'button button_theme_islands button_size_xl',
  href: '${url}',
  children: [
    {
      tag: 'span',
      class: 'icon icon_social_twitter',
    },
    {
      tag: 'span',
      class: 'button__text',
      html: '${text}',
    },
  ]
};
document.body.innerHTML = json2html.transform( data, template );

    Демо на jsfiddle

    Уверен есть и другие, но все они не будут знать про БЭМ-термины и поэтому придется добавить хеперов для работы с боками, элементами, модификаторами и пр.

    На текущий момент мне не известно ничего удобнее BH/BEMHTML, но если такой шаблонизатор появится, его опубликуют в разделе bem.info/Проекты на БЭМ.
    Ответ написан
    Комментировать
    Комментировать

  • Разбор get параметров UMI?

    @ilyarsoftware
    Вероятно это ошибка, воспроизводится на версии 2.9.7-49344.
    Ответ написан
    Комментировать
    Комментировать