对网上找来的让人看不清的代码进行良好的命名和注释
.
效果：
今天拿到一个js和css制作的左侧导航，abcd的命名和没有一个的注释，非常的看不懂，也就非常的郁闷
考虑这个东西非常的使用于是决定好好的来研究一下，
从两个方面入手：
一是从命名角度：取一个有意义的名字
二是从注释角度：说明参数和方法的作用
但是在修改的过程中要改一点测试一下，改一点测试一下，以防改多了就ctrl+z回不去咯
删除、添加、修改一部分代码运行测试看看会是什么效果！
总结一下：java我都会我何惧它JavaScript
这个是之前网上的代码
这个是之后自己修改过的网上的代码
效果：
今天拿到一个js和css制作的左侧导航，abcd的命名和没有一个的注释，非常的看不懂，也就非常的郁闷
考虑这个东西非常的使用于是决定好好的来研究一下，
从两个方面入手：
一是从命名角度：取一个有意义的名字
二是从注释角度：说明参数和方法的作用
但是在修改的过程中要改一点测试一下，改一点测试一下，以防改多了就ctrl+z回不去咯
删除、添加、修改一部分代码运行测试看看会是什么效果！
总结一下：java我都会我何惧它JavaScript
这个是之前网上的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{text-align:center; margin:0 auto;}
div{margin:0 auto;}
#top{width:100%;height:100px;background-color:#FF00FF}
#Test5study{width:19%;height:500px; float:left}
iframe{margin:0 auto;
width:80%;float:right;}
*{ margin:0px; padding:0px; border:0px; }
.Test5study{
text-align:left;
width:220px;
height:auto;
border:solid 1px #FFCC33;
}
.Test5study h2{
font-size:14px;
height:22px;
line-height:22px;
background:#FFF7C6;
text-indent:10px;
position:relative;
border-top: 1px solid #fff;
border-bottom: 1px solid #F7BE21;
font-weight:normal;
cursor:pointer;
}
.Test5study h2 span{
font-weight: normal;
position:absolute;top:0;
right:6px;}
.Test5study li{
font-size:12px;
border-bottom:dashed 1px #eee;
}
.TxtList{
list-style:disc url(none);
margin:6px 10px 6px 20px;
}
</style>
<script type="text/javascript">
var clickul,clickh;
function $(d){
return document.getElementById(d);
}
function f(d){
var t=$(d);
if (t){
return t.style;
}else{
return null;
}
}
function Hi(){
if(clickul)
clickul.style.display='none';
}
function Hl(){
if(clickh)
clickh.style.fontWeight='normal';
}
function h(d){
var s=f(d);
var b=s.display;
if (b=='none'){
return true;
}else{
return false;
}
}
function ShHi(ii,jj){
if(h(jj)){
Hi();
Hl();
f(jj).display='block';
f(ii).fontWeight='bold';
clickul=$(jj);
clickh=$(ii);
}else{
Hi();
Hl();
f(jj).display='none';
f(ii).fontWeight='normal';
clickul=null;clickh=null;
}
}
</script>
</head>
<body>
<div style="width:80%;">
<div id="top"> </div>
<div id="Test5study" class="Test5study">
<h2 id="t1" onclick="ShHi('t1','h1');">传说中的标题<span>更多...</span></h2>
<ul class="TxtList" id="h1" style="display:none;">
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
</ul>
<h2 id="t2" onclick="ShHi('t2','h2');">传说中的标题<span>更多...</span></h2>
<ul class="TxtList" id="h2" style="display:none;">
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
</ul>
<h2 id="t3" onclick="ShHi('t3','h3');">传说中的标题<span>更多...</span></h2>
<ul class="TxtList" id="h3" style="display:none;">
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
</ul>
<h2 id="t4" onclick="ShHi('t4','h4');">传说中的标题<span>更多...</span></h2>
<ul class="TxtList" id="h4" style="display:none;">
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
</ul>
</div>
<iframe src="modifyTest.html" frameborder="0" scrolling="no"> </iframe>
</div>
</body>
</html>
这个是之后自己修改过的网上的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{text-align:center; margin:0 auto;}
div{margin:0 auto;}/*装top、left、iframe的div*/
#topDIV{
width:100%;
height:100px;
background-color:#FF00FF;
}
.leftDIV{
width:19%;
height:500px;
float:left;/*靠左浮动*/
text-align:left;
border:solid 1px #FFCC33;
}
iframe{
width:80%;
margin:0 auto;
float:right;/*靠右浮动*/
}
.leftDIV h2{
margin:0px;/*h2之间的间距为0px*/
padding:0px;
font-size:14px;
height:22px;
line-height:22px;
background:#FFF7C6;
text-indent:30px;/*text-indent 属性规定文本块中首行文本的缩进*/
position:relative;
border-top: 1px solid #fff;
border-bottom: 1px solid #F7BE21;
font-weight:normal;
cursor:pointer;
}
.leftDIV li{
font-size:12px;
line-height: 25px;
border-bottom: 1px dashed #eee ;
}
.ulList{
list-style: inside url(point.gif);
margin:10px 10px 10px 20px;
}
</style>
<script type="text/javascript">
var tempElement,tempElement2;//起过渡临时作用的两个元素
function $(paraID){//传递一个id参数，返回那个id的元素
return document.getElementById(paraID);
}
function getElemStyle(paraID){//获取某个id元素的样式
var elementById=$(paraID);
if (elementById){
return elementById.style;
}else{
return null;
}
}
function dislayToNone(){//点击后将该元素的显示变成none
if(tempElement)
tempElement.style.display='none';
}
function styleToNormal(){
if(tempElement2)
tempElement2.style.fontWeight='normal';
}
function isNoneDisplay(paraID){//判断某个id元素的显示是否等于none
var diplay=getElemStyle(paraID).display;
if (diplay=='none'){
return true;
}else{
return false;
}
}
function changeStyle(paraID1,paraID2){//两个参数都是id,在本例中第一个是标题h2、第二个是ul
if(isNoneDisplay(paraID2)){//在本例中是判断标题h2下的ul的样式是否为null
//将上次点击的两个元素如果已经有了的样式，那么把样式都去掉
dislayToNone();
styleToNormal();
//改变这个两个id的样式：从无到有
getElemStyle(paraID2).display='block';//第二个id参数的显示为块
getElemStyle(paraID1).fontWeight='bold';//第一个id参数的元素字体变为黑体
//将这次点击的两个元素保存到临时元素里
tempElement=$(paraID2);
tempElement2=$(paraID1);
}else{
//将上次点击的两个元素如果已经有了的样式，那么把样式都去掉
dislayToNone();
styleToNormal();
//改变这个两个id的样式：从有到无
getElemStyle(paraID2).display='none';
getElemStyle(paraID1).fontWeight='normal';
//恢复数据
tempElement=null;
tempElement2=null;
}
}
</script>
</head>
<body>
<div style="width:80%;"><!--这个div是用来装top、left、iframe框级元素的div-->
<div id="topDIV"> </div>
<div class="leftDIV">
<h2 id="title1" onclick="changeStyle('title1','list1');">传说中的标题</h2>
<ul class="ulList" id="list1" style="display:none;">
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
</ul>
<h2 id="title2" onclick="changeStyle('title2','list2');">传说中的标题</h2>
<ul class="ulList" id="list2" style="display:none;">
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
</ul>
<h2 id="title3" onclick="changeStyle('title3','list3');">传说中的标题</h2>
<ul class="ulList" id="list3" style="display:none;">
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
</ul>
<h2 id="title4" onclick="changeStyle('title4','list4');">传说中的标题</h2>
<ul class="ulList" id="list4" style="display:none;">
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
<li>请帮忙把这段代码再...</li>
</ul>
</div>
<iframe src="modifyTest.html" frameborder="0" scrolling="no"> </iframe>
</div>
</body>
</html>