靜態前端vs資料後端

標籤：javascript   前端   

    首先請讓我描述一下我們這一代的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=data; initData(); }, ‘json‘);</script></head><body>...<script>synFlag = true;initData();function initData(){  if (synFlag && prdData != null) { ... }}</script></body>

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資料後端