Magento中调用和初始化JavaScript

在Magento2的前端Javascript开发中，调用和初始化 js的方式有两种，分别是声明式表记 Declarative notation 和命令式标记 Imperative notation。
Magento中调用和初始化JavaScript

概览

在 Magento2 中调用 和 初始化 JavaScript 主要有两种方式：

  • 在 .phtml 页面文件中插入 JavaScript 组件。
  • 在 javascript(.js)文件中调用需要初始化的Javascript组件

强烈建议使用上述方法来使用 JavaScript 而不是以 inline 方式使用 JavaScript .

在 PHTML 模版文件中插入 JS 组件

根据你的任务，你可以使用声明式 declarative 或命令式 imperative 标记来插入JS组件到PHTML模板中。如果一个组件需要初始化，就使用声明式标记，其他情况下应使用命令式声明符。

声明式标记 Declarative notation

使用声明式标记插入一个JS组件，在后台准备好所有的配置，并使用标准工具将其输出到页面源。如果你的JavaScript组件需要初始化，请使用 声明式标记 。

在Magento 2中，你有两个选项来指定声明性标记。

  • 使用 data-mage-init 属性

    这是用来针对一个特定的HTML元素。它比较容易实现，通常用于jQuery UI小工具。这个方法只能在指定的HTML标签上实现。例如，

    。这种方法因其简洁的语法和对HTML元素的直接访问而受到青睐。

  • 使用 标签

    这是用来针对一个CSS选择器或*。如果CSS选择器匹配了多个HTML元素，脚本将为每个匹配的HTML元素运行。对于*，没有HTML元素被选中，脚本将以HTML DOM为目标运行一次。这个方法可以在代码库的任何地方实现，以任何HTML元素为目标。当直接访问HTML元素受到限制，或者没有目标HTML元素时，这是首选。

来看一个 增加自定义 carousel JS 的例子：

  1. 拷贝 <carousel_name>.carousel.js 文件到 app/design/frontend/<package_name>/<theme_name>/web/js/<carousel_name>/ 目录

  2. 在 app/design/frontend/<package_name>/<theme_name>/web/js/carousel.js 添加你的 RequireJS module

    
define(['jquery','<carousel_name>'], function($)
 {
     return function(config, element)
     {
         $(element).<carousel_name>(config);
     };
 });

  3. 在 app/design/frontend/<package_name>/<theme_name>/requirejs-config.js 文件添加 RequireJS 配置

    
var config = {
     map: {
         '*': {
                 'carousel': 'js/carousel',
                 '<carousel_name>': 'js/<carousel_name>/<carousel_name>.carousel'
             }
         }
 };

现在， 我们有两个选择来 指定声明标记

  • 在元素中使用 data-mage-init 属性插入 carousel

    
<div data-mage-init='{"carousel":{"option": value}}'>
     <div class="item">Item 1</div>
     ...
     <div class="item">Item n</div>
</div>

  • 使用