向Magento 2添加jQuery库

第三方开发人员如何将jQuery库添加到Magento 2？

虽然Magento 2在其前端主题中包含jQuery版本，但jQuery对象在全局名称空间中并不立即可用。我相信这是因为Magento 2使用RequireJS引入jQuery，并且RequireJS直到需要它时才加载模块文件。

这给jQuery插件带来了一个问题。通常，我会提供一个HTML插件，看起来像这样

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

但是，这对于Magento 2是不可能的。因为该jquery.cookie.js文件通过使用全局jQuery对象定义了jQuery插件，所以它将在Magento 2中失败并出现jQuery is not defined错误。

前端开发人员应如何在Magento 2的前端应用程序中包括标准的jquery插件库？

创建requirejs-config.js公司名称\模块名称\视图\前端\ requirejs-config.js添加

var config = {
   map: {
       '*': {
           bannerslider: 'Companyname_Modulename/js/flexslider',
       }
   }
};

您的模块Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js中的Js文件
只需使用以下语法添加jquery lib

<script type="text/javascript">
require(['jquery','bannerslider'],function($){
    $(window).load(function() {
        $('.flexslider-8').flexslider({
            animation: "fade",
            controlNav: "thumbnails",
            slideshowSpeed: 2000,
            minItems: 2,
            maxItems: 4
        });
    });
});
</script>

第二个例子

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

我引用了Magento文档。

要建立对第三方插件的依赖性，请在以下配置文件中指定垫片：

在您的requirejs-config.js中：

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

然后在您的主题或模块中包含第三方插件代码：“ web / js / 3-rd-party-plugin.js”，如下所示：

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

这个解决方案是有利的，因为您将包含插件文件而无需进行任何修改。当插件作者更新甚至使用CDN时只需替换js文件！

最好的办法是使用Magento 2 模块或主题来包含此类插件/库。这是推荐的方法和最佳实践。

方法1>主题：如果javascript / jquery库与主题相关（为了更改系统的外观）。

• 将自定义组件源文件放在以下位置之一
  [theme_dir] / web / js /
• 将您的requirejs-config.js文件放在
  [theme_dir]中

方法2>模块：如果javascript / jquery库与特定的业务功能相关或处理了Magento功能。它应该放在模块内部。

• 将自定义组件源文件放在以下位置之一
  [module_dir] / view / frontend / web / js /

• 将您的requirejs-config.js文件放在
  [module_dir] / view / frontend /

Magento 2强烈建议不要更改默认Magento组件和小部件的源代码。所有定制必须在定制模块或主题中实现。

Alan，jQuery UI Widget工厂有一个特例。要使AMD兼容，请检查以下链接。

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/