【SPA】单页Web应用（二）

最新推荐文章于 2023-01-31 11:17:22 发布

FreedomPaul

最新推荐文章于 2023-01-31 11:17:22 发布

阅读量1.5k

点赞数

分类专栏： SPA 文章标签： SPA javascript web应用

SPA 专栏收录该内容

3 篇文章

订阅专栏

一、前言

第二次在优快云写博客。

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

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

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

二、正文

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

本书的第二章是讲述JavaScript基础，这里不是重点。

第三章开发Shell

Shell是架构的必需组件。

先开发包含功能容器的页面布局，
然后让Shell来渲染它们。

演示如何管理功能容器：展开和收起聊天滑块。
然后让它来捕获用户打开和关闭聊天滑块的点击事件。
最后，使用URI锚作为状态API，使用的是锚接口模式。

本章将会完成构建可扩展和可维护的单页应用的基础。

理解Shell

Shell是单页应用的主控制器，是必需的。
Shell模块是单页应用的形状和结构。
Shell只是架构的一部分，是我们从很多商业项目中提炼出来的。

编写Shell模块是有好处的，因为它是架构的中枢。
它是功能模块和业务逻辑以及通用浏览器接口之间的协调者。
（当用户点击了后退按钮、登录或者做了其他事情而改变了应用状态，
这些状态可以使用书签来标记，Shell会协调这些改变）

单页应用架构中的Shell

HTML文件 spa/spa.html

 <!--
    注意：为什么不和传统网页一样，把脚本文件放到body容器的最后面？
    传统网页，这么做时页面渲染更快，
    单页应用，由于需要JS生成HTML代码，因此将脚本放置头部之外，并不能更快地渲染页面。
    相反，我们把所有的外部脚本放置head区域中，以便改进组织结构和易读性。
    -->
    <!DOCTYPE html>
    <html>
        <head>
            <title>SPA Starter</title>
            <script src=""></script>
            <link rel="stylesheet" href="css/spa.css" type="text/css"/>
            <link rel="stylesheet" href="css/spa.shell.css" type="text/css"/>

            <script src="js/jq/jquery-3.2.0.min.js"></script>
            <script src="js/jq/jquery.uriAnchor.js"></script>

            <script src="js/spa.js"></script>
            <script src="js/spa.shell.js"></script>
            <script>
                $(function(){spa.initModule($('#spa'));});    //当DOM加载完成后，执行其中的函数
            </script>
        </head>
        <body>
            <div id="spa"></div>
        </body>
    </html>

创建CSS根名字空间

CSS根名字空间是spa，其目录是spa/css/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 seletors */

        /** 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*/

创建JavaScript根名字空间

根名字空间是spa，其目录是spa/js/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};
        }());

运行结果：

Hello World页面

至此，目录中的已填充内容的文件有：

执行顺序为：
spa.css ------------>
spa.js (其中有spa.initModule方法) --------------->
渲染<div id="spa"></div> ------------->
执行spa.initModule($('#spa')); (此时，DOM加载完成)---------------->
显示最终结果。

spa/spa.html中的
$(function(){spa.initModule($('#spa'));}); //DOM加载完成后执行
将
<body>
<div id="spa"></div>
</body>
的结构改变为：
<body>
<div id="spa">
<h1 style="display:inline-block;margin:25px">hello world!</h1>
</div>
</body>

（待续。。。）