Использовать не-amd jquery плагины с requirejs без их изменения? - PullRequest
Новая
       69

Использовать не-amd jquery плагины с requirejs без их изменения?

0 голосов
/ 27 декабря 2018

Я недавно много искал по использованию не-amd jquery-кода с requirejs, но не смог найти правильный способ сделать это.

Чтобы быть более конкретным, я хочу использовать pana-accordion.jsнаходится по указанному ниже адресу.

https://www.jqueryscript.net/accordion/Horizontal-Accordion-Slider-Plugin-with-jQuery-Pana-Accordion.html

Но проблема в том, что он не осведомлен и не экспортирует ничего из него. В настоящее время я делаю это для magento-2 cmsПока что я создал свой custom.phtml и вызвал его на домашней странице через административную область. Ниже моя custom.phtml

<div class="pana-accordion" id="accordion">
  <div class="pana-accordion-wrap">
    <div class="pana-accordion-item" style="background-color: #F44336"><img width="500" height="300" src="https://unsplash.it/500/300?image=57" /></div>
    <div class="pana-accordion-item" style="background-color: #2196F3"><img width="500" height="300" src="https://unsplash.it/500/300?image=49" /></div>
    <div class="pana-accordion-item" style="background-color: #4CAF50"><img width="500" height="300" src="https://unsplash.it/500/300?image=39" /></div>
    <div class="pana-accordion-item" style="background-color: #FF9800"><img width="500" height="300" src="https://unsplash.it/500/300?image=29" /></div>
  </div>
</div>


<script type="text/javascript">
    require(['jquery','panaaccordion'],function($, accordion) {
                accordion.init({
                    id: 'accordion',
                });
    })
</script>

А вот конфигурация для pana-accordion.js модуля javascript в requirejs-config.js

var config = {
    'map': {
        '*': {
            'panaaccordion': 'js/pana-accordion'
        }
    },
    'shim': {
        'panaaccordion': {
            deps: ['jquery'],
            exports: 'accordion'
        }
    }
}

Ниже приведены несколько строк кода для плагина pana-acordion 

var accordion= {
    init: function(options){
        var that=this;
        options = $.extend(true,{
            expandWidth: 500,
            itemWidth: 100,
            extpand: 0,
            autoPlay: true,
            delay: 3000,
            animateTime: 400,
            borderWidth: 1,
            autoPlay: true,
            deviator: 30,
            bounce:"-50px"
        },options);
    .....

Как вы можете видеть, он не переносит код внутри define(), не экспортирует и не возвращает что-либо.объект объявлен глобально.

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

Если я оберну код внутри, определите, как показано ниже, 

  define(['jquery'],function($){
            //pana-accordion plugin code
            });

Все-таки есть ошибка в минусахole с надписью Uncaught TypeError: Cannot read property 'init' of undefined, хотя я создал запись экспорта в конфигурации shim.Но ошибка устраняется, когда я наконец пишу оператор return после объекта accordion. 

return accordion;

Какова цель использования shim, если нам нужно вручную написать оператор return из плагина для объекта, например?

Во-вторых, я должен написать полный путь для конфигурации прокладки?Если я сопоставляю псевдоним panaaccordion для файла, расположенного в 'js/pana-accordion', я все равно должен использовать 'js/pana-accordion' для настройки прокладки, в противном случае возникают некоторые проблемы с порядком загрузки.

В-третьих, могу ли яиспользовать такие плагины non-amd с requirejs, не изменяя ни одной строки из них ??Если да, то как?

...