最新消息:

有道云笔记添加收藏功能实现原理

js代码 admin 1267浏览 0评论

有道云笔记收藏功能的本质就是在浏览器上执行一段js脚本,用js脚本来实现收藏功能,这和sec-wiki的快速分享到wiki功能类似。通过执行js这种方法而不是采用插件方式的好处是不用考虑浏览器的兼容性,具有通用性(虽然具体每个浏览器的js代码不一样,但可以写出具有通用性的js代码来兼容所有的浏览器)。使用js进行收藏的缺点是对某些网站失效,如github等https网站.

下面是针对有道云笔记的收藏功能的分析:

有道云笔记的“网页剪报”功能介绍在:http://note.youdao.com/web-clipper.html?entry=index&auto=1。

QQ截图20141106105931

拖到书签栏后,右键点击属性后发现地址栏竟然是一段js.这不得不让自己想起曾经玩qq空间的时候,同样在url上打了一通js完成了空间的小挂饰功能.

jinglingshu_2014-11-06_03-09-58

javascript:(function(){CLIP_HOST='http://note.youdao.com/yws';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src=CLIP_HOST+'/YNoteClipper.js?'+(new%20Date().getTime()/100000);x.charset='utf-8';document.getElementsByTagName('head')[0].appendChild(x);}catch(e){alert(e);}})();

jinglingshu_2014-11-06_03-09-581

http://note.youdao.com/yws/YNoteClipper.js

jinglingshu_2014-11-06_03-09-512 jinglingshu_2014-11-06_03-09-52

根据这个,我们了解到浏览器的地址栏可能是支持javascript的.  若将这段js做为书签的话,这样就更像是一个插件. 最后根据有道的这个插件,改成自己的服务器js地址,就可以实现自己的功能了. 有兴趣的可以试下. ie插件印象中,好像是需要自己在本地写js文件,最后在注册表中,注册下即可. 而有道的这种方式,完全不需要在用户的本地创建文件,并且插件的升级也重点放在服务器端.

(注意%20代表空格.因此,转换为正常的js后如下.     之所以使用%20做url上,可能是由于它本身是需要url地址栏解析才能生效的原因.因此,最后将写好的js事先encode下再放为一行,做为标签项)

你有什么想法,在下面评论里,表达下吧?

jinglingshu_2014-11-06_03-09-51

javascript:(function(){alert(1);})();

jinglingshu_2014-11-06_03-10-32

其实,若时间允许的话,我们更应该研究下有道是如何抓取当前网页,并保存排版功能的. 通过debug js后,肯定可以得出相应的结论. 最后一个问题,很想知道有道云笔记的PC端,是通过什么技术写出来的呢?  今天更新版本里支持了拖动菜单的功能:

jinglingshu_2014-11-06_03-09-511

这种技术pc client是如何实现的呢?

转自:http://www.350351.com/bianchengyuyan/javascript/254954.html

转载请注明:jinglingshu的博客 » 有道云笔记添加收藏功能实现原理

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址