SAP Spartacus的OccCmsPageNormalizer

所有经过http请求从Commerce Cloud后台到Spartacus前台渲染的数据，都会经历下列这个generic步骤：

convertSource(source, injectionToken) {
     
        return this.getConverters(injectionToken).reduce((target, converter) => {
     
            return converter.convert(source, target);
        }, undefined);
    }

CMS page数据的normalize过程：

let OccCmsPageNormalizer = class OccCmsPageNormalizer {
     
    convert(source, target = {
     }) {
     
        this.normalizePageData(source, target);
        this.normalizePageSlotData(source, target);
        this.normalizePageComponentData(source, target);
        this.normalizeComponentData(source, target);
        return target;
    }

第一步：NormalizePageData，给page打上load时间戳：

第二步：normalizePageSlotData

按照position给target设置键值对：

第三步： normalizePageComponentData

normalizePageComponentData(source, target) {
     
        for (const slot of source.contentSlots.contentSlot) {
     
            if (slot.components.component &&
                Array.isArray(slot.components.component)) {
     
                for (const component of slot.components.component) {
     
                    const comp = {
     
                        uid: component.uid,
                        typeCode: component.typeCode,
                        properties: component.properties,
                    };
                    if (component.typeCode === CMS_FLEX_COMPONENT_TYPE) {
     
                        comp.flexType = component.flexType;
                    }
                    else if (component.typeCode === JSP_INCLUDE_CMS_COMPONENT_TYPE) {
     
                        comp.flexType = component.uid;
                    }
                    else {
     
                        comp.flexType = component.typeCode;
                    }
                    target.page.slots[slot.position].components.push(comp);
                }
            }
        }
    }

第四步normalizeComponentData执行完毕之后，target结构包含的就是前端Spartacus处理起来比较方便的数据结构：

每个slot有slot id，每个slot id对应Components数组，每个Component由uid，typeCode和flexType唯一标识：

Component数组里有Component的详细数据：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":