记录一下工作遇到的bug

1、在跨域的情况下没有办法拿到 response 的 headers X-AUTH-TOKEN

在后台设置允许跨域之后 response 的 headers 里边有很多东西已经拿不到了

2、jsplumb 的label 冲突

在做jsPlumb 项目的时候，我在某个页面中设置了 ConnectionOverlays 这个属性，导致代码冲突，想了很多办法，

分析原因：我是把ConnectionOverlays放在了实例上，导致全局也都有这个覆盖物，把ConnectionOverlays 换成 overlays 之后全局是没有问题了，但是 makeSource 的连线覆盖物没有了，最后得知 makeSource 不能使用 overlays属性。

最后结果是全局使用 overlays 属性， makeSource 使用把ConnectionOverlays 解决了问题

this.instance = jsPlumb.getInstance({
      overlays: [
        [
          "Custom",
          {
            create: function(component) {
              return $("");
            },
            location: 0.5,
            id: "customOverlay"
          }
        ],
      ]
      
// 所有节点创建 source
      this.instance.makeSource(nodeId, {
        filter: ":not(span)",   // 除了这个标签以外的设置连线
        filterExclude: true,
        connectorOverlays: [], // 在这里写入要覆盖的内容
        extract: {
          action: "the-action"
        }
      }, this.common);
});
复制代码

3、事件优化小知识点

场景：点击按钮查找某个ul 下 li 列表个数，然后添加点击事件，点击 li 列表处理自己的逻辑，每点击一次都会给 li 累加一次事件，会造成冗余。所以需要在点击完 li 之后需要把事件卸载掉。

这里给的是 jsPlumb 的时间处理，但是在JavaScript中所有的事件都是一样的

this.flowId = jsPlumb.getSelector(".flowId");
if (this.flowId.length === 0) {
  return;
}
for (let i = 0; i < this.flowId.length; i++) {
  // 以下使用 箭头函数 防止 this 的指向改变
  this.flowId[i].onclick = () => {
    this.datasetInstance.bind("click", c => {
      console.log(this.flowId)
      // 给每个 flowId 添加完事件之后，需要移除事件，否则给当前元素添加多个事件
      this.datasetInstance.unbind("click");
    });
  };
}
复制代码

3、constructor 一个值 .constructor 的时候 console.log() 竟然没起作用

场景：在做一个容错处理的函数，参数是一个 undefined 的值

export const checkfiled = (value, array) => {
  console.error(array.__proto__.constructor == Array)
}
// 原因是 array 传进来的是 undefined
复制代码

4、jsplumb 在 dom 位置发生变化 jsplumb 监听不到，所以连线位置不对。

场景：点击做按钮查找parent 的关系，展示parent,相反查找 children, 但是按钮盒子的位置变化了，连线位置没有变化。

因为jsplumb 连线的时候是记录的source 和 target 分别是 nodeId，当你在传入相同的 source 和 target jsplumb 认为是同一条线，不会重新绘制。这个问题困绕我一整天的时间，在同事的帮忙下才解决的，因为国内关于这个介绍的很少，没有看到类似的问题，但是我相信肯定有这样的API,于是让我同事用英文的方式进行搜索。

instance.reset() 清除jsplumb的所有连线关系，相当于清楚 jsPlumb 的连线缓存

this.$nextTick(() => {
    
    this.datasetInstance.reset()
    jsPlumb.batch(() => {
      this.datasetEdges.forEach(item => {
      this.datasetInstance.connect({
          source: item.source,
          target: item.target,
          overlays: [
          ], 
        }, this.datasetCommon);
      });
    },true)
});
复制代码

5、Vue params 和 query 的区别

首先 params 和 query 都是路由跳转时传递参数使用使用的，但是他们也有不同之处

1、params 不会再地址栏显示，而 query 会在地址栏显示

2、params 在刷新页面的时候路由内容消失， query 则可以刷新页面

6、v-model 监听对象属性，但是默认对象属性又不存在的现象，不会有双向数据绑定

    "tableProfile[value.name].partitionKey" placeholder="请选择">
    // 但是对象刚开始是空的
    data () {
        return {
            tableProfile: {},
        }
    },
    // 我们在 created 的时候 给 tableProfile赋值
    created () {
         for (let value of this.options) {
         // 这样 在 v-model 的时候 是不能实现双向数据绑定的
            this.tableProfile[value.name] = {
                tableName: "",
                partitionKey: "",
                timeColumn: ""
            }
        }
    }
    // 正确做法
    created () {
         for (let value of this.options) {
            // 这样 在 v-model 的时候 是不能实现双向数据绑定的
            this.$set(this.tableProfile, value.name, {
                tableName: "",
                partitionKey: "",
                timeColumn: ""
            })
        }
    }

复制代码

6、使用 import() 函数需要的配置

1、安装cnpm install babel-plugin-syntax-dynamic-import -D

2、配置 .babelrc 文件

{
  "presets": [
    [
      "babel-preset-env", {
        "targets": {
          "browsers": [">1%"]
        }
      }]
    ],
    "plugins": [
      "transform-runtime",
      // 需要 在这里加上 异步的配置
      "syntax-dynamic-import"
    ]
}
复制代码