Magento Commerce（原 Magento 2）的结账流程经过了一系列改进，视觉效果和整体流程均有提升。此外，此次全面革新意味着它现在由 JavaScript 和 KnockoutJS 驱动。
结账流程现在分为多个步骤（默认为两个），每个步骤包含多个组件，所有组件都可以通过模型和其他依赖注入技术相互通信，我们将在本文中探讨这些技术。
结账页面的渲染方式
Magento Commerce 中的结账页面由一系列 Knockout JS 组件构成，这些组件使用 Knockout JS 模板系统进行渲染。Magneto 2 在一个大型 XML 文件中定义了每个组件及其父子关系，您可以在自己的主题或模块中扩展或覆盖该文件。
Magento Commerce 解析该 XML 文件，并通过布局处理器运行它，该处理器处理每个 XML 节点并读取其配置，然后将其插入到一个大型多维关联数组中，其中每个键代表一个组件或一组组件。
然后，该数组被转换为 JSON 对象，并传递到主应用程序结账组件 (Magento_Ui/js/core/app) 的主结账模板文件 (onepage.phtml) 中并进行初始化。
<script type="text/x-magento-init">
{
"#checkout": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
}
}“vendor\magento\module-checkout\view\frontend\templates\onepage.phtml”
主 app.js 文件如下所示：E:\mg.infshop.ie_e2hEn\magento248ayd\vendor\magento\module-ui\view\base\web\js\core\app.js
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'./renderer/types',
'./renderer/layout',
'../lib/knockout/bootstrap'
], function (types, layout) {
'use strict';
return function (data, merge) {
types.set(data.types);
layout(data.components, undefined, true, merge);
};
});
正如您所看到的， app.js 它将布局渲染器作为一个 dependency./renderer/layout 对象注入，然后传递 data.components 包含所有需要渲染的组件的对象（这些组件在 app.js 第一次初始化时就已传入）。
然后，渲染器循环遍历每个组件，迭代渲染每个组件并检查每个节点是否有任何子节点。
如果在节点内找到子节点，它会以与渲染接收到的列表中的每个组件相同的方式循环渲染它们。一旦渲染器遇到没有子节点的组件/节点，布局渲染器就会照常返回并处理当前节点，不再渲染子节点。
您还可以在 XML 中添加依赖项，确保在初始化其他组件之前其他组件已经存在。
这种组件渲染方式意味着布局渲染器可以在网站的任何地方使用。它不仅在结账界面可用，还能为您的店铺其他部分带来更多可能性！
XML 的工作原理
如前所述，XML 文件最终会被解析为 JSON 对象，并在初始化主结账组件时将其传入。因此，让我们仔细看看 XML 的结构。基础结账 XML 文件可以在以下位置找到：
/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml或者
vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml取决于您查看代码的位置。
我们主要想在 XML 文件中查找 components 项。它是 checkout_index_index.xml 中定义的所有结账组件的父数组。