如何用jQuery做到前后端分离开发

传统的web开发模式想必大家都知道，不管是jsp、asp、php或者一些魔板引擎开发，其实道理都是一样的，都是服务端渲染，原理是：浏览器发送一个get请求，服务器对应的返回前端一个html页面，由浏览器渲染，一张网页就呈现在用户面前了。


但是今天要说的就是大家一直在谈论的话题了，那就是“前后端分离的开发模式”，它的好处自然不必多说，那用我们最熟知jquery能不能做到前后端分离开发呢？答案是可以的！

1.跨域问题
前端工程师通过ajax访问后台接口，只要是前后端用不同端口就会产生跨域问题，跨域问题是浏览器出于安全考虑的限制，所以关于如何解决跨域问题是必修课之一。这里推荐服务端设置请求头解决或者前端通过代理解决。相关博客：传送门

 

2.渲染问题
通过一手ajax你可调用任何api，与后台通信不是什么难事。
但是渲染这块就很麻烦了，由于jq的渲染方式是通过获取DOM节点进而改变数据，所以你可以选择的渲染方式有：append()、html()、text()等，总之很麻烦。而且html代码片段要在js里拼装，就会出现如下场景，那是相当的乱！

虽然费劲，但是能实现。 这里推荐jquery配合vue 1x使用，直接通过script src 引入vue的库文件即可，vue学起来并不难，而且渲染起来更加优雅，推荐一个菜鸟教程的学习地址 传送门

3.传参及路由问题
接下来说一说路由问题和页面之间传参问题，我用jQuery做的前后端分离项目一般没有路由，直接就是连接的形势跳转页面，虽然这样很不妥，但是好像也没啥办法。但是页面传参基本可以解决，你可以通过地址栏传参，另一个页面通过js获取地址栏参数，进而实现地址栏传参这件事，下面是获取地址栏参数的函数：

function GetKey(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

//调用
GetKey('name')

当然传参还有一种方法，就是本地存储。原理就是：前一个页面把参数存到cookie或者sessionStorage中，后面的页面在获取对应参数即可，简单粗暴，关于具体语法，见我另一篇关于本地存储的文章介绍传送门。

总之，jquery实现的前后端分离是不完美的，成本也是很高的，新手可以试试，建议学习vue或者angular.js 之类的高级框架。
有说的不对的地方欢迎技术大牛评论指正！以上仅代表我的个人观点。