项目背景
刚刚参加完一个项目，背景：后端是用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文件，文件内容结构如下：
| 123456789101112131415161718192021222324252627 | ipt keyWord" style="background: none !important; margin: 0px !important; padding: 0px !important; outline: 0px !important; border-radius: 0px !important; border: 0px currentColor !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; text-align: left !important; right: |
