Home > Article > Backend Development > javascript - DingTalk web version management side navigation bar does not refresh and only refreshes the content. What is the specific technology?
What is the specific technology of DingTalk web version management terminal that the navigation bar does not refresh and only refreshes the content?
To put it simply, can I use vuejs to achieve this effect? Single page application
Reply content:
To put it simply, can I use vuejs to achieve this effect as a single page application
HTML5 pushState + Ajax.
Ajax implements partial refresh, pushState implements changing the address bar, including the browser's back button to implement return.
You can take a look at Pjax implemented based on this technology.
https://github.com/defunkt/jq...
Has the address bar been updated?
A single-page application can easily implement this function.
js switches single page content without page jump
Ajax? ?
It feels like it was mentioned in this article
http://www.cnblogs.com/08shiy...
1. The navigation bar is not refreshed. You can modify the dom (modify the li in the navigation). After refreshing, you find that it is actually refreshed, and the requested html is returned. It's the entire page, not just part of it.
2. The middle part is loaded asynchronously. You can go to Disable JavaScript in Dev Tools and find that the middle area is blank. Here it mainly loads the advertising slider.
3. The bottom seems not to be refreshed, because almost all the images are cached. You can check the Network and the status is 304 instead of 200.
Whether it is a single-page application or other libraries such as Vue, the principle is ultimately AJAX or PJAX, which asynchronously requests server data through the JS background, usually json or xml data, and then manipulates the DOM to display the data through js. Single-page websites can also use the History API to refresh the URL.
AJAX implementation reference: AJAX. There is no scope for learning, I hope to adopt it.
This is the relevant method:
function loadSubmenu(){
var m = menu[currTab];
/* 子菜单标题 */
$('#submenuTitle').text(m.subtext ? m.subtext : m.text);
/* 删除所有现有子菜单 */
$('#submenu').find('dd').remove();
/* 将子菜单逐项添加到菜单中 */
$.each(m.children, function(k, v){
var p = v.parent ? v.parent : currTab;
var item = $('' + v.text + ' ');
item.children('a').click(function(){
openItem(this.id.substr(5));
});
$('#submenu').append(item);
});
if(typeof(itemIndex) == 'undefined')
{
var itemIndex = menu[currTab]['default'];
}
var id = '#item_' + itemIndex;
if(tab){
var parent = tab;
}else{
var parent = $(id).attr('parent');
}
/* 若不在当前选项卡内 */
if(parent != currTab){
/* 切换到指定选项卡 */
switchTab(parent);
}
/* 高亮当前项 */
$('#submenu').find('a').each(function(){
$(this).removeClass('selected');
});
$(id).addClass('selected');
/* 更新iframe的内容 */
$('#workspace').show();
$('#workspace').attr('src', $(id).attr('url'));
/* 将该操作加入到历史访问当中 */
addHistoryItem(currTab, itemIndex); Set workspace
/function setWorkspace(){
var wWidth = $(window).width();
var wHeight = $(window).height();
$('#workspace').width(wWidth - $('#left').width() - parseInt($('#left').css('margin-right')));
$('#workspace').height(wHeight - $('#head').height());This is the relevant HTML dom: