我的第一个面向对象js编程-优快云博客

本文链接：https://blog.youkuaiyun.com/flying_wind2008/article/details/6858851

本文介绍了一个自定义的JavaScript构造函数，该函数能够操作DOM元素的值和内容，并支持数值转换及中文大写金额转换。此外，还讨论了在开发过程中遇到的问题及改进措施。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写这个构造函数的时候，虽然测试了很多，但还是不够完善，比如：

1..开始时并没有想到在一个表达式中多个对象的问题，结果出现this冲突,必须通过变量传递才能实现。后来经高人指点，将每个$变成一个对象，那每个对象都有this，互相不干扰。

2.没有对参数进行判断，有些意外情况无法控制避免。

3..代码仍然不够简洁高效，其中对象有多次调用，应继续强化训练。

function _$(id){
	function ion(id){ //判断id or name，如果有id 就是true,name就是false
		if(document.getElementById(id)){return true;}
		else {return false;}
	}
	function voi(id){ //判断value or innerHTML ,如果是input或textarea,就是value(true)，其他就是innerHTML
		if(ion(id)){
			e = document.getElementById(id);
			if(e.tagName == "INPUT"||e.tagName == "TEXTAREA"){return false}
			else{return true}
		}
		else{
			e = document.getElementsByName(id);
			if(e[0].tagName == "INPUT"||e[0].tagName == "TEXTAREA"){return false}
			else{return true}
		}
	}
	if(ion(id)){ //如果是id
		if(voi(id)){ //如果有innerHTML
			this.value = function(va){
				if(va){document.getElementById(id).innerHTML = va;}
				else {return document.getElementById(id).innerHTML ; }
			}
			this.o = document.getElementById(id).innerHTML;
		}
		else{ //如果有value
			this.value = function(va){
				if(va){document.getElementById(id).value = va;}
				else {return document.getElementById(id).value ; }
			}
			this.o = document.getElementById(id).value;
		}
	}
	else{ //如果是name
		var e = document.getElementsByName(id);
		if(e.length == 1){ //判断name元素的个数，如果只有一个，则处理方式与id相同
			if(voi(id)){ //如果有innerHTML
				this.value = function(va){
					if(va){e[0].innerHTML = va;}
					else {return e[0].innerHTML ; }
				}
			this.o = document.getElementsByName(id)[0].innerHTML;
			}
			else{
				this.value = function(va){
					if(va){e[0].value = va;}
					else {return e[0].value;}
				}
			this.o = document.getElementsByName(id)[0].value;
			}
		}
		else{ //如果同name的有多个，即是单复选框，注意参数要用双引号引起来
			e = document.getElementsByName(id);
			this.value = function(va){
				if(va){
					var chi = va.split(",");
					var tag = 0;
					for(i=0;i<e.length;i++){//初始化单复选框
						e[i].checked=false;
					}
					for(j=0;j<chi.length;j++){
						for(i=0;i<e.length;i++){
							if(e[i].value==chi[j]){e[i].checked="checked";tag+=1;}
						}
					}
					if(tag<chi.length){alert("请检查您的参数。");return false;}
				}
				else{
					var ch = "";
					for(i=0;i<e.length;i++){
						if(e[i].checked){
							ch += e[i].value+",";
						}
					}
					return ch;
				}
			}
		}
	}
	this.toNumber = function(){
		return Number(this.o);
	}
	this.toAmount = function(){
		return parseFloat(this.o).toFixed(2);
	}
	this.toChinese = function(){
		if(isNaN(this.o)) {
			alert("需要转换的对象不是一个有效的数字！");
		}
		else creat();
		function creat(){//这里是大写金额转换
			var money1 = new Number(this.o);
			if(money1> 1000000000000000000) {
			alert("您输入的数字太大，重新输入！");
			return;
			}
			var monee = Math.round(money1*100).toString(10)
			var i,j;
			j=0;
			var leng = monee.length;
			var monval="";
			for( i=0;i<leng;i++)
			{
			monval= monval+to_upper(monee.charAt(i))+to_mon(leng-i-1);
			}
			repace_acc(monval);
			}
			function to_upper(a)
			{
			switch(a){
			case '0' : return '零'; break;
			case '1' : return '壹'; break;
			case '2' : return '贰'; break;
			case '3' : return '叁'; break;
			case '4' : return '肆'; break;
			case '5' : return '伍'; break;
			case '6' : return '陆'; break;
			case '7' : return '柒'; break;
			case '8' : return '捌'; break;
			case '9' : return '玖'; break;
			default: return '' ;
			}
			}
			function to_mon(a){
			if(a>10){ a=a - 8;
			return(to_mon(a));}
			switch(a){
			case 0 : return '分'; break;
			case 1 : return '角'; break;
			case 2 : return '元'; break;
			case 3 : return '拾'; break;
			case 4 : return '佰'; break;
			case 5 : return '仟'; break;
			case 6 : return '万'; break;
			case 7 : return '拾'; break;
			case 8 : return '佰'; break;
			case 9 : return '仟'; break;
			case 10 : return '亿'; break;
			}
			}
			function repace_acc(Money){
			Money=Money.replace("零分","");
			Money=Money.replace("零角","零");
			var yy;
			var outmoney;
			outmoney=Money;
			yy=0;
			while(true){
			var lett= outmoney.length;
			outmoney= outmoney.replace("零元","元");
			outmoney= outmoney.replace("零万","万");
			outmoney= outmoney.replace("零亿","亿");
			outmoney= outmoney.replace("零仟","零");
			outmoney= outmoney.replace("零佰","零");
			outmoney= outmoney.replace("零零","零");
			outmoney= outmoney.replace("零拾","零");
			outmoney= outmoney.replace("亿万","亿零");
			outmoney= outmoney.replace("万仟","万零");
			outmoney= outmoney.replace("仟佰","仟零");
			yy= outmoney.length;
			if(yy==lett) break;
			}
			yy = outmoney.length;
			if ( outmoney.charAt(yy-1)=='零'){
			outmoney=outmoney.substring(0,yy-1);
			}
			yy = outmoney.length;
			if ( outmoney.charAt(yy-1)=='元'){
			outmoney=outmoney +'整';
			}
			this.outmoney = outmoney;
			}
		return this.outmoney;
	}
	return this;
}
function $(id){ return new _$(id);} //将$()设置为_$()的一个实例对象，那么每个this都只带其自己，就可以在一个表达式中使用多个对象，否则一个表达式中只能用同一个对象，不然this会混淆

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=utf-8" />
<script language="javascript" src="getObject.js"></script>
<title>无标题文档</title>
</head>

