Magento2中如何添加js(javascript)脚本

在本文中，我们将研究Magento 2中的如何连接JavaScript。这里有四种连接方法：

通过<script type =”text/javascript> </script>
以Magento风格
命令式方法
通过require-config.js文件

这是最简单但不推荐的方法，唯一的一个优点就是简单。如果要连接第三方库，可以保留此方法。在其他情况下，这种方法有几个明显的缺点：代码将很难再次使用，并且可能阻止页面加载（当然，这取决于脚本包含的内容）。显然，随着项目复杂性的增加，控制此类代码变得非常困难。在讨论此方法时，我们还应提及CSP（内容安全策略）。以这种方式连接的代码非常容易受到CSS攻击（跨站点脚本）的攻击。如果仍要使用此方法，则在连接时添加以下属性：deferred =“true”，async =“true”。

现在，让我们考虑以Magento风格连接JS脚本的方法。首先，值得一提的是Magento 2使用RequireJS脚本来连接JS。这种方法允许模块化使用JS，以及后台和异步加载。要了解更多信息，请访问requirejs.org的链接。

因此，第一种方法是使用特殊的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代码中找到。但是，在M2文档中建议不要使用它。连接如下所示：

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

最后，让我们考虑以下情况：当我们需要将脚本连接到多个页面而不是在同一个页面和特定元素中时。在这种情况下，您可以使用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选项。

好了，这些都是Magento 2中连接JS文件的所有现有方法，希望一切都清楚了。感谢您的阅读。