记录一下工做遇到的bug

时间 2019-12-13

标签记录下工遇到 bug 繁體版

原文原文链接

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

在后台设置容许跨域以后 response 的 headers 里边有不少东西已经拿不到了javascript

二、jsplumb 的label 冲突

在作jsPlumb 项目的时候，我在某个页面中设置了 ConnectionOverlays 这个属性，致使代码冲突，想了不少办法，java

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

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

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

三、事件优化小知识点

场景：点击按钮查找某个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");
    });
  };
}
复制代码

三、constructor 一个值 .constructor 的时候 console.log() 居然没起做用

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

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

四、jsplumb 在 dom 位置发生变化 jsplumb 监听不到，因此连线位置不对。

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

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

instance.reset() 清除jsplumb的全部连线关系，至关于清楚 jsPlumb 的连线缓存jsp

this.$nextTick(() => {
    <!-连线以前先把连线的关系清除-->
    this.datasetInstance.reset()
    jsPlumb.batch(() => {
      this.datasetEdges.forEach(item => {
      this.datasetInstance.connect({
          source: item.source,
          target: item.target,
          overlays: [
          ], 
        }, this.datasetCommon);
      });
    },true)
});
复制代码

五、Vue params 和 query 的区别

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

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

二、params 在刷新页面的时候路由内容消失， query 则能够刷新页面

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

<el-select 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: ""
            })
        }
    }

复制代码

六、使用 import() 函数须要的配置

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

二、配置 .babelrc 文件

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