<body>
<textarea id="a1">1235</textarea><br /><br />
<input name="a2" value="555"><br /><br />
<table border="1">
	<tr><td>书名</td><td>《实战javascript》</td></tr>
	<tr><td>价格</td><td id="price">128.8</td></tr>
	<tr><td>金额</td><td id="daxie"></td></tr>
</table><br />
<input type="radio" name="sport" value="yy">游泳 <input type="radio" name="sport" value="pb" checked="checked">跑步 <input type="radio" name="sport" value="wq">网球<br /><br />
<input type="checkbox" name="fruit" value="lizhi">荔枝 
<input type="checkbox" name="fruit" value="pingguo">苹果 
<input type="checkbox" name="fruit" value="xiangjiao" checked="checked">香蕉
 <input type="checkbox" name="fruit" value="juzi" checked="checked">橘子
 <input type="checkbox" name="fruit" value="xigua">西瓜
 <input type="checkbox" name="fruit" value="boluo" checked="checked">菠萝
 <input type="checkbox" name="fruit" value="mihoutao">猕猴桃<br /><br />
<div id="a3">111</div><br />
<div id="a4">bbbb</div>
<script>
//var bbb=$("price").value();
$("daxie").value($("price").value()+$("price").value());
//$("daxie").value($("daxie").toChinese());
//$("a1").value($("a1").toAmount());
//$("sport").value("wq");
//$("fruit").value("pingguo,boluo");
//$("a2").value($("a2").toChinese());
</script>
</body>
</html>