提到单页面,不得不提到ajax与seo这两者的关系。
前端原本是一个纯page的工作,但随着产品对用户体验的要求越发苛刻,ajax的使用也就越发的频繁,从起初的信息验证到后来的前端mvc,ajax虽然只是前后端通讯的工具,但在其中起到越来越重要的作用。
然而相较与后端mvc,ajax渲染的方式存在一个很严重的问题。就是面对SEO几乎不举,而且刷新或发送url无法保留浏览进度。
这时其实已经暴露出一个问题,就是如何界定前后端MVC的界限,以及如何处理前后端视图的统一。
单页面就是为了解决这类问题而生的。前端自豪的拿到了监管url的权利,通过监听页面地址变化来调用前端MVC模块,渲染不同页面。当然,前端这时也拥有了修改URL的能力。管理好前端视图与URL,整个单页面就已经架构完成。(关键点:hmtl5使用historyAPI的支持,低级浏览器采用hash段的管理或无视)。
然而这只解决了浏览进度与URL的维持,并没有解决SEO的问题。在确定了需要保持的页面后,前后端围绕页面各自负责视图的渲染,当然这一步需要有一个相互坑的过程。
考虑会遇到这类问题的项目一般是这么两类,一是应用类的项目,权限、交互比较频繁,对于SEO可以无视,甚至还要尽力避免。再一类是对于页面过场效果比较有要求的“高大上”的应用,比较在意SEO!
针对这两类项目,解决前后端MVC协同问题的也大致就出来了!
对于第一类项目,后端仅渲染基础页面和基础数据的填充。后端配合提供ajax数据支持,前端渲染视图,完成交互及业务逻辑。
第二类自行尝试,前后端切记要保持良好的基友关系,不可打架。
上面吧啦吧啦的一堆话,仅仅是自己在项目和博客里尝试得到的一些经验,下面是一些与单页面相关的关键字,请自行google!