用nodejs 改造移动版本的osc翻译频道

原创
2013/05/06 01:53
阅读数 3.9K

##前言## 在浏览移动版本的oschina的时候,发现,怎么要找不到我最喜欢的翻译频道,正好我作为一个打杂的会一点node, 正愁着拿着node 不知道干什么东西好,就试着用node 做一个壳的移动版本翻译频道,如果你只对代码有兴趣的话,可以直接去 下载下来运行看看效果https://github.com/youxiachai/nodeScrapeOscTranslationChannel

##准备## 其实,所谓的套壳,就是我们俗称的采集类网站,把别人网站的数据,变成自己的网站,虽然,不是上得了台面的东西,不过,如果不是用现成的采集工具,而是自己动手来干的话,你会对dom树的操作,网页的处理有更好的理解.基于某种考虑,特别写上.

###运用的技术与库###

  1. nodejs
  2. jsdom
  3. hashmap
  4. express
  5. mkdirp
  6. downloader

###分析### 我们要从外部改造一个网站,首先需要熟悉我们要改造对象的网站结构,将oschina 翻译频道进行草稿化,如下图 ![在此输入图片描述][1]

经过我简单分析以后然后转换为移动版本的话 ![在此输入图片描述][2]

在我的设计中只保留了分类,和列表,而在接下来的代码实现中,我只实现了列表的部分...

##译文列表部分## 翻译频道译文列表的解析转换代码 请移步到gist 查看..为了方便阅读,修改了一下跟最后源码的实现会有点不同.

幸好翻译频道的结构挺简单的,由于刚上手js不久,这个第一版的dom解析代码还可以进行简化,虽然,现在这个版本挺难看的但是,可以跑起来.

这段代码的主要干了以下事情:

  1. 迭代每个div.article 结点获取列表的信息,并且用<li />标签进行包装
  2. 把链接转换为相对链接.

最终的效果:左边为原页面,右边为移动版本

![在此输入图片描述][3] ![在此输入图片描述][4]

好了,这就完成了web -> mobile 页面的转换,接下来我们转化一下内容页

##译文部分 草稿部分忽略,拍照什么的挺麻烦的.. 翻译频道译文内容的解析转换代码 请移步到gist 查看..为了方便阅读,修改了一下跟最后源码的实现会有点不同.

这部分就比较简单了,dom的操作

  1. 获取译文内容
  2. 移除了译者信息..

最终的效果:左边为原页面,右边为移动版本

![在此输入图片描述][5] ![在此输入图片描述][6]

内容方面我们就搞定了.下面的部分就是如何部署一个套壳的网站

##建立属于自己的移动网站## 前提: 对express 有一定了解

要web 化很简单,只需要把刚才的解析代码放到路由里面即可,详细实现看源码..

app.get('/', callback);

app.get('/translate/:title', callback);

最终演示用地址挂在我自己的服务器上:演示网址用了google的短网址服务可能有转换慢,或者无法访问的情况 <s>至于文章里面的图片.....osc有防盗链,放在本地倒是没这个问题....反正就是只是用来展示一下node 的相关应用..有兴趣的自己diy 好了</s> 发现实际解决起来非常简单...然后现在暂时来看就没这个问题了...

最近,kindle入华貌似变成了事实,特此贴上kindle浏览的效果..图片压缩了一下,可能效果差了不少,不过对于kindle3 而言中文字体的确很难看,有kpw可否贴下?

![在此输入图片描述][7] ![在此输入图片描述][8]

##展望## 由于整个程序虽然代码不多,不过需要的知识的广度不少,例如,dom树,jsdom ,express, html5, 每个知识都只是用了那么一点...写起来真不好下手,有兴趣的朋友,可以fork 我github的项目,地址,开头就给了.

话说,有人不知道osc git 的吗:在osc git 也上传了一份

当然,这个程序是一个半成品(一个晚上的代码,再花了一个晚上写这篇博文),很多东西都还没加上...接下来,我应该会着手实现webapp离线化....对了后边应该还有加上个列表分页..实际上,我还没想清楚怎么移动web 里面比较好的加上分页导航这个功能,尝试直接放在列表尾,怎么看都不爽,感觉这样分页很不带感,某天想清楚了,再动手实现..

