静的フロントエンドvsデータバックエンド

まず、私たちの世代のwebについて説明させていただきます.
これはHTML 5の時代で、javascriptが一人前だった時代で、先端と後端が分かれていた時代です.
Javascriptがフロントエンドにあるといえば、MVVM、angular、backbone、avalon、react、...
間違いなくこれらは優秀なjavascriptフレームワークで、優秀な作品を一人で作ることができます.しかし、開発は分業であり、webインタフェースの原型は美工が提供し、プログラマーは静的ページに動的コンテンツを加えて最終的なwebコンテンツを合成するシーンを考えてみましょう.表面は正常に見えますが、卵の痛みが尽きない始まりです.バージョンが完了すると、変更する必要があります.横断幕を追加したり、弾枠を追加したりします.美工は元のバージョンで修正をして、私たちは変更について、これはかなり苦痛なことで、美工が何を変更したのか、tag、css、jsごとにどのようにページ要素と行為に影響するかを理解しなければなりません.わかったら、美工は心配するよ...
ここでは、このようなシーンに対する解決策について説明します.静的フロントエンドは美工が担当し,データバックエンドはプログラマが担当する.各ページはプログラマーがわずかなjsだけを書いてページにデータを適用し、元のものに簡単に切り替えて再修正することができます.バックエンドプログラムはjson形式のデータのみを提供し,同源のものはajax,ドメイン間のものはjsonp,ページがデータを受け取った後に対応する内容を更新する.配置時には、静的なページをapacheに、動的なプログラムをtomcatまたはweblogicに配置することで、負荷をバランスさせ、アプリケーションサーバの圧力を軽減することができます.
この考え方はいいですが、遊ぶにはいくつかの関門を通らなければなりません.以下で一つ一つ議論します.
1.初期化データ
プロジェクトを考えてみましょうhtml?id=123の要求はapache,静的productに送信される.htmlはブラウザに返されました.このhtmlをレンダリングするとき、productがあります.doのリクエストはtomcatに自動的に送信され、データを取得します.このときid=123をどう知るかはrequest headerのreferを見ればいいので、もちろん自分で分析して抽出します.待ち時間をできるだけ少なくしたい場合は、htmlをレンダリングするときに同時にデータを取り、後で同期処理を行うことができます.例:

...// load jquery

var prdData = null;
var synFlag = false;
$.post('product.do',{},function(data){ prdData=data; initData(); }, 'json');



...

synFlag = true;
initData();
function initData(){
  if (synFlag && prdData != null) { ... }
}

2.国際化I 18 N
Messageを2つに分類し,異常表示の情報を従来と同様にサーバプログラムで処理する.正常に表示される情報(例えばlabel)はjsで行います.jsファイル、例えばi 18 nを書く.js

var i18n = {
  en : { title:"title", name:"name",... },
  zh : { title:"  "， name:"  ",... }
}

i 18 nをロードする関数を書きます

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などが便利でした.今の状況はどう処理しますか?2つの方法があります
方法1:jquery.load()
初期化データをロードするlocaleを取得し、$('#target')とする.load('target_'+locale+'.html')
方法二:CSS
方法は1回に2回お願いすると、遅く感じることがあります.早くしたいなら、中国語と英語の2つのバージョンを最初のhtmlに書いて、style=“display:none”を設定して、初期化データをロードした後、$('#target_'+locale)を使います.show()を表示します.
4.フォームの発行
フォームデータは非同期でコミットされるに違いありません.サーバ・プログラムは成功フラグまたはエラー情報を返します.エラーメッセージの場合は対応する位置に表示され、成功フラグの場合はjsで次のページにジャンプします.