和单页面相关的碎碎念

时间:2014-6-20 作者:剧中人

和单页面相关的碎碎念

最近在玩知乎,同玩的小伙伴可以关注我剧中人

看到一个和单页面相关的提问,可能沉了很久吧,也没管那么多,就写了下自己的一些想法,下面是当时码字原文。


手机码字,累觉不爱!

提到单页面,不得不提到ajax与seo这两者的关系。

前端原本是一个纯page的工作,但随着产品对用户体验的要求越发苛刻,ajax的使用也就越发的频繁,从起初的信息验证到后来的前端mvc,ajax虽然只是前后端通讯的工具,但在其中起到越来越重要的作用。 然而相较与后端mvc,ajax渲染的方式存在一个很严重的问题。就是面对SEO几乎不举,而且刷新或发送url无法保留浏览进度。

这时其实已经暴露出一个问题,就是如何界定前后端MVC的界限,以及如何处理前后端视图的统一。

单页面就是为了解决这类问题而生的。前端自豪的拿到了监管url的权利,通过监听页面地址变化来调用前端MVC模块,渲染不同页面。当然,前端这时也拥有了修改URL的能力。管理好前端视图与URL,整个单页面就已经架构完成。(关键点:hmtl5使用historyAPI的支持,低级浏览器采用hash段的管理或无视)。

然而这只解决了浏览进度与URL的维持,并没有解决SEO的问题。在确定了需要保持的页面后,前后端围绕页面各自负责视图的渲染,当然这一步需要有一个相互坑的过程。

考虑会遇到这类问题的项目一般是这么两类(自己YY的),一是应用类的项目,权限、交互比较频繁,对于SEO可以无视,甚至还要尽力避免(再次YY,这类应用是未来的趋势)。再一类是对于页面过场效果比较有要求的“高大上”的应用,比较在意SEO!

针对这两类项目,解决前后端MVC协同问题的也大致就出来了!

对于第一类项目,后端仅渲染基础页面和基础数据的填充。后端配合提供ajax数据支持,前端渲染视图,完成交互及业务逻辑。

第二类自行尝试,前后端切记要保持良好的基友关系,不可打架。

上面吧啦吧啦的一堆话,仅仅是自己在项目和博客里尝试得到的一些经验,下面是一些与单页面相关的关键字,请自行google!

小剧客栈,一个自称采用了单页面+响应式的个人博客。