First, let me describe the web of our generation.
This is an era of HTML5, this is an era when javascript is unique, and this is an era when front-end and back-end are divided.
Speaking of javascript on the front end, many people will immediately say, MVVM, angular, backbone, avalon, react,...
Yes, these are excellent javascript frameworks, and they can all make excellent works on their own. But imagine a scenario where development is divided into labor, web interface prototypes are provided by artists, and our programmers add dynamic content to static pages to synthesize the final web content. It seems normal on the surface, but it is the beginning of endless egg pain. When we finished a version, the requirements changed, adding a banner, adding a bullet frame and so on. The art has made changes to the original version, and we follow up the changes. This is quite a painful thing. It is necessary to understand what the art has changed and how each tag, css, js affects the page elements and behavior. If I understood everything, the artist would be worried...
What I want to talk about here is a solution for this scenario. The static front end is the responsibility of the artist, and the data back end is the responsibility of the programmer. For each page, the programmer only writes a few js to apply the data to the page, and can easily switch back to the original version for the artist to modify. The back-end program only provides data in json format. Ajax is used for the same source and jsonp is used for cross-domain. After the page receives the data, the corresponding content is updated. During deployment, static pages are placed in apache, and dynamic programs are placed in tomcat or weblogic, which can also balance the load and reduce the pressure on the application server.
This kind of thinking is good, but you have to pass a few levels if you want to play well. Let's discuss one by one:
1. Initialize the data
Imagine a request for product.html?id=123 is sent to apache, and the static product.html is returned to the browser. When rendering this html, a product.do request is automatically sent to tomcat to get the data. How to know id=123 at this time, just look at the referer in the request header, of course, you have to analyze and extract it yourself. If you want to keep the waiting time as short as possible, you can get the data while rendering the html, and then do a synchronization process later. E.g:
<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. Internationalization I18N
Divide Message into two categories, abnormally displayed information, this kind of practice is handled by the server program as before. Normally displayed information (such as label) is done with js. Write a js file, such as i18n.js
var i18n = {
en : { title:"title", name:"name",... },
zh: {title:"title", name:"title",... }}
Write a function to load i18n
function loadI18N(locale) {
var msgs = i18n [locale];
$('#title').text(msgs.title);
$('#name').text(msgs.name);}
To switch the locale, you do not need to request data, but you need to tell the server the current language
function switchLocale() {
locale = locale == 'en'? 'zh': 'in';
$.post('locale.do', {locale:locale});
loadI18N(locale);}
3. Page nesting
When using jsp or freemaker before, it was very convenient to use include, import, etc. How to deal with this situation now? There are two ways
Method 1: jquery.load()
After loading the initial data, get the locale, then $('#target').load('target_'+locale+'.html')
Method 2: CSS
Method one requires two requests, sometimes it feels slow. If you want to be faster, you can write both the Chinese and English versions on the first html, set style="display:none", when the initial data is loaded, use $('#target_'+locale).show() Show it.
4. Form submission
The form data must be submitted asynchronously, and the server program returns a success sign or error message. If it is an error message, it will be displayed in the corresponding position. If it is a success sign, use js to jump to the next page.