SAP Spartacus UnitDetailsCompone

如下图所示，真实的DOM操作是由platform-browser.js完成的：parent.insertBefore, 这是HTML原生代码：

/**
 * Inserts a native node before another native node for a given parent using {@link Renderer3}.
 * This is a utility function that can be used when native nodes were determined - it abstracts an
 * actual renderer being used.
 */
function nativeInsertBefore(renderer, parent, child, beforeNode) {
    ngDevMode && ngDevMode.rendererInsertBefore++;
    if (isProceduralRenderer(renderer)) {
        renderer.insertBefore(parent, child, beforeNode);
    }
    else {
        parent.insertBefore(child, beforeNode, true);
    }
}

Renderer同实际的操作平台的操作解耦：

更多Jerry的原创文章，尽在："汪子熙":