`

对网上找来的让人看不清的代码进行良好的命名和注释

F#JavaScriptXHTMLCSSHTML 
阅读更多
.

效果：

今天拿到一个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>
分享到：
| count distinct 统计
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Java代码、注释模版格式文件

    良好的代码风格和规范不仅能够提高代码的可读性，还能提升团队协作的效率，因为所有人都能按照统一的标准来编写代码。"Java代码、注释模版格式文件"就是为实现这一目标而创建的资源。 首先，我们要理解什么是代码...

    关于c#的命名规范，里面详细的对c#中的命名进行了讲解，使我我们能够更容易的让别人读懂我们的代码

    良好的命名规范使得代码易于理解和维护，同时也有助于团队间的协作。以下是对C#命名规范和编码规范的详细说明： 1. **命名规范**： - **Pascal 命名法**：适用于类名和公共接口，每个单词的首字母大写，其余字母...

    eclipse代码格式化模板和注释javaDoc模板

    良好的代码格式和详尽的JavaDoc注释不仅能使代码看起来更专业，还能帮助团队成员更快地理解和维护代码。同时，当项目规模扩大，这些模板能保证代码的一致性，降低代码审查和维护的成本。 在实际开发中，我们还可以...

    如何写好代码-注释.pptx

    5. **使用正确的语法和拼写**：虽然这看起来微不足道，但良好的语法和拼写可以提高注释的专业度和可读性。 #### 六、示例 **错误示范**： ```java /* 这个函数用来计算总价格 */ public double ...

    java代码注释规范文档

    ### Java代码注释规范知识点详解 #### 一、概述 在软件开发过程中，良好的注释习惯对于提升代码可读性、可维护性至关重要。...希望每位开发者都能养成良好的注释习惯，让我们的代码更加优雅易懂。

    Java代码注释规范.docx

    下面将详细阐述Java代码的命名规范和注释规范。 **一、命名规范** 1. **一般概念** - 使用完整的英文描述符，以增强可读性。 - 使用领域相关的术语。 - 大小写混合，如驼峰命名法，以提高可读性。 - 尽量避免...

    Python的变量、常量、注释

    注释是对代码的补充说明，不会影响程序的运行，但却是代码的“灵魂”，能够提供给阅读代码的人关于代码功能和结构的宝贵信息。 当我们运行第一个Python程序时，可以创建一个TXT文档，将其重命名为以.py结尾的文件名...

    C++注释规范.docx

    《C++注释规范》是软件开发中必不可少的文档，旨在提高代码的可读性和维护性，让团队成员之间的协作更为顺畅。以下是该规范的主要内容： 1. **说明** C++注释规范的主要目标是确保代码的清晰度和一致性，帮助...

    代码审计报告参考.pdf

    代码审计报告参考.pdf 代码审计报告是对软件代码进行检查和评估的报告，其目的是为了评估代码的...通过对代码的编写格式、变量命名、数据类型、注释、安全性等多方面的评估，可以提高代码的可读性、可维护性和安全性。

    Java SSH 命名规范

    Java SSH（Spring、Struts和Hibernate）命名规范是软件开发中的一个重要方面，它确保了代码的可读性、可维护性和一致性。以下是基于提供的信息详细解释的命名规范： ### 包的命名 - 包名全为小写字母，遵循反向域名...

    华为软件代码规范

    4. 注释：每行注释不超过80字符，注释应清晰简洁，解释代码的目的和逻辑。 二、命名规范 良好的命名可以直观反映变量、函数、类的作用，华为对此有以下要求： 1. 变量名：使用小驼峰命名法，如firstName，避免...

    如何读懂源代码

    即通过阅读代码中的变量名、函数名以及注释等，来推敲代码的意图和功能。这是个逐层深入的过程，从高层次的命名中把握代码块的作用，再逐渐深入到具体实现细节。在这个过程中，良好的代码注释和文档尤为重要，因为...

    单片机程序编写代码规范工具

    - 检查代码：运行工具对现有代码进行检查，找出不符合规范的地方。 - 整改代码：根据工具的提示，修改代码以符合规范。 - 持续集成：在项目开发流程中，将代码规范检查作为持续集成的一部分，确保新添加的代码...

    html代码美化工具js代码美化

    HTML代码美化工具和JS代码美化工具是Web开发中不可或缺的辅助软件，它们的主要功能是对原始的、不规范的源代码进行格式化，使其结构清晰、易于阅读和维护。这对于二次开发者来说尤其重要，因为他们需要经常处理他人...

    verilog编码风格

    一个良好的编程书写和命名规范可以提高代码的可读性和可维护性。 1.1 文件头和修订列表 文件头是Verilog代码的开始部分，通常包括文件名、作者、日期、版本号等信息。修订列表是记录代码修改历史的重要部分，包括...

    代码欣赏代码欣赏代码欣赏

    代码欣赏不仅仅是查看别人写的代码，更是理解其背后的逻辑和思想过程。这有助于我们开阔视野，学习到新的编程技巧，提高代码质量，并且能够更好地理解和运用各种编程语言特性。对于初学者，这是一条快速掌握编程技术...

    怎么样写好安全代码

    6. **避免冗余**：注释不应重复代码本身已经表达的信息，而是要解释为什么要这么做。 7. **注释掉困惑的代码**：如果某些代码难以理解，最好将其注释掉并重新编写更为清晰的代码。 #### 示例：Javadoc注释 ```java...

    如何提高代码质量（管理篇）：代码复查

    1. **定义明确的复查流程**：建立一套清晰的代码复查流程，包括提交代码、指定审查人、进行复查、反馈意见、修改代码和最终合并。这可以确保每个步骤都有条不紊地进行。 2. **选择合适的复查工具**：利用源码管理...

    修改代码的艺术

    9. 代码分析工具：利用静态代码分析工具可以帮助找出可能的错误和改进点，如SonarQube、Pylint等，它们可以辅助进行代码修改决策。 10. 变更管理：通过版本控制系统（如Git）管理代码变更，记录每一次修改，便于...

Magicbox
Global site tag (gtag.js) - Google Analytics