magento2主题中如何包含使用javascript脚本？

Magento 2允许在整个站点，某个页面甚至页面的指定块和部分链接自定义javascript脚本。

在页面上包含自定义JavaScript有哪些选择
内联JavaScript的优缺点是什么？
如何在页面上异步加载JavaScript？
如何使用布局XML中的块参数配置页面上的JavaScript？
如何直接在.phtml模板中完成？

在页面上包含自定义JavaScript有哪些选择？

您可以通过以下三种方式进行操作：通过一个特殊的引擎框架将脚本连接到页面的头部，或者借助RequireJS（最佳的选项）。让我们考虑第一种方法 –将脚本连接到页面头部。请记住，如果使用他的方法，将不可能覆盖脚本中的类，并且将最大程度地减少用户交互。当您通过已知库的cdn连接，或者您的脚本使用第三方聚合器时，此方法可能是最合适的。

连接过程如下所示：

<script src=”absolute or relative path to the script” ></script>

如果路径是绝对的，请 使用

src_type="url"

或者

<script type="text/javascript">script content</script>

内联在phtml中。

要改进此方法，请尝试在可以的地方使用deferred =”true”属性或至少async =”true”（但是，该属性仅适用于通过引用的脚本，不适用于嵌入式脚本）。更重要的是，替换掉 

<script src="js/script.js"/>

您可以使用

<link src="js/script.js"/>

现在，让我们继续第二种方法 -通过Magento框架。您可以通过两种方式包含脚本：

• 使用以下属性
  

  data-mage-init='{ "VendorName_Module/js/script": {"configuration-value":true} }'
  

  
  它将请求一个脚本，其中包含要使用的元素及其参数（动画速度，元素数量等）。

脚本的最终形式如下：

app/code/VendorName/Module/view/frontend/web/js/script.js
define([], function() {
return function(element, config) {
/* config: {
configuration-value: true
} */
};
});

• 使用标签脚本
  

  <script type="script/x-magento-init">
  {".element-selector": 
  {"VendorName_Module/js/script": 
  {"configuration-value": true}
  }
  }
  </script>
  

  
   

其中.element-selector是将为其应用模块的选择器。如果选择器匹配的不是一个元素，而是几个元素，它将应用于每个元素。

连接依赖于第三方库的脚本不是最好的方法，但无疑是简单的方法：

<script type="text/javascript">
require([
"VendorName_Module/js/script" 	//<span style="font-weight: 400;">indicate library dependence</span>
], function(loader) {
/* your script */
});
</script>

第三种方法是通过RequireJS。

这种方法允许将脚本连接到任何页面，并且比前两个页面工作更快，因为初始化所需的代码更少。

var config = {
deps: ['VendorName_Module/js/script']
};

内联JavaScript的优缺点是什么？

内联JS的优点包括：

• 易于连接
• 页面上没有其他请求

但是此方法有一些缺点，因为代码：

• 没有延迟并立即执行，因此不建议放置较大的内联代码；
• 很难再次使用；您必须再次将其插入其他页面；
• 在模板中很难找到，这就是为什么难以维护的原因；
• 没有被浏览器缓存，因为它是页面的一部分；
• 违反了Content-Security-Policy，这在跨站点脚本编制方面非常危险。

如何在页面上异步加载JavaScript？

这可以通过define方法来完成。

Require立即执行，而define将等待其他模块的调用。例如：

require([
'VendorName_Module/js/script'
], function(nameFunction) {
/* … */
});

如何使用布局XML中的块参数配置页面上的JavaScript？

在AbstractBlock中，有一个getJsLayout方法，该方法返回带有jsLayout –参数的数组。在前端

<?= $block->getJsLayout();?>

会以jsLayout格式返回以json格式显示的一行。

因此，使用<arguments />，您可以构建自己的json对象：

<referenceBlock name="nameBlock">
	<arguments>
		<argument name="jsLayout" xsi:type="array">
			<item name="components" xsi:type="array">
			<item name="script" xsi:type="array">
			<item name="component" xsi:type="string">VendorName_Module/js/script</item>
			</item></item>
		</argument>
	</arguments>
</referenceBlock>

这就是本主题的全部内容。我希望我的文章对你有用。

寻找专业的Magento 2开发团队联系我们