Magento2 使用requireJS添加自定义javascript

Magento 2在javascript中引入了一些新特性，其中一个是“requireJS”（javascript文件加载器），第二个是“jQuery”，一个非常流行的js库。最大的好处是使用requireJS，这意味着Magento 2已经为即将到来的HTTP2协议做好了准备。在接下来的几个步骤中，我们将解释如何创建有效的JavaScript代码以在requireJS中使用，让我们从一个例子开始吧。

首先，我们需要创建一个有效的Magento 2模块，如下面的屏幕截图所示：

您可能会注意到Magento 1和Magento 2之间存在一些差异，因为所有javascript，布局和模板文件现在都属于该模块。此外，我们的javascript文件位于模块的目录路径中：“app/code/Magease/Js/view/frontend/web/js/”。在这个例子中，我们创建了两个js文件：“Magease.js”和“logger.js”

看看我们的javascript代码，该代码适用于requireJS环境。

define([
    "jquery",
    "logger",
    "jquery/ui"
], function($, logger) {
    "use strict";
    logger.log('magease.js is loaded!!');
    logger.log(logger);
 
        //creating jquery widget
        $.widget('magease.js', {
            _create: function() {
 
                //options which you can pass from js.phtml file in json format
                logger.log(this.options);
 
                //access to element p#test
                logger.log(this.element);
 
                //for exmple, you can create some click event or something else
                this.element.on('click', function(e){
                    logger.log("You click on element: " + e.target);
                });
            }
 
        });
 
    return $.magease.js;
});

您会注意到顶部的javascript代码使用了“define”函数。

这个函数来自requireJs - “define”函数的第一个参数是依赖数组，第二个参数是我们函数的定义。
定义函数应始终返回一个对象。在我们的示例中，我们的函数返回“$.magease.js”。
您可以在url上阅读有关define function的更多信息：http：//requirejs.org/docs/api.html#define

在我们的示例中，我们的javascript使用jQuery，jQueryUI和logger。应在“define”函数中声明所有依赖项。您可以看到我们将下一个数组作为第一个参数：

["jquery", "logger", "jquery/ui"]

在我们的函数定义中，我们创建了jquery小部件，并将所有逻辑放在小部件构造函数“_create”中。JQuery和logger作为下一个参数传递：“$”和“logger”。

我们的记录器类的源代码如下。您可以注意到我们的类不需要任何依赖，并且在“define”函数中，只有定义函数返回对象，如前所述。

define(function() {
    "use strict";
 
    return {
        log : function(param){
            console.log(param);
        }
    };
});

所有文件都应在“requirejs-config.js”文件中声明 - 这是使用requireJs的配置文件。

var config = {
    map: {
        '*': {
            mageasejs:      'Magease_Js/js/magease',
            logger:      'Magease_Js/js/logger'
        }
    }
};

下一步将解释如何加载和使用我们的JavaScript。为了使用/加载我们的javascript，你必须在一些phtml文件中添加以下代码。我们完整的js.phtml文件如下：

测试元素

<script type="text/x-magento-init">// <![CDATA[ { "#test": { "Magease_Js/js/magease": {"url":"http://www.example.url", "method":"post"} } } // ]]></script>

在Magento 2中有一个javascript解析器（位于脚本“lib/web/mage/apply/scripts.js”中），它读取属性type=“text/x-magento-init”的脚本标签，并使用大括号中的“子”json数据加载/处理它们：

"#test": {
            "Magease_Js/js/magease":
                {"url":"http://www.example.url", "method":"post"}
	}

您会注意到“#test”，这是传递给jquery小部件的html元素的id，它可以在我们的脚本中通过“this.element”属性获得。其他元素“url”和“method”也是从json对象传递到我们的小部件的选项，这些选项在js属性“this.options”的脚本中可用，可以根据需要定义这些选项。

如果你做了上面所做的一切，javascript应该工作，你应该在html头部有一个脚本标签，如下图所示：

magease