Table of Contents generated with DocToc

• DATA PICK
  • 安装
  • 引用方式
  • 使用方式
    • 创建实体类(两种声明方式选一种)
      • 1.创建 class 声明文件
      • class 声明的方法使用
      • 2.创建JSON声明文件
      • json 声明的方法使用
  • 使用场景举例

DATA PICK

2019.12.28 更新
增加 babel 转码、webpack 压缩打包，增加生产环境的兼容性和性能。
增加各种规范的用法，见引用方式。

本工具是针对数据对象的字段过于太多，直接在页面中使用，严重的话则会发生页面渲染和交互的性能问题，这里提供一种解决方案，只需要创建基础类（列出需要用到的字段），最终返回的就是基础类对应的数据结构。当然你也可以使用loadsh-pick/omit，甚至是GraphQL来解决你的问题。
相对于loadsh的pick方法而言，不能一次性直接处理嵌套的数据结构。
相对于GraphQL而言，需要前后端都需要修改代码，这样就造成了开发成本、效率明显的增加。
支持声明文件是class关键字声明
支持声明文件是json声明

安装

npm i data-pick

引用方式

ES module

// ES module
import { dataPick, PREFIX_BEAN } from "data-pick";

HTML

<script src="data-pick.min.js"></script>
<script>
  var { dataPick, PREFIX_BEAN } = window.DataPick;
</script>

RequireJS

requirejs(["data-pick"], function(DataPick) {
  var { dataPick, PREFIX_BEAN } = DataPick;
});

CommonJS

 var {(dataPick, PREFIX_BEAN)} = require('data-pick');

使用方式

创建实体类(两种声明方式选一种)

注意：如果有字段属性是对象或是数组，必须提供返回属性值类型的方法（如果数组中的元素是 js 基本类型的除外）需要添加获取class类型的get方法，方法名命名为：固定前缀+字段名

1.创建 class 声明文件

• 商品类ProductBean.js（第一层级）

import { PREFIX_BEAN } from "data-pick";
import SkuBean from "./SkuBean.js";

/**
 * 商品类
 */
export default class ProductBean {
  id;
  name;
  imgs;
  bbSkus;
  discountPrice;
  /* 如果有第二层级的类属性，需要额外添加的方法，重点！重点！重点！ */
  get [`${PREFIX_BEAN}bbSkus`]() {
    return SkuBean;
  }
}

• 商品里的 sku 类SkuBean.js（第二层级）

/**
 * 商品sku类
 */
export default class SkuBean {
  id;
  skuLossId;
  minUnit;
}

class 声明的方法使用

import { dataPick } from "data-pick";
import ProductBean from "ProductBean"; // 第一步声明的class

// metadata 是需要处理的元数据
// 如果有多层嵌套关系，调用只需要传入顶层的声明对象
// class关键字声明的类
const data = dataPick(metadata, ProductBean);

2.创建JSON声明文件

• 商品类ProductJson.js（第一层级）

import { PREFIX_BEAN } from "data-pick";
import SkuJson from "./SkuJson.js";

export default {
  id: null,
  name: null,
  imgs: null,
  bbSkus: null,
  discountPrice: null,
  /* 如果有第二层级的json类型，需要额外添加的方法，重点！重点！重点！ */
  get [`${PREFIX_BEAN}bbSkus`]() {
    return SkuJson;
  }
};

• 商品里的 sku 类SkuJson.js（第二层级）

/**
 * 商品sku类
 */
export default {
  id: null,
  skuLossId: null,
  minUnit: null
};

json 声明的方法使用

import { dataPick } from "data-pick";
import ProductJson from "ProductJson"; // 第一步声明的ProductJson

// metadata 是需要处理的元数据
// 如果有多层嵌套关系，调用只需要传入顶层的声明对象
// json对象声明的数据
const data = dataPick(metadata, jsonBean);

使用场景举例

1. 在未使用数据筛选的性能情况

2. 使用数据筛选后的性能情况