首页 > 代码库 > 静态前端vs数据后端
静态前端vs数据后端
首先请让我描述一下我们这一代的web。
这是一个HTML5的时代，这是一个javascript独当一面的时代，这是一个前端和后端分庭抗礼的时代。
说起javascript在前端，很多人马上会说，MVVM，angular,backbone,avalon,react，...
没错这些都是优秀的javascript框架，都可以独当一面做出优秀的作品。但试想一下这样的场景：开发是分工的，web界面原型由美工提供，我们程序员往静态页面加入动态内容合成最终的web内容。表面看来很正常，但却是无尽蛋疼的开始。当我们完成一个版本以后，需求改了，加个横幅，加个弹框之类。美工在原来的版本上做了修改，我们跟进改动，这是相当痛苦的一件事，要了解美工改了什么，每个tag，css，js怎样影响页面元素和行为。我要是都懂了，美工可就担心了...
这里要讲的是针对这种场景的解决方案。静态前端由美工负责，数据后端由程序员负责。每个页面由程序员只写很少的js将数据应用到页面上，可以方便地切换回原版供美工再修改。后端程序只提供json格式的数据，同源的用ajax，跨域的用jsonp，页面收到数据后更新对应的内容。部署时，静态的页面放在apache，动态的程序放在tomcat或weblogic，这样还可以平衡负载，减轻应用服务器的压力。
这种思路不错，但要想玩得转还得过几关，以下一一讨论：
1. 初始化数据
试想一个product.html?id=123的请求发到apache，静态的product.html被返回到了浏览器。渲染这个html的时候，一个product.do的请求自动发到tomcat要拿数据。这时怎样知道id=123呢，看request header中的referer就可以了，当然要自己分析提取。如果你想让等待的时间尽量少，可以在渲染html时同时拿数据，回头再做一个同步处理。例如：
<head>
...// load jquery
<script>
var prdData = null;
var synFlag = false;
$.post(‘product.do‘,{},function(data){ prdData=http://www.mamicode.com/data; initData(); }, ‘json‘);>
2. 国际化I18N
将Message分成两类，异常显示的信息，这类做法和以前的一样用服务器程序处理。正常显示的信息（例如label）就用js来做。写一个js文件，例如i18n.js
var i18n = {
en : { title:"title", name:"name",... },
zh : { title:"标题"， name:"名称",... }
}写一个加载i18n的函数
function loadI18N(locale) {
var msgs = i18n[locale];
$(‘#title‘).text(msgs.title);
$(‘#name‘).text(msgs.name);
}切换locale,不需要请求数据，但需要告诉服务器，当前的语言
function switchLocale() {
locale = locale == ‘en‘ ? ‘zh‘ : ‘en‘;
$.post(‘locale.do‘, {locale:locale});
loadI18N(locale);
}
3. 页面嵌套
以前用jsp或者freemaker时，用include,import等很方便。现在这种情况如何处理呢？有两个方法
方法一：jquery.load()
加载初始化数据之后，获得了locale，然后$(‘#target‘).load(‘target_‘+locale+‘.html‘)
方法二：CSS
方法一要经过两次请求，有时会觉得慢。想快一点的话可以将中文、英文两个版本都写在第一个html上，设 style="display:none",当加载初始化数据之后，用$(‘#target_‘+locale).show() 将之显示出来。
4. 表单提交
表单数据肯定是异步提交的，服务器程序返回成功标志或者错误信息。如果是错误信息则显示在对应位置，如果是成功标志则用js跳到下一个页面。
本文出自 “创意照亮前方” 博客，请务必保留此出处http://wikiou.blog.51cto.com/11905043/1885796
静态前端vs数据后端