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

最新推荐文章于 2024-05-23 11:01:33 发布
最新推荐文章于 2024-05-23 11:01:33 发布
阅读量92 收藏
点赞数
分类专栏： JavaScript、css.、JQuery 文章标签： F# JavaScript XHTML CSS HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ocaicai/article/details/83767449
版权
.

[color=red]效果：[/color]
[img]http://dl.iteye.com/upload/picture/pic/76526/70695873-cfa2-3f72-a881-62aab69523c4.jpg[/img]
[color=darkblue]今天拿到一个js和css制作的左侧导航，abcd的命名和没有一个的注释，非常的看不懂，也就非常的郁闷
考虑这个东西非常的使用于是决定好好的来研究一下，
从两个方面入手：
一是从命名角度：取一个有意义的名字
二是从注释角度：说明参数和方法的作用
但是在修改的过程中要改一点测试一下，改一点测试一下，以防改多了就ctrl+z回不去咯

删除、添加、修改一部分代码运行测试看看会是什么效果！
总结一下：java我都会我何惧它JavaScript
[/color]


[color=red][size=large]这个是之前网上的代码[/size][/color] 

<!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>


[color=red][size=large]这个是之后自己修改过的网上的代码[/size][/color] 

<!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>

ocaicai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
美化java代码，从合理注释开始
08-25
本文将探讨如何通过合理注释来美化Java代码，遵循的要点包括避免过多注释、注重命名规范、减少冗余注释、正确抽象以及处理废弃代码。 首先，我们应该追求编写清晰的代码，使得代码本身就能解释其功能。正如Robert C...
eclipse代码格式化模板和注释javaDoc模板
10-23
良好的代码格式和详尽的JavaDoc注释不仅能使代码看起来更专业，还能帮助团队成员更快地理解和维护代码。同时，当项目规模扩大，这些模板能保证代码的一致性，降低代码审查和维护的成本。 在实际开发中，我们还可以...
在STS里打代码的时候，出现的注释根本看不清咋办？
RonnyChan的博客
04-05 608
不知道什么时候设置的系统颜色。。当时是为了护眼，试了好多网上的方法（改注册表啥的）都没用。-||（尴尬。。）求大神帮忙出招改回去，白底黑字让我看得清，不然打代码老出现这玩意太难受了。。。...
linux 符号命名意思,Linux中的常用符号解释
weixin_29332867的博客
05-20 1734
一、通配符：“*”、“?”和DOS下一样，当我们不知道确切的文件名时，可以用通配符来进行模糊操作。“*”可以代表任意长度的任意字符，“?”代表一个任意字符。二、转义字符：“/”和DOS的命名规则不同的是，通配符“*”、“?”是可以在文件名中使用的。如果要操作的文件名中包含有这些特殊符号，我们可以结合“/”来表达。下面是通配符和正则表达式的一个简短列表：* 匹配所有字符? 匹配字串中的一个字符/* ...
代码命名规范
CarpeDiem
09-17 3755
本篇主要介绍常见的命名规范，包括驼峰命名法、蛇形命名法、串式命名法，同时简要介绍Java、Python、C/C++文件名、变量、函数、类名的一般规范。
良好的代码规范与注释
weixin_45782854的博客
12-25 394
良好的代码规范与注释 一个好的代码规范与注释不仅让你的代码清晰，也增加了代码的易用性与复用性。当你以后回头去修改和调用代码时，可以更方便快速的理解代码，保持这种习惯也是一种良好的职业素质提现，也可以延长你的编码寿命。 代码规范 代码规范是指写代码是一种特点的风格，基本为变量命名，函数命名，宏命名，空格，大小括号等。 命名 一个变量命名需要清洗的表示变量的类型与意义，命名在这里我推荐用驼峰命名配合匈...
【Godot4.2】注释习惯 -- 拒绝屎山，提高代码可读性
巽的博客
03-23 1581
我个人于2020年9月左右开始接触Godot，在2021年8月汉化一个关于GDScript脚本注释习惯的视频时，学习到了一些有用的代码注释规则，于是逐渐将一些注释习惯引入自己的代码书写中。这些注释习惯一直延续至今，并逐渐形成我自己的一种风格。本篇就来介绍一下我自己的注释习惯，以及谈谈这样做的好处。当然你并不需要完全和我一致，每个人都有自己的习惯。如果你觉得还有哪些好的提高代码可读性的好方法，可以留言或讨论。希望本篇内容对学习Godot的小伙伴们有用。
如何写出好的代码注释
最新发布
Or1gami_的博客
05-23 1817
代码注释（以下简称注释）是嵌入在代码中的解释性文本，它们一般不会被编译或执行，但可以提供给开发者一些有用的信息。不同编程语言的注释格式可能不同，本文使用C语言来介绍。// 这是一段注释/* 这也是一段注释 */实际项目中的注释根据其形式和作用的不同，大体可以分为以下四类。
程序员的代码注释需要写么？
人邮异步社区
11-01 4039
“别给糟糕的代码加注释——重新写吧。”—Brian W. Kernighan与P. J. Plaugher 什么也比不上放置良好的注释来得有用。什么也不会比乱七八糟的注释更有本事搞乱一个模块。什么也不会比陈旧、提供错误信息的注释更有破坏性。 注释并不像辛德勒的名单。它们并不“纯然地好”。实际上，注释最多也就是一种必须的恶。若编程语言足够有表达力，或者我们长于用这些语言来表达意图，就不那么需要注释——也许根本不需要。 注释的恰当用法是弥补我们在用代码表达意图时遭遇的失败。注意，我用了“失败”一词。我是说
注释可在程序中用来说明代码功能_良好的程序设计风格主要包括哪些内容？
weixin_39873208的博客
10-25 728
展开全部良好的程序设计风格主32313133353236313431303231363533e4b893e5b19e31333433653430要包括的内容有：一、源程序文档化(1)标识符应按意取名。(2)程序应加注释。注释是程序员与日后读者之间通信的重要工具，用自然语言或伪码描述。它说明了程序的功能，特别在维护阶段，对理解程序提供了明确指导。注释分序言性注释和功能性注释。序言性注释应置于每个...
关于如何优雅的做好代码注释
架构精进之路
06-10 822
在一次研发沟通会上，大家关于是否需要代码注释做了一番争执（讨论）。 主要内容简述如下： A：我提议项目应该有个注释，我们有些程序员几乎从不注释代码，谁都知道没注释的代码是没法阅读的。 B：我觉得注释没必要，注释被当做万灵药，可是任何实际编码过的人都知道，注释反而会使代码更难读懂。注释很容易产生大量的废话，而编码语言相对简明扼要得多。 C：是这么回事。假如代码不清晰，又怎能注释的清楚呢？再说，代码一变，注释就过时。要是误读了过时的注释，可能又会踩坑了。 C 接着说：另外，注释过多的代码更难读懂
代码注释规范整理
Y2567326540的博客
05-22 5397
转载自51CTO大佬yuke198907 原文章地址：https://blog.51cto.com/yuke198907/1300804（侵删） 版权这个很重要 程序中的注释是程序设计者与程序阅读者之间通信的重要手段。应用注释规范对于软件本身和软件开发人员而言尤为重要。并且在流行的敏捷开发思想中已经提出了将注释转为代码的概念。好的注释规范可以尽可能的减少一个软件的维护成本，并且几乎没有任何一个软件，在其整个生命周期中，均由最初的开发人员来维护。好的注释规范可以改善软件的可读性，可以让开发人员尽快而彻底地
CleanCode:罗伯特·C·马丁（Robert C.Martin）的“清洁代码”一书的注释存储库
05-12
4. **注释**：虽然良好的代码结构和命名可以减少注释的需求，但必要的注释仍很重要。注释应解释代码的目的，而非重复代码的内容。此外，马丁提倡用自解释的代码代替过度依赖注释的代码。 5. **异常处理**：书中强调...
Java代码注释规范.docx
05-09
下面将详细阐述Java代码的命名规范和注释规范。 **一、命名规范** 1. **一般概念** - 使用完整的英文描述符，以增强可读性。 - 使用领域相关的术语。 - 大小写混合，如驼峰命名法，以提高可读性。 - 尽量避免...
Java代码、注释模版格式文件
04-12
良好的代码风格和规范不仅能够提高代码的可读性，还能提升团队协作的效率，因为所有人都能按照统一的标准来编写代码。"Java代码、注释模版格式文件"就是为实现这一目标而创建的资源。 首先，我们要理解什么是代码...
JQuery实现在分页的时候添加一个设置每页显示多少条数据的功能
ocaicai的专栏
12-03 3760
[color=olive]尽管现在微博或者SNS类的网站流行一页一页的下拉累加，或者这个是出于放缓用户的浏览速度，而且回看的时候不用重新请求了；但是这是以牺牲页码导航为代价的，因为如果你当前在第二页要到第10页你就得一页一页的下拉。 基于此如果在页码导航的情况下再添加一个设置每页显示多少条数据的功能，那么应该很有灵活性了。下面是浏览器端的JQuery实现：[/color] [code="h...
google map api 谷歌地图上添加消息窗口InfoWindow
ocaicai的专栏
10-20 660
使用的时候特别简单，也非常方便；这让我感觉到编程的未来应该更多的倾向于配置，让我们从更复杂的逻辑中解放出来更多的关注于业务！ 1.代码 [code="html"] Google 地图 JavaScript API 示例: 简单的地图 function initialize() { var mylatlng = new google.maps....
jquery处理服务器返回的json数据
ocaicai的专栏
09-10 268
[code="js"] 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。 这里首先给出JSON字符串集，字符串集如下： 代码如下: var data=" { root:...
UrlRewrite时需要注意的问题：action以及正则表达式
ocaicai的专栏
12-15 135
[color=green]myeclipse6.5+struts2-core-2.1.8.jar+urlrewrite-3.2.0.jar如果存在开发环境的问题，那么自己先建立一个项目，把相应的文件导入即可[/color] [color=red]1.注意：为了实现action访问的伪静态在web.xml中配置struts2和urlrewrite时，加上[/color] [code="x...
Java开发代码、注释规范
11-23
注释的作用并不仅仅是对代码的解释，更重要的是对代码逻辑的解释，这样即使其他人或者自己很久以后再看到这段代码，也能够轻松理解其含义和用途。 除此之外，本文还对Java开发中的代码规范进行了讨论。在编写代码时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值