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

简介:

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

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

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

spa.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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

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

spa.shell.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*
  * 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;
   }
   h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 ,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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
.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;
}

浏览器界面如下:

wKioL1h1rcqBIJL8AAA2oteRjRU677.png-wh_50

本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1891022

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
60 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
27天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
35 6
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
XML JSON 监控
Shell脚本要点和难点以及具体应用和优缺点介绍
Shell脚本在系统管理和自动化任务中扮演着重要角色。尽管存在调试困难、可读性差等问题,但其简洁高效、易于学习和强大的功能使其在许多场景中不可或缺。通过掌握Shell脚本的基本语法、常用命令和函数,并了解其优缺点,开发者可以编写出高效的脚本来完成各种任务,提高工作效率。希望本文能为您在Shell脚本编写和应用中提供有价值的参考和指导。
64 1
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
39 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
53 2
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
存储 安全 数据库
后端技术在现代Web开发中的实践与创新
【10月更文挑战第13天】 本文将深入探讨后端技术在现代Web开发中的重要性,通过实际案例分析展示如何利用先进的后端技术提升用户体验和系统性能。我们将从基础架构设计、数据库优化、安全性保障等方面展开讨论,为读者提供清晰的指导和实用的技巧。无论是新手开发者还是经验丰富的技术人员,都能从中获得启发和帮助。
54 2