Javascript 与 SPA单页Web富应用

时间：2017-02-04 21:18:50 阅读：281 评论：0 收藏：0 [点我收藏+]

书单推荐

# 《单页Web应用：JavaScript从前端到后端》
http://download.csdn.net/detail/epubitbook/8720475

# 《MVC的JavaScript Web富应用开发》
http://download.csdn.net/detail/u012070181/7361155

SPA单页Web富应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必须的HTML、CSS 和 JavaScript,只有所有的操作都在这张页面上完成，这一切都是由JavaScript来控制。因此，单页Web应用必将包含大量的JavaScript代码，复杂度可想而知，模块化开发和框架设计的重要性不言而喻。

随着单页Web应用的崛起，各种框架也不断的涌现，如Vuejs、ReactJs、Angularjs、Backbone.js、Ember.Js等，还有RequireJS等模块加载器。但是，本书没有讲解这些框架和模块加载器，这也正是我喜欢本书的原因之一。作者坦言自己很少使用框架，并且认为框架的限制过多，一旦不符合框架本身的设计哲学，结果可能适得其反。———— 事实上所有的框架使用都是如此。
但不管是使用框架还是按照书的方法开发，书中的思想都是适用的。

第一个SPA应用

<html>
<head>
    <title></title>
    <style type="text/css">
        body{
            width: 100%;
            height:100%;
            overflow:hidden;
            background: #777;
        }
        #spa {
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            border-radius: 8px 8px 0 8px;
            background: #fff;
        }
        .spa-slider {
            position: absolute;
            bottom: 0;
            right: 2px;
            width: 300px;
            height: 16px;
            cursor: pointer;
            border-radius: 8px 0 0 0;
            background: #f00;
        }
    </style>
</head>
<body>
    <div id="spa">
        <div class="spa-slider"></div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var spa = (function ( $ ) { 

    var $chatSlider,toggleSlider,onClickSlider,initModule;

    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>‘
    },

    toggleSlider = function () {
        var slider_height = $chatSlider.height();

        if( slider_height === configMap.retracted_height) {
            $chatSlider.animate({height: configMap.extended_height})
                       .attr(‘title‘,configMap.extended_title);
            return true;
        } else if (slider_height === configMap.extended_height) {
            $chatSlider.animate({ height : configMap.retracted_height})
                       .attr(‘title‘,configMap.retracted_title);
            return true;
        }

        return false;
    };

    onClickSlider = function ( event ) {
        toggleSlider();
        return false;
    };    

    initModule  = function ( $container ) {
        // render HTML
        $container.html(configMap.template_html);

        $chatSlider = $container.find( ‘.spa-slider‘ );

        $chatSlider.attr( ‘title‘, configMap.retracted_title)
                   .click( onClickSlider );

        return true;
    };

    return {
        initModule : initModule        
    }

}( jQuery ));


$(function(){
    console.log(spa);
    spa.initModule($(‘#spa‘));
})
</script>
</html>

Javascript 与 SPA单页Web富应用

原文：http://www.cnblogs.com/CyLee/p/6366325.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)