首页 > 代码库 > 静态前端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数据后端