就是这个标志

 

首先我们先分析一下目前的情况,

 

 

我们在控制台使用 

效果如下

可以获取当前页所有的博客链接

一个用户的博客主页面 如下   https://fizzz.blog.csdn.net/

很简单地就拿到csdn的文章数据

 

再看慕课这边的发布文章页面,

慕课这个发布文章啊,真是忍不住吐槽,每次发布都要去滑个平图,WTF,那个产品设计出来的….

有了这东西之后, 批量发布和自动发布的功能基本死翘翘了.没办法只能一个一个点发布.选中文章标签.发布..

 

知道了两边的情况后,我们来分析一下技术方案

 

完美状态下,技术方案应该这样设计,

1. 用户在使用这个工具时,输入一个博客首页的地址,如https://fizzz.blog.csdn.net/
2. 工具根据地址去解析,批量分页获取所有博客标题,内容,地址,存储起来. 
3. 在博客首页或者在慕课发布文章页面,注入一个div,显示所有博客,并且每条博客都有,是否已导入这个属性

 

完美的技术方案是这样的,但现实总是会给你泼冷水的.

他会给你抛出一系列的问题难为你

• 你怎么分页去取所有的文章/li>
• 你用什么存储所有的文章数据在两个域名下共同使用,如果使用localStorage还是indexDB都存在跨域问题
• 你怎么处理文章格式/li>
• 你怎么处理csdn里加了防盗链的图片/li>
• ….
• ….
• 你怎么在工作的百忙之中完整这么牛逼的工具/li>

 

在事情未成功之前,一切总看似不可能

 

遇到问题我不喜欢放弃,我一定要知道困难在那里里真的无法实现没有变通的方案的就没有解决方案吗人难道就没有遇到这样的问题/p>

在所有疑问都得到否定之前,我绝不会停止探索的脚步.这便是我对技术的热情,对所做事情的执著.

 

让我们一步一步拆分困难,姑且抱着走一步算一步的态度去做这个工具.

经过我的充分的思考,仔细评估了一下完美技术方案的难度,和要耗费的时间,

我觉得,先把最简单地功能,最核心的功能做出来把,即产品中的MVP —最小可行性产品

所以技术方案改为以下

1. 进入一篇csdn文章的页面,在文章底部注入一个搬迁按钮
2. 点击搬迁按钮,获取当前文章的标题和内容,并打开慕课发表文章页面
3. 将获取的文章标题和内容填充进去

 

思考够了就捋捋袖子,开始干吧…

看到这里的朋友大概会有人说我,真是啰嗦,写了几千字还不知道你用啥技术写工具,代码也没贴一行,但我向对你说的是,作为一名软件开发工程师,设计思路永远要比编码重要的,重要地多,多地多….除了设计思路还有两个技能也是非常重要,下文也会体现出来.

 

首先我选择的是Tampermonkey   这个浏览器插件来进行写脚本,脚本当然是js语言编写.至于为什么选择它,我这里就不做过多的介绍了,有兴趣的朋友可以去搜索一下Tampermonkey, 前端是个包揽万物的职位,知识的宽度可以决定你有多少种解决方案.(认真的同学已经拿笔记下来了,这是鲁迅先生说的一句话)

为了使用Tampermokeny 我先去看官 看了一天的API,(我们是996,白天和晚上都没有时间,我是周日看了一天) 将所有基础api和高级api都尝试了一遍,并写下了两篇博客,

以下:

最新Tampermonkey 中文文档解析（附基础案例和高级案例）

Tampermonkey 高级API的使用 附Demo

总的来说还有很大收获的,比如,TM提供了一种数据存储的方式使用GM_*function 高级函数

具体是这几个

这种存储方式不被js跨域安全策略所限制,完美解决多tab也,数据共享的问题.具体存储到哪里我也不知道.

另外还可以使用

unsafeWindow

 对象来访问页面的js函数和变量,但考虑到大部分js都是压缩,并封装了,实际用处要小很多.

其他高级用法都去上面两篇文章里去找吧. 不要做伸手党.别人给的不一定是你要的.

 

按照最简单地技术方案,我用两行简单的代码就获取了博客的标题和内容,就是这样简单

 

这里不得不说一下,这里我踩了两个坑,

于是就这样我获取了文章的标题和内容文本

 获取数据后就用 TM的GM_setValue存储吧,这一步水到渠成,

数据存好了就打开慕课的文章发布页面折腾呗,于是在调用TM的GM_openInTab 打开一个聚焦的子窗口. 这一步也是自然天成.

