开发者社区> 问答> 正文

请帮忙看看这段JavaScript写法符合面向对象吗?

初学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>

展开
收起
a123456678 2016-07-15 14:40:45 2108 0
1 条回答
写回答
取消 提交回答
  • his.goodsPreviewBox[i].onmouseout = function() {
    
        ShowcaseSelf.hideGoodsPic();
    
    }
    
    Showcase.prototype.hideGoodsPic = function() {
    
        this.goodsPicBox.style.display = "none";
    
        this.goodsPic.src = "";
    
    }

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

    2019-07-17 19:56:57
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载