《单页web应用 javaScript从前端到后端》3.1 开发shell小例子demo

单页应用SPA示例解析

最新推荐文章于 2025-09-12 18:05:56 发布

weixin_34072159

最新推荐文章于 2025-09-12 18:05:56 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

文章标签： shell 后端 javascript ViewUI

原文链接：http://blog.51cto.com/xuyran/1891022

本文通过一个具体的示例介绍了单页应用(SPA)的基本结构及实现方式，包括HTML结构、CSS样式设置以及JavaScript中如何使用jQuery进行模块化开发，并实现聊天窗口的展开与收起效果。

目前看到这里，还不懂什么是单页应用，这不就是一个普通的点击滑开收缩的动画而已……作者写的那么复杂666

请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1891022

spa.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link  rel="stylesheet" href="css/spa.css" type="text/css"/>
		<link  rel="stylesheet" href="css/spa.shell.css" type="text/css"/>
		<style>
			
		</style>
		<script src="scripts/jquery.js"></script>
		<script src="scripts/jquery.uriAnchor.js"></script>
		<script src="scripts/spa.js"></script>
		<script src="scripts/spa.shell.js"></script>
		<script>
			$(function(){
					spa.initModule(jQuery('#spa'));
			})
		</script>

	</head>
	<body>
		<div id="spa">
		</div>
	</body>
</html>

spa.js

var spa = (function(){
	var initModule = function($container){
		spa.shell.initModule(($container)); //执行spa.shell里面的initModule函数
	};
	return {initModule:initModule}; //执行initModule函数
}())

spa.shell.js

spa.shell = (function(){
	var configMap = {
		main_html:String()
			+ '<div class="spa-shell-head">'
				+ '<div class="spa-shell-head-logo"></div>'
				+ '<div class="spa-shell-head-acct"></div>'
				+ '<div class="spa-shell-head-search"></div>'
			+ '</div>'
			+ '<div class="spa-shell-main spa-x-closed">'
				+ '<div class="spa-shell-main-nav"></div>'
				+ '<div class="spa-shell-main-content"></div>'
			+ '</div>'
			+ '<div class="spa-shell-foot"></div>'
			+ '<div class="spa-shell-chat"></div>'
			+ '<div class="spa-shell-modal"></div>',
		chat_extend_time:1000,
		chat_retract_time:300,
		chat_extend_height:450,
		chat_retract_height:15,
		chat_extend_title:'click to retract',
		chat_retracted_title:'click to extend'
	},
	stateMap = {
		$container:null,
		is_chat_retracted:true
	},
	jqueryMap = {},
	setJqueryMap,initModule;
	setJqueryMap = function($container){
		var $container = stateMap.$container;
		jqueryMap = { //给jqueryMap对象赋值
			$container:$container,
			$chat:$container.find('.spa-shell-chat')
		};
	}
//	initModule = function($container){  //公开特权方法
//		stateMap.$container = $container;
//		$container.html(configMap.main_html);
//		setJqueryMap();
//	}
	toggleChat = function(do_extend,callback){
		var px_chat_ht = jqueryMap.$chat.height(),
			is_open = px_chat_ht === configMap.chat_extend_height,
			is_closed = px_chat_ht === configMap.chat_retract_height,
			is_sliding = !is_open && !is_closed;
		if(is_sliding){
			return false;
		}
		if(do_extend){
			jqueryMap.$chat.animate({
				height:configMap.chat_extend_height,
			},configMap.chat_extend_time,function(){
				jqueryMap.$chat.attr('title',configMap.chat_extend_title);
				stateMap.is_chat_retracted  = false;
				if(callback){
					callback(jqueryMap.$chat);
				}
			});
			return true;
		}
		jqueryMap.$chat.animate({
			height:configMap.chat_retract_height
		},configMap.chat_retract_time,function(){
			jqueryMap.$chat.attr('title',configMap.chat_retracted_title);
			stateMap.is_chat_retracted  = true;
			if(callback){
				callback(jqueryMap.$chat);
			}
		});
		return true;
	}
	onClickChat = function(){
		toggleChat(stateMap.is_chat_retracted);
		return false;
	}
	initModule = function($container){
		stateMap.$container	 = $container; //给stateMap.$container对象赋值
		$container.html(configMap.main_html);
		setJqueryMap();
//		setTimeout(function(){
//			toggleChat(true);
//		},3000)
//		setTimeout(function(){
//			toggleChat(false);
//		},8000)
		stateMap.is_chat_retracted  = true;
		jqueryMap.$chat.attr('title',configMap.chat_retracted_title)
		.click(onClickChat);
	}
	return {initModule:initModule};
}())

spa.css

/*
 * spa.css
 * Root namespace styles
*/

/** Begin reset */
  * {
    margin  : 0;
    padding : 0;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
  }
  h1,h2,h3,h4,h5,h6,p { margin-bottom : 10px; }
  ol,ul,dl { list-style-position : inside;}
/** End reset */

/** Begin standard selectors */
  body {
    font : 13px 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    color            : #444;
    background-color : #888;
  }
  a { text-decoration : none; }
    a:link, a:visited { color : inherit; }
    a:hover { text-decoration: underline; }

  strong {
    font-weight : 800;
    color       : #000;
  }
/** End standard selectors */

/** Begin spa namespace selectors */
  #spa {
    position : absolute;
    top      : 8px;
    left     : 8px;
    bottom   : 8px;
    right    : 8px;

    min-height : 500px;
    min-width  : 500px;
    overflow   : hidden;

    background-color : #fff;
    border-radius    : 0 8px 0 8px;
  }
/** End spa namespace selectors */

/** Begin utility selectors */
  .spa-x-select {}
  .spa-x-clearfloat {
    height     : 0      !important;
    float      : none   !important;
    visibility : hidden !important;
    clear      : both   !important;
  }
/** End utility selectors */

.spa.shell.css

.spa-shell-head,.spa-shell-head-logo,.spa-shell-head-acct,.spa-shell-head-search,
.spa-shell-main,.spa-shell-main-nav,.spa-shell-main-content,.spa-shell-foot,
.spa-shell-chat,.spa-shell-modal{
	position: absolute;
}
.spa-shell-head {
  top    : 0;
  left   : 0;
  right  : 0;
  height : 40px;
}
.spa-shell-head-logo {
  top        : 4px;
  left       : 4px;
  height     : 32px;
  width      : 128px;
  background : orange;
}

.spa-shell-head-acct {
  top        : 4px;
  right      : 0;
  width      : 64px;
  height     : 32px;
  background : green;
}
.spa-shell-head-search{
	top:4px;
	right:64px;
	width:248px;
	height: 32px;
	background: blue;
}
.spa-shell-main{
	top:40px;
	left:0;
	bottom: 40px;
	right: 0;
}
.spa-shell-main-content,
.spa-shell-main-nav{
	top: 0;
	bottom: 0;
}
.spa-shell-main-nav{
	width: 250px;
	background: #eee;
}
.spa-x-closed .spa-shell-main-nav{
	width: 0;
}
.spa-shell-main-content{
	left: 250px;
	right: 0;
	background: #ddd;
}
.spa-x-closed .spa-shell-main-content{
	left: 0;
}
.spa-shell-foot{
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
}
.spa-shell-chat{
	bottom: 0;
	right: 0;
	width: 300px;
	height: 15px;
	background: red;
	z-index: 1;
}
.spa-shell-modal{
	margin-top: -200px;
	margin-left: -200px;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	background: #FFFFFF;
	border-radius: 3px;
	z-index: 2;
}

浏览器界面如下：