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))复制代码

笔者最后仍是使用了序列化的方法。