記錄一下工做遇到的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"
    ]
}
複製代碼