Как я пишу JS модули c использованием jquery
Если есть смысл написать плагин jquery , например для добавления в избранное, я пишу плагин. Но часто нет смысла писать плагин, например карточка товара,в таком случаи я пишу модуль!
Зачем мне вообще нужна такая замарочка ? Я люблю js и делаю всякие сложные сценарии на страницах для увеличения интерактивности. Так же важное преимущество это свое пространство имен. Решать сложные задачи на функциях не вариант.
Сам модуль кладу в script.js шаблона
Заготовка
Инициализация в шаблоне
"Каркас" готов. На странице как правило имеется различный функционал. В методе init запускаются все части функционала по отдельности. Например на страничке есть картинка с эффектами, табы и прочие фичи.
Проблемы
Одна из основных проблем это this и область видимости в callback функциях
Например:
Решений проблемы две.
1. Можно сделать ссылку на this
2. Можно использовать $.proxy
Собственно все!
Если есть смысл написать плагин jquery , например для добавления в избранное, я пишу плагин. Но часто нет смысла писать плагин, например карточка товара,в таком случаи я пишу модуль!
Зачем мне вообще нужна такая замарочка ? Я люблю js и делаю всякие сложные сценарии на страницах для увеличения интерактивности. Так же важное преимущество это свое пространство имен. Решать сложные задачи на функциях не вариант.
Сам модуль кладу в script.js шаблона
Заготовка
//Конструктор var GoodsDetail= function(options) { //Настройки модуля по умолчанию var defaultOptions = { loader: 'Загрузка...', ajax: '/ajax.php', gallerySelector: '#gallery' // Например это будет селектор узла, в котором хранится картинка }; // Объединяет настройки по умолчанию и настройки переданные в конструктор this.options = $.extend({}, defaultOptions, options); //Тут я определяю нужные узлы, для удобного доступа к ним внутри класса. Здесь удобно переопределять при надобности нужные узлы, не рыться по коду, все вверху. this.gallery= $(this.options.gallerySelector); this.neededNode2 = $('#neededNode2'); //Точка входа this.init(); }; GoodsDetail.prototype = { //Точка входа init: function () { .... } }; |
Инициализация в шаблоне
<sc ript> $(function() { var GoodsDetailController = new GoodsDetail({ajax: '<?=$arParams['AJAX_PATH']?>'}); }); </sc ript> |
"Каркас" готов. На странице как правило имеется различный функционал. В методе init запускаются все части функционала по отдельности. Например на страничке есть картинка с эффектами, табы и прочие фичи.
init: function () { this.initGallery(); this.initTabs(); }, initGallery: function() { .... this.gallery.lightbox(); }, initTabs: function() { ...... }, foo: function() { ..... }, anotherFoo: function() { ...... } |
Проблемы
Одна из основных проблем это this и область видимости в callback функциях
Например:
anotherFoo: function() { //this как и ожидается дает доступ ко всем методам и переменным объекта this.neededNode2.on('click', function(){ //Внутри callback функции this уже будет ссылкой на узел по которому кликнули. }); } |
Решений проблемы две.
1. Можно сделать ссылку на this
anotherFoo: function() { var _this = this; this.neededNode2.on('click', function(){ _this.foo(); }); } |
2. Можно использовать $.proxy
anotherFoo: function() { var _this = this; this.neededNode2.on('click', $.proxy(this.foo, this)); } foo: function(e) { //this доступен как нужно , ссылка на текущий объект //$(e.currentTarget) - Узел по которому кликнули } |
Собственно все!