有道云生成html,有道云笔记添加收藏功能实现原理-程序员宅基地

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

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

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

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

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);}})();

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

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

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

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

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

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

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

本文链接：https://blog.csdn.net/weixin_28747829/article/details/117869053

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

JSON数据结构（A、快速入门篇）（Yanlz+Data+JsonArray+JsonObject+JsonValue+JsonMapper.ToJson+JsonMapper.ToObject+）_jsonmapper.toobject获取的信息是什么类型-程序员宅基地

文章浏览阅读3.4k次。《JSON数据结构》版本作者参与者完成日期备注 Data_JSON_V01_1.0 严立钻 2018.08.24 ..._jsonmapper.toobject获取的信息是什么类型

B -- POJ 1208 The Blocks Problem_poj1208-程序员宅基地

文章浏览阅读1.4k次。The Blocks ProblemTime Limit: 1000 MS Memory Limit: 10000 KB64-bit integer IO format: %I64d , %I64u Java class name: Main[Submit] [Status] [Discuss]DescriptionMany areas of Computer _poj1208

MapBox安装（Unity3D使用）_如何安装mapbox软件-程序员宅基地

文章浏览阅读3k次，点赞6次，收藏11次。最近工作中需要生成一个三维地球，需要使用地图中的三维地球数据，遂研究之，写文以记录。好吧，连装三个软件都失败了（广告软文真多）然后发现MapBox这个面向开发者的全球地图平台（开源，免费！）遂配置一下：一、注册下载首先进入https://www.mapbox.com/这个网站，点击注册注册成功后一直点下..._如何安装mapbox软件

css二级侧拉菜单，右侧拉开菜单，右侧展开菜单-程序员宅基地

文章浏览阅读1.5k次。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><..._css菜单右侧展开

Java注解之@Autowired，一文掌握@Autowired注解知识(2)_java autowired qualifier-程序员宅基地

文章浏览阅读1.6k次，点赞33次，收藏22次。Autowired可以将@Autowired注解应用于类的字段上，使依赖对象自动注入到字段中。可以将@Autowired注解应用于类的构造方法上，使依赖对象通过构造方法注入。可以将@Autowired注解应用于类的 Setter 方法上，使依赖对象通过 Setter 方法进行注入。可以将@Autowired注解应用于类的普通方法上，使依赖对象通过方法参数进行注入。需要注意的是，当有多个匹配的依赖对象时，@Autowired注解可以与@Qualifier。_java autowired qualifier

一个app管理平台-app-host的搭建_apphost-程序员宅基地

文章浏览阅读4.3k次，点赞2次，收藏2次。一、有幸结缘最近IOS的同事遇到一个烦恼：之前他们的测试包都是上传到蒲公英等开放平台进行下载的，但是现在好像要手拿身份证拍照进行身份的验证，于是IOS同事们就不乐意了，开始疯狂的diss：这要是拿着我的照片去网贷，那我不是惨了啊，…于是就开始在github上查找开源的，用于发布测试版本的app的管理平台。在看了几个星星比较多的项目之后，觉得app-host这个项目很合我意。于是就克隆下来项目进..._apphost