后端是java怎么做seo_一个简单粗暴的前后端分离筹划

刚刚参加完一个项目，背景：后端是用java，后端做事已经开拓的差不多了，现在要通过web的办法对外供应做事，也便是B/S架构。
后端专注做业务逻辑，不想在后端做页面渲染的事情，只向前端供应数据接口。
于是协商后打算将前后端完备分离，页面上的所有数据都通过ajax向后端取，页面渲染的事情完备由前端来做。
其余还有一个紧急的情形，项目要紧急上线，全体web站点的开拓韶光只有两周，两周啊！
于是在这样的背景下，决定开始一次前后端完备分离的考试测验。

之前开拓都是同步渲染和异步渲染混搭的，有些东西可以有后端PHP帮你编译好，如通用的页面模板，后端传回的页面参数等。
提前预感到这次完备分离可能会碰着一些困难，但是项目上线要紧，也不能深入搞架构，于是打算就用jQuery+handlebars，jQuery来完成页面逻辑和DOM操作，用handlebars来完成页面渲染，这个方案是如此的大略粗暴，但好处能最稳妥的担保项目定期完成。
实在前后端分离并不是一件随意马虎的事情，这么做会有诸多不完善之处，后面再谈。

浅谈前后端分离

所谓的前后端分离，到底是分离什么呢？实在便是页面的渲染事情，之前是后端渲染好页面，交给前端来显示，分离后前端须要自己拼装html代码，然后再显示。
前端来管理页面的渲染有很多好处，比如减少网络要求量，制作单页面运用等。
事情听起来大略，但这么一分离又会牵扯到很多问题，比如：

以上每一个问题都够棘手，要处理好须要有设计精良又符合实际项目的方案。
现在已经有很多框架可以帮我们做这些事情，Backbone, EmberJS, KnockoutJS, AngularJS, React, avalon等等，利用它们可以架构起一个富前端。
但框架毕竟是框架，要利用到实际项目中，还是须要有自己的设计，框架并不能办理所有的问题。

之前也有看过淘宝团队的实践，利用nodejs做一个中间层，处理页面渲染、路由掌握、SEO等事情，将前后真个分边界进行了重新定义。
个人觉得这该当是一个精确的方向，有点颠覆的觉得，前端走向工程化，将变成真正的全栈式大前端。
不知现在这种架构是否在淘宝全面铺开，真有点期待看看效果。

以上的框架，还有淘宝的实践，毕竟都是大牛之作，我这个小辈也只是参考学习过，未能在实际项目中利用。
低头看看自己现在手头的项目，1个前端，2周韶光，要完成一个完全的web项目，还是用最稳妥最低级的办法来搞吧~

基本构造

项目整体并不是一个单页运用，但有些模块须要做成局部的单页操作，像这种须要分步完成的操作，只需局部加载子页面即可。

因此，一个模块有一个主html页面，初始只有一些基本的骨架，有一个名字相同的js文件，该模块逻辑都在此js文件中，有一个名字相同的css文件，该模块的所有样式都定义在此css文件中。

须要异步加载的子页面，像上图中每个步骤的页面，我都利用jQuery的$.load()方法来加载，此方法能在页面某个容器中加载内容，并可指定回调函数，利用起来很方便。
被异步加载的子页面我都用_开头，如_step1.html，用于做区分。

为了确保浏览器的提高退却撤退按钮可用，我利用了hash来做路由标记，页面地址如：publish.html#step2。
有个毛病是hash并不会发送给做事器，以是SEO就废了。
事实上利用history API也可以更优雅的办理问题，但须要考虑兼容性，还有额外事情要做，考虑韶光成分，退而求其次，况且本项目也无需做SEO。
或者像淘宝的方案那样，nodejs层与浏览器层统一路由，SEO问题可以迎刃而解。
但又明显不在本人的实力范围之内，汗--！

除了用$.load异步加载的子页面，剩余的局部页面便是用handlebars供应的模板渲染了，我利用了handlebars的预编译功能，不得不说很强大，一来节约了页面加载阶段所需的编译韶光（编译handlebars模板），二来编译后的模板（js文件）方便复用。

接下来便是前端逻辑如何组织，由于没有用mv框架，以是只能靠自己来写一个便于开拓的构造。
如上面所述，每个模块有一个主js文件，文件内容构造如下：

