9
回答
请帮忙看看这段JavaScript写法符合面向对象吗?
注册华为云得mate10,2.9折抢先购!>>>   

初学javascript练习面向对象,写了个渣代码,效果很简陋,只是为了学习面向对象的一个简易例子而已。

麻烦各位帮我看看这段代码符合面向对象写法吗?谢谢各位了。

可以到这里 http://yqjun.tk/demo/showTshirt.html 看效果。

<!DOCTYPE html>

<html>
<head>
<title>鼠标跟随展示大图OOP练习</title>
<style type="text/css" media="screen">
/*global*/
body, div, ul, li, img {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
body {
    position: relative;
}
/*-------------橱窗---------------*/
#showcase {
    width: 800px;
    margin: 10px auto;
}
#showcase ul {
	overflow: hidden;
}
#showcase ul li {
    float: left;
    width: 170px;
    height: 170px;
    margin-right: 20px;
    border: 3px solid #EEE;
}
/*-------------大图-------------*/
#goodsPic {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    border: 3px solid #AAA;
}
</style>
<script type="text/javascript">
//全局函数——简化getElementById & getElementsByTagName(暂时,会和JQuery冲突)
function $(id) {
	return document.getElementById(id);
}

function $$(tagName, parentID) {
	return $(parentID).getElementsByTagName(tagName);
}

//构造方法
function Showcase(containerID, goodsPicBoxID) {
	//属性
	showcaseSelf = this;		//本身,用于事件监听
	this.goodsPreviewBox = $$("li", containerID);		//获得预览图对象数组
	this.goodsPicBox = $(goodsPicBoxID);			//获得大图容器对象
	this.goodsPic = $$("img", goodsPicBoxID)[0];		//获得大图image对象
	this.goodsPicURL = new Array();				//获得大图URL数组
	//方法
	//添加大图url
	Showcase.prototype.addGoods = function(goodsPicURL) {
		this.goodsPicURL[this.goodsPicURL.length] = goodsPicURL;
	}
	
	//显示大图&随鼠标移动
	Showcase.prototype.showGoodsPic = function(event, index) {
		with(this.goodsPicBox.style) {
			display = "block";
			left = event.clientX + "px";
			top = event.clientY + "px";
		}
		this.goodsPic.src = this.goodsPicURL[index];
	}
	//隐藏大图
	Showcase.prototype.hideGoodsPic = function() {
		this.goodsPicBox.style.display = "none";
		this.goodsPic.src = "";
	}
	//“主”函数
	Showcase.prototype.run = function() {
		for (var i = 0; i < this.goodsPreviewBox.length; i++) {
			this.goodsPreviewBox[i].index = i;
			//移入显示
			this.goodsPreviewBox[i].onmousemove = function(event) {
				var event = event || window.event;
				showcaseSelf.showGoodsPic(event, this.index);
			}
			//移出隐藏
			this.goodsPreviewBox[i].onmouseout = function() {
				showcaseSelf.hideGoodsPic();
			}
		}
	}
}


window.onload = function() {
	var myTshirt = new Showcase("showcase", "goodsPic");
	myTshirt.addGoods("img/shirt_1_big.jpg");
	myTshirt.addGoods("img/shirt_2_big.jpg");
	myTshirt.addGoods("img/shirt_3_big.jpg");
	myTshirt.addGoods("img/shirt_4_big.jpg");
	myTshirt.run();
};
</script>
<head>
<body>
<div id="showcase">
    <ul>
    	<li><img src="./img/shirt_1.jpg"></li>
    	<li><img src="./img/shirt_2.jpg"></li>
    	<li><img src="./img/shirt_3.jpg"></li>
    	<li><img src="./img/shirt_4.jpg"></li>
    </ul>
   <div id="goodsPic">
        <img src="" />
    </div>
</div>
</body>
</html>

举报
yqjun
发帖于6年前 9回/635阅
共有9个答案 最后回答: 6年前

引用来自“xyz555”的答案

不要把Showcase.prototype.这些方法放在构造函数内。

showcaseSelf = this;是没用的语句

哦,谢谢。把方法放进构造函数那个是我粗心……

然后,如果不用 showcaseSelf = this; 在 onmousemove 、onmouseout等事件中会有问题,我不知道怎么解决,只好加个 ShowcaseSelf ……

eg:

this.goodsPreviewBox[i].onmouseout = function() {

    ShowcaseSelf.hideGoodsPic();

}

