代码片段学习（一）

描述

这是《单页面应用》一段描写点击事件的代码。今天手敲了一遍，觉得写得自己写的绝对写不成这个样子。所以想的仔细分析一下，学习一下。

代码

var spa = (function( $ ) {
            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>'
                },
                $chatSlider,
                toggleSlider,onClickSlider,initModule;

            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_height);
                    return true;
                }
                return false;

            };

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

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

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

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

                return true;
            }

            return { initModule : initModule };
    }( jQuery ))

    jQuery(document).ready(
        function () { spa.initModule(jQuery('#spa')); }
    );

分析代码

首先从整洁上来说，function () { } 空格加的特别多，看起来不拥挤

从规范上说：
变量前面定义，定义的方法也很帅气。
采用模块的写法。只返回来一个方法，提供给你调用。
在初始化的方法中进行dom的绑定。
并且每个方法都返回 return 不管是false 和 true 。（如果是我，根本不返回，就算想返回也不知道是返回false 还是 true）。
jQuery的写法也很特别 看起来特别漂亮，而且清楚！
在前面定义变量的好处是 你后面几乎只用提示就行。都不用再去找参数之类的。但是有个问题就是定义那么多名字，起名字就是一个比较头疼的事。作者采用下划线的方式也是我最常用的方式。

对模块 和 闭包的理解 也是这样写的一个必须的条件！