var publish = { //该模块初始化入口 init : function(){ this.renderData(param); this.initListeners(); }, //内部所用的函数 renderData : function(param){ //渲染数据。
。
}, //统一绑定监听器 initListeners : function(){ $(document.body).delegates({ '.btn' : function(){ //点击事宜 }, '.btn2' : function(){ //点击事宜2 }, '.checkbox' : { 'change' : function(){ //change事宜 } } }); }}

每个模块给一个命名空间，所有的方法都挂在上面，js文件中只做函数的定义，不立即实行任何东西，然后在html文件中调用入口方法:publish.init()。
业务逻辑都封装到函数中，如上面的renderData，然后供其他地方调用。
页面的事宜监听器统一都注册在body元素上，用事宜代理来完成，为了避免写太多的on、click之类代码，为jQuery扩展了一个delegates方法，用来以配置的办法统一绑定监听器，用法如上所示。
把delegates定义的代码也放出来吧：

//以配置的办法代理事宜$.fn.delegates = function(configs) { el = $(this[0]); for (var name in configs) { var value = configs[name]; if (typeof value == 'function') { var obj = {}; obj.click = value; value = obj; }; for (var type in value) { el.delegate(name, type, value[type]); } } return this;}

基本的构培养是这样，没有什么新技能，只是把现有的东西做了一下组合。
但事情到此还远远没有结束，在实际运用中还会有一些东西须要处理，下面来详细说说：

公共头部底部的引用

这是一个比较棘手的问题，一样平常通用的头部和底部会放一些公共的代码，如页面外层构造html代码，站点利用的库如jQuery、handlebars，站点通用js和css文件。
在传统的开拓中，常日是写一个单独的文件如head.html，在其他页面中用后端代码如include语句引入，由此来进行复用。

现在前后端分离后，无法依赖后端来给你渲染，以是得在前端做了。
既然用了handlebars，很随意马虎想到把公用部分写成一个模板，然后预编译出来，天生一个header.js文件，然后在其他页面引用。
然而在实际操作中创造了一个问题，handlebars是静态模板，编译后天生的字符串通过innerHTML的办法插入到页面，在一样平常的模板中这样是没问题的。
现在有个问题是header中有一些<script>标签，外链着要利用的库，通过innerHTML插入<scirpt>标签，浏览器并不会发送要求加载对应的js文件，以是就出问题了。

搜索、考试测验了多种方法后，终极的方案定为：用document.write()将编译结果写到页面，这样<script>标签能够正常加载。
以是每个页面利用头部的代码就变成这样：

<script src=\公众static/js/tpl/head.js\"大众></script> <div id=\公众header\"大众> <script src=\"大众static/js/includeHead.js\"大众></script> </div>

includeHead.js中的代码如下：

function includeHead(){ var header = document.getElementById('header'); var compileHead = Handlebars.templates['head']; var head = compileHead({}); document.write(head);}includeHead();

看着是有点别扭，不过为了实现功能，目前也就只能这样了。

虽然用原生的innerHTML无法加载<script>标签中的内容，但是jQuery的$().html()方法进行了优化，可以查找到<script>标签并且实行里面的代码，以是用$().html()是可以完成上面的事情的。

这么一看，这个蹩脚的方案就可以更换了。

路由掌握

如上面所述，jQuery的$.load()方法可以知足加载子页面的需求，现在须要办理的问题是，不管用户刷新页面还是提高退却撤退，我们都得根据hash值来渲染对应的视图，实在便是路由掌握。
这个时候就须要监听hashchange事宜了，我定义了一个loadPage方法用来加载子页面，然后绑定监听器如下：

window.onhashchange = this.loadPage;

在loadPage方法中，根据hash的值来调用$.load()方法，子页面的初始化事情，在$.load()的回调函数中指定。

这样做还有一个便捷之处，我们切换视图不必手动调loadPage方法，只须要修正页面的hash就可以了，hash发生变革被监听到，自动加载对应的子页面。
例如，点击下一步进入步骤二：

'.next' : function(){ location.href = '#step2';}

如此便实现了一个大略的路由掌握，由于不是整站单页面，也没有多级路由，这样完备可以知足需求。
至于SEO，就只能呵呵了，恰好项目也不须要做SEO，否则此方法得作罢。

