подключение зависимых библиотек jquery БЭМ

[AndreyGladkov]

как правильно это осуществлять? Сейчас я указываю путь в блоке для борьщика и он цепляет библиотеку, У меня есть подозрение что это не совсем православный способ. Если мне эта библиотека понадобиться в других блоках то при указанном способе попадет несколько библиотек в общий js?

[Guria]

Всё верно. Это должен быть отдельный блок или элемент блока jquery в котором библиотека будет также инклюдиться борщиком. У ваших блоков останется только прописать зависимость.

[AndreyGladkov]

т.е мне на уровне desktop.blocks нужно объявить блок jquery и внем добавить элемент который будет библиотекой и прописать все зависимости?

[kompolom]

/* global modules:false */

modules.define('jquery__owlcarousel', ['jquery'], function(provide, $) {
 window.jQuery = $;
/* borschik:include:../../libs/owl.carousel/dist/owl.carousel.js */
provide($);

});

Например так

[AndreyGladkov]

Это делается на уровне переопределения что я и написал? Я просто писал такую же конструкцию но в конкретном блоке. А как я понял надо в блоке jquery создать элемент и там писать этот код.

[Guria]

это делается на любом уровне но в папке jquery/__owlcarusel/

[AndreyGladkov]

Т.е я создал папку jquery на уровне desktop.blocks в ней создал папку элемента и объявил новый элемент который зависит от jquery

/* global modules:false */

modules.define('jquery__owlcarousel', ['jquery'], function(provide, $) {
 window.jQuery = $;
/* borschik:include:../../libs/owl.carousel/dist/owl.carousel.js */
provide($);

});

Далее в нужном блоке прописал в deps.js

({
    mustDeps: [
        { block: 'jquery'}
    ]
})

И в js нужного блока где юзаем нужную библиотеку

modules.require(['jquery__owlcarousel'], function($) {
    конструкция...
});

Так или на каком то этапе не верно? сама jquery определяется на уровне ядра как я понимаю

[Guria]

В нужном блоке не достаточно указать зависимость от jquery. Надо от конкретного элемента:

({
    shouldDeps: [
        { block: 'jquery', elem: 'owlcarousel' }
    ]
})

jquery автоматически подключается в bem-core с помощь блока loader, если он не был загружен другим способом.

В остальном всё верно.

[AndreyGladkov]

Да все гуд, огромное спасибо! А если у меня есть какая либо библиотека, которая не имеет отношения к jquery, ее конечно можно объявить так же, но может есть более правильный способ?

[Guria]

объявляй точно также, но не как элемент блока jquery, а как самостоятельный блок

[AlexandrBukhtatyy]

я так и не врубился как подключить d3js к проекту, создал свою библиотеку назвал d3. в этой библиотеке создал уровень common.blocks в ней определил блок d3js туда скопировал скачанный d3.min.js как должен выглядеть код блока libs/d3js/common.blocks/d3.js ?

[tadatuta]

что-то типа такого:

modules.define('d3', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                /* borschik:include:d3.min.js */
            }
        }
    }
}));

});

Но на самом деле можно качать неминимизированный — все равно весь проектный JS будет минимизирован в итоге, а исходный проще дебажить.

[AlexandrBukhtatyy]

сейчас сделал по аналогии с jquery(полностью кроме урла с cdn). в своем блоке прописал зависимость(на всякий случай, что бы скачал) в браузере в обозревателе скачанных ресурсов jquery есть d3 нету. но d3.md появился в директории. пока разбираюсь. а можно скачать и локально в блоке положить его? и еще поврос по поводу /* borschik:include:d3.min.js */ что да как?

Спасибо большое за столь скорые ответы на вопросы, при такой поддержке не угасает желание разобраться с БЭМом

[AlexandrBukhtatyy]

по borschik нашел ответ. он и подключает содержимое файла? вот что получилось в d3.js

/**
 * @module d3
 * @description Provide d3 (load if it does not exist).
 */

modules.define('d3',['loader_type_js','d3__config'],function(provide, loader, cfg) {

/* global d3 */

function doProvide(preserveGlobal) {
    /**
     * @exports
     * @type Function
     */
    provide(preserveGlobal? d3 : d3.noConflict(true));
}

typeof d3 !== 'undefined'?
    doProvide(true) :
    loader(cfg.url, doProvide);
});

[tadatuta]

по borschik нашел ответ. он и подключает содержимое файла?

да, но только локально. если нужно загружать по http, то действительно стоит смотреть как реализовано подключение jQuery.

[AlexandrBukhtatyy]

В page.deps.js дописал блок

{ block : 'd3'}

и вот результат http://prntscr.com/b3766j возможно ли подключить блок d3 к странице(блоку page) из самой библиотеки блока(d3)? правильно ли будет это сделать в bemhtml(через контекст болока page)?

[tadatuta]

я пока не понимаю, какую задачу нужно решить. блок d3 же просто предоставляет библиотеку, верно? я бы ожидал, что его будут использовать какие-то блоки уровня проекта, чтобы делать какие-то конкретные штуки.

в каком-то примерно таком духе:

modules.define('my-project-things', ['i-bem__dom', 'd3'], function(provide, BEMDOM, D3) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                // тут используем D3
            }
        }
    }
}));

});

[AlexandrBukhtatyy]

Да правильно! в итоге получится библиотека с блоком содержащим d3js и другие блоки(для отрисовки различных диаграмм, типа bar-char, donut-chart и тд) но все равно не смог подключить d3 ни вашим ни своим методом =( gitlab-репозиторий

[tadatuta]

https://gitlab.com/Mayak/d3-charts/merge_requests/1

[AlexandrBukhtatyy]

tadatuta Спасибо! смог использовать D3 оказывается при определении блока обязательно надо указывать "i-bem__dom" !?

odules.define('chart', ['i-bem__dom','d3'], function (provide, BEMDOM, D3) {

[tadatuta]

Если декларируется блок с DOM-представлением, то да.

Подробнее см. https://ru.bem.info/technology/i-bem/v2/i-bem-js-decl/