Selector 规则
规则基于Cheerio
的简化版本,底层是基于 XPath 解析网站内容 dom 节点,模拟了 css 的选择器和 jQuery 的链式操作。目的是尽可能简化 xpath 的节点操作,降低开发成本。
Cheerio 已集成到 app 运行时环境(v2.6.2),最终打包小组件无需另外引入,可以直接初始化引入:
// widget.js
const Cheerio = require("@agcplayer/core/cheerio");
const cheerio = new Cheerio();
const $ = cheerio.load(`html string`);
小组件目录结构
小组件文件夹应包含以下内容:
selector-widget.zip
├── widget.json
├── widget.js
└── icon.png
文件说明
widget.js
:所有业务逻辑代码,包括数据层用到的home()
detail()
search()
play()
约定数据结构,可以参考这个示例。
Cheerio 已复刻方法
💡 这里只是参考了 cheerio 的基础用法,并非完整搬运了官方的库,需要常用缺少的方法可以在官方讨论群或者论坛提
load()
初始化页面 | 传入页面字符,返回实例
const $ = cheerio.load(
'<div id=test>\n <div><p>Hello</p></div>\n <div><p>World</p></div>\n</div>',
);
$('#test p').unwrap();
//=> <div id=test>
// <p>Hello</p>
// <p>World</p>
// </div>
unwrap()
移除元素的父节点,但保留自身在原来的位置
const $ = cheerio.load(`
<div class="wrap">
<span>hello</span>
</div>
`);
$('.wrap span').unwrap();
// => <span>hello</span>
find()
查找元素 | 支持 class/id + ~ > 等常见 css 选择器
$('#fruits').find('li').length;
//=> 3
$('#fruits').find($('.apple')).length;
//=> 1
attr()
查找元素 | 支持 class/id + ~ > 等常见 css 选择器
$('ul').attr('id');
//=> fruits
first()
获取元素第一个节点
$('ul > li').first().text();
//=> fruits
last()
获取元素最后一个节点
$('ul > li').last().text();
//=> fruits
eq()
获取元素指定下标节点
$('ul > li').eq(2).text();
//=> fruits[2]
text()
获取元素的内容
$('.example').text();
//=> fruits
val()
获取input/textarea/select表单组件值
$('textarea').val();
//=> fruits
prop()
.prop() 是操作节点的真实状态(如 checkbox 是否被勾选) 支持outerHTML 和 innerHTML 用法
$('input[type="checkbox"]').prop('checked');
//=> false
$('input[type="checkbox"]').prop('checked', true).val();
//=> ok
cosnt str = `<li class="pear fruit">Pear</li>`;
$('.pear').prop('outerHTML');
//=> <li class="pear fruit">Pear</li>
.map()
map方法,可以返回单个数据项或要插入结果集中的一系列数据项,如果该函数返回null或未定义,则不会插入任何元素
$('li')
.map(function (i, el) {
// this === el
return $(this).text();
})
.toArray()
.join(' ');
//=> "apple orange pear"
data()
- 支持读取任意 data-* 属性;
- 自动处理布尔值、数字、null、JSON 等类型(模仿 jQuery);
- 如果值为普通字符串,原样返回
- .data() 无参数时,返回所有 data 属性组成的对象
$('<div data-apple-color="red"></div>').data('apple-color');
//=> 'red'
本地开发
需要在工程根目录下自行构建开发环境,引入nodejs的cjs/esm包 cheerio
调试:
npm init && npm install cheerio;
// ESM,打包需要去掉
import * as Cheerio from 'cheerio';
// CommonJS,打包需要去掉
const Cheerio = require('cheerio');
// 业务代码……
const cheerio = new Cheerio();
const $ = cheerio.load(`html string`);
// BALABALA
本地打包
💡本地打包小组件需要去掉esm/commonjs
引入的cheerio
包