在Magento 2中使用JavaScript组件

Magento 2使用RequireJS库来使用JavaScript。该库使用异步依赖项加载模型-AMD。这使您可以优化加载包含JavaScript文件的页面所需的时间。另外，通过管理JavaScript资源依赖性，我们摆脱了已加载库的重复。

JavaScript资源的存储位置
JavaScript组件
Define vs require
在PHTML模板中插入JS组件
选择器上初始化组件
在带参数的选择器上初始化组件
在JavaScript中选择器上初始化组件

JavaScript资源的存储位置

• lib/web/ -此文件夹包含Magento中使用的库。这些可以是第三方库，例如jquery，underscore.js，knockout.js，也可以是基于/mage/文件夹中的Magento库。
• app/code/[Vendor]/[Module]/view/[areaName]/web/ —模块中使用的javascript文件的路径；
• app/design/[areaName]/[VendorTheme]/[themeName]/web/ -主题中使用的javascript文件的路径；
• app/design/[areaName]/[VendorTheme]/[themeName]/[Vendor]_[Module]/web/ -模块的继承javascript文件的路径。

JavaScript组件

JS组件是作为AMD模块的RequireJS模块。这种方法使我们可以将逻辑封装在模块中，而不会阻塞全局名称空间。模块也可以使用其他模块。

这是一个简单的RequireJS模块的示例：

requirejs([], function() {
   alert("Hello World!");
});

现在，在加载页面时，您将看到弹出“ Hello world”！

让我们连接jQuery和mage/cookies：

define([
  "jquery",
  "mage/cookies"
], function($){
  ...
});

如您所见，您需要以数组的形式指定必要的模块以连接这些模块。然后RequireJs将按照声明模块的顺序将模块传递给函数。

Define vs require

如果要创建模块，应用程序的其他部分将依赖该模块，则需要使用define()。如果我们的模块仅使用其他模块，则使用require（）。

在PHTML模板中插入JS组件

根据任务，您可以使用两个选项之一来表示：

• 使用data-mage-init属性
• 使用<script type =“text/x-magento-init”/>标记

让我们弄清楚哪些选项可用以及何时可以使用它们。假设您只需要一个简单的JS文件连接，而无需指定参数或组件。

PHTML中JS的简单连接：

<script type="text/x-magento-init">
{
   "*": {
       "Vendor_Module/js/myfile": {}
   }
}
</script>

在这个案例中，文件的路径为：

Vendor/Module/view/frontend/web/js/myfile.js

其中您的代码：

require([],
function(){
   "use strict";
   //your js goes here
});

在选择器上初始化组件

有两种方法可以做到这一点：

1)在data-mage-init属性中初始化组件。例如：

<div id="element-id" data-mage-init='{"Vendor_Module/js/myfile":{}}'></div>

2)使用具有<script type =”text/x-magento-init”属性的标签。例如：

<script type="text/x-magento-init">
{
   "#element-id": { 
       "Vendor_Module/js/myfile": {} 
   } 
} 
</script>

在这个案例中，文件的路径为：

Vendor/Module/view/frontend/web/js/jsfilename.js

其中您的代码：

define(['uiComponent'],
function (Component) {
   'use strict';
   return Component.extend({
       initialize: function (config, node) {
           // some code
       }
   });
});

在带参数的选择器上初始化组件

初始化组件时，向其发送参数（由php动态确定）也很重要。

1)data-mage-init

<div id="element-id" data-mage-init='{"Vendor_Module/js/myfile":{"parameter":"value","status":<?php echo $block->getStatus(); ?>
}}'></div>

2)使用具有<script type =”text/x-magento-init”属性的标签。例如：

<script type="text/x-magento-init">
{
   "#element-id": { 
       "Vendor_Module/js/myfile1": {
           "parameter":"value",
           "status":<?php echo $block->getStatus(); ?>
       } 
   }
} 
</script>

在JavaScript中的选择器上初始化组件

如果我们没有使用php获取动态参数，则可以在javascript文件中的选择器上初始化组件。

例如：

vendor/magento/module-swatches/view/adminhtml/web/js/visual.js

…
$('[data-role=swatch-visual-options-container]').sortable({
  distance: 8,
  tolerance: 'pointer',
  cancel: 'input, button',
  axis: 'y',
  ....
  }
});
...