【SPA】单页Web应用（三）_shell main nav-优快云博客

本文介绍如何搭建SPA（单页应用）的壳模块，包括布局设计、CSS样式设置及JavaScript交互逻辑实现。通过创建SPA壳模块，可以更好地组织单页应用的各个部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

在这里，接着《【SPA】单页Web应用（二）》继续。

只是对《单页Web应用：JavaScript从前端到后端》笔记整理。

【高手勿喷，菜鸟整理不易。】

二、正文

书目：
《单页Web应用：JavaScript从前端到后端》
原书：《Single Page Web Applications》
[著] Michael S. Mikowski
Josh C. Powell
[译]包勇明

回顾：

上一篇《【SPA】单页Web应用（二）》中，已经建立好了目录结构。

分别对css/spa.css 、 js/spa.js 、 spa.html进行了填充。

执行spa.html后，效果是返回“Hello World”页面。

进一步分析：
在打开spa.html文件后，首先加载spa.css文件（reset CSS和设置一些简单样式），随后是spa.js（配置spa模块），等到页面HTML元素加载完毕后，jQuery库帮我们调用并执行spa.initModule入口函数。
简单来说，《【SPA】单页Web应用（二）》中，我们建造了一个命名空间namespace为spa的容器，来配置干净的单页html。
通过代码来尝试绘画出逻辑图（这里忽略CSS样式代码）：

从上图中，可以得到的逻辑图，如下：

正文：

【注意：不要忘记这图，它可以帮我们理解为什么要这样开发SPA】

接下来，我们进入正题。
=============================================================================
开始创建Shell容器。

首先，使用还没用到的layout.html文件来编写完整的页面布局，此布局按照下面的线框图进行。

<!--layout.html内容-->
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Layout</title>
        <link rel="stylesheet" href="css/spa.css" type="text/css"/>
       
       <style>
           /*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: #fff;
               border-radius: 3px;
               z-index: 2
           }
       </style>
      
    </head>
    <body>
        <div id="spa">
            <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">
                <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>
            
        </div>
    </body>
</html>

在浏览器中的效果图如下：

之后，对layout.html代码进行拆分。

（1）把CSS代码复制到spa.shell.css文件中。
（2）把<div class="spa"></div>内的HTML代码复制到spa.shell.js文件中。

开始对spa.shell.js进行编码，即创建一个shell功能容器。代码如下：

/*
 *spa.shell.js
 * Shell module for SPA 
 */
/*jslint settings    browser : true, continue : true,
   devel : true, indent : 2, maxerr : 50,
   newcap : true, nomen : true, plusplus : true,
   regexp : true, sloppy : true, vars : true,
   white : true
*/
/*global $,spa*/
spa.shell=(function(){
    //--------------------------BEGIN MODULE SCOPE VARIABLES---------------
   var 
        configMap={
            main_html:'<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">'
                +'<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>'
                   
        },
        stateMap={$contianer:null},
        jqueryMap={},
        setJqueryMap,initModule;
        //--------------------------END MODULE SCOPE VARIABLES---------------
        //--------------------------BEGIN UTILITY METHOD---------------------
        //--------------------------END UTILITY METHOD-----------------------
        //--------------------------BEGIN DOM METHOD-------------------------
        //Begin DOM method /setJqueryMap/
        setJqueryMap=function(){
            var $contianer=stateMap.$contianer;
            jqueryMap={$contianer:$contianer};
        };
        //End DOM method /setJqueryMap/
        //--------------------------END DOM METHOD-------------------------
        //--------------------------BEGIN EVENT HANDLERS-------------------------
        //--------------------------END EVENT HANDLERS------------------------
        //--------------------------BEGIN PUBLIC METHOD------------------------
        //Begin public method /initModule/
        initModule=function($contianer){
            stateMap.$contianer=$contianer;
            $contianer.html(configMap.main_html);
            setJqueryMap();
        }
        //End public method /initModule/
       
       return {initModule:initModule};
}());

至此，shell功能容器模块制作完成。

============================================================================
下面开始与spa模块相连，使spa能够调用shell里的方法。
换句话说，就是修改spa.js文件的内容。

/*
 *spa.js
 * Root namespace module
 */
 /*jslint settings    browser : true, continue : true,
    devel : true, indent : 2, maxerr : 50,
    newcap : true, nomen : true, plusplus : true,
    regexp : true, sloppy : true, vars : true,
    white : true
*/
/*global $,spa */
var spa=(function(){
   /* var initModule=function($container){
        $container.html(
            '<h1 style="display:inline-block;margin:25px">'
            +'hello world!'
            +'</h1>'
        );
    };*/
    //修改后
    var initModule=function($container){
       spa.shell.initModule($container);
    };
    return {initModule:initModule};
}());

此时的逻辑图已发生了改变，如下图：