1. 解决一个业务点
echarts 组件配置项较为复杂,而且有一定的复用性,可以根据图表类型结合业务封装成一个配置中心
每个图表有一个默认的基本配置,然后根据用户传进来的配置进行配置合并,使用时只需要传入数据和个性化配置即可
export function chartBar(data , customOptions = {}){
const option = {
// 图表默认配置
}
// 合并配置, 官方提供的api,true代表会覆盖源option的对应属性
echars.util.merge(option, customOptions, true);
}
2. 深入一个知识点
下面探讨一下 echars.util.merge 与 Object.assign 的异同,无非就是实现深拷贝的方式呗。
先去看看源码:
让codegeex 给加了个注释
// echarts.common.js 297-323
// 合并对象,target:目标对象,source:源对象,overwrite:是否覆盖
function merge(target, source, overwrite) {
// 第一调用时,判断源对象和目标对象初始时是否为对象,如果有一个不是,下面的return逻辑就有用
if (!isObject(source) || !isObject(target)) {
// 判断是否覆盖,覆盖则返回源对象的克隆,否则返回目标对象
return overwrite ? clone(source) : target;
}
// 遍历源对象的属性
for (var key in source) {
// 判断源对象的属性是否为自身属性 这里var protoKey = '__proto__';
if (source.hasOwnProperty(key) && key !== protoKey) {
// 获取目标对象的属性
var targetProp = target[key];
// 获取源对象的属性
var sourceProp = source[key];
if (isObject(sourceProp)
&& isObject(targetProp)
&& !isArray(sourceProp)
&& !isArray(targetProp)
&& !isDom(sourceProp)
&& !isDom(targetProp)
&& !isBuiltInObject(sourceProp)
// 判断目标对象的属性是否为内置对象
&& !isBuiltInObject(targetProp)
// 判断源对象的属性是否为原始类型
&& !isPrimitive(sourceProp)
// 判断目标对象的属性是否为原始类型
&& !isPrimitive(targetProp)) {
// 递归调用merge函数
merge(targetProp, sourceProp, overwrite);
}
// 判断是否覆盖或者目标对象不存在该属性
else if (overwrite || !(key in target)) {
// 将源对象的属性赋值给目标对象
target[key] = clone(source[key]);
}
}
}
// 返回目标对象
return target;
}
话说开头这个判断,就只有第一次判断时会进入,可不可以优化一下?
if (!isObject(source) || !isObject(target)) {
// 判断是否覆盖,覆盖则返回源对象的克隆,否则返回目标对象
return overwrite ? clone(source) : target;
}
深拷贝的几个关键点: 1. 递归 2. 判断hasOwnProperty() 3. 这个clone函数... 可能是为了拆出来复用的,直接根据source递归到底应该也可
让gpt总结下吧