古井龙王的博客

正则匹配 HTML 嵌套元素(三)

fengshangbin — Sun, 28 Jun 2020 01:25:44 GMT

正则匹配 HTML 嵌套元素(三)

上一篇介绍了混合条件查询, 我们再增加写入功能就是一个完整的Dom解析类库, 我已经开源如下

FastDomParse-node

fast dom parse for node.js
GitHub Pages: https://github.com/fengshangbin/FastDomParse-node

FastDomParse-java

fast dom parse for java
GitHub Pages: https://github.com/fengshangbin/FastDomParse-java

如何使用 FastDomParse-node

npm install --save fastdomparse-node
...
const fastdom = require("fastdomparse-node");

let dom = new fastdom(htmlString);

//单目标查询
let element = dom.querySelector("div.page li[name=1]");

//多目标查询
let elements = dom.querySelectorAll("div.page li");

//目标子查询
let sun = element.querySelector("div.page li[name=1]");
let suns = element.querySelectorAll("div.page li[name=1]");

//element属性
let inner = element.getInnerHTML();
element.setInnerHTML("hello fast dom parse");

let outer = element.getOuterHTML();
element.setOuterHTML("hello fast dom parse");

let attr = element.getAttribute("id");
element.setAttribute("id", "content");
let hasID = element.hasAttribute("id");

//获取整个dom内容
dom.html

如何使用 FastDomParse-java

导入fastdomparse.jar

FastDom dom = new FastDom(htmlString)

//单目标查询
Element element = dom.querySelector("div.page li[name=1]");

//多目标查询
ArrayList elements = dom.querySelectorAll("div.page li");

//目标子查询
Element sun = element.querySelector("div.page li[name=1]");
ArrayList suns = element.querySelectorAll("div.page li[name=1]");

//element属性
String inner = element.getInnerHTML();
element.setInnerHTML("hello fast dom parse");

String outer = element.getOuterHTML();
element.setOuterHTML("hello fast dom parse");

String attr = element.getAttribute("id");
element.setAttribute("id", "content");
boolean hasID = element.hasAttribute("id");

//获取整个dom内容
dom.getHTML()

熟悉的味道，一样的配方，和原生 DOM 一样的语法，无需新学习，使用简单。

lazyswitch

fengshangbin — Sun, 21 Jun 2020 07:31:08 GMT

lazyswitch

LazySwitch 让多页也可以像单页一样做页面切换动画
GitHub Pages: https://github.com/fengshangbin/LazySwitch

现实问题

单页 VS 多页
1, 单页可以在切换视图时使用酷炫的过度动画，但会所有内容放在一个页面会增加开发难度，同时会消耗很多实际没用到的网络流量，如果内容是动态生成的如博客的博文，就很难做单页了。
2，多页传统模式，不支持页面切换动画。

关于 LazySwitch

LazySwitch 是一个 js 插件，实现页面切换的各种动画。
主要特点
1, 支持多页面间的切换动画。
2, 无依赖，轻量级，使用简单。

在线示例

https://www.fengshangbin.com/node/lazyswitch/

如何使用

1. 引入 LazySwitch

引用 lazyswitch.css 到页面

引用 lazyswitch.js 到页面

或者 npm 导入

npm install --save lazyswitch

...

const LazySwitch = require("lazyswitch");

给执行切换动画的单元添加 class="lazyswitch"

...

3. 单页面存在多个单元

如 $.html

2019
2018
2017

多单元只能有一个 lazyswitch 元素是展示状态 CSS 样式 in，其他 lazyswitch 的 css 样式为 out
每个单元需要配置对应的路径属性 data-path="xxx"
同时需要把 URL domain/2019.html, domain/2019.html, domain/2019.html 的访问指向这个单页面 html 文件，这需要后台语言的支持，也可以结合 LazyPage 框架使用，让前端也可设置访问 URL
关于 LazyPage 框架, 参见 https://github.com/fengshangbin/LazyPage

4. 页面切换动画

lazyswitch.css 内置了 slide、slidevertical、fade、popup 四种切换动画，您也可以自己定义自己需要的动画样式
lazyswitch 默认使用 slide 进行页面切换

...

属性 data-animate 为该页面切换时的动画样式

5. 页面顺序

当页面动态载入时会按照属性 data-sort 的值去插入 dom 结构中
如 news/2017.html 代码

news/2018.html 代码

news/2019.html 代码

当从 news/2018.html 跳转到 news/2019.html 时 dom 结构会变为

2018
2019

而从 news/2018.html 跳转到 news/2017.html 时 dom 结构会变为

2017
2018

lazyswitch 页面切换时，如果目标单元在 dom 中的位置是当前单元的前面，则会进行反转动画 css 类 reverse
反转动画在一些切换效果中很有用如 slide，在 fade 切换时则无效

6. 禁用部分页面切换动画

在超链接 a 设置属性 data-direct="true"
如果跨域名跳转链接时会自动直接跳转的

index(direct)

a 标签还有一个属性 data-history="true",默认为 true 控制页面切换时是否产生浏览器历史纪录

7. 禁用 loading 动画

loading 动画默认开启
关闭

开启

8. 开启多页面预加载

页面预加载默认关闭
开启

开启预加载后会自动查找 DOM 中的 a 标签的超链接，预加载这些超链接对应的页面

