vue__關於搜索功能的思考及有趣的點

最近在作公司搜索模塊的前端界面，之前沒以爲搜索能作出什麼花樣來，但最近在搜索上面得知的一些技法着實值得記錄。

1、提供全文搜索接口的搜索

遇到的功能點：

1.搜索結果高亮

結果高亮主要的工程量在後臺，在前端比較重要的是如何渲染出後臺提供的h5代碼。以前有看到直接截取後臺代碼裏的值本身在前端重寫了樣式的，雖然這也算種作法，但後臺提供的h5代碼豈不是就失去了意義？

因此最爲常規的作法是在組件中使用模板，將須要渲染的內容賦給v-html。

2.搜索後頁面跳轉涉及的傳值

在vue——組件傳值小結​中有提到關於傳值的問題

2、只提供搜索數據源的搜索

這部分搜索的作法也能夠直接稱爲過濾，本質來說就是將數據源按條件過濾。這裏首先要肯定過濾內容的精細程度，按不一樣的精細程度，方法可使用：

1.字符串匹配（較耗費性能可是能夠作較精確匹配）

2.filter過濾器（在中序匹配中能夠獲得比較好的應用）

在實際操做過程當中，須要精確匹配的搜索結果時一般都會在後臺寫好條件以求節約資源和優化性能，因此純前端的處理更多的是使用模糊匹配。

談談遇到的問題：filter過濾器使用過程當中出現了二次搜索數組變化的狀況

就是所謂「越搜越少」，原始數組在用戶操做下不斷過濾。這樣形式的過濾就違背了搜索功能的本質。

解決方法：對原始數據進行對象深拷貝，處理深拷貝後的數組，最後賦值進去。每次賦值都使用該深拷貝的數組，匹配數組必定要設置爲局部變量，不然可能存在數據殘留沒法清空的狀況

這個問題涉及相關知識點：js對象深拷貝、淺拷貝、引用的的區別及方法

（1）引用：對象間可使用「=」賦值表示引用，這種引用指向同一內存地址，修改被引用值，引用值發生改變，相反亦然。

（2）淺拷貝：只遍歷一層，並且舊對象和新對象裏的東西都指向一個地址，對於基本類型就是對值的複製，對於引用類型就是複製其地址，外在的元素狀況引用時看起來互不干擾，可內在的基礎條件改變時，可能會致使拷貝出的數據產生變化

淺拷貝方法：

使用Object.assign（）

（3）深拷貝：無論裏面有多少層都遍歷，克隆一個與舊不相干的，修改新的不影響舊的

深拷貝方法：

a.JSON.parse(JSON.stringify())

b.對象遍歷（前提是有對象）

例： var newObj = new obj.constructor()
//保持繼承鏈
for (var key in obj) {
  if(obj.hasOwnProPerty(key)) { 
 // 不遍歷其原型鏈上的屬性
  var val  = obj [key];
  newObj[key] = typeof val === 'object' ? argument.callee(val) : val;
  // 使用argument.callee解除與函數的耦合
  }
}
return newObj;
}
console.log(obj1)
console.log(clone(obj1))複製代碼

筆者最後仍是使用了序列化的方法。