单页Web应用 1 第一个单页应用_asp单页应用程序-优快云博客

本文链接：https://blog.youkuaiyun.com/QFire/article/details/79057635

本书的设想是三分之二的内容关注单页Web应用开发的客户端，其他的内容关注Web服务器和单页Web应用所需要的服务。

https://github.com/mmikowski/spa

由于流行的MVC服务端框架关注的是为客户端提供一页页的静态内容，这是传统网站页面的加载慢的原因之一。

1.1 定义、一些历史和一些关注点

单页应用是在浏览器中运行的桌面应用，在使用期间页面不会重新加载。可以认为单页应用是一种从Web服务器加载的富客户端。

历史：Java小程序、Flash/Flex和JavaScript。只有JS不需要插件

创业公司选择使用Node.js作为Web服务器，移动应用开发人员使用JavaScript和PhoneGap为多种移动平台创建“原生的”应用，这只需要一份代码库。

其他语言生成JS的代码生成器。

业务和显示逻辑直接使用能够JS编写，由browser执行。利用browser渲染界面，如HTML5、CSS3、Canvas或SVG。通常对服务器的要求大大地降低

1.2 构建第一个单页应用

单个文件spa.html来创建应用，外部库只使用jQuery

JSLint是一种JavaScript验证器，能确保代码不会破坏很多明显的JS最佳写法。jQuery是一种操作DOM的工具，提供了能很容易实现滑块动画的跨浏览器工具。

<!doctype html>
<html>
<head>
   <title>SPA Chapter 1 section 1.2.2</title>
   <style type="text/css">
   	 body {
   	 	width     :100%;
   	 	height    :100%;
   	 	overflow  :hidden;
   	 	background-color : #777;
   	 }
   	 #spa {
   	 	position   : absolute;
   	 	top        : 8px;
   	 	left       : 8px;
   	 	bottom     : 8px;
   	 	right      : 8px;
   	 	border-radius : 8px 8px 0 8px;
   	 	background-color:   #fff;
   	 }
   	 .spa-slider {
   	 	positon    : absolute;
   	 	bottom     : 0;
   	 	right      : 2px;
   	 	width      : 300px;
   	 	height     : 16px;
   	 	cursor     : pointer;
   	 	border-radius    : 8px 0 0 0;
   	 	background-color: #f00;
   	 }
   </style>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script type="text/javascript">
   	/*jslint browser : true, continue : true,
   	    devel : true, indent ： 2, maxerr : 5,
   	    newcap : true, nomen : true, plusplus : true,
   	    regexp : true, sloppy : true, vars : true,
   	    white : true
   	*/
   	// Modeule /spa/
   	var spa = (function ( $ ) {
   		var configMap = {
   			extended_height : 434,
   			extended_title : 'Click to retract',
   			retracted_height : 16,
   			retracted_title : 'Click to extend',
   			template_html : '<div class="spa-slider"><\/div>'
   		},
   		// 
   		$chatSlider, toggleSlider, onClickSlider, initModule;
   		//
   		toggleSlider = function() {
   			var slider_height = $chatSlider.height();
   			if (slider_height === configMap.retracted_height) {
   				$chatSlider
   				   .animate({height : configMap.extended_height })
   				   .attr('title', configMap.extended_title);
   				return true;
   			} else if (slider_height === configMap.extended_height) {
   				$chatSlider
   				   .animate({height : configMap.retracted_height })
   				   .attr('title', configMap.retracted_title);
   				return true;
   			}
   			return false;
   		},
   		onClickSlider = function ( event ) {
   			toggleSlider();
   			return false;
   		};
   		// 初始化
   		initModule = function ( $container ) {
   			$container.html( configMap.template_html );
   			$chatSlider = $container.find('.spa-slider');
   			$chatSlider
   			   .attr('title', configMap.retracted_title )
   			   .click( onClickSlider );
   			return true;
   		};
   		return { initModule : initModule };  //返回spa名字空间中的对象，只导出了initModele方法
   	}( jQuery ));
   	// Start SPA once DOM is ready
   	jQuery(document).ready (
   		function() { spa.initModule( jQuery('#spa') ) ; } 
   	);
   </script>
</head>
<body>
   <div id="spa">
   	 
   </div>
</body>
</html>