这个是学习复杂的组件的封装的，在课程中，主要实现的是书单上方的搜索功能组件的开发，这个应该是较之前的组件是有一定难度的，但是现在学到现在，感觉前端的内容和后端的内容比较起来，还是比较容易的，而且好多内容，其实在后端的开发中是很成熟的，所以学起来并不是很难以理解，这也是我们的一个优势吧，毕竟选择后端的同学应该是不错的啊，哈哈哈！这种组件其实是有一个特别的名字的，那就是高阶组件，来，把这个东西尽快学习掌握！

一、新建search组件

首先还是新建search组件的各个文件，这里微信开发者工具的功能很好用，直接就新建一个search目录，然后在目录中新建一个名字为index的component组件，这样就建好了四个与组件相关的文件

 二、search组件开发

1、基础的结构搭建

（1）样式文件的代码index.wxml文件

（2）样式文件 index.wxss代码

（3）基础的业务逻辑处理 index.js

这个主要是将取消操作交给page中页面进行处理，将组件中的取消事件传递给page页面中

page中book页面进行组件的展示以及业务逻辑处理的代码：

book.wxml文件中添加事件以及显示代码

book.js中添加部分处理方法

2、组件中的业务代码

 现在不知道从哪里开始写起了，昨天自己动手写了一下，简单的实现了搜索的功能，把前两天学习的内容简单的记录一下。

（1）搜索记录的标签显示

这个是分为两种搜索标签的，一种是历史搜索，一种是热门搜索，这两种实现方式是不同的，历史搜索是从缓存中加载保存的用户搜索记录，这个是有总数限制的，很值得学习一下这种方案的处理思路，热门搜索就是从服务器加载热门搜索记录，这个就有灰色空间了，如果数据量非常大的时候，这个时候会用到排序算法了，之前学习过，具体怎么实现，现在也是没有记住，总体的思路还是在大脑中有点的，看看这两种的实现：

上面是页面展示的实现，下面看一下具体的逻辑实现：

这个是新建的keyword.js文件，在models文件夹下面，主要是有几个相关的方法，重点是关注一下addToHistroy方法的

下面是search组件中的index.js文件中的具体逻辑实现，主要就是在search组件加载的时候，初始化这个历史搜索与热门搜索的标签，这个是在attached函数中，这个attached方法是小程序中的默认的组件加载时执行的方法

（2）书籍信息的显示

这个现在只是实现了书籍信息的简单展示，没有实现分页的操作，后续的会实现这个功能

这个页面展示的代码就比较简单了，我们只是复用了一下book组件，所以这里实现起来就比较简单了，下面是逻辑代码，主要就是调用接口加载数据，还有就是对数据的一些处理，以及一些具体细节的处理，这个细节的处理很容易被忽视的，但是这些东西才是体现一个项目的好坏，一个开发者好坏的真正的东西

 （3）搜索结果的分页加载

这个业务场景是当用户搜索结果展示出来的时候，之前只是展示若干条数据，无法全部显示搜索结果，这种做法当然无可厚非，但是我们要进一步完善这个功能，那就有必要来实现分页功能了，当用户下滑到底部的时候，如果还有数据，那么我们需要加载出来，那么这个如何实现，哈哈

具体思路：

（1）在page中小程序是有事件来实现这个下拉触发动作的，那就是onReachBottom事件，如何将这个动作的通知传递到组件中，让组件接收到这个通知，实现具体的逻辑

（2）可以通过组件的properties属性来传递这个通知，属性中监听函数observer来实现处理逻辑，这里observer监听 函数只有当属性值改变的时候才会触发，所以，我们的解决办法是每次传递一个随机数给属性，让每一次通知都能被组件接收

（3）剩下的就是具体的逻辑处理了，这里面有好多细节需要处理的，具体看代码

首先，看一下page中 book.wxml以及book.js中的代码

这里有一个产生随机数的方法，random(16) 产生16位的随机数，很简单，不贴代码了

看一下search组件中的相关代码，主要是增加了一个属性，增加了loading ，这个充当的是锁的角色，这个方法还有待优化，

说一下这里面的细节处理：

loading这个锁的引入，防止用户下拉触发事件过于频繁，向服务器发送过多请求，导致的信息加载出现重叠的问题，影响服务器的性能，引入loading锁之后，只有一个请求发送完毕之后，接下来的请求才能继续发送，这个锁的概念在多线程中应用的很广泛，作为后端开发，这个问题很容易理解！

 （4）搜索代码的优化

这个优化主要是设计到两方面，一方面是代码的抽离，一方面是代码的可读性

先看看代码的抽离如何来优化，主要是将分页的相关的代码抽离成behavior行为，然后直接在组件中引用behavior中的方法，新建一个behaviors文件夹，创建一个pagination.js文件

看一下pagination.js中的代码：

看一下在组件中如何使用：

注意：带有下划线的方法是理论上的私有方法，姑且这么说吧，其实本质上和其他方法是一致的，这些方法的优化是增加代码的可读性，使得代码更加容易让人理解，这里其实由很多细节需要注意的，包括锁，为了避免死锁，需要在请求失败的时候同时将锁释放，以及confirm方法中主要将之前的数据清空，否则会造成dataArray中数据是重复数据，还有就是在加锁的时候需要在判断是否还有更多数据之后进行，如果在这之前进行，那么会造成数据不会加载的情况，等等，之后会完善一下加载图标，哈哈，感觉越来越完美

 （5）loading组件的开发与应用

这个就直接从网上找一个loading图标的样式就行，看看loading组件的代码

看一下loading组件的应用：

主要是在搜索结果展示之前，以及加载更多的时候进行loading组件的显示，在其他时候是无需显示的

看一下如何控制显示隐藏的

loadingCenter主要是在onConfirm方法中进行控制的，这个不多说，看一下loading的控制，就是在加锁和释放锁的时候进行控制就行了

这里还有代码的优化，以及在没有搜索结果的时候进行友好的提示，以及在没有更多的数据的时候进行友好的提示，以及在取消的时候进行数据的初始化操作，很多细节的东西，这里就不想写了，很琐碎的东西，但是在我看来是很值得付出时间去完善的一部分，细节决定成败，大家同样是一个功能，最能看出一个人水平的是谁能把细节注意到，并且能够做好，在以后的工作中，这是自己需要提升的一个领域，专注细节，布局整个系统