websect使用教程

websect

• 上一篇讲了有关websect的几个重要的函数，find(),each(),attr(),text()，对于find函数只讲了他的一级搜索，接下来讲一讲二级搜索和三级搜索，还有就是另外一个函数info()函数的使用

find() 的二级搜索

• 我平常比较喜欢使用小米的官网进行数据爬取的测试，为什么，因为小米官网的地址比较短2333，现在有下面这个场景：
  
• 我想获取这些数据，首先要知道这些数据的格式，你可以在网页上通过检查来查看，也可以下载之后本地看，我就是下载到本地看的：

<ul class="children-list clearfix">
  <li class="first">
    <a href="//item.mi.com/10000198.html" target="_blank" data-log_code="31pchomeother001001#t=normal&amp;act=other&amp;page=home&amp;page_id=10530&amp;bid=3476901.2">
      <div class="figure figure-thumb">
        <img src="//i1.mifile.cn/f/i/2014/cn/placeholder-220!110x110.png" data-src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/be92bc4baa572bf467fc9e881fd4be2a.png"   alt="小米CC9 Pro" width="160" height="110" />
      </div>
      <div class="title">小米CC9 Pro</div>
      <p class="price">2799元起</p>
    </a>
 </li>

• 这么看很清晰，我想要爬取的就是 a链接地址href，图片的地址data-src，标题title，和价格price，主要是这四项数据。
• 如果使用二级搜索，像这样：

const ajax = require("ajax-insect")
const $ = require("websect")
const fs = require("fs")

ajax.get("https://www.mi.com").then(data=>{
    var old = Date.now()
    var arrs = []
    // 使用二级搜索，遍历 li 里所有的 a标签
    $(data).find("li a").each(el=>{
        var href = el.href
        var src = $(el).find("img").attr("src")
        var title = $(el).find("div.title").text()
        var price = $(el).find("p").text()
        if(href && src && title && price){
            arrs.push({href,src,title,price})
        }
    })
    // 打印数据
    console.log(arrs)
    // 测试二级搜索所用的时间
    console.log(Date.now() - old)
})

• 数据长这样：

• 可以看见 用时为21ms，那不打印数据的情况下：
  
• 不打印数据的情况下 用时17ms

find() 的三级搜索

• 以上面的例子为例，进行三级搜索

const ajax = require("ajax-insect")
const $ = require("websect")
const fs = require("fs")

ajax.get("https://www.mi.com").then(data=>{
    var old = Date.now()
    var arrs = []
    // 进行find三级搜索，首先找到 类名为 children-list.clearfix 的ul
    $(data).find("ul.children-list.clearfix li a").each(el=>{
        var href = el.href
        var src = $(el).find("img").attr("src")
        var title = $(el).find("div.title").text()
        var price = $(el).find("p").text()
        if(href && src && title && price){
            arrs.push({href,src,title,price})
        }
    })
    // 打印数据
    console.log(arrs)
    // 测试三级搜索的用时
    console.log(Date.now() - old)
})

• 可以看见 用时为13ms，不打印数据的情况下：
  
• 不打印数据的情况下 用时7ms
• 实际上，并不是三级搜索比二级搜索用时，而是搜索的条件越精确，用时越短，上面的例子为例，三级搜索的搜索条件比二级搜索的精确，所以用时更短，同时，find()函数的使用有点像Jquery的选择器，因为我是根据Jquery选择器来设计的

find() 的注意事项

• 搜索条件最多到三级，更高级的搜索其实没必要
• 搜索的时候，优先使用标签名，然后是类名，也可以标签名和类名搭配使用，像这样 find(“ul.slider li.slider-item a.item-link”)
• 如果只使用类名或者id来进行搜索，那么性能会比较差，请务必优先使用 标签名 进行搜索