使用JavaScript删除全部的微博

生活中常常会遇到一些繁琐重复而又没有意义的东西, 所以常有人说, 作为一个程序员, 应该避免做重复没意义的事, 我们学习编程最终的目的之一无非也是偷懒….. 能让自动的就坚决不手动. 当然, 除了在学习中自己造一些有意义的轮子除外. 今天就利用一些自己所学的知识去解决生活上的一些麻烦. 比如..自动删光微博黑历史~

开始

打开chrome浏览器(其他非IE现代浏览器都可以), 进入我的主页, 然后按下F12进入控制台.

原理分析

首先这次只是单纯的想通过JavaScript批量删除全部微博代替手动而已, 那么就简单了. 我们只需要模仿点击删除的动作.

找到删除微博的key, 选中DOM元素, 这里我们可以看到菜单a标签中有一个属性action-type="fl_menu, 在控制台进使用document.querySelectorAll进行测试输出, 可以看到是一个NodeList的类数组, 分别对应着页面每一个fl_menu.

点击menu弹出下拉菜单, 继续用同样的方法分析节点, 找出一个表示用于删除的属性. 一般来说, 一个合格的程序员都懂得编写语义化的代码, 这里先推测action-type="feed_list_delete这个属性是专属删除微博的属性, 使用document.querySelector将代码在控制台上测试输出. 获取到页面中第一个delete DOM, 模拟点击后弹出一个确定框, 再次使用相同的方法确定即可.

代码实现

一般网站都会限制用户频繁操作, 这里我们使用setTimeout, 测试一个weibo能够容忍的一个操作频率(可能还跟网速有关).

window.onload = (function() {
  // 经测试, 750ms是一个较快较稳定的频率, 效率过快会弹警告.
  var timer = setTimeout(Delete, 750);
  var item = 0;

  function Delete() {
    /* 这里需要停止定时器等待加载, 请求XHR进行加载剩余微博.
     * 这里是微博的一个限制, 当页面中不存在相应的DOM, 就进行页面刷新.
     */
    if (item > 15) {
      item = 0;
      clearTimeout(timer);
      return timer = setTimeout(Delete, 15000);
    }

    // 模拟点击
    document.querySelector('a[action-type="fl_menu"]').click();
    document.querySelector('a[action-type="feed_list_delete"]').click();
    document.querySelector('a[action-type="ok"]').click();

    ++item;
    console.log(`已成功删除了${item}项`);
    timer = setTimeout(Delete, 750);
  }
})();

总结

这样我们想要的效果就实现了.省去了一条一条删的人力, 又能运用到自己所学的知识. 其实代码代码也很简单, 无非是用到了setTimeout重复去递归调用而已. 要注意的是querySelector, 和querySelector都是IE9+的API, 在这里没有去考虑对IE的兼容, 并且也没有必要.