Showcase.prototype.hideGoodsPic = function() {

    this.goodsPicBox.style.display = "none";

    this.goodsPic.src = "";

}

如果不用ShowcaseSelf ,下面hideGoodsPic方法中的this的指向就不是Showcase对象了……然后就头大了……

--- 共有 2 条评论 ---
yqjun@大东哥 : 就上诉例子,如果改为 this.hideGoodsPic(); 那么this的指向就是goodsPreviewBox[i],会报错,因为goodsPreviewBox[i]下面没有hideGoodsPic()方法。所以我需要一个实例属性myself来指向自己,来调用hideGoodsPic()。(有点语无伦次,呵呵) 6年前 回复
大东哥onmousemove有什么问题? this不指向Showcase,你是怎么确定的? 6年前 回复

引用来自“xyz555”的答案

在类的内部可以直接用this,外部可以使用myTshirt
但如果使用 myTshirt, 我再new一个 myCoat 不就有问题了吗?

run方法改一下

Showcase.prototype.run = function(obj)
{
	for(var i = 0; i < this.goodsPreviewBox.length; i++)
	{
		this.goodsPreviewBox[i].index = i;
		
		//移入显示
		this.goodsPreviewBox[i].onmousemove = function(event)
		{
			var event = event || window.event;
			obj.showGoodsPic(event, this.index);
		}
		
		//移出隐藏
		this.goodsPreviewBox[i].onmouseout = function()
		{
			obj.hideGoodsPic();
		}
	}
}

调用

myTshirt.run(myTshirt);

这样就没问题了。

在一个类里声明一个属性实例指向自己,感觉有点怪异,Java、C++里似乎没见过这样用的。这大概和javascript的实现有关,不过如果这样用更方便就这样用吧,呵呵。

 

--- 共有 1 条评论 ---
yqjun这样阿,又学到一种方法,谢谢了~ 6年前 回复

引用来自“YQ君”的答案

引用来自“xyz555”的答案

不要把Showcase.prototype.这些方法放在构造函数内。

showcaseSelf = this;是没用的语句

哦,谢谢。把方法放进构造函数那个是我粗心……

然后,如果不用 showcaseSelf = this; 在 onmousemove 、onmouseout等事件中会有问题,我不知道怎么解决,只好加个 ShowcaseSelf ……

eg:

this.goodsPreviewBox[i].onmouseout = function() {

    ShowcaseSelf.hideGoodsPic();

}

Showcase.prototype.hideGoodsPic = function() {

    this.goodsPicBox.style.display = "none";

    this.goodsPic.src = "";

}

如果不用ShowcaseSelf ,下面hideGoodsPic方法中的this的指向就不是Showcase对象了……然后就头大了……

																    //“主”函数
																    Showcase.prototype.run = function() {
																			
																	    with(this){
															        for (var i = 0; i < goodsPreviewBox.length; i++) {
															            goodsPreviewBox[i].index = i;
									          				 									//移入显示
																            goodsPreviewBox[i].onmousemove = function(event) {
																                var event = event || window.event;
																                showGoodsPic(event, this.index);
																           						 }
															           				 //移出隐藏
																            goodsPreviewBox[i].onmouseout = function() {
															                hideGoodsPic();
															            					}
															       		 		}
																	    	}
															        
																    	}

--- 共有 2 条评论 ---
Liuxd@yqjun : with效率不好,慎用。 6年前 回复
yqjun哇,原来还有这种写法,谢谢了~ 6年前 回复
好像不建议用with语句吧,怎么大家都在用
--- 共有 5 条评论 ---
yqjun@大东哥 : 恩,如果 with(A){} 里的属性都是属于A的,用不用都一样。 6年前 回复
大东哥@YQ君 : O,无非就是说性能问题,在你这个例子中,我觉得with不with都不会影响。 6年前 回复
yqjun@大东哥 : 好的 http://varnow.org/?p=260 和 http://www.lsdn.org/50314/ 这两篇 6年前 回复
大东哥@YQ君 : 给个链接,我看看怎么慎用的 6年前 回复
yqjun恩,谢谢,google过慎用with的文章,已经改正过来了。 6年前 回复
你的onmousemove需要一个闭包函数,function(event) {
var event = event || window.event;
//alert(that);
this.showGoodsPic(event, this.index);
}中的this指向<li><img src="......"></li>
改成这样就可以了(function(that){
return function(event) {
var event = event || window.event;
that.showGoodsPic(event, this.index);
}
})(this);
顶部