第一個JavaScript的例子學習

功能描述： 在頁面的左邊實現一個可以伸縮的div。
Code：

<script type = "text/javascript">
        /*  通過hkcmd這個名稱空間，hkcmd就可以使用自定義的公共方法。
         *  定義了一個hkcmd的變數，hkcmd指代的是一個函式。
         *  JavaScript是一種寬鬆型的語言，不用搞明白資料型別，就可以使用。
         */
        var hkcmd = ( function($){

                /* 宣告瞭一個物件 configMap */                    
                var configMap = {
                        extended_width :   400px;
                        extended_title :   "Click to retract!";
                        retracted_width:   40px;
                        retracted_title:   "Click to extend!"
                        template_html   :   '<div class = "hkcmd-slider"></div>'
                },
                $chatSlider,
                onclickSlider, initModule, toggleSlider;

                /* 實現div伸縮的函式 */
                toggleSlider = function(){
                        var slider_width = $chatSlider.width();
                        if( slider_width === configMap.retracted_width ){
                              $chatSlider
                                  .animate( { width: configMap.extended_width } )
                                  .attr('title', configMap.extended_title );
                              return true;
                        }
                        else if( slider_width === configMap.extended_width ){
                              $chatSlider
                                  .animate( { width: configMap.retracted_width } )
                                  .attr('title', configMap.retracted_title);
                              return true;
                        }
                        //  其它情況下，不伸縮div。
                        return false;
                };
                onclickSlider = function( event ){
                        toggleSlider();
                        return false;
                };
                initModule = function($container){
                        $container.html( configMap.template_html);
                        $chatSlider = $container.find( '.hkcmd-slider' );
                        $chatSlider
                            .attr('title', configMap.retracted_title)
                            .click( onclickSlider );
                        return true;
                }; 

        // 返回一個公共方法 initMoudle();
        return { initMoudle: initMoudle };
        }(jQuery));

        // 啟動hkcmd，入口  
        jQuer(document).ready(
                function(){ hkcmd.initMoudle(  jQuery('#hkcmd') ); }
        );
</script>