Table of Contents generated with DocToc
2019.12.28 更新
增加 babel 转码、webpack 压缩打包，增加生产环境的兼容性和性能。
增加各种规范的用法，见引用方式。
本工具是针对数据对象的字段过于太多，直接在页面中使用，严重的话则会发生页面渲染和交互的性能问题，这里提供一种解决方案，只需要创建基础类（列出需要用到的字段），最终返回的就是基础类对应的数据结构。当然你也可以使用
loadsh-pick/omit，甚至是GraphQL来解决你的问题。
相对于loadsh的pick方法而言，不能一次性直接处理嵌套的数据结构。
相对于GraphQL而言，需要前后端都需要修改代码，这样就造成了开发成本、效率明显的增加。
支持声明文件是class关键字声明
支持声明文件是json声明
npm i data-pickES 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方法，方法名命名为：固定前缀+字段名
- 商品类
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;
}import { dataPick } from "data-pick";
import ProductBean from "ProductBean"; // 第一步声明的class
// metadata 是需要处理的元数据
// 如果有多层嵌套关系，调用只需要传入顶层的声明对象
// class关键字声明的类
const data = dataPick(metadata, ProductBean);- 商品类
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
};import { dataPick } from "data-pick";
import ProductJson from "ProductJson"; // 第一步声明的ProductJson
// metadata 是需要处理的元数据
// 如果有多层嵌套关系，调用只需要传入顶层的声明对象
// json对象声明的数据
const data = dataPick(metadata, jsonBean);-
在未使用数据筛选的性能情况
-
使用数据筛选后的性能情况
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent