Using JSON to isolate Web site layouts and the contents of a page's actual module load

In the project, there is a need to dynamically maintain the layout of the page and dynamically load the specific modules in the layout container. The first implementation is, at the end of the server to get the current page layout structure, the current page of all the functional modules, at the same time through a circular retrieval of a function module belongs to which container and reasonable placement, and finally get the actual content of the specific function module, a one-time output to complete the display page.

Although the problem has been solved, this approach has resulted in a sharp increase in the number of single requests returned data, especially when the layout of the pages is complex and the function modules are numerous.

After a lot of verification, I decided to take the layout building and content acquisition for isolation, batch to get content, in order to reduce the amount of single request data. The specific steps are as follows:

The first step: in the normal way, return to the page layout HTML structure, but also JSON way, return the current page of all function module basic information

Example layout HTML structure

1 <div class="enjoosite_layout_container">
2　　 <div class="enjoosite_layout_item" columnindex="0"></div>
3　　 <div class="enjoosite_layout_item" columnindex="1"></div>
4　　 <div class="enjoosite_layout_item" columnindex="2"></div>
5 </div>

Sync-loaded Feature module JSON

var __widgets = [
　 {"widgetId":64,"title":"静态文 本","widgetName":"statichtml","key":"77","columnIndex":0,"sortIndex":1} ,
　 {"widgetId":62,"title":"EnjooSite | 熙杰科技知识 库","widgetName":"statichtml","key":"76","columnIndex":1,"sortIndex":1} ,
　 {"widgetId":66,"title":"本页说 明","widgetName":"statichtml","key":"82","columnIndex":1,"sortIndex":2}
];

The second step: in the client, the use of JS, the function module accurately placed as the corresponding layout container

I added the ColumnIndex attribute in the layout container HTML structure, which corresponds to the ColumnIndex attribute in the JSON configuration of the functional module, so this property, supplemented by the powerful selection of jquery, makes it easy to place the function module in the corresponding container. The SortIndex attribute in the JSON configuration can also determine the order of precedence in the same container.

Step three: Use the Ajax method of jquery to load the actual content of the concrete function module asynchronously

As we can see, in the JSON configuration of the functional module, each function module has: Widgetname and key 2 attributes, the Widgetname property can determine the actual type of the current function module, as in the example "Statichtml" represents the static HTML text module, The key attribute corresponds to the unique key value of the current module in the System business logic, which needs to be integrated with the specific type of the functional module to achieve the purpose of obtaining content from a database or XML configuration file.

In the asynchronous get function module of the actual content link, I took the way of batch loading, if the content to get more than 10 Ajax connection, then the subsequent request into the waiting queue, waiting for the previous 10 requests. When the current 10 requests return one, a connection is immediately raised from the wait queue. In this way, the server is always connected to a relatively flat amount of data requests, and the page content is always presented in a more relaxed manner.

This way is also worth perfecting the place is, it is best to flexibly set, which function module load with high priority is better. Oh ah, slowly and perfect.

(Specific effects Please browse: http://vip.enjoosite.com, because the website rub friends VPS, so the speed experience may not be as obvious as I said, only provide my realization of ideas, welcome to discuss)