通过发现规律实现一个可维护的级联加载DOM元素布局的小组件

/**
 * 优惠券折扣，用于根据优惠券选择不同类型、子类型，加载相关布局适用
 * 这里是一个通用组件，对于label.elements 需要统一维护
 * @author 石冬冬
 * @date 2017/07/21
 */
var couponDiscount = {
    /**
     * 配置参数
     */
    config: {
        action: 'add',
        target: '#discountLayout',
        params: {
            types: [0, 0],
            discountCondition: 0,
            discountDegree: 0
        }
    },
    label: {
        elements: {
            //代金券
            1: [['', '券面额|元'], ['满|元', '减|元'], ['满|件', '减|元'], ['第|件', '减|元']],
            //折扣券
            2: [['', '券折扣|折'], ['满|元', '打|折'], ['满|件', '打|折'], ['第|件', '打|折']],
            //免费券
            3: [['', ''], ['', ''], ['满|元包邮', ''], ['满|件包邮', '']],
            //权益券
            4: [['', ''], ['', ''], ['', '']]
        },
        getElement: function (types) {
            try {
                var type = Number(types[0]), subType = Number(types[1]);
                return this.elements[type][subType - 1];
            } catch (e) {
            }
            return ['', ''];
        }
    },
    wrapper: {
        prefix: function (text) {
            if (!isNull(text))
                return '* ' + text + ' ';
            else
                return '';
        },
        suffix: function (label) {
            if (!isNull(label))
                return '' + label + ' ';
            else
                return '';
        }
    },
    components: {
        /**
         * 折扣条件
         * @param value 值
         */
        condition: function (value, valid) {
            return '';
        },
        /**
         * 折扣优惠
         * @param value 值
         */
        price: function (value, valid) {
            return '';
        }
    },
    /**
     * 初始化
     * @param options
     */
    init: function (options) {
        var config = $.extend(this.config, options);
        var target = config.target;
        var params = config.params;
        var types = params.types;
        var discountCondition = params.discountCondition;
        var discountDegree = params.discountDegree;
        var elements = this.label.getElement(types);
        var wrapper = this.wrapper;
        var components = this.components;
        if (types && $.isArray(types) && elements && $.isArray(elements)) {
            var conditionHTML = elements[0];
            var priceHTML = elements[1];
            var html = '';
            var label = [conditionHTML, priceHTML];
            if (!isNull(conditionHTML)) {
                var arrays = conditionHTML.split('|');
                if ("元" == arrays[1]) {
                    html += wrapper.prefix(arrays[0]) + components.condition(parseInt(discountCondition),'positiveInteger') + wrapper.suffix(arrays[1]);
                } else if ("件" == arrays[1]) {
                    html += wrapper.prefix(arrays[0]) + components.condition(parseInt(discountCondition),'positiveInteger') + wrapper.suffix(arrays[1]);
                }

            }
            if (!isNull(priceHTML)) {
                var arrays = priceHTML.split('|');
                if ("元" == arrays[1]) {
                    html += wrapper.prefix(arrays[0]) + components.price(parseInt(discountDegree),'positiveInteger') + wrapper.suffix(arrays[1]);
                }else if("折" == arrays[1]){
                    discountDegree = discountDegree.toFixed(1);
                    html += wrapper.prefix(arrays[0]) + components.price(discountDegree,'0-10') + wrapper.suffix(arrays[1]);
                }
            }
            $(target).html(html);
            $(target).attr('discount-label', label);
        }
    }
};