觉得还可以又有15 积分别忘了顶一下.. [1]: http://static.oschina.net/uploads/space/2013/0506/015215_kJpt_185428.jpg [2]: http://static.oschina.net/uploads/space/2013/0506/015232_shBY_185428.jpg [3]: http://static.oschina.net/uploads/space/2013/0506/015244_tsUm_185428.png [4]: http://static.oschina.net/uploads/space/2013/0506/015253_JcUi_185428.png [5]: http://static.oschina.net/uploads/space/2013/0506/015303_o21I_185428.png [6]: http://static.oschina.net/uploads/space/2013/0506/015311_d7v6_185428.png [7]: http://static.oschina.net/uploads/space/2013/0506/015322_sDQt_185428.gif [8]: http://static.oschina.net/uploads/space/2013/0506/015332_OWRo_185428.gif

展开阅读全文
打赏
18
89 收藏
分享
加载中
继续关注一下,希望楼主继续完善这个程序
2014/02/04 16:38
回复
举报
有一阵子没看node 了。
2013/05/13 09:20
回复
举报
学习,关注中。 期待更新
2013/05/07 17:31
回复
举报
最近正在学习,先收藏
2013/05/06 15:54
回复
举报

引用来自“打杂程序猿”的评论

引用来自“虫虫”的评论

@红薯 我们是不是在 m.oschina.net 加一个连接,把这个项目加入进来?

进来?
千万别...练手的项目而已...代码方面都是拍脑袋写的...再说了,分类...列表都没实现..

那你抽空再完善一下呗~
2013/05/06 13:08
回复
举报

引用来自“虫虫”的评论

@红薯 我们是不是在 m.oschina.net 加一个连接,把这个项目加入进来?

进来?
千万别...练手的项目而已...代码方面都是拍脑袋写的...再说了,分类...列表都没实现..
2013/05/06 13:07
回复
举报
@红薯 我们是不是在 m.oschina.net 加一个连接,把这个项目加入进来?
2013/05/06 13:01
回复
举报

引用来自“打杂程序猿”的评论

引用来自“冰力”的评论

nodejs不是一般的烂。

如果是指我写的源码的话...才认真学了三天....然后花了3个小时码完..毫无质量可言...

当然不是指你写的了,呵呵,说的是nodejs不好。
2013/05/06 12:21
回复
举报

引用来自“chishaxie”的评论

引用来自“JonasBollack”的评论

以前用NodeJS写过一个抓取Google图片的程序,处理各种异步返回太恶心了。
楼主这个可以做成一个手机的客户端,用HTML5开发。

建议尝试下Wind.js,这种情况写起来很爽的……

学习了,看起来是专为异步编程准备的。以后再遇到的时候可以学习着爽一下
2013/05/06 11:13
回复
举报

引用来自“打杂程序猿”的评论

引用来自“JonasBollack”的评论

引用来自“打杂程序猿”的评论

引用来自“JonasBollack”的评论

以前用NodeJS写过一个抓取Google图片的程序,处理各种异步返回太恶心了。
楼主这个可以做成一个手机的客户端,用HTML5开发。

后边那个不评论....关于前面那个可有开源到github?如果问题是处理异步的话,事件上https://github.com/JacksonTian/eventproxy 这玩意挺好用的,不过,话说回来,用node 不就是想要异步这个特性...不然用python好了..

当时自己写着玩儿,就没有开源到github……主要是各种异步嵌套,多了就有点迷糊了,还要处理图片的上传,我记得当时构建post的时候,费了好长时间,content-length一直不对。还没有尝试用过第三方的包,好像就用了http和url两个包。等有机会再用Node的时候,可以试试~

看来你好久没碰过node.......例如:https://github.com/mikeal/request 各种牛叉的包...话说node 如果没有npm 的话,就多了很多麻烦了...

就好像Rails需要各种gem一样,哈哈,是好久好久没碰过node了。
2013/05/06 11:09
回复
举报
更多评论
打赏
23 评论
89 收藏
18
分享
返回顶部
顶部