用 JS 写了两个 leetcode 的小工具，爬自己的 leetcode 代码和把代码用单页应用呈现出来
ma63d · 2016-12-23 20:21:10 +08:00 · 5465 次点击这是一个创建于 2910 天前的主题，其中的信息可能已经有所发展或是发生改变。
楼主是个前端小白，快要毕业了，最近也踏上了刷题的不归路。
然后用 JS 造了俩轮子，一个是leetcode-spider， leetcode 在国内访问实在太慢，看自己过往写的代码真的很头疼，所以基于 es6 的generator和co写了个爬虫，爬自己提交的代码到本地，代码就可以通过 github 等工具管理起来了。
另外一个就是leetcode-viewer。代码既然爬下来了，所以我想了想怎么把他呈现出来， 1 百多道题的解题源码，如果放到自己的博客上面去，那么要开一百多篇文章，太麻烦了，自己的博客也会被淹没这些在 leetcode 源码里。其实这些解题源码全都是静态文件呀，这个网页也不用动态逻辑，那我完全可以基于backend-free(无后台)架构来弄啊，如果你用 hexo 等静态博客，那你就明白我想做什么了。
我先把 leetcode 解题代码写进 json 里，然后用Vue2.x做一个单页应用的网页， JS 直接向静态服务器发 Ajax 请求，去请求这个 json 文件，并把里面的代码内容呈现出来，一个 leetcode 源码呈现网站就这么搞起来了，而且是纯静态的，发到 github pages 或者你自己的服务器上，就直接上线了！而且写了点逻辑，支持你在代码文件夹里写 markdown 文件，当做解题心得，也增加了对多说评论插件的支持。于是一个带搜索功能、带评论、带自己的解题心得、带源码、带 leetcode 题目的 leetcode 博客就这样搭建起来了。完全的静态网页，扔到 github pages 就上线了。
自己结合自己的使用体验，对这两个工具做了挺多优化，感觉还挺好用了，爬虫支持增量爬取，静态网页每次有新代码下载下来时更新时间也只需要一秒钟甚至更短。而且搭起来的这个网页也相当于一个 leetcode 解题博客，可以跟刷题的同学们交流解题思路，也相当于做一个个人展示把，明年找工作的时候可以粘在简历里。现在分享出来，大家有需要的就自己使用吧。
第 1 条附言 · 2016-12-24 02:47:57 +08:00
leetcode-viewer的响应式改造已经完成，大家如果觉得不错可以给个star，谢谢啦~
 |
1
lwjcjmx123 2016-12-23 20:31:22 +08:00 via Android
能做一下响应式设计吗？移动端没法看，哈哈，如果不是看了介绍，还以为是 vue 官网呢
|
 |
2
470326964js 2016-12-23 20:33:31 +08:00
赞一个👍
|
 |
3
ma63d OP @lwjcjmx123 嗯嗯 响应式最近在改
样式风格主要是当时做的时候想着跟我自己的博客风格保持一致，而自己的博客就是用 vue 搭的，当初样式参考的 vue 官方博客，所以这个页面跟 vue 官网的样式很像很像.而且自己用 vue 较多，洗脑严重，觉得官网风格还挺好看的....哈哈哈 可能得把 logo 先换了 |
|
4
ma63d OP @470326964js 哈哈，谢谢啦~
|
 |
5
finian 2016-12-23 20:51:44 +08:00
👍
|
 |
6
vimquee 2016-12-23 20:52:37 +08:00
卧槽，好用，牛逼。
|
 |
8
dxcqcv 2016-12-23 21:28:39 +08:00
学习一波，一直没想到怎么用 generator 的地方
|
 |
9
lsmgeb89 2016-12-23 22:13:00 +08:00
leetcode 都不能正常保存刷过题的代码，过一整子就没了。
|
|
10
ma63d OP  1
@dxcqcv generator 要结合[co]( https://github.com/tj/co)来用，而且主要是在 node 上用，在浏览器端的话一般受限于兼容性问题，虽然可以用 babel 转码搞定，但是前端的较为繁琐的异步流程其实不多，所以使用场景有限。
在 node 上的话 generator 的使用场景就很大了，主要是用来解决回调地狱的。以往在 node 上写服务的话都是基于回调（基于 promise 本质也一样）来写，你比如用 node 自带模块读一个文件的话就是`fs.ready('a.txt', function(err,data){//在这里写对 data 的处理})`这种，当你的异步流程比较多，比如你要读 a 文件然后根据内容去读 b 文件，然后读好以后写入 c 文件再之后把内容 ajax 返回回去，那么就有很多层回调嵌套，层数非常深，代码可读性很差，而且流程控制很糟糕。 用 yield generator 和 co 的话就非常简单， let data = yield fs.read('a.txt') 这种写法，简直跟同步的执行一样，代码可读性、流程控制等问题就都没啦， try catch 也可以用了。 |
|
12
ma63d OP @lwjcjmx123 响应式搞定啦~
|
 |
14
vghdjgh 2016-12-24 07:12:18 +08:00
leetcode 上自己写的代码是在 localstorage 里存着呢，不用爬，可以直接复制或遍历出来的。
|
 |
15
EchoUtopia 2016-12-24 09:21:38 +08:00
真不错，就是代码字体有点小
|
 |
16
justyy 2016-12-24 09:33:30 +08:00
|
|
17
ma63d OP @vghdjgh localstroage 里确实是有的，但是没法用程序读出来嘛，遍历最多也就能显示在 console 里，没法自动写入到本地文件，手工存取的话，一百多道题.....
|
|
18
ma63d OP @EchoUtopia 多谢反馈哈，我是在自己笔记本上开发的，在手机和 mac 上看起来感觉都挺合适的，没试过大屏显示器，这个确实得考虑一下，屏幕太大时可能字体有点小了。
|
|
19
ma63d OP Omg....大神，涉猎的领域太广了。。。。。
|
|
20
lwjcjmx123 2016-12-24 11:45:59 +08:00 via Android
@ma63d 可以的，小伙子，你这水平可不能说是前端小白。
|
 |
21
lancelot 2016-12-24 14:21:30 +08:00
做的很不错啊，很可以了。这才是 v2exer 的风格。
|
 |
22
lijsh 2016-12-24 15:06:08 +08:00
支持一下，看过 co 的源码，叹服不已。
|
|
23
ma63d OP @lijsh 是啊，真心觉得 tj 太神了，写出这样的程序真心佩服。。。关键是 koa ， express ， jade ， ejs ， stylus ，全都是他搞出来的，实在是大写的服
|
 |
24
zhangolve 2016-12-25 22:47:58 +08:00 via Android
开头说自己前端小白，实在过谦了。
|
 |
25
AlisaDestiny 2016-12-25 23:29:51 +08:00
|
|
26
ma63d OP @AlisaDestiny 额，这个 app.xxxxx.js 是用 webpack 打包出来自动插入到页面中的。
|
 |
27
CallFold 2017-01-16 23:48:36 +08:00
赞一个~
|
 |
28
daimao 2017-04-26 16:47:24 +08:00
楼主 666
|
Select Language