【SPA】单页Web应用（一）

最新推荐文章于 2024-07-26 08:45:52 发布

FreedomPaul

最新推荐文章于 2024-07-26 08:45:52 发布

阅读量1.6k

点赞数 1

分类专栏： SPA 文章标签： javascript web应用 SPA Single Page Web Appl

SPA 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、前言

第一次在CSDN写博客，这次把刚刚【在QQ空间里整理好的日志】搬过来。

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

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

二、正文

书目：

《单页Web应用：JavaScript从前端到后端》

原版：《 Single Page Web Applications》
[著] Michael S. Mikowski
Josh C. Powell
[译]包勇明

第一章第一个单页应用

单页Web应用

单页应用是指在浏览器中运行的应用，在使用期间页面不会重新加载。
它旨在帮助用户完成任务（编写文档或管理Web服务器）
可以认为，单页应用是一种从Web服务器加载的富客户端。

关注点：如何从前端到后端都使用JavaScript来开发有吸引力的、稳健的、可扩展的和易于维护的单页应用。

传统网站模式：

数据库 <-----> 服务器 <-----> 客户端

数据存储认证 HTML渲染
数据检索授权装饰性JS
业务逻辑验证
业务逻辑
HTML生成

单页应用模式：

数据库 <-----> 服务器 <-----> 客户端

数据存储认证 HTML渲染
数据检索授权装饰性JS
验证业务逻辑
HTML生成

本书在客户端使用的库：
DOM的jQuery
历史管理和事件处理的插件

其他：
TaffyDB2来提供高性能的、以数据中心的模型。

服务器端： Node.js作为基于事件的Web服务器（Google V8 JavaScript，擅长处理成千上万的并发连接）
Socket.IO提供在客户端与服务器端间无缝的、近实时的消息传输。

数据库： MongoDB（是一种NoSQL数据库，使用JavaScript原生的数据格式JSON来保存数据，也有JavaScript API 和命令行接口。）

构建第一个单页应用：

<!DOCTYPE html>
<html>
    <head>
        <title>SPA spa-slider</title>
         <script src="lib/js/jquery-3.2.0.min.js"></script>


        <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>
        <script type="text/javascript">
            /*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 jQuery*/


            //module /spa/ 模块 /spa/
            //Provides chat slider capability  规定chat slider功能
            //
            var spa=(function($){
                //module scope variables 模块作用域变量
                    //set constants  设置常量
                var 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 variables 
                    //声明所有其他模块作用域变量
                    $chatSlider,
                    toggleSlider,onClickSlider,initModule;


                //DOM method /toggleSlider/
                //alternates slider height 变换slider高度
                //
                toggleSlider=function(){
                    var slider_height=$chatSlider.height();


                    //extend slider if fully retracted
                    //如果是收缩状态，则展开slider 
                    if(slider_height===configMap.retracted_height){
                        $chatSlider
                            .animate({height:configMap.extended_height})
                            .attr('title',configMap.extended_title);
                        return true;
                    }
                    //retract slider if fully extend
                    //如果是展开状态，则收缩slider
                    else if(slider_height===configMap.extended_height){
                        $chatSlider
                            .animate({height:configMap.retracted_height})
                            .attr('title',configMap.retracted_title);
                        return true;
                    }
                    //do not take action if slider is in transition
                    //如果slider正在变换，不能活动。
                    return false;
                };


                //Event handler /onClickSlider/
                //receives click event and calls toggleSlider 接收click事件并调用toggleSlider
                //
                onClickSlider=function(event){
                    toggleSlider();
                    return false;
                };


                 //Public method /initModule/
                //sets initial state and provides feature 设置初始状态并提供特性
                //
                initModule=function($contianer){
                     //render HTML 
                     $contianer.html(configMap.template_html);


                     $chatSlider=$contianer.find('.spa-slider');
                    //initialize slider height and title
                    //bind the user click event to the event handler
                    $chatSlider
                        .attr('title',configMap.retracted_title)
                        .click(onClickSlider);
                    return true;
                };
                return {initModule:initModule};
            }(jQuery));


            //Start spa once DOM is ready
            //
            jQuery(document).ready(function(){
                spa.initModule(jQuery('#spa'));
            });
        </script>
    </head>
    <body>
        <div id="spa">
            <div class="spa-slider"></div>
        </div>
    </body>
</html>

结果显示：