下午无聊在刷公众号,突然发现一篇文章「前端一年精选好文,请打包带走」。在这个跨年的日子里,我本来应该开着电视,看着跨年晚会。

一、起因

反复琢磨,我还是很好奇:这一年,前端精选好文都有哪些?

翻了一下,有 130 多篇文章。

我又退缩了,看完猴年马月了,还是先收藏吧。于是关掉手机,准备放飞自我。突然,脑子里一闪,打包,带走?嗯,我有了一个大胆的想法。

二、想法

既然一时半会儿看不完,何不看一下趋势,把握一下今年前端界的热点。

说到热点,还有什么比热词分析更直接的了。对,我要生成词云。


大体思路如下:
1.首先,要拿到文章中的关键词,需要使用爬虫;
2.为了不那么枯燥,我决定采用图片蒙版来做背景;
3.统计关键词出现的频率,进行分词;
4.过滤掉干扰词汇;
5.生成图片;

热词集合的图片就是我最终的目标。

三、使用爬虫

1.没什么好选择的,直接使用 Python 插件 BeautifulSoup,我们先拿到 Dom 元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from os import path
import sys
from bs4 import BeautifulSoup
html_doc = """
<body id="activity-detail">
<div id="js_article" class="rich_media">
<div id="js_top_ad_area" class="top_banner"></div>
<div class="rich_media_inner">
...
</div>
</div>
</body>
"""
soup = BeautifulSoup(html_doc)
# 可以抓到 a 标签内容
# print(soup.find_all('a'))
# 也直接抓取所有文本
print(soup.get_text())
# 打开文件,逐行写入
with open('{}/result/word.txt'.format(sys.path[0]),'w') as f:
f.writelines(soup.get_text());

为了确定内容是否都抓到了,我们先进行打印:
word
看到这些,基本上我们需要的内容已经就绪了,继续下一步。

四、生成图片

1.使用 Photoshop,制作一个 F2E 字样的蒙版文件,如下图:
mask

2.使用 Python 插件 jieba 进行分词:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
def jieba_processing_txt(text):
for word in userdict_list:
jieba.add_word(word)
mywordlist = []
seg_list = jieba.cut(text, cut_all=False)
liststr = '/ '.join(seg_list)
with io.open(stopwords_path, encoding='utf-8') as f_stop:
f_stop_text = f_stop.read()
f_stop_seg_list = f_stop_text.splitlines()
for myword in liststr.split('/'):
if not (myword.strip() in f_stop_seg_list) and len(myword.strip()) > 1:
mywordlist.append(myword)
print (mywordlist)
return ' '.join(mywordlist)

分词后,我们打印 mywordlist
array

整齐的数组,没有半点瑕疵。确定过眼神,是我要的数组。

3.使用 woldcloud 来生成词云图片:

1
2
3
4
wc = WordCloud(font_path=font_path, background_color="white", max_words=2000 mask=back_coloring,max_font_size=60, random_state=42, width=1000, height=860, margin=2,)
wc.generate(jieba_processing_txt(mytext))
wc.to_file(path.join(d, imgname1))

4.为了去除干扰,我们还需要过滤掉无用的关键词,如:发布,整理,功能,介绍,已经,使用,可以,电脑等等

1
2
userdict_list = ['我们', '什么', '发布', '整理', '功能',
'介绍','已经','使用','可以','电脑','尽快','收藏','最后','公众','支持','微信','需要','这些']

这里不得不吐槽一下,乱起八糟的广告真的很多,感觉自己在抓 2018 年的广告热词。

到这里就结束了,感兴趣的童鞋可以看看 Demo

五、打包带走

嗯,运行程序,我们最终得到了一张图片:
tag
大体一看,2018 年,前端还是那些老样子,不过我们可以了解到一些特点:
1.JavaScript 的文章还是很多;
2.ReactVue 仍然是主流;
3.Flutter 出现的晚,但是上升趋势不容小觑;
4.NodejsElectron 还是很受前端欢迎;
5.TypeScriptGraphQL 仍然有不少的讨论;
6.优化、构建、开源、线路图仍然是前端的关注点;
7.全栈仍是前端的追逐目标;

任务完成,收工。这里还是得特别感谢前端之巅小编辛苦的整理。这些前端精选资源,我真的打包带走了。