操纵历史,利用HTML5 History API实现无刷新跳转
前端开发
写在前面
有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处:GitHub或阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场。直到博客改版时,才将这一技术应用起来。
有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处:GitHub或阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场。直到博客改版时,才将这一技术应用起来。
今天上网看到一篇老博文《Coder or Clown?》,文章作者主要想表达的意思是他作为面试官,面试了很多程序员,他发现很多程序员就是小丑,并把他们分类列举。这篇去年发表的文章被很多人转载翻译,作为茶余饭后调侃程序员的佳品。我看了也是一笑而过,但是其中作者说的第一个事例却引起了我的兴趣,虽然很搞笑,但是这其中似乎隐藏着一些coder的情怀。
这个故事是这样的,作者面试了一个叫做Ada的毕业生,她是一位程序新手。作者给他出了一道题目,让她在纸上写下一段程序,目的是打印“hello”10次,无论用什么语言写都可以。于是这位可爱的学生在纸上写下了10句print "hello"。
重要说明:已更新,请通过 GitHub 获取最新版本。
自从新浪微博开放平台推出以来,各种微博应用层出不穷,作为新浪微博的忠实用户之一,我也曾开发过几个微博应用,对于微博发布应用来说,有一个功能是必不可少的,那就是表情。表情功能的实现虽说不难,但却比较繁琐,首先要了解新浪微博开放平台的表情API,然后通过某种方式调用,如果通过网页后台代码直接读取储存到JavaScript变量中,又会拖慢网页加载速度,如果采用AJAX读取,又要解决跨域问题,即便成功读取到表情数据了,又必须考虑表情分类,翻页等等等等问题,还需要考虑表情的插入方式并非简单的在文本最后插入,而是在光标所在处插入,还应该能够替换掉已选中文字,还要涉及到不同浏览器的兼容问题……
好吧,上面这段文字你可以跳过不看,你只需要知道表情功能的实现非常繁琐就行了(+_+),为了方便以后微博应用的开发,同样方便其他应用开发者,此款表情插件就此诞生。
大多数网络管理员都熟悉网页上的HTML标签,通常情况下,HTML标记告诉浏览器如何显示在标签中包含的信息。 例如, <h1>阿凡达</h1>告诉浏览器显示的文本字符串“阿凡达”在标题1格式。然而,HTML标记不提供任何有关文本字符串意味着什么,“阿凡达”可能是指取得巨大成功的3D电影的信息,或者它可以指一张纸娃娃系统的图片,这使得搜索引擎难以智能地理解网页中的具体内容。
微数据对于普通的浏览者来说作用并不大,微数据的存在也并不会影响页面的浏览效果。网页中,同一种信息的表现方式可能有无数种,人们可以在阅读网页的时候理解网页的潜在意义,但搜索引擎无法很容易地理解到这个网页讨论的内容,如果有一个标签能够说:“嘿,搜索引擎,这里的信息是在讨论某个影片,或地方,或人,或视频”的话,可以帮助搜索引擎识更有效地别网页包含信息的具体意义。HTML5中的微数据正可以做到这一点。
Ping服务是基于XML_RPC标准协议的更新通告服务,当博客内容发生更新时,可以向搜索引擎发出通知,而搜索引擎接收到通知后将派出蜘蛛对博客进行更新或收录。
Ping服务的使用方式有两种,一种是利用搜索引擎的博客提交页面进行提交,第二种是使用博客程序中的Ping功能,如WordPress自带的更新服务(设置-撰写-更新服务),或者Typecho Ping插件。具体的提交地址请参考《[SEO]在线Ping服务地址与RPC服务地址集合》。