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

一、起因

反复琢磨，我还是很好奇：这一年，前端精选好文都有哪些？

翻了一下，有 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.React 和 Vue 仍然是主流；
3.Flutter 出现的晚，但是上升趋势不容小觑；
4.Nodejs，Electron 还是很受前端欢迎；
5.TypeScript 和 GraphQL 仍然有不少的讨论；
6.优化、构建、开源、线路图仍然是前端的关注点；
7.全栈仍是前端的追逐目标；
…

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