Я новичок в Magento2, и наша организация только что получила лицензию EE. Я установил его на свой локальный компьютер, и шаблон по умолчанию выдает следующее, смешанное с HMTL:

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

И звонки как

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

Это связано с KnockoutJSили RequireJS? Что это за вызовы и что это за новый тег-скрипт<script type="text/x-magento-init">

Общее использование "типа сценария"

При использовании <script type="....">браузер интерпретирует только то, что он знает (как text/javascriptнапример).
Все остальное игнорируется.
В основном используя пользовательский тип, вы добавляете информацию на страницу, не отображая ее и не интерпретируя ее браузером, и позже вы можете использовать эту информацию по своему усмотрению.

Как Magento использует это

Magento использует эти разделы после загрузки страницы.
Код, который их использует, находится в lib/web/mage/apply/scripts.js.
Я не совсем понимаю, что делает упомянутый выше файл, но внутри файла есть комментарий, который гласит:

/**
 * 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"}
 *          }
 *      }
 */

Заключение / Спекуляция

Я предполагаю, что это способ установить различное поведение js для разных элементов на странице без необходимости переписывать шаблон, содержащий элементы.
Вам нужно только добавить <script type="text/x-magento-init">один из ваших шаблонов, включить ваш шаблон на страницу, и magento «автоматически» перемещает поведение в нужный элемент.

К тому же,

поставщик \ Magento \ magento2 база \ Lib \ Web \ магом \ применить \ scripts.js

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

Используя приведенные ниже руководства

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

Стандартный синтаксис

<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>

Ссылаясь на

http://alanstorm.com/magento_2_javascript_init_scripts

http://alanstorm.com/magento_2_introducing_ui_components

Сам Magento часто использует x-magento-initметод для вызова модуля RequireJS в качестве программы. Тем не менее, реальная сила x-magento-initзаключается в способности создавать Magento Javascript Component.

Компоненты Magento Javascript - это модули RequireJS, которые возвращают функцию.

Magento встречает text/x-magento-initскрипт-тег с атрибутом *, он

1] Инициализировать указанный модуль RequireJS (Magento_Ui / js / core / app)

2] Вызвать функцию, возвращаемую этим модулем, передавая объект данных

Надеюсь, это поможет