https://pic.iyingdi.com/yingdi_pc_old/prod/js/web.shell.js?v=20161110

1/*web.shell.js*/
2/*网页主控制器*/
3web.shell = (function() {
4	'use strict';
5
6	var configMap, stateMap, jqueryMap, setJqueryMap, initModule,
7		getModuleName,//解析请求地址,获取对应模块
8		getFuncByPath,//解析函数路径,获取函数
9		globalEventController,//绑定全局事件，目前主要用于页面刷新
10		initSubModule,//通过执行子模块的js获取页面内容
11		loadPage,//将html内容加载到页面容器中，并更改标题
12		toPushState, //将页面加入history
13		toUpdatePage,//将当前页面数据更新
14		pageCache,//页面缓存系统
15		onPopState;//处理onpopstate事件
16
17	configMap = {
18		file_pre:web.hostMap.file_pre,
19	}
20
21	stateMap = {
22		previous_state:null,//储存前进、后退的起点页面state
23		page_load_mark:false,//页面是否加载完整的标示
24		maxCacheLength:20//最大单向缓存数量
25	}
26
27	getFuncByPath = function(string){//循环找到页面的初始化函数
28		var call_array = string.split('.'),
29			function_prex;
30		for (var i = 0; i < call_array.length; i++) {
31			if(i==0){
32				function_prex = web[call_array[i]];
33			}else{
34				function_prex = function_prex[call_array[i]];
35			}
36		};
37		return function_prex;
38	};
39
40// 	生成新的页面状态并加入浏览器历史（通过pushstate）
41	toPushState=function(url){
42		var page_id = (new Date).getTime(),	//根据时间戳生成一个新的pageid
43			state = history.state,
44			page_html;
45		if(url){//来源为点击<a>标签导致的非刷新页面跳转
46			//如果页面已经成功加载，则将当前页面存入缓存，否则标注为null，以便下次返回页面时重新获取页面
47			page_html=(stateMap.page_load_mark) ? web.getPageContent() : null;
48			state.location = $(window).scrollTop();
49			history.replaceState(state,'',state.url);
50			if(state.closeFunc&&state.closeFunc!=''){// 离开前一页面时执行的方法
51				getFuncByPath(state.closeFunc)();
52			}
53			pageCache.cachePush(state.page_id ,page_html);
54// 			执行pushstate操作创建新页面状态，
55			history.pushState({'page_id':page_id,'url':url}, '', url);
56		}
57		else{//页面初次加载或重新加载
58			url=window.location.pathname+window.location.search;
59// 			替换当前的state，将新的page_id和url写入其中
60			history.replaceState({'page_id':page_id,'url':url,'title':null},'', url);
61			history.state.location = 0;
62		}
63// 		并将新页面的state写入previous_state作为下次回退/前进动作的起点，同时标示页面未完全加载（加载成功后会修改标示）
64		// stateMap.previous_state=$.extend({},state);
65		stateMap.previous_state=$.extend({},history.state);// lixiaodi
66		stateMap.page_load_mark=false;
67		initSubModule(url,page_id);	//请求页面内容
68	}
69
70//	更新当前页面状态 2017.03.26 by lixiaodi
71	toUpdatePage = function(){
72		// pageCache.cacheMapping[page_id] = web.getPageContent();
73		loadPage({
74			html : web.getPageContent(),
75			page_id : history.state.page_id,
76			callback : history.state.callback,
77			title: history.state.title,
78			closeFunc: history.state.closeFunc,
79		},'hasLogin');
80	}
81
82//点击浏览器前进、后退按钮的响应方法
83	onPopState = function(event){
84		var state = event.state,
85		page_html_cache,direction,page_html,title;
86// 		console.log({'state':state});
87		if(stateMap.previous_state){//如果缓存存在
88// 			console.log({'previous_state':stateMap.previous_state});
89			//判断触发的是前进还是后退
90			direction = state.page_id>stateMap.previous_state.page_id ? "forward" : "back" ;
91			//从缓存中读取要前往的页面html
92			page_html_cache=pageCache.getCacheHtml(state.page_id);
93			//如果正要离开的页面未加载完毕，则在缓存中记录null以便下次重新获取页面
94			page_html=(stateMap.page_load_mark) ? web.getPageContent() : null;
95
96			//操作缓存，把即将离开的页面写入缓存，删除即将前往页面的缓存，并控制缓存长度到预设值
97			stateMap.previous_state.location = $(window).scrollTop();
98			pageCache.cachePop(direction,stateMap.previous_state.page_id,page_html);
99
100			//将所返回页面的state写入previous_state作为下次回退/前进动作的起点
101			stateMap.previous_state=$.extend({},state);
102			if(page_html_cache){
103				//如果缓存中要前往的页面存在，则直接加载页面
104				loadPage({
105					html : page_html_cache,
106					page_id : state.page_id,
107					callback : state.callback,

108					title: state.title,
109					location:state.location,
110				});
111			}
112			else{
113			//如果缓存中要前往的页面不存在（=null，一般为页面未完整加载或者缓存溢出），则重新（获取并）执行js生成页面
114				initSubModule(state.url,state.page_id);
115			}
116		}
117		else{
118			//如果缓存不存在（一般为重新加载页面或者从外部来到营地网站）
119			initSubModule(state.url,state.page_id);
120		}
121	};
122
123//页面缓存管理
124	pageCache = (function(){
125		var cacheMapping = {},cacheForwardStack = [],cacheBackStack = [],
126			cachePush,cachePop,trimCacheStack,getCacheHtml;
127		//cacheMapping	用来保存页面缓存数据
128		//cacheForwardStack	“前进”操作的历史数组，保存页面id，主要用来限制缓存数量
129		//cacheBackStack	“后退”操作的历史数组，保存页面id，主要用来限制缓存数量
130		cachePush = function (page_id, value) {
131		//将新的页面压入缓存，通过与pushstate联动实现history和缓存的同步
132		//page_id是即将离开的页面id（对应stateMap.previous_state）,value是即将离开的页面的HTML数据
133		  cacheMapping[page_id] = value
134		  cacheBackStack.push(page_id)
135		  // 当一个新的页面压入“回退”操作的页面缓存数组后，将“前进”操作的页面缓存数组清空（即新前往一个页面后，原有的前进历史记录全部失效）
136		  trimCacheStack(cacheForwardStack, 0)
137		  // 将“回退”操作页面数组修剪为最大缓存数量
138		  trimCacheStack(cacheBackStack, stateMap.maxCacheLength)
139		};
140
141		cachePop = function (direction, page_id, value) {
142			var target_page_id;
143		//当浏览器触发popstate事件时弹出对应页面的缓存
144		//direction是历史记录操作方向，两种字符串赋值，'forward'是“前进”操作，'back'是后退操作
145		//page_id是即将离开的页面id（对应stateMap.previous_state）,value是即将离开的页面的HTML数据
146			var pushStack, popStack
147			//把即将离开页面的HTML数据写入缓存
148			cacheMapping[page_id] = value
149		  //通过方向判断是“前进”数组和“后退”数组该如何修改（popstate弹出的页面写入一个数组，然后从另一个数组弹出这个页面）
150			if (direction === 'forward') {
151		    	pushStack = cacheBackStack
152		    	popStack  = cacheForwardStack
153		  	}
154		  	else {
155		    	pushStack = cacheForwardStack
156		    	popStack  = cacheBackStack
157		  	}
158		  	pushStack.push(page_id);
159		  	//如果即将前往的页面存在，则删除此页面的缓存
160		  	target_page_id= popStack.pop();
161		  	if (target_page_id){
162				delete cacheMapping[target_page_id];
163			}
164		  	// 把压入当前页面的数组进行修剪以符合最大缓存长度
165		  	trimCacheStack(pushStack, stateMap.maxCacheLength)
166		};
167
168		//当缓存数组超过最大值时，修剪数组到最大值，并删除超出的缓存
169		trimCacheStack = function (stack, length) {
170		  	while (stack.length > length){
171				delete cacheMapping[stack.shift()];
172			}
173		};
174
175		getCacheHtml=function(page_id){
176			return cacheMapping[page_id]||null;
177		};
178
179		return{
180			cachePush:cachePush,
181			cachePop:cachePop,
182			getCacheHtml:getCacheHtml,
183			cacheMapping:cacheMapping
184		}
185	})();
186
187// 	根据URL初始化子模块
188	initSubModule = function(url,page_id) {
189		var path,path_array=[],arg_array = [],module,seed_remark='default';
190		path = $.trim(window.location.pathname);
191		// path = $.trim(url);
192		if(path.lastIndexOf('/')==path.length-1){
193			path = path.substring(0,path.length-1);
194		}
195		if(path!="/"){
196			arg_array = path.split('/');
197			arg_array.shift();
198		}
199		// 		解析URL
200		arg_array.shift();//剔除路径中的web
201		module = arg_array.shift();//取出以及模块名称
202		if(!module){//如果不包含模块名称则默认为资讯
203			module='home';
204		}
205		if(arg_array[0]){
206			seed_remark = arg_array[0];
207		}
208		if(web[module]){//如果模块的js已经加载，则直接显示
209			$.gevent.publish('changeNavModule');//改变导航栏选中的模块
210			web[module].initModule(arg_array,page_id);
211		}
212		else{//否则从后台获取相应的JS及CSS
213			web.utility.addCSS(configMap.file_pre+"css/"+module+"/web."+module+".css?v="+new Date().getTime());
214			//如果解析的第一项未找到该初始化方法,则动态加载相关js，之后再执行初始化方法
215			$.getScript(configMap.file_pre+"js/"+module+"/web."+module+".js")
216			.done(function(script, textStatus) {
217				if(web[module]){
218					$.gevent.publish('changeNavModule');
219					web[module].initModule(arg_array,page_id);
220				}else{

221					web.error.initModule();
222				}
223			})
224			.fail(function(jqxhr, settings, exception) {
225// 				web.error.initModule();
226				// console.log(jqxhr);
227			});
228		}
229	};
230
231//	将子模块传回或缓存中的页面加载在容器中
232	loadPage=function(arg_map,ifLogin){
233// 		console.log(arg_map);
234		var page_html = arg_map.html,//页面内容，必填项
235			page_id = arg_map.page_id,//页面ID，必填项
236			callback = arg_map.callback,//回调函数路径，选填
237			title = arg_map.title||'旅法师营地',//页面标题，选填
238			closeFunc = arg_map.closeFunc,//离开页面时执行的函数路径, 选填
239			state = $.extend({},history.state),
240			callFunction;
241		// callFunction = function(string){//循环找到页面的初始化函数
242		// 	var call_array = string.split('.'),
243		// 		function_prex;
244		// 	for (var i = 0; i < call_array.length; i++) {
245		// 		if(i==0){
246		// 			function_prex = web[call_array[i]];
247		// 		}else{
248		// 			function_prex = function_prex[call_array[i]];
249		// 		}
250		// 	};
251		// 	return function_prex;
252		// };
253		if(page_html&&state&&page_id==state.page_id){	//如果请求返回的page_id和当前页面的page_id一致才显示页面
254			//在state中更新回调函数名和标题
255			state.callback = callback;
256			state.title = title;
257			if(arg_map.location){
258				state.location = arg_map.location;
259			}
260			if(arg_map.closeFunc){
261				state.closeFunc = closeFunc;
262			}
263			//先将模块传过来的回调函数和标题更新至state中，并保存至本地
264			history.replaceState(state, '',state.url);
265			//更改导航栏模块选中
266			$.gevent.publish('changeNavModule');
267			//将返回的html进行加载，并标识页面已加载，然后修改页面标题
268			$.gevent.publish('updatePageView',page_html);
269			stateMap.page_load_mark=true;
270			document.title=title;
271			//如果回调函数存在就执行
272			if(callback){
273				if(ifLogin=='hasLogin'){
274					// callFunction(callback)('hasLogin');
275					getFuncByPath(callback)('hasLogin');
276				}
277				else{
278					// callFunction(callback)();
279					getFuncByPath(callback)();
280				}
281			}
282		}
283		else{
284			return false;
285		}
286	};
287
288	getModuleName = function(){
289		var path,path_array=[],arg_array = [],module,seed_remark='default';
290		path = $.trim(window.location.pathname);
291		// path = $.trim(url);
292		if(path.lastIndexOf('/')==path.length-1){
293			path = path.substring(0,path.length-1);
294		}
295		if(path!="/"){
296			arg_array = path.split('/');
297			arg_array.shift();
298		}
299// 		解析URL
300		arg_array.shift();//剔除路径中的web
301		module = arg_array.shift();//取出以及模块名称
302		if(!module){//如果不包含模块名称则默认为资讯
303			module='home';
304		}
305		if(arg_array[0]){
306			seed_remark = arg_array[0];
307		}
308		return {module:module,seed:seed_remark};
309	};
310
311	globalEventController = function() {
312		// 	根据特定url加载页面的消息
313		$.gevent.subscribe($(window), 'getPageByUrl', function(event, url) {
314			// toPushState(url);
315            $(window).off('scroll');
316			window.location.href = url;
317		});
318		// 	主页面更新消息
319		$.gevent.subscribe($(window), 'mainPageUpdate', function(event, arg_map) {
320            $(window).off('scroll');
321			loadPage(arg_map);
322		});
323		//  更新当前页面数据
324		$.gevent.subscribe($(window),'updatePageState',function(event){
325            $(window).off('scroll');
326			toUpdatePage();
327		});
328	};
329
330	initModule = function() {
331		globalEventController();
332		if(web.utility.judgeIE()){
333			$(document).on('click','a[data-ajax]',function(event){
334				var $this = $(this);
335	        	event.preventDefault();
336	        	toPushState($this.attr('href'));
337			});
338		}
339		else{
340			web.utility.showBasicPrompt({
341				content:'如果想获得更好的体验,建议您升级浏览器!',
342				style:'alert-warning'
343			});
344		}
345		window.onpopstate = function(e){
346			onPopState(e);
347		}
348		toPushState();
349	};
350
351	return {
352		initModule: initModule,
353	};
354}());