SPA系列是参考Single Page Web Application这本书进行的总结
单页的优势
1.单页应用可以和桌面应用一样渲染---单页应用只需重绘界面上需要变化的部分。相比之下，传统网站的许多用户操作都会重绘整个页面，结果是当浏览器从服务器获取数据的时候，页面会假死并有“闪烁”现象。
2.模块化开发，逻辑清晰，方便更新迭代，方便单元测试。
3.不需要页面之间来回跳转，
4.网页和手机上的后退按钮是可控的
关于单页的编写方式
-HTML文件仅仅就一个shell，所有其它的HTML转换成字符串植入到javacsript代码中
-通过使用jQuery全局自定义事件减少回调函数的使用
-不使用框架(Do you really want an SPA framework?)，而是通过jquery和其它相关优秀并专注的插件进行功能补充。
-mvc编写方式
simple example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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{
position: absolute;
bottom: 0;
right: 2px;
width: 300px;
height: 16px;
cursor:pointer;
border-radius: 8px 0 0 0;
background-color: #f00;
}
</style>
</head>
<body>
<div id="spa">
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
//Module /spa/
//Provides chat slider capability
//
var spa=(function($){
//variable start
//在使用之前声明所有的变量。把模块的配置值保存在configMap中，把模块的状态值保存在stateMap中
//Module scope variables
var
//Set constants
configMap={
extended_height : 434,
extended_title : 'Click to retract',
retracted_height : 16,
retracted_title : 'Click to extend',
template_html : '<div class="spa-slider"><\/div>'
},
//Declare all other module scope variable
$chatSlide,
toggleSlider,onClickSlider,initModule;
//variable end
//DOM control start
//将所有的DOM方法聚集在一个区块中
//DOM method /toggleSlider/
// alternates slider height
//
toggleSlider = function(){
var
slider_height = $chatSlider.height();
//extend slider if fully retracted
if(slider_height === configMap.retracted_height){
$chatSlider
.animate({height:configMap.extended_height})
.attr('title',configMap.extended_title);
return true;
}
//restract slider if fully extended
else if( slider_height === configMap.extended_height ){
$chatSlider
.animate({ height : configMap.retracted_height })
.attr('title',configMap.retracted_title);
return true;
}
}
//把所有的事情处理程序聚集在一个区块中。保持小而专注的处理程序是很好的做法。它们应该调用其它方法来更新显示或者修改业务逻辑。
// Event handler /onClickSlider/
// receives click event and calls toggleSlider
//
onClickSlider=function(event){
toggleSlider();
return false;
}
//把所有的公开方法聚集在一个区块中
//Public method /initModule/
//sets initial state and provides feature
//
initModule=function($container){
//render HTML
$container.html(configMap.template_html);
$chatSlider=$container.find('.spa-slider');
//initialize slider height and title
//bind the user click event to the event handler
$chatSlider
.attr('attr',configMap.retracted_title)
.click(onClickSlider);
return;
};
//通过返回spa名字空间中的对象，导出公开方法，我们只导出了一个方法：initModule
return {initModule:initModule};
}(jQuery));
//start spa once DOM is ready
//
jQuery(document).ready(function(){
spa.initModule(jQuery('#spa'));
});
</script>
</html>
网友评论