关闭

9. 监听页面切换事件

LazySwitch 页面切换会有 6 种事件发出
PAGE_SWITCH_BEFORE: 每次切换页面前触发
PAGE_FIRST_IN: 页面第一次进场
PAGE_IN_START: 页面开始进场
PAGE_IN_END: 页面结束进场
PAGE_OUT_START: 页面开始出场
PAGE_OUT_END: 页面结束出场

事件 event 为相同结构
event.type: 当前事件类型
event.data.page 当前事件对应的页面单元
event.data.animate 页面切换动画类型
event.data.history 页面切换是否产生浏览器历史纪录
event.data.isBack 页面切换动画是否反转
对于 PAGE_SWITCH_BEFORE 事件没有 event.data.page,
但是多了 event.data.from 和 event.data.to 对应将要出场和进场的页面单元

10. 动态调用页面切换

lazyswitch 页面切换默认在点击超链接 a 标签时触发
也可以通过代码调用触发页面切换

参数:
url: 跳转目标地址
option: 跳转配置项
默认值为
{
history: true,
isBack: "auto",
animate: "auto",
}

11. 页面标题

如果一个 html 文件中只有唯一一个页面单元时，这个页面单元会自动继承该页面的 title 值，
如果有多个页面单元时需要设置每个页面单元的标题 data-title
如 $.html

2019
2018
2017

FastDownload java队列下载

fengshangbin — Tue, 24 Mar 2020 10:25:12 GMT

FastDownload

java多线程队列下载，支持断点续传，大文件切割下载
GitHub Pages: https://github.com/fengshangbin/FastDownload

功能

多线程队列下载
断点续传
大文件切割块下载

设计理念

专注下载核心功能，提供UI状态回调，功能全面，使用简单

依赖

okhttp3(com.squareup.okhttp3), json(org.json.json)

初始化

实现持久化接口，以便能缓存下载进度，下面以Android为例

CacheInterface cache = new CacheInterface() {
    @Override
    public String read() {
    	SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences(context);
        return preferences.getString("downloadBreakPoint","");
    }

    @Override
    public void write(String data) {
    	SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences(context);
        SharedPreferences.Editor editor = preferences.edit();
        editor.putString("downloadBreakPoint", data);
        editor.commit();
    }
};
DownloadBreakPoint.setCacheInterface(cache);

调用

设置需要下载的资源列表

ArrayList resources = new ArrayList<>();
String sourceURL = "https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js";
String savePath = IOUtils.getAppDir() + "/jq.js";
String md5 = "ODdx7xaSv8w/K2kXyphXeA==";
long size = 92633L;
/*
@sourceURL 资源下载地址
@savePath 资源本地保存路径
@md5 资源哈希md5值
@size 资源大小
*/
Resource resource = new Resource(sourceURL, savePath, md5, size, null);
resources.add(resource);

监听下载状态

DownloadProgress downloadProgress = new DownloadProgress() {
	@Override
    protected synchronized void onDownloadChange() {
        //Message.sent(SynchronousHandler.CHANGE_LOADING, new long[]{this.getLoaded(), this.getTotal()});
    }

    @Override
    protected synchronized void onDownloadFailed(Resource resource) {
        //Log.i("c3","failed: "+resource.getPath());
    }

    @Override
    protected synchronized void onDownloadSuccess(Resource resource) {
        //Log.i("c3","success: "+resource.getPath());
    }

    @Override
    protected void onDownloadFinish() { 
    	//下载队列执行完成 包括成功和失败的任务
        //Log.i("c3","download all finish.");
    }
};

构建下载任务

int nThreads = 5;
Long chunkSize = 5*1024*1024L;
/*
@nThreads 多线程数量上限
@chunkSize 资源切割块大小
*/
BatchDownload batchDownload = BatchDownload.build(resources, downloadProgress, nThreads, chunkSize);

OK, 这样就完成了调用
如果需要动态执行下载任务可以

batchDownload.download(resource);

Java版的防抖(debounce)和节流(throttle)

fengshangbin — Fri, 20 Mar 2020 07:01:14 GMT

概念

防抖(debounce)

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时

节流(throttle)

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次

区别

防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

Java实现

防抖(debounce)

public class DebounceTask {
    private Timer timer;
    private Long delay;
    private Runnable runnable;

    public DebounceTask(Runnable runnable,  Long delay) {
        this.runnable = runnable;
        this.delay = delay;
    }

    public static DebounceTask build(Runnable runnable, Long delay){
        return new DebounceTask(runnable, delay);
    }

    public void run(){
        if(timer!=null){
            timer.cancel();
        }
        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                timer=null;
                runnable.run();
            }
        }, delay);
    }
}

节流(throttle)

public class ThrottleTask {
    private Timer timer;
    private Long delay;
    private Runnable runnable;
    private boolean needWait=false;

    public ThrottleTask(Runnable runnable,  Long delay) {
        this.runnable = runnable;
        this.delay = delay;
        this.timer = new Timer();
    }

    public static ThrottleTask build(Runnable runnable, Long delay){
        return new ThrottleTask(runnable, delay);
    }

    public void run(){
        if(!needWait){
            needWait=true;
            timer.schedule(new TimerTask() {
                @Override
                public void run() {
                    needWait=false;
                    runnable.run();
                }
            }, delay);
        }
    }
}

测试

防抖(debounce)

DebounceTask task = DebounceTask.build(new Runnable() {
    @Override
    public void run() {
        System.out.println("do task: "+System.currentTimeMillis());
    }
},1000L);
long delay = 100;
while (true){
    System.out.println("call task: "+System.currentTimeMillis());
    task.run();
    delay+=100;
    try {
        Thread.sleep(delay);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
}

节流(throttle)

ThrottleTask task = ThrottleTask.build(new Runnable() {
    @Override
    public void run() {
        System.out.println("do task: "+System.currentTimeMillis());
    }
},1000L);
while (true){
    System.out.println("call task: "+System.currentTimeMillis());
    task.run();
    try {
        Thread.sleep(200);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
}

旧诗

fengshangbin — Thu, 02 Jan 2020 03:09:31 GMT

某天，一张沾满灰尘的纸
不知何时，燃了起来
闪出耀眼的白光
它本来安稳的躺在桌上，沉睡在哪里很久了
现在它飘了起来
纸一点一点被火掩盖
虽然在左右摇摆着，但是始终是向下落去
终于，它掉到了地上
不知为何，荡了几下
当它又沉静下来时，它已经全身发黑，变为一堆灰烬
只是飘出来了一缕青烟
刚开始，它还是努力保持全身的完整
于是，我便一脚踏了下去
走了

古井龙王
2003年

WaterFall 瀑布流排版

fengshangbin — Sun, 08 Sep 2019 06:51:08 GMT

WaterFall

masonry layout JS Component 瀑布流排版
GitHub Pages: https://github.com/fengshangbin/WaterFall

设计理念

不依赖第三方框架，也无侵入，功能全面，使用简单。

特点及优势

原生脚本，不依赖第三方框架
多种排版模式，支持各种实际排版需求
兼容 px em rem %多种宽度单位
支持下拉到底时追加下一页视图
使用简单且已内置 vue 集成

在线测试

https://www.fengshangbin.com/html/waterfall/

如何使用

1, 引入 waterfall 脚本



var waterFall = WaterFall.builder(container, options);

或

npm i easy-waterfall -S

import {builder as waterfall} from 'easy-waterfall';

var waterFall = new waterfall(container, options);

container 瀑布流容器
options 配置参数

options 完整默认值

{
  minWidth: null,
  columns: null,
  width: null,
  gap: null,
  minGap: null,
  itemSelector: null,
  scrollParent: window,
  loading:
    ''
};

scrollParent 如果是指定 div，应该设置成元素选择的字符串如".communitys-all"

2, 在 vue 中使用

3, 三种排版模式

1, 指定子项最小宽度

{minWidth:"300px", gap:"10px"}

2, 指定子项列数

{columns:3, gap:"10px"}

3, 指定子项宽度，和最小间距

{width:"300px", minGap:"10px"}

4，兼容 px em rem %多种宽度单位

{width:"300px", minGap:"10em"}

{width:"300rem", minGap:"1%"}

5, 监听滑动到底事件

waterFall.addEventListener("touchbottom", function(e) {})

6, 显示隐藏 loading

waterFall.showLoading();
waterFall.hideLoading();

7, 更新视图

waterFall.update();

8, 使用示例



  
    
    
    waterfall test

LazyPage 整合 webpack 支持热更新

fengshangbin — Mon, 02 Sep 2019 09:19:26 GMT

LazyPage 整合 webpack 支持热更新

GitHub Pages

GitHub Page

如何运行

安装依赖

npm install

开始运行

npm run server

打包

npm run build

配置 webpack 热更新

安装 lazypage-node 和热更新依赖

npm install --save-dev webpack-dev-server lazypage-node

新建 server.js 文件

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
var lazypage = require('lazypage-node');

const config = require('./webpack.config.js');
config.mode = 'development';
const options = {
  contentBase: './dist',
  hot: true,
  host: 'localhost',
  before: app => {
    app.use(lazypage.response());
  }
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

compiler.hooks.emit.tap('FileListPlugin', compilation => {
  const assets = compilation.assets;
  lazypage.route(assets);
});

server.listen(8183, 'localhost', () => {
  console.log('dev server listening on port 8183');
});

添加 package.json server 命令

"server": "node server"

开始测试

npm run server

其他 webpack 功能如 js 处理 less、css 处理，html 处理，版本号设置，请参考 webpack.config.js 的配置

LazyPage 整合 gulp 支持热更新

fengshangbin — Mon, 02 Sep 2019 09:17:11 GMT

LazyPage 整合 gulp 支持热更新

GitHub Pages

GitHub Page

如何运行

安装依赖

npm install

开始运行

npm run server

打包

npm run build

gulp 配置

安装 gulp 依赖

npm install --save-dev gulp

配置热更新 server

1, 安装 lazypage-node 依赖

npm install --save-dev lazypage-node express

2, 创建 server.js

var express = require('express');
var serverFilter = require('lazypage-node');

var app = express();
app.use(serverFilter.filter('src'));
app.use(express.static('src'));

app.listen(7000, function() {});

3, 安装 browserSync 依赖

npm install --save-dev browser-sync gulp-nodemon

4, 创建 browserSync 任务

var browserSync = require('browser-sync').create();
gulp.task('browserSync', function(cb) {
  nodemon({
    script: 'server.js',
    //ignore: ["gulpfile.js", "node_modules/", "public/**/*.*"],
    ext: 'html',
    env: {
      NODE_ENV: 'development'
    }
  }).on('start', function() {
    browserSync.init(
      {
        proxy: 'http://localhost:7000',
        //files: ['src/**/*.less', 'src/**/*.html', 'src/**/*.js'],
        port: 8183
      },
      function() {
        console.log('browser refreshed.');
      }
    );
    cb();
  });
});

编译 less

安装依赖

npm install --save-dev gulp-less

创建 gulp less 任务

var less = require('gulp-less');

gulp.task('less', function() {
  return gulp
    .src(['src/**/*.less', '!src/**/_*.less'])
    .pipe(less())
    .pipe(gulp.dest('src'))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
});

自动追加 css 前缀

安装依赖

npm install --save-dev gulp-autoprefixer

在上面的 less 任务中追加.pipe(autoprefixer())

var autoprefixer = require('gulp-autoprefixer');
...
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulp.dest('src'))
...

在 package.json 中配置

"browserslist": [
    "last 2 versions",
    "Android >= 4.0"
]

监控文件变化

安装依赖

npm install --save-dev gulp-watch

创建 watch 任务

var watch = require('gulp-watch');
gulp.task('watch', function(cb) {
  watch('src/**/*.less', gulp.series('less'));
  watch('src/**/*.html', browserSync.reload);
  watch('src/**/*.js', browserSync.reload);
  cb();
});

创建热更新任务

gulp.task('server', gulp.series('browserSync', 'less', 'watch'));

静态文件版本控制

安装依赖

npm install --save-dev gulp-rev gulp-rev-collector
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');

追加文件版本号到文件名中，版本号为文件 md5 后的值

...
.pipe(rev())
.pipe(gulp.dest('dist'))
.pipe(rev.manifest())
...

替换文件引用路径为带版本号路径

...
.pipe(
    revCollector({
        replaceReved: true
    })
)
...

处理图片

gulp.task('image', function() {
  return gulp
    .src('src/**/*.{jpg,png,svg,gif}')
    .pipe(rev())
    .pipe(gulp.dest('dist'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/image'));
});

处理 css

安装压缩 css 依赖

npm install --save-dev gulp-clean-css

创建 css 任务

var minifycss = require('gulp-clean-css');
gulp.task('css', function() {
  return gulp
    .src(['dist/rev/**/*.json', 'src/**/*.css'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(minifycss())
    .pipe(rev())
    .pipe(gulp.dest('dist'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/css'));
});

处理 js

安装压缩 js 依赖

npm install --save-dev gulp-uglify

创建 js 任务

var uglify = require('gulp-uglify');
gulp.task('js', function() {
  return gulp
    .src(['dist/rev/**/*.json', 'src/**/*.js'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'));
});

创建 json 任务

gulp.task('json', function() {
  return gulp
    .src(['dist/rev/**/*.json', 'src/**/*.json'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(gulp.dest('dist'));
});

处理 html

安装压缩 html 依赖

npm install --save-dev gulp-htmlmin

创建 html 任务

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
  return gulp
    .src(['dist/rev/**/*.json', 'src/**/*.html'])
    .pipe(
      revCollector({
        replaceReved: true
      })
    )
    .pipe(
      htmlmin({
        removeComments: true,
        collapseWhitespace: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,
        minifyCSS: true
      })
    )
    .pipe(gulp.dest('dist'));
});

清理输出文件夹

安装文件删除依赖

npm install --save-dev del

创建删除任务

var del = require('del');
gulp.task('clean', function(cb) {
  return del('dist', cb);
});

拷贝其他资源

gulp.task('copy', function(cb) {
  gulp.src('src/**/*.{mp4,pdf,ico,woff2,woff,ttf}').pipe(gulp.dest('dist'));
  cb();
});

创建打包任务

gulp.task('build', gulp.series('clean', 'less', 'image', 'css', 'js', 'json', 'html', 'copy'));

通过Docker搭建可以热部署的nodejs环境

fengshangbin — Mon, 08 Jul 2019 04:04:04 GMT

通过Docker搭建可以热部署的nodejs环境

1, 下载nodejs镜像

docker pull node

2, 创建Dockerfile文件

FROM node
RUN mkdir -p /home/service
WORKDIR /home/service
RUN npm install pm2 -g
CMD pm2-runtime server.js --watch

3, 创建自己的nodejs镜像

docker build -t mynodeapp .

4, 运行nodejs容器

docker run --name nodeapptest -d -p 8181:8181 -v /home/node-test:/home/service --restart always mynodeapp

8181为当前服务对外的端口
/home/node-test为服务器任意路径，是存放nodejs代码和资源的地方，最好在ftp目录下，这样以后可以通过ftp更新程序

5, 上传nodejs代码和资源到服务器上

其中要包括依赖包node_modules

6, 校验服务是否正常运行

curl -i localhost:8181

7, 划重点

利用pm2实现nodejs热部署
创建空壳nodejs镜像，可以多个应用共用一个镜像
应用的入口必须统一为server.js文件

让元素在指定区域内显示

fengshangbin — Wed, 26 Jun 2019 09:38:13 GMT

让元素在指定区域内显示

jquery.simplepin.js源代码

功能特点

1, 基于jquery的插件
2, 区域可以是某个容器，也可以是指定顶部和底部元素
3, 支持修复偏差回调
4, 支持移动端，不卡顿和抖动
5, 不改变原始dom结构
6, 可以指定区域内贴顶或贴底显示

调用示例

    $('.icons').pin({
      top: $('.topBanner'),
      bottom: $('footer'),
      snap: 'bottom'
    });

    $('.sidemenu').pin({
      container: $('.side'),
      absoluteTranslate: function() {
        return -$('.side').offset().top;
      },
      fixedTranslate: function() {
        return $('header').height();
      }
    });

正则匹配 HTML 嵌套元素(二)

fengshangbin — Tue, 25 Jun 2019 07:26:02 GMT

正则匹配 HTML 嵌套元素(二)

上一篇介绍了单一条件查询, 本篇介绍混合条件查询

javascript
queryhelp.js源代码
java
QueryHelp.java源代码

类似传统 JS 查询习惯
支持# .[]混写查询
空格=>层级
井号#=>id
.=>class 类名
[]=>attribute 属性

多结果查询

QueryHelp.querySelectorAll(html, queryString)

单结果查询

QueryHelp.querySelector(html, queryString)

示例

QueryHelp.querySelectorAll(document.body.innerHTML, "div.nav #news li[show='true']")

下一篇实现写入功能，实现一个完整的Dom解析类库

基于 webcollector 和 lucene 开发站内搜索

fengshangbin — Fri, 21 Jun 2019 11:13:25 GMT

基于 webcollector 和 lucene 开发站内搜索

webcollector

网站爬虫
https://github.com/CrawlScript/WebCollector

lucene

文档索引与检索
https://lucene.apache.org/

爬取网页信息

public class SiteCrawler extends RamCrawler{
	protected static final Logger LOG = Logger.getLogger(SiteCrawler.class);
	List docList;
	public SiteCrawler() {
        super(true);
        String domain = "http://www.fengshangbin.com/";
        docList = new ArrayList();
        this.addSeed(domain);

        this.addRegex(domain+".*?");
        this.addRegex("-.*\\.(jpg|png|gif|svg|css|js|pdf).*");
        this.addRegex("-.*#.*");

        setThreads(30);
        getConf().setTopN(100);
    }

    @Override
    public void visit(Page page, CrawlDatums next) {
        String url = page.url();
        String title = page.select("title").first().text();
        String content = page.select("body").text();

        Document luceneDocument = new Document();
        TextField titleFiled = new TextField("title", title, Store.YES);
        TextField contentFiled = new TextField("content", content, Store.YES);
        StringField linkFiled = new StringField("link", url, Store.YES);

        luceneDocument.add(titleFiled);
        luceneDocument.add(contentFiled);
        luceneDocument.add(linkFiled);
        docList.add(luceneDocument);
    }
}

索引爬取结果

在 SiteCrawler.java 中添加爬取结束后的方法

    @Override
    public void afterStop(){
    	try {
    		this.dbManager.clear();
    		LuceneUtils.indexDelAll(SiteConst.LUCENE_PATH);
			LuceneUtils.indexUpdate(docList, SiteConst.LUCENE_PATH);
			docList.clear();
		} catch (Exception e) {
			//e.printStackTrace();
			LOG.error(e.getMessage());
		}
    	LOG.info("site index end");
    }

索引爬取结果

    public static void indexUpdate(List docList, String indexSaveDir) throws IOException {
        Analyzer analyzer = new StandardAnalyzer();
        Path path = Paths.get(indexSaveDir);
        Directory directory = FSDirectory.open(path);
        IndexWriterConfig config = new IndexWriterConfig(analyzer);
        IndexWriter indexWriter = new IndexWriter(directory, config);
        for (int i = 0; i < docList.size(); i++) {
        	Document luceneDocument = docList.get(i);
        	Term term = new Term("link", luceneDocument.get("link"));
        	indexWriter.updateDocument(term, luceneDocument);
            if ((i + 1) % 50 == 0) {
                indexWriter.flush();
            }
        }
        indexWriter.flush();
        indexWriter.commit();
        indexWriter.close();
    }

查询数据

    public static Map indexSearch(String indexDir, String queryWord, int start, int end) throws Exception {
		Map result = new HashMap();
		ArrayList> list=new ArrayList>();
		result.put("list", list);
        Analyzer analyzer = new StandardAnalyzer();
        String[] fields = {"title", "content"};
        MultiFieldQueryParser queryParser = new MultiFieldQueryParser(fields, analyzer);
        Query query = queryParser.parse(queryWord);
        Path path = Paths.get(indexDir);
        Directory dir = FSDirectory.open(path);
        DirectoryReader directoryReader = DirectoryReader.open(dir);
        IndexSearcher indexSearcher = new IndexSearcher(directoryReader);
        TopDocs topdocs = indexSearcher.search(query, end);
        ScoreDoc[] scoreDocs = topdocs.scoreDocs;
        ScoreDoc loopScoreDoc = null;

        Formatter formatter = new SimpleHTMLFormatter("","");
        QueryScorer scorer = new QueryScorer(query);
        Highlighter highlighter = new Highlighter(formatter,scorer);
        //设置摘要
        Fragmenter fragmenter  = new SimpleSpanFragmenter(scorer);
        highlighter.setTextFragmenter(fragmenter);

        result.put("total", topdocs.totalHits.value);
        for (int i = start; i < scoreDocs.length; i++) {
            loopScoreDoc = scoreDocs[i];
            int docID = loopScoreDoc.doc;
            Document document = directoryReader.document(docID);
            String content = document.get("content");
            String highlighterContent = highlighter.getBestFragment(analyzer, "content", content);
            if(highlighterContent==null)highlighterContent=content.substring(0, Math.min(80, content.length()));
            Map item = new HashMap();
            item.put("link", document.get("link"));
            item.put("title", document.get("title"));
            item.put("content", highlighterContent+" ...");
            list.add(item);
        }
        result.put("code", 200);
        return result;
    }

设置每日凌晨自动运行爬虫

    @Override
	public void contextInitialized(ServletContextEvent sce) {
		// TODO Auto-generated method stub
		LOG.info("site serach start:");
		TimerTask task = new TimerTask() {
	      @Override
	      public void run() {
	        // task to run goes here
	    	SiteCrawler crawler = new SiteCrawler();
	        try {
				crawler.start(5);
			} catch (Exception e) {
				//e.printStackTrace();
				LOG.error(e.getMessage());
			}
	      }
	    };
	    Timer timer = new Timer();

	    long now = new Date().getTime();
        SimpleDateFormat sdfOne = new SimpleDateFormat("yyyy-MM-dd");
        long overTime=0;
		try {
			overTime = now - (sdfOne.parse(sdfOne.format(now)).getTime());
		} catch (ParseException e) {
			e.printStackTrace();
		}
	    long intevalPeriod = 24 * 60 * 60 * 1000;
	    long delay = intevalPeriod - overTime;
	    LOG.info("site serach next index:"+delay);
	    timer.scheduleAtFixedRate(task, delay, intevalPeriod);
	}

H5 PhotoCrop组件

fengshangbin — Fri, 12 Apr 2019 08:03:07 GMT

PhotoCrop

PhotoCrop is JS library for photo crop
PhotoCrop 是一个裁剪图片的 js 组件
GitHub Pages: https://github.com/fengshangbin/PhotoCrop

设计理念

不依赖第三方框架，也无侵入，功能全面，使用方便

特点及优势

支持 PC 和移动端, UI 简单清晰
功能全面，支持原图输出，轻界面模式，自定义宽高比例
图片缩放无锯齿
自动修正图片旋转角度
使用简单,支持移动端的手势

如何使用

引入 js 文件

C3PhotoCrop.crop({
    cropSize: '300x250',
    success: function(data) {
        img.src = 'data:image/jpeg;base64,' + data.data;
    }
});

或

npm i c3photocrop -S

import {crop} from "c3photocrop";

crop({
    cropSize: '300x250',
    success: function(data) {
        img.src = 'data:image/jpeg;base64,' + data.data;
    }
});

示例
示例二维码

许可

MIT 许可

正则匹配HTML嵌套元素(一)

fengshangbin — Tue, 26 Mar 2019 07:42:34 GMT

正则匹配HTML嵌套元素(一)

在js, java这种不支持正则平衡组高级特性时，如何用正则匹配HTML嵌套元素？
java版实现源码

第一步

查找目标元素开始位置，例根据id查找

var id = "home";
var regStr = "< *([^ >]*)[^>]*?\\bid *= *\""+id+"\"[^>]*>";
var match = new RegExp(regStr, "img");
var group = match.exec(html);

第二步

根据目标元素的标签，向下查找相同标签的打开和结束标签，并计数
如果是打开标签，计数加1，否则计数减1。当计数为0时结束查找

var regStrAll = "< */? *"+tag+"[^>]*>";
var matchAll = new RegExp(regStrAll, "img");

var regStrClose = "< */ *"+tag+" *>";
var matchClose = new RegExp(regStrClose, "im");

var openCount = 1;
var lastCloseIndex = 0;
while(openCount > 0){
	var groupAll=matchAll.exec(html);
	if(groupAll==null){
		break;
	}else{
		if(matchClose.test(groupAll[0])){
			openCount--;
			lastCloseIndex = groupAll.index+groupAll[0].length;
		}else{
			openCount++;
		}
	}
}

这样就可以完成嵌套元素的匹配了
接下来我们对代码进行封装扩展，以实现getElementById、getElementByTag、getElementByClass三个常用函数

function getElementById(html, id){
	return getElementByAttr(html, "id", id);
}
function getElementByTag(html, tag){
	var regStr = "< *("+tag+")[^>]*>";
	return queryElement(regStr, html);
}
function getElementByClass(html, className){
	return getElementByAttr(html, "class", className);
}
function getElementByAttr(html, key, value){
	var regStr = "< *([^ >]*)[^>]*?\\b"+key+" *= *\""+value+"\"[^>]*>";
	return queryElement(regStr, html);
}
function queryElement(regStr, html){
	var match = new RegExp(regStr, "img");
	var group = match.exec(html);
	if(group == null)return null;
	var searchStart = group.index+group[0].length;
	var closeIndex = queryCloseTag(group[1], html.substring(searchStart));
	return html.substring(group.index, searchStart+closeIndex);
}
function queryCloseTag(tag, html){
	var regStrAll = "< */? *"+tag+"[^>]*>";
	var matchAll = new RegExp(regStrAll, "img");

	var regStrClose = "< */ *"+tag+" *>";
	var matchClose = new RegExp(regStrClose, "im");

	var openCount = 1;
	var lastCloseIndex = 0;
	while(openCount > 0){
		var groupAll=matchAll.exec(html);
		if(groupAll==null){
			break;
		}else{
			if(matchClose.test(groupAll[0])){
				openCount--;
				lastCloseIndex = groupAll.index+groupAll[0].length;
			}else{
				openCount++;
			}
		}
	}
	return lastCloseIndex;
}

特殊标签处理

1, 自结束标签如:

,

function queryElement(regStr, html){
	var match = new RegExp(regStr, "img");
	var group = match.exec(html);
	if(group == null)return null;
	var searchStart = group.index+group[0].length;
	var closeIndex = 0;
	if(/\/ *>$/.test(group[0])==false){
		closeIndex = queryCloseTag(group[1], html.substring(searchStart));
	}
	return html.substring(group.index, searchStart+closeIndex);
}

2, 省略结束标签如:

,

function queryCloseTag(tag, html){
	var regStrAll = "< */? *"+tag+"[^>]*>";
	var matchAll = new RegExp(regStrAll, "img");

	var regStrClose = "< */ *"+tag+" *>";
	var matchClose = new RegExp(regStrClose, "im");

	var openCount = 1;
	var lastCloseIndex = 0;
	while(openCount > 0){
		var groupAll=matchAll.exec(html);
		if(groupAll==null){
			break;
		}else{
			if(matchClose.test(groupAll[0])){
				openCount--;
				lastCloseIndex = groupAll.index+groupAll[0].length;
			}else{
				openCount++;
				if(new RegExp("\\b"+tag+"\\b", "i").test("input br img"))return 0;
			}
		}
	}
	return lastCloseIndex;
}

getElementByClass改进

使用时发现getElementByClass经常同时需要多个class来查找元素，如getElementByClass(document.body.innerHtml, ".page.in")

function getElementByClass(html, classNames){
	var classArr = classNames.split(".");
	var classReg = "";
	for(var i=0; i0){
			classReg+="(?=.*?\\b"+className+"\\b)";
		}
	}
	var option = {
		index: 2,
		regStr: classReg
	};
	var regStr = "< *([^ |>]*)[^>]*?\\bclass *= *\"([^\"]*)\"[^>]*>";
	return queryElement(regStr, html, option);
}
function queryElement(regStr, html, option){
	var match = new RegExp(regStr, "img");
	var group = match.exec(html);
	if(group == null)return null;
	if(option!=null){
		while(group!=null){
			var nextContent = group[option.index];
			var nextMatch = new RegExp(option.regStr, "im");
			if(nextMatch.test(nextContent)){
				break;
			}
			group = match.exec(html);
		}
		if(group == null)return null;
	}
	var searchStart = group.index+group[0].length;
	var closeIndex = 0;
	if(/\/ *>$/.test(group[0])==false){
		closeIndex = queryCloseTag(group[1], html.substring(searchStart));
	}
	return html.substring(group.index, searchStart+closeIndex);
}

改进queryElement

很多时候我们需要查找的结果是个数组，而不只是返回一个元素

function queryElement(regStr, html, option){
	var match = new RegExp(regStr, "img");
	var result = option.multiElement ? [] : null;
	var group = match.exec(html);
	while(group!=null){
		if(option.regStr!=null){
			while(group!=null){
				var nextContent = group[option.index];
				var nextMatch = new RegExp(option.regStr, "im");
				if(nextMatch.test(nextContent)){
					break;
				}
				group = match.exec(html);
			}
			if(group == null)return result;
		}
		var searchStart = group.index+group[0].length;
		var closeIndex = 0;
		if(/\/ *>$/.test(group[0])==false){
			closeIndex = queryCloseTag(group[1], html.substring(searchStart));
		}
		var targetHtml = html.substring(group.index, searchStart+closeIndex);
		if(result == null){
			result = targetHtml;
			break;
		}else{
			result.push(targetHtml);
			group = match.exec(html);
		}
	}
	return result;
}

最终代码

function getElementById(html, id){
	return getElementByAttr(html, "id", id, false);
}
function getElementsByTag(html, tag){
	var regStr = "< *("+tag+")[^>]*>";
	return queryElement(regStr, html, {multiElement: true});
}
function getElementsByClass(html, classNames){
	var classArr = classNames.split(".");
	var classReg = "";
	for(var i=0; i0){
			classReg+="(?=.*?\\b"+className+"\\b)";
		}
	}
	var option = {
		multiElement: true,
		index: 2,
		regStr: classReg
	};
	var regStr = "< *([^ |>]*)[^>]*?\\bclass *= *\"([^\"]*)\"[^>]*>";
	return queryElement(regStr, html, option);
}
function getElementByAttr(html, key, value, multiElement){
	var regStr = "< *([^ |>]*).*?\\b"+key+" *= *\""+value+"\"[^>]*>";
	return queryElement(regStr, html, {multiElement: multiElement});
}
function queryElement(regStr, html, option){
	var match = new RegExp(regStr, "img");
	var result = option.multiElement ? [] : null;
	var group = match.exec(html);
	while(group!=null){
		if(option.regStr!=null){
			while(group!=null){
				var nextContent = group[option.index];
				var nextMatch = new RegExp(option.regStr, "im");
				if(nextMatch.test(nextContent)){
					break;
				}
				group = match.exec(html);
			}
			if(group == null)return result;
		}
		var searchStart = group.index+group[0].length;
		var closeIndex = 0;
		if(/\/ *>$/.test(group[0])==false){
			closeIndex = queryCloseTag(group[1], html.substring(searchStart));
		}
		var targetHtml = html.substring(group.index, searchStart+closeIndex);
		if(result == null){
			result = targetHtml;
			break;
		}else{
			result.push(targetHtml);
			group = match.exec(html);
		}
	}
	return result;
}
function queryCloseTag(tag, html){
	var regStrAll = "< */? *"+tag+"[^>]*>";
	var matchAll = new RegExp(regStrAll, "img");

	var regStrClose = "< */ *"+tag+" *>";
	var matchClose = new RegExp(regStrClose, "im");

	var openCount = 1;
	var lastCloseIndex = 0;
	while(openCount > 0){
		var groupAll=matchAll.exec(html);
		if(groupAll==null){
			break;
		}else{
			if(matchClose.test(groupAll[0])){
				openCount--;
				lastCloseIndex = groupAll.index+groupAll[0].length;
			}else{
				openCount++;
				if(new RegExp("\\b"+tag+"\\b", "i").test("input br image"))return 0;
			}
		}
	}
	return lastCloseIndex;
}

下一篇实现#(id)空格(层级).(类)混合查询

LazyPage-node.js

fengshangbin — Thu, 07 Mar 2019 07:57:39 GMT

LazyPage-node.js

LazyPage server node.js version
LazyPage 后端 node.js 版本
GitHub Pages: https://github.com/fengshangbin/LazyPage-node.js

关于 LazyPage

参见 https://github.com/fengshangbin/LazyPage

在线测试

https://www.fengshangbin.com/node/lazypage/

如何使用 LazyPage-node.js

1，导入 lazypage-node.js 到你的项目

npm install --save-dev express
npm install --save-dev lazypage-node

var express = require('express');
var app = express();
var lazypage = require('lazyPage-node');

2，在项目初始化时执行 LazyPage 初始化

app.use(lazypage.filter('test/public'));
app.use(express.static('test/public'));

LazyPage-node.js 使用示例

test/app.js

var express = require('express');
var app = express();

var lazypage = require('lazypage-node');
app.use(lazypage.filter('test/public'));
app.use(express.static('test/public'));

var server = app.listen(8081, function() {
  console.log('LazyPage node.js测试，访问地址为 http://localhost:8081/');
});

古井龙王的博客

正则匹配 HTML 嵌套元素(三)

正则匹配 HTML 嵌套元素(三)

FastDomParse-node

FastDomParse-java

如何使用 FastDomParse-node

如何使用 FastDomParse-java

lazyswitch

lazyswitch

现实问题

关于 LazySwitch

在线示例

如何使用

1. 引入 LazySwitch

3. 单页面存在多个单元

4. 页面切换动画

5. 页面顺序

6. 禁用部分页面切换动画

7. 禁用 loading 动画

8. 开启多页面预加载

9. 监听页面切换事件

10. 动态调用页面切换

11. 页面标题

FastDownload java队列下载

FastDownload

功能

设计理念

依赖

初始化

调用

Java版的防抖(debounce)和节流(throttle)

概念

防抖(debounce)

节流(throttle)

区别

Java实现

防抖(debounce)

节流(throttle)

测试

防抖(debounce)

节流(throttle)

旧诗

WaterFall 瀑布流排版

WaterFall

设计理念

特点及优势

在线测试

如何使用

1, 引入 waterfall 脚本

2, 在 vue 中使用

3, 三种排版模式

4， 兼容 px em rem %多种宽度单位

5, 监听滑动到底事件

6, 显示隐藏 loading

7, 更新视图

8, 使用示例

LazyPage 整合 webpack 支持热更新

LazyPage 整合 webpack 支持热更新

GitHub Pages

如何运行

配置 webpack 热更新

安装 lazypage-node 和热更新 依赖

新建 server.js 文件

添加 package.json server 命令

开始测试

其他 webpack 功能 如 js 处理 less、css 处理，html 处理，版本号设置，请参考 webpack.config.js 的配置

LazyPage 整合 gulp 支持热更新

LazyPage 整合 gulp 支持热更新

GitHub Pages

如何运行

gulp 配置

安装 gulp 依赖

配置热更新 server

编译 less

自动追加 css 前缀

监控文件变化

创建热更新任务

静态文件版本控制

处理图片

处理 css

4，兼容 px em rem %多种宽度单位

安装 lazypage-node 和热更新依赖

其他 webpack 功能如 js 处理 less、css 处理，html 处理，版本号设置，请参考 webpack.config.js 的配置