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开发团队联系我们
