До перехода на i-bem из bem-core я просто указывал в deps.js блоки i-baron, код подключался и всё работало хорошо и просто.
Теперь же с введением модульной системы ymaps/modules такой трюк не работает и некоторые библиотеки (например, baron.js) не инициируются.
В примерах к Руководству по i-bem.js нашел что-то похожее на то, что мне нужно, но т.к. я тупой и про модули ничего не знаю и JS-программировании в целом плохо ориентируюсь, мне нужны примеры кода, подключающие и использующие jQuery-плагины.
Может кто-нибудь сильный помочь?
Вот куски кода в одном из неработающих состояний:
Определение в common.blocks:
modules.define('baron', function(provide) {
provide(/*[тут код библиотеки]*/);
});
Использование в desktop.blocks:
modules.define('i-bem__dom', ['baron', 'jquery'], function(provide, $, DOM) {
DOM.decl({ block: 'b-baron' }, {
onSetMod: {
'js': {
'inited': function() {
var self = this,
scroll;
scroll = self.domElem.baron({
// [всякие параметры]
});
}
}
}
});
provide(DOM);
});
В provide должен быть не код библиотеки а то, что этот модуль реализует (обычно это объект или функция)
В случае с бароном код должен быть примерно такой:
modules.define('baron', function(provide) {
/*[тут код библиотеки]*/
provide(baron); // Переменная в коде барона, в которую фигачится тот самый объект, реализующий модуль
})
Про модули можно почитать тут: https://github.com/ymaps/modules
Спасибо за ответ
А можно пример работы с таким модулем? У меня стала выпадать ошибка что $ и DOM undefined. Это немного сбивает меня с толку.
Т.е. пример определения кода библиотеки уже есть, не получается им правильно воспользоваться
Я читал, но ничего не понял
1. обрати внимание на порядок подключения модулей, у тебя сейчас:
modules.define('i-bem__dom', ['baron', 'jquery'], function(provide, $, DOM) {})
надо:
modules.define('i-bem__dom', ['baron', 'jquery'], function(provide, baron, $, BEMDOM) {})
2. Проверь подключается ли модуль jquery (по умолчанию он сам должен добавить тег в head страницы с помощью модуля loader_type_js.
3. Вероятно в модуль baron ты прокидываешь undefined-переменную, если например вставил код с обёрнутой анонимной, самовызывающейся функцией:
modules.define('baron', function(provide) {
(function(window,undefined){
/*[код библиотеки]*/
тут есть переменная baron
})(window)
provide(baron); //эта переменная её не видит
})
я использую bower для управления зависимостями и борщик для импорта кода в мир бэм-компонентов.
библиотека устанавливается через bower куда-нибудь в libs/bower_components/ , пусть это baron/baron.js ,
для bem-bl просто создаю файл common.blocks/i-baron/i-baron.js с содержимым типа:
/*borschik:include:../../
и уже этот блок рекварю куда нужно.
такой трюк дает возможность не только управлять зависимостями, но и в common.blocks/i-baron/i-baron.js делать любую удобную обвязку для кода библиотеки.
Спасибо за отзывчивость, всё заработало.
У baron'а еще были изменение синтаксиса в новой версии, которые я не заметил. Поэтому даже правильный вариант поначалу выдавал странную ошибку.
Кстати, чтобы легко заработали остальные jQuery-плагины, пришлось использовать ужасный костыль в модуле перед кодом подключаемой js-библиотеки:
modules.define('i-bem__dom', ['jquery'], function(provide, $, DOM) {
window.jQuery = window.$ = $;
/*код библиотеки*/
});
У меня просто сейчас нет идей, как более красиво решить проблему с прокидыванием $.
если копипастить ручками то, можно так
modules.define('i-bem__dom', ['jquery'], function(provide, $, DOM) {(function(window, $, undefined){
...
})(window, $);});
в данном случае, да. но в общем не сработает - для такого уровня понадобится хитрый конфиг. потому, что именование в виде/.js это скорее исключение из правил. чаще /index.js или /.min.js - все крайне специфично.
Возможно сделать без указания директории библиотек (libs)?
Это существенно для случая когда в проекте директория библиотек (libs) переопределяется.