博客园统计阅读量

前言

今天教大家如何统计博客园博客的阅读量。

效果图

侧边栏代码

<script id="worker" type="app/worker">
/**************** worker 任务线程 负责统计总阅读量 ********************/
    console.log("我是worker 任务线程 负责统计总阅读量..");
    //我的博客园地址名称，要是读取不到this.name，默认是我的博客名称
    var myCnblogsName = this.name ? this.name : "jichi";

    //监听主线程发送过来的数据
    //this.addEventListener('message', function (e) {
    //  this.postMessage('主线程发送过来的数据: ' + e.data);
    //}, false);

    //监听发送报错
    //this.addEventListener('messageerror ', function (e) {
    //  this.postMessage('发送数据到主线程报错: ' + e.data);
    //}, false);

    //加载其他 JS 脚本。
    //this.importScripts("")：

    //任务线程内部的全局变量数组，用于保存数据 阅读
    var statisticsArray_read = [];
    
    //任务线程内部的全局变量数组，用于保存数据 评论
    var statisticsArray_comment = [];
    
    //任务线程内部的全局变量数组，用于保存数据 推荐
    var statisticsArray_recommend = [];

    //发送ajax请求博客园
    function getReadData(page){
        //是否还要继续
        var flag = false;
        
        //使用XMLHttpRequest对象请求博客园 
        var xhr = new XMLHttpRequest();            
        xhr.open('GET', "https://www.cnblogs.com/"+myCnblogsName+"/default.html?page=" + page, false);//同步
        xhr.setRequestHeader("Content-Type", "text/html; charset=utf-8"); //设置响应格式
        xhr.onreadystatechange = function() {
          // readyState == 4说明请求已完成
          if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
                var text = xhr.responseText;
                //使用正则处理HTML字符串，需要设置全局标识
                var myRe_read = /阅读(\s*)[(]+\d+[)]/g;
                var resultArray_read = text.match(myRe_read);
                
                //合并到全局变量数组中
                statisticsArray_read = statisticsArray_read.concat(resultArray_read);
                
                var myRe_comment = /评论(\s*)[(]+\d+[)]/g;
                var resultArray_comment = text.match(myRe_comment);
                
                //合并到全局变量数组中
                statisticsArray_comment = statisticsArray_comment.concat(resultArray_comment);
                                
                var myRe_recommend = /推荐(\s*)[(]+\d+[)]/g;
                var resultArray_recommend = text.match(myRe_recommend);
                
                //合并到全局变量数组中
                statisticsArray_recommend = statisticsArray_recommend.concat(resultArray_recommend);
                
                
                //判断这个即可：resultArray.length > 0     如果还要文章集合，则返回true
                if(resultArray_read && resultArray_read.length > 0){
                    flag = true;
                }
          }
        };
        xhr.send();
        
        return flag;
    }


    //循环调用getReadData，默认最大页数 100 （100页，每页10条记录，相对于1000篇博客，已经够多了吧？）
    for(var i = 1;i < 100;i++){
        //如果返回false则立即跳出循环
        if(!getReadData(i)){ break;}
    }

    //处理全局数组
    for(var i = 0;i < statisticsArray_read.length;i++){
        if(statisticsArray_read[i]){
            //只保留数字部分
            statisticsArray_read[i] = statisticsArray_read[i].match(/\d+/)[0];
        }else{
            statisticsArray_read.splice(i, 1);
        }
        
        if(statisticsArray_comment[i]){
            //只保留数字部分
            statisticsArray_comment[i] = statisticsArray_comment[i].match(/\d+/)[0];
        }else{
            statisticsArray_comment.splice(i, 1);
        }
                
        if(statisticsArray_recommend[i]){
            //只保留数字部分
            statisticsArray_recommend[i] = statisticsArray_recommend[i].match(/\d+/)[0];
        }else{
            statisticsArray_recommend.splice(i, 1);
        }
    }

    //数组求和，需要返回主线程的最终值
    //向产生这个 Worker 线程发送消息。
    var count_read = eval(statisticsArray_read.join("+"));
    var count_comment = eval(statisticsArray_comment.join("+"));
    var count_recommend = eval(statisticsArray_recommend.join("+"));
    
    console.log("统计结束，总阅读量为："+count_read);
    console.log("统计结束，总评论量为："+count_comment);    
    console.log("统计结束，总推荐量为："+count_recommend);

    this.postMessage("{\"count_read\":\""+count_read+"\",\"count_comment\":\""+count_comment+"\",\"count_recommend\":\""+count_recommend+"\"}");

    //关闭 Worker 线程
    this.close();
</script>

<script>  
    $(function($){
        // title提示
        $("#calendar").css("display","none");
        $(".diggit").attr("title","谢谢点赞~~");
        $(".buryit").attr("title","雅蠛蝶~~");

               $("#div_digg .diggit").click(function(){
                      tip.msg("谢谢点赞~~");
               });
        
        //引入图片
        $("#blog-news").prepend("<img style=' 100px;' src=\"https://pic.cnblogs.com/avatar/1534147/20181111224720.png\">");
        
                //隐藏博客园提供的积分与排名标签，并将内容迁移到指定位置
                $("#sidebar_scorerank").hide();
        $("#profile_block").append("积分：<span style='color: #464646;'>"+$("#sidebar_scorerank").find(".liScore").text().match(/[1-9]\d+/)[0]+"</span><br/>");
        $("#profile_block").append("排名：<span style='color: #464646;'>"+$("#sidebar_scorerank").find(".liRank").text().match(/[1-9]\d+/)[0]+"</span><br/>");



        /**************** worker  主线程  ********************/
        // 先追加一个显示标签
        $("#profile_block").append("总阅读量：<span id='count_read' style='color: #464646;'>统计中...</span><br/>");
        $("#profile_block").append("总评论量：<span id='count_comment' style='color: #464646;'>统计中...</span><br/>");
        $("#profile_block").append("总推荐量：<span id='count_recommend' style='color: #464646;'>统计中...</span><br/>");
           
        //创建一个Blob，读取同个页面中的script标签
         var blob = new Blob([document.querySelector('#worker').textContent]);

        //这里需要把代码当作二进制对象读取，所以使用Blob接口。然后，这个二进制对象转为URL，再通过这个URL创建worker。
        var url = window.URL.createObjectURL(blob);

        //创建worker对象
        var worker = new Worker(url ,{ name : 'jichi'});

        //监听任务线程返回的数据
        worker.onmessage = function (event) {
            var data = JSON.parse(event.data)
            //设置总阅读量
            $("#count_read").text(data.count_read);
            $("#count_comment").text(data.count_comment);
            $("#count_recommend").text(data.count_recommend);
        }

        //error 事件的监听函数。
        worker.onerror = function (event) {
          console.log('error：' + event);
        }

        //messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
        worker.onmessageerror = function (event) {
          console.log('messageerror：' + event);
        }

        //发送数据到任务线程
        //worker.postMessage('Hello World');
        /**************** worker  主线程   end  ********************/
    })
</script>

复制即可

统计任意一个博主的阅读量

/**
    输入别人的博客园地址名称
*/
function statistical(myCnblogsName){
    console.log("我是worker 任务线程 正在统计 "+myCnblogsName+" 的博客的总阅读量..");

    //任务线程内部的全局变量数组，用于保存数据
    var statisticsArray = [];

    //发送ajax请求博客园
    function getReadData(page){
        //是否还要继续
        var flag = false;

        //使用XMLHttpRequest对象请求博客园
        var xhr = new XMLHttpRequest();            
        xhr.open('GET', "https://www.cnblogs.com/"+myCnblogsName+"/default.html?page=" + page, false);//同步
        xhr.setRequestHeader("Content-Type", "text/html; charset=utf-8"); //设置响应格式
        xhr.onreadystatechange = function() {
          // readyState == 4说明请求已完成
          if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
            //使用正则处理HTML字符串，需要设置全局标识
                //var myRe = /huanzi-qch(\s*)阅读(\s*)[(]+[1-9]\d+[)]/g;
                var myRe = /阅读(\s*)[(]+[1-9]\d+[)]/g;
                var resultArray = xhr.responseText.match(myRe);

                //合并到全局变量数组中
                statisticsArray = statisticsArray.concat(resultArray);

                //判断这个即可：resultArray.length > 0     如果还有文章集合，则返回true
                if(resultArray && resultArray.length > 0){
                    flag = true;
                }
          }
        };
        xhr.send();

        return flag;
    }


    //循环调用getReadData，默认最大页数 100 （100页，每页10条记录，相对于1000篇博客，已经够多了吧？）
    for(var i = 1;i < 100;i++){
        //如果返回false则立即跳出循环
        if(!getReadData(i)){ break;}
    }

    //处理全局数组
    for(var i = 0;i < statisticsArray.length;i++){
        if(statisticsArray[i]){
            //只保留数字部分
            statisticsArray[i] = statisticsArray[i].match(/[1-9]\d+/)[0];
        }else{
            statisticsArray.splice(i, 1);
        }
    }

    //数组求和，需要返回主线程的最终值
    var count = eval(statisticsArray.join("+"));

    console.log("统计结束，总阅读量为："+count);
}

statistical("jichi");