magento2中使用requirejs

7天成为Magento系统架构师,现在开始学习Magento全栈开发!

《Magento2.X企业级开发实战》

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

如无特殊说明或标注,任何个人或组织,复制、转载、采集本站内容请注明:
本文来源于:【Magento中文网】,并添加本文地址链接。
如未按上述操作复制或转载,本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益,可联系我们进行处理。