文章标题很好操作,

既然要找答案,那就去看代码吧

F12搞起来.

细心而认真的同学很快就能找到答案.

ueditor官  可以看到这东西很多没更新了,16年5月份发了最新的一版,就不再维护了.

 

找了api那我们就在控制台试试能不能用吧,是骡子是马牵出来溜溜

 

这一试还真是发现了问题,看错误信息,是已将找到了UE的对象了, 要不然错误堆栈不会由ueditor产生. 就是有个对象没有 offsetWidth 这个属性, 我稍微发挥一下想象力并结合这行代码,

 

写到这里大家应该知道作为软件工程师的第二个重要技能了吧,对

就是分析能力   分析能力即是能够透过现象看本质,找到问题的本源,清楚地理清各个部分之间的联系.这是一个很厉害的能力,能不能成为中高级程序员,这个能力很关键.希望各位同学拿笔记下来.

 

根据这个节点往上找吧,不要问我为啥往上找,而不是往下找,自己思考.我都给你嚼明白,你吃这还有什么味道啊

有的同学会问,为啥下面下面的edui1 或者edui_toolbarbox   其实很好排除这个两个 一是鼠标放上去,二是使用

牛顿发明灯泡的时候,试了几千种材料,才发现钨丝是最适合做灯泡的材料 

如果你多去尝试几种可能性,你都不愿意,那你真是不适合做探索,扩展工作.实验的次数多了,你就会养成一种直觉,问题就出在这里,这个id就是我要找的东西,我要的东西就在这个对象里面. 这种直觉和经验在经历多次探索后自觉地养成.我称之为: 程序员的隐形查克拉  哈哈….

看到这个结果是不是很激动,很兴奋,想鼓掌,想喝彩…..哈哈哈…..

我也是.

截止到这里我们已经接近了技术方案的所有问题

 那就编写代码走一下彩排吧

我迅速地写好代码,执行.结果,效果很差劲

源文章格式与迁移后文章格式对比

 

 

看到这样的结果,我心里心里失望极了.为什么什么要这样对我nbsp;努力了那么久,到头来,还是这个样子, 这样的工具根本不会有人用,文章排版全都错了,而且没有图片.毫无美感而言,文章也无法阅读.

苍天啊, 大地啊,你为何要这样对待一个前端工程师到底前世做错了什么事情让你这样折磨我你让我的头发日益稀疏,你让我的颈肩日益畸形,你让痘痘爬满我的脸,你让公交天天堵着,让我天天迟到….
我不服.我不服,我一万个不服…..我只想想为 会主义共同理想做自己的一份贡献,为了让人们节省时间,做自己喜欢的事,你为什么要处处和我作对,让我连最小可行性产品也无法做出来,我努力了那么久,就换来了这样一个结果.

 

骂天骂地之后,我又恢复了作为一名战士的仪态.活还要继续干.

天行贱,君子当以自强不息

我仔细分析代码,并在脑海中飞速地过滤自己以前学的前端知识

这段代码只要修改一个单词就效果就可以翻天覆地,从狂风暴雨瞬间变成春光明媚,

我小心翼翼的把原有的单词删掉,又小心翼翼地写下新单词, ctrl+s 保存,

刷新页面,点击搬迁按钮. 我赶紧闭上眼睛,不敢看即将出现的结果.我怕自己再次失望.再次身处失望的深渊.绝望.

在做了几次深呼吸后,我慢慢地,慢慢地睁开了一只眼,

哇!!!!!!!

突然我体会到了哥伦布发现新大陆的兴奋了,抗日战争胜利的喜悦,新中国成立的自豪, 哈哈哈哈………

源文件与迁移后的文章对比

 

perfect!!!

我的心情久久不能平静,除了感叹自己的聪明才智外,更多的是对技术的敬畏.

 

相信很多读者已经猜到了答案, 

将获取文章的innerText 改为innerHTML 

 

看到这里的人肯定已经等不及要源码了

部分源码如下:

 

分析了那么久,一共写了73行代码,包括注释和空行.重要的是这个分析,调试的过程. 是不是很有意思啊.

脚本效果:

 

 

写到这里已经接近尾声了,现在是2019年10月26日01:55:49 今天项目上线,我留守公司,保证项目顺利上线,不知道正在读文章的你在干嘛是那么长的文章,不可能一次性读完吧. 能读到这里的人我们加个好友吧,英雄惜英雄.

 

祝君,所向披靡,斩尽人间bug.