在本文中，我们将讨论如何在Magento 2中连接JavaScript。将其签出并清楚地了解此过程。在循序渐进的指南中，我们将考虑四种连接方式，并探讨它们的优缺点。
通过<script type =” text / javascript> </ script>
使用<script type="text/javascript></script> 被认为是最简单，但是非常不可靠的方法。我们确信，它的唯一优势就是简单。如果要连接第三方库，可以采用这种方法是合理的。在其他情况下，此方法有几个明显的缺点。
首先，该代码将很难再次使用，并且可能阻止页面加载（当然，这取决于脚本包含的内容）。其次，很明显，随着项目复杂性的增加，控制这样的代码变得非常困难。在讨论此方法时，我们还应提及CSP（内容安全策略）。第三个问题是，以这种方式连接的代码非常容易受到CSS攻击（跨站点脚本）的攻击。如果仍要使用此方法，则在连接时应添加以下属性：deferred =“ true”，async =“ true”。
Magento风格
现在，让我们看一下以Magento风格连接JS脚本的方法。首先，值得一提的是Magento 2使用RequireJS脚本来连接JS。这种方法允许模块化使用JS以及后台和异步加载。要了解有关RequireJS的更多信息，请单击链接。
因此，第一种方法是使用特殊的data-mage-init属性。该属性必须包含作为值的JS模块路径，我们要对其应用JS代码的元素以及配置参数。
例如，假设我们有一个RequireJS模块，它调用一个弹出窗口。让我们在以下目录中创建一个JS文件：
app / code / Example / JavascriptInitExample / view / frontend / web / example.js
接下来，我们将在文件内编写以下代码：
define([], function(){
alert("A simple Example module");
}); 现在，假设有一个特定的模板，我们要在其中连接我们的JS模块。对于初学者，我们可以通过以下方式进行连接：
<div class="example-element" data-mage-init='{"Example_JavascriptInitExample/example": {}}'>A single div</div> 加载页面时，浏览器将仅显示带有指定文本的弹出窗口。没什么特别的，但是如果我们将一些配置值传递给data-mage-init怎么办？例如，让我们添加以下内容：
<div class="example-element" data-mage-init='{"Example_JavascriptInitExample/example": {"config": "value"}}'>A single div</div> 然后，我们通过以下方式更改JS模块：
define([], function(config){
alert("A simple Example module");
console.log(config);
}); 重新加载页面时，我们将获得相同的弹出窗口，但是如果我们看一下控制台，我们将看到config参数的值等于该值。按照相同的步骤，我们可以在JS模块中传递任何参数。除此之外，我们可以传递一个DOM元素作为参数，在该参数上我们称为脚本。为了做到这一点，我们通过以下方式重写我们的模块：
define([], function(config, element){
alert("A simple Example module");
console.log(config);
console.log(element);
}); 重新加载页面后，该元素的输出将添加到控制台。在我们的情况下，这将是
<div class="example-element"></div> 当我们使用布局中的<arguments> </ arguments>标记将一组参数传递给块时，我们也可能遇到一种情况。如果我们想将这些参数作为JS模块的参数，则需要通过以下方式传递它们：
<div class="example-element" data-mage-init='{"Example_JavascriptInitExample/example":
<?= /* @escapeNotVerified */ $block->getJsLayout() ?>'>A single div</div>我们将JSON作为输入参数，可以根据需要进一步使用JSON。
通常，我们必须向模块传递多个参数。上面描述的语法可能很难理解，因此可以使用type =“ text / x-magento-init”作为替代。看起来像这样：
<script type="text/x-magento-init">
{
".example-element": {
"Example_JavascriptInitExample/example":{
"config":"value",
"config2":"value2",
"config3": "optionConfig": <?php /* @noEscape */ echo $block->getJsonConfig()?>
}
}
}
</script>如您所见，此代码更容易阅读。
命令式方法
这里还值得一提的是连接JS模块的所谓命令式方法。您通常可以在Magento 2代码中找到它。但是，Magento 2官方文档中建议不要使用它。连接如下所示：
<script type="text/javascript">
require( [
'jquery'
],
function($) {
alert('Example');
});
}
);
</script>通过require-config.js文件
最后，让我们考虑一种情况，当我们需要不在同一页面和特定元素中同时在多个页面上连接脚本时。在这种情况下，您可以使用require-config.js文件，该文件需要在view / base / require-config.js子目录下的模块文件夹中创建。内容应如下所示：
var config = {
deps: [
'Example_JavascriptInitExample/js/example',
'AnotherExample_JavascriptInitExample/js/example',
]
};然后，我们连接的脚本将在模块的所有页面上运行。通常，某些第三方库以这种方式连接。您还可以设置map属性并为各种模块定义前缀。将来，我们可以使用这些前缀在其他模块中连接所需的JS模块。例如：
var config = {
map: {
" * " : {
"example_alias": "example.js"
}
}
}现在，我们可以使用创建的别名来连接相应的JS模块：
define([
"jquery",
"example_alias"
], function($, config){
/* code goes here */
});如果需要确定JS文件的加载顺序，则可以使用shim选项。
现在，让我们考虑注入动态内容并在data-mage-init和x-magento-init中执行JavaScript 。
为此，您只需将内容插入DOM中，然后触发事件“ contentUpdated ”。例如，它看起来可能像这样：
<code>
$.ajax({
url: 'https://www.you-url.com',
method: 'GET'
success: function (response) {
$('#element').html(data)
.trigger('contentUpdated')
}
});
</code>最后
在本文中，您学习了将JavaScript添加到Magento 2的方法。但是，存在一个潜在的问题。众所周知，添加JS会增加页面加载时间，这可能会对您的网络商店产生负面影响。
我们希望一切都清楚了，但是如果您有任何疑问，请将其保留在下面。谢谢阅读！