bug最後彙總-2018/08/03

1、對於點擊後請求時間過長的按鈕

現象：容易給用戶點擊無效的錯覺，從而致使屢次點擊，從而發出多個相同請求，這顯然是不符合咱們意願的

解決：

用戶點擊發出多個請求：加個鎖，當用戶點擊後，將鎖關閉，使用戶以後的點擊無效，當請求完畢後再打開鎖

等待時間過長用戶體驗下降：能夠加個loading，點擊後按鈕內容後加個"..."，或者後加個loading圖標，當請求完畢再回復原樣

 

2、發送數據內容能在前端驗證的儘可能在前端驗證

緣由：若是把一些驗證放到後端接口，咱們發送請求，而後驗證沒經過，請求返回緣由，而後呢？確定是用戶修改後，再次發送請求了。

可是若是咱們把這些驗證放到前端，這個請求就不必發出，以後驗證經過後纔會發出請求，這樣能夠必定程度減小請求數量，減輕服務器負擔。

 

3、Vue.js開發中關於第三方組件的使用

使用第三方組件的好處：節省了不少重複代碼，直接引入使用便可

使用第三方組件的缺點：雖然組件好用，可是咱們也要根據需求具體分析，由於組件的樣式和功能是定死的，要考慮使用這個的組件和當前需求衝突的多少，若是衝突不少，或者本身寫個適配的組件會更加高效方便。

 

4、開發前必定要把需求弄清楚纔開始開發，若是是由於需求弄錯而致使的時間和人力的浪費，痛苦的只會是你本身，要對本身負責。

 

5、Vue.js開發，若是若是經過等號，爲data中的一個數組或者一個對象內，添加一個新對象，這個新添加的新對象不是響應式，咱們修改該對象的值，並不會觸發從新渲染。

 

解決：經過 this.$set(obj, prop, value) 來添加，經過此方法添加的是響應式的，由於會被從新定義添加setter和getter

 

6、若是接口傳遞的數據除了正常的數據外，還存在文件，咱們須要 new FormData() ，經過FormData實例的append方法添加數據，而後將改FormData實例做爲參數傳遞

 

7、文件字節轉換爲正常單位

// 字節轉換爲最合適的單位，最後是四捨五入取整，若是其餘需求能夠修改
function bytesToSize(bytes) {
    if (bytes === 0) return '0 B';
    var k = 1024, // or 1000
        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        i = Math.floor(Math.log(bytes) / Math.log(k));
   return (bytes / Math.pow(k, i)).toFixed(0) + '' + sizes[i];
}

 

 

8、Vue.js使用ElementUI組件，自定義樣式問題

問題：自定義樣式其實就是覆蓋組件的默認樣式，這些內容須要放到全局，即不能放到設置scope的style標籤中，不然不會生效

緣由：由於Vue.js被放到scope中的樣式選擇器在打包後都會被加上一個惟一的屬性標識，經過這個惟一的屬性標識來限定組件做用域，避免影響其餘組件的樣式。

 

9、編輯器內容初始化問題

需求：若是組件或者頁面存在編輯器，當頁面初次加載時，咱們須要將獲取到的數據初始化到編輯器中

問題：編輯器初始化通常要操做dom，若是在爲編輯器初始化填充數據的時候，編輯器實例（也就是編輯器DOM）尚未渲染完畢，會致使編輯器的內容初始化失敗

解決：

方一：有些編輯器會提供編輯器實例加載完畢的事件，咱們在該事件的回調中填充初始化數據，以下例子

editor.on('ready', () => {
   editor.setData("初始化數據"); 
});

 

方法二：若是沒有提供方一的事件api，可能會存在一個編輯器當前狀態的屬性，好比說是status，加載時status爲loading，加載完畢，status變爲ready

而後咱們能夠設定定時器，每過100ms就監測一次status，若是status變爲ready，關閉監測定時器，填充初始化數據

let timer = setInterval( () => {
    clearInterval(timer);
   if (editor.status == 'ready') {
        editor.setData('初始化數據');
   }
});

 

 

10、Vue.js開發中使用了ElementUI中的table組件

問題：會出現橫向滾動條，雖然表格中內容沒有超過設定的寬度

緣由：table的border存在會致使內容border超過設定的width，從而莫名出現橫向滾動條，但由於樣式，表格的border又不能去掉

解決：在全局樣式中加入以下代碼：

.form-content .el-table__body-wrapper,
.form-content .el-table__footer-wrapper,
.form-content .el-table__header-wrapper {
  width: 101%;
}

 

 

 

 

 

 

 

------------ end