sku-filter
使用场景:
商品详情页一般有 Product => SKUS<Array> => types<Array>
1对n对n的关系
初始化把已有的SKUs渲染出来的时候, 需要遍历嵌套的数据
每次点击直接对原始数据进行过滤操作,也需要遍历嵌套的数据
这些会造成很多不必要的遍历操作
实际上我们后续只会对types<Array>
的数据进行交互,
选择的条件满足一个SKU的时候根据对应关系把这个SKU找到即可
所以我们在初始化遍历原始数据的时候建立对应关系,后续只操作types, 当选择条件已满,返回符合条件的那个唯一SKU
SKU
Map about Product => SKUS
如何使用
npm install --save filter-sku
安装 import filterSKU from "filter-sku"
引入 -
实例化
const skus = data: skus<Array>; -
初始化数据
const init = skus; -
过滤数据 输入已选条件(sku.types)
const result = skus; // [{颜色: '红'}]
@param Array let skus = data: skus; 必填 @param Funtion skus: skus<Array> // 所有的sku [{颜色: "红", 大小: "S", 性别: "男"}] sku_types: sku_types<Array> // 所有的sku类型key ["颜色", "大小", "性别"] convenient_render<Map> // 方便渲染的格式 {"颜色" => [红, 黑], "大小" => [L, XL], "性别" => [男, 女]} @param Function selected_types<Array> // 已选类型 ["颜色", "大小", "性别"] selected_detail<String> // 已选的具体参数 每次点击的时候显示已选的参数 "颜色: 红 " match_skus<Array> // 符合条件的SKU[{颜色: "红", 大小: "XL", 性别: "男"}] mismatch_skus<Array> // 不符合条件的SKU[{颜色: "红", 大小: "XL", 性别: "男"}] render_list<Array> // 比如 [{颜色: "红"}, {大小: "XL"}...]视图更新方便 final_sku<Object> // 符合全部已选条件的sku {颜色: "红", 大小: "XL", 性别: "男"} || null target<Object> // 加入购物车或者立即购买需要提交的完整的SKU /* { description: null, id: 107, image: "default_point_shop_product_sku.jpg", name: null, point_shop_product_id: "3", price: {level1: "10", level2: "5"}, stock: "9999991", type: {颜色: "红", 大小: "XL", 性别: "男"} } */ @example 1 初始化SKU const skus = data: skus<Array> 2 可选三种方法 1) const init = skus; 2) const result = skus // [{颜色: '红'}]