其余想说的一点便是页面的缓存，异步加载来的内容可以存在localStorage中，也可以放在页面上进行显隐掌握，这样用户在频繁切换视图的时候无需再次要求，回到上一步的时候之前填好的表单数据也不会消逝，体验会非常好。

页面间参数通报

有时候我们须要给访问的页面传参数，比如访问一个设备的详细信息页，要把设备id给传过去，detail.html?id=1，这样detail页面可以根据id去要求对应的数据。
传统由后端渲染的页面，url中的参数会发送到做事端，做事端吸收后可以再渲染到页面上供js利用。
我们现在弗成了，要求页面压根不跟后端打交道，但这个参数是必不可少的，以是须要前端有一套通报参数的机制。

实在非常大略，通过location.href可以拿到当前的url地址，然后进行字符串匹配，把参数提取出来就可以了。
看上去挺土鳖的，但事情起来良好，其余也有考虑过用cookie来通报，觉得有点麻烦。

由于这些参数常日是写在<a>标签上的，而<a>标签又是根据动态数据渲染出来的（由于是动态参数），我们不可能在页面渲染完后，用js修正所有<a>标签的href值，给它追加一个参数。
怎么办呢？这时候handlebars就派上用场了，我们可以利用handlebars万能的helper，在渲染页面的时候直接查询url中的参数，然后输出在编译好的代码中。
我在handlebars中注册了一个helper，如下：

Handlebars.registerHelper('param', function(key, options){ var url = location.href.replace(/^[^?=]\?/ig, '').split('#')[0]; var json = {}; url.replace(/(^|&)([^&=]+)=([^&])/g, function (a, b, key , value){ try { key = decodeURIComponent(key); } catch(e) {} try { value = decodeURIComponent(value); } catch(e) {} if (!(key in json)) { json[key] = /\[\]$/.test(key) ? [value] : value; } else if (json[key] instanceof Array) { json[key].push(value); } else { json[key] = [json[key], value]; } }); return key ? json[key] : json;});

这个名为param的helper可以输出你所要查询的参数值，然后可以直接写在模板中，如：

<a href=\"大众detail.html?id={{param id}}\"大众>设备详细信息</a>

这样就方便多了！
但是这么做有没有问题呢？实在是有些不完美的，如果你考虑“性能”二字的话。
一个url中参数的值是固定的，而你每次利用这个helper都会打算一遍，白白做了多余的事情。
如果handlebars可以在模板中定义常量就好了，可惜我找遍文档没创造有这个功能。
只能为了方便捐躯性能了，也正印证了我标题中所说的“大略粗暴”，呵呵。

数据的校验和处理

由于数据是由后端传来的，有很多不愿定性，数据可能不合法，或者构造有错，或者直接是空的。
因此前端有必要对数据做一个合法性的校验。
借助handlebars，可以很方便的进行数据校验。
没错，便是利用helper。
handlebars内置的helper如if、each都支持else语句，出错信息可以在else中输出。
如果须要个性化的校验，我们可以自己定义helper来完成，关于如何自定义helper，我之前研究了下，写过一篇文章：http://www.cnblogs.com/lvdabao/p/handlebars_helper.html。
总之自定义helper很强大，可以完成你所需的任何逻辑。

数据的格式化，如日期、数字等，也可以通过helper来完成。

其余一方面，前端还应对数据进行html转义，避免xss，由于handlebars已经给做了html转义，以是我们可以直接忽略此项了。

总结

本文是我刚刚参加完一个项目后所写，记录一下全体过程碰着的问题及处理办法，其他的一些细碎点如表单异步提交什么的，不是本文重点，不写了。
这是我第一次实践前后端完备分离的项目，全体前端全由我来设计、开拓。
2周韶光，凭着这套方案，项目定期开拓完成，而且还提前完成了，预留出一天多的韶光测试了一遍。

虽然开拓任务是完成了，但是转头看一下全体方案，并不是很优雅也没有什么技能含量，文章开头提到的几个问题都没有办理。
以是命题为大略粗暴的方案，都是为了赶工期啊。

末了，如果给我再来一次的机会，并且韶光充足，我一定要考试测验用mv方案来搞一下，或angular，或avalon。