Tôi mới biết đến Magento2 và tổ chức của chúng tôi vừa nhận được giấy phép EE. Tôi đã cài đặt nó trên máy cục bộ của mình và mẫu mặc định sẽ tạo ra hỗn hợp sau với HMTL:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer"
                }
            }
        }
    }
}
</script>

Và gọi như

<script type="text/x-magento-init">
{
"*": {
    "Magento_Ui/js/core/app": {
        "components": {
                "messages": {
                    "component": "Magento_Theme/js/view/messages"
                }
            }
        }
    }
}
</script>

Đây là để làm với KnockoutJShay RequireJS? Những cuộc gọi này là gì và thẻ script mới này là gì<script type="text/x-magento-init">

Cách sử dụng chung của "loại tập lệnh"

Khi sử dụng <script type="....">trình duyệt chỉ diễn giải những gì nó biết ( text/javascriptví dụ như).
Bất cứ điều gì khác được bỏ qua.
Về cơ bản sử dụng một loại tùy chỉnh bạn đang thêm thông tin vào trang mà không hiển thị nó và không có trình duyệt giải thích nó và sau đó bạn có thể sử dụng thông tin đó như bạn muốn.

Magento sử dụng cái này như thế nào

Magento sử dụng các phần này sau khi tải trang.
Mã sử ​​dụng chúng nằm ở lib/web/mage/apply/scripts.js.
Tôi không hiểu hoàn toàn những gì tệp được đề cập ở trên, nhưng có một nhận xét bên trong tệp nêu rõ điều này:

/**
 * Parses 'script' tags with a custom type attribute and moves it's data
 * to a 'data-mage-init' attribute of an element found by provided selector.
 * Note: All found script nodes will be removed from DOM.
 *
 * @returns {Array} An array of components not assigned to the specific element.
 *
 * @example Sample declaration.
 *      <script type="text/x-magento-init">
 *          {
 *              "body": {
 *                  "path/to/component": {"foo": "bar"}
 *              }
 *          }
 *      </script>
 *
 * @example Providing data without selector.
 *      {
 *          "*": {
 *              "path/to/component": {"bar": "baz"}
 *          }
 *      }
 */

Kết luận / Đầu cơ

Tôi suy đoán rằng đây là một cách để đặt hành vi js khác nhau cho các thành phần khác nhau trong trang mà không cần phải viết lại mẫu có chứa các thành phần.
Bạn chỉ cần thêm một <script type="text/x-magento-init">trong một trong các mẫu của mình, bao gồm mẫu của bạn trong trang và magento "tự động ảo thuật" di chuyển hành vi sang đúng yếu tố.

Ngoài ra,

nhà cung cấp \ magento \ magento2-cơ sở \ lib \ web \ mage \ áp dụng \ scripts.js

var scriptSelector = 'script[type="text/x-magento-init"]',
        dataAttr = 'data-mage-init',
        virtuals = [];

Bằng cách sử dụng hướng dẫn dưới đây

http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html

Cú pháp chuẩn là

<script type="text/x-magento-init">
{
    // components initialized on the element defined by selector
    "<element_selector>": {
        "<js_component1>": ...,
        "<js_component2>": ...
    },
    // components initialized without binding to an element
    "*": {
        "<js_component3>": ...
    }
}
</script>

Bằng cách tham khảo

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_int sinhing_ui_components

Bản thân Magento thường sử dụng x-magento-initphương thức để gọi mô-đun RequireJS dưới dạng chương trình. Tuy nhiên, sức mạnh thực sự của x-magento-initkhả năng tạo ra Thành phần Javascript Magento.

Các thành phần Javascript Magento là các mô-đun RequireJS trả về một hàm.

Magento bắt gặp một text/x-magento-initthẻ script có thuộc tính *, nó sẽ

1] Khởi tạo mô-đun RequireJS được chỉ định (Magento_Ui / js / core / app)

2] Gọi hàm được trả về bởi mô-đun đó, truyền vào đối tượng dữ liệu

Hy vọng nó giúp