重构的片段

为了给领导演示一些个静态的demo页面，我建立了名为page的工程，在用于隐藏伸缩页面的*.js中，一个程序员写了如下代码： 

function hiddenFrameR(frame) ...{
        var width= parent.window.document.getElementById(frame).width;
        var width_left= parent.window.document.getElementById("child_left").width
        if(width_left!=3)...{
                if(width == 0) ...{
                  parent.window.document.getElementById(frame).width = "18%"
                  parent.window.document.getElementById("child_center").width = "60%";
        
                }else ...{
                  parent.window.document.getElementById(frame).width = 0;
                  parent.window.document.getElementById("child_center").width = "77%";
                }
        }else...{
                if(width == 0) ...{
                  parent.window.document.getElementById(frame).width = "18%"
                  parent.window.document.getElementById("child_center").width = "77%";
        
                }else ...{
                  parent.window.document.getElementById(frame).width = 0;
                  parent.window.document.getElementById("child_center").width = "94%";
                }    
            }
    }
    
    function hiddenFrameL(frame) ...{
        var width= parent.window.document.getElementById(frame).width;
        var width_right= parent.window.document.getElementById("child_right").width;

        if(width_right!=0)...{
                if(width == 3) ...{
                  parent.window.document.getElementById(frame).width = "17%";
                   parent.window.document.getElementById("child_center").width = "60%";
                }
                else ...{
                  parent.window.document.getElementById(frame).width = 3;
                   parent.window.document.getElementById("child_center").width = "77%";
        
                }
            }else...{
                if(width ==3) ...{
                  parent.window.document.getElementById(frame).width = "17%"
                  parent.window.document.getElementById("child_center").width = "77%";
        
                }else ...{
                  parent.window.document.getElementById(frame).width = 3;
                  parent.window.document.getElementById("child_center").width = "94%";
                }                
            }
    }

我是在调整页面百分比时发现的这些代码，当时只有一个感觉——晕！我当然不会容忍这些代码存在，重写后的代码如下：

function hiddenFrameSide(frameId) ...{
      var frameSide = parent.window.document.getElementById(frameId);
      var frameC = parent.window.document.getElementById("child_center");

      if(frameSide.style.display == "") ...{
          frameC.width = parseInt(frameSide.width) + parseInt(frameC.width) + "%";
          frameSide.style.display = "none";
      }
      else ...{
          frameC.width = parseInt(frameC.width) - parseInt(frameSide.width) + "%";
          frameSide.style.display = "";
      }
    }

这回世界清净了。

其实我从来没有做过页面设计的工作，过去的做作的应用页面非常简单，几个table就完事了，重点在于后台的操作和js脚本的逻辑控制，这次则是设计完整的网站首页，我确信最近一周所写的CSS比之前几年写的总和还要多。太小看这个工作了，做起来才发现有好多陌生的东西，比如那个常用的iframe必须加上marginheight属性才能不留空隙的充满这个页面，几天前我还不知道margin这个单词是什么意思。