Question

最近，我在requirejs上搜索了很多非AMD jQuery代码，但找不到合适的方法。

更具体地说，我想使用下面提到的网址中找到的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中的requirejs-config.js javascript模块的配置

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

下面是Pana手风琴插件的一些代码行

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中，

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

仍然，即使我在填充程序配置中创建了导出条目，控制台中仍然显示错误Uncaught TypeError: Cannot read property 'init' of undefined。但是，当我最终在手风琴对象之后编写return语句时，错误就解决了。

return accordion;

例如，如果我们必须手动从插件为对象编写return语句，则使用shim的目的是什么？

第二，我必须编写垫片配置的完整路径吗？如果我为位于panaaccordion的文件映射别名'js/pana-accordion'，仍然需要使用'js/pana-accordion'进行填充程序配置，否则会出现一些加载顺序问题。

第三，我可以将此类非amd插件与requirejs一起使用，而无需修改它们吗？如果是，怎么办？

将非amd jQuery插件与requirejs一起使用而不修改它们吗？

0 个答案: