本週學習小結4.12

前言

本週主要參與公司項目開發。這裏就記錄一下開發中遇到的問題與解決方法。

正文

• 頁面跳轉時傳參
  我所作的其中一個頁面有選擇兩個選項而後傳遞到結果頁的功能。傳遞參數時，vue-router的編程式導航有2種方法：param和query。我剛開始使用的是param，可是我在測試時發現，若是結果頁進行了刷新，那麼前面選擇的選項內容會丟失。
  解決辦法：使用另外一種query方法傳遞參數。
  vue-router的query形式傳參會把參數拼接到url後面，不像param是隱藏的，因此在頁面刷新時，url及其參數也能夠保存下來。拼接的形式相似於get請求的參數，如：

  /register?username='stupid'&password='man'

• 傳參時使用鍵值對保存參數
  問題形如：

  /register?info={'username':'stupid','password':'man'}

  因選擇內容比較多，因此內容都存在一個對象裏面，剛開始傳遞時我直接用鍵值對的形式傳整個對象，通過個人測試，這樣傳參只有在頁面直接跳轉時才能正常獲取參數，若是這時你刷新了頁面，那麼這個對象就會變成空，打印出來就是下面這樣：

  [object object]

  解決方法：vue的router裏面query存儲的內容也是一個對象，因此我改用了直接把query賦值爲對象參數，而後通過vue內部的操做，把選擇對象內的每一項內容都提取出來以key=value的形式以&隔開拼接起來，這樣若是再次刷新就不會丟失數據啦！
  param若是以鍵值對傳遞對象刷新會不會變成空？這個答案呢，刷新以後param整個都變成空了，固然沒有任何參數啦~

• 文本溢出顯示省略號...
  在我寫的內容中須要簡略列出文章的列表，部分顯示內容，因此須要這個功能。對於這個問題，有單行文本溢出和多行文本溢出。
  1.單行文本溢出
  比較簡單，主要借用text-overflow:ellipsis。固然還有另外兩個須要設置:

  width:xxxpx;    //限制單行文本顯示的寬度
  overflow:hidden;      //溢出隱藏，若是沒有這一條，下面一條也不會生效
  text-overflow:ellipsis;      //文本溢出時顯示省略號
  white-space:no-wrap;      //設置換行方式：不換行

  2.多行文本溢出
  與單行溢出的方法有點不同

  width:xxxpx;
  display: -webkit-box;    //必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示
  -webkit-box-orient: vertical;   //必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式
  -webkit-line-clamp: 3;     //用來限制在一個塊元素顯示的文本的行數
  overflow: hidden;

  不過在我測試的時候，寫在內部樣式裏面的時候沒有生效，而我改到內聯樣式時就生效了。這個問題我也不知道爲啥，也許是我某一行寫茬了吧，有興趣的朋友能夠試試~
  不過上面這種方法有必定的侷限性，看到-webkit就知道只適用於webkit內核的瀏覽器還有移動端。網上還有另外一種方法，適用範圍廣，有須要的夥伴能夠參照：

  p{
      position: relative; line-height: 20px; max-height: 40px;overflow: hidden;
  }
  p::after{
      content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
      background: -webkit-linear-gradient(left, transparent, #fff 55%);
      background: -o-linear-gradient(right, transparent, #fff 55%);
      background: -moz-linear-gradient(right, transparent, #fff 55%);
      background: linear-gradient(to right, transparent, #fff 55%);
  }
  
  適用範圍：
      該方法適用範圍廣，但文字未超出行的狀況下也會出現省略號,可結合js優化該方法。
  注：
  
      將height設置爲line-height的整數倍，防止超出的文字露出。
      給p::after添加漸變背景可避免文字只顯示一半。
      因爲ie6-7不顯示content內容，因此要添加標籤兼容ie6-7（如：<span>…<span/>）；兼容ie8須要將::after替換成:after。

• js判斷對象爲空
  項目中，有時須要判斷對象是否爲空，如上面的兩兩配對，若是用戶直接經過url進入的話，沒有參數指定配對雙方的內容，這時候須要設置默認項。不過在判斷參數是否爲空時遇到了一點問題，稍微百度了一下發現瞭如下幾個簡單方法：

  1.var a = {};
     if(!a){ console.log(1);}
     else if(a == null) { console.log(2);} 
     else { console.log(3);}     //結果爲3
     
     2.var b = {};
     if(b == {}){ console.log(4);}
     if(b == '{}') { console.log(5);} 
     if(typeof(b) == 'object') { console.log(6);}     //結果爲6
     
     3.var c = {};
     if(JSON.stringify(c) == "{}"){ console.log(7);}     //結果爲7
     
     因此可使用代碼3的方法判斷對象是否爲空對象{}；
  
     若是對象不爲空，而且知道對象不爲空時，某個屬性(好比{id:111})必定存在，則能夠裏這樣判斷：
     4.var d = {};
     var e = {id:111};
     if(d.id){ console.log(8);}
     if(e.id){ console.log(9);}     //結果爲9
     
     小結：顯然代碼3的判斷方式比較「強勢」，但效率明顯不如代碼4的判斷方法