面向过程与面向对象比较之tab选项卡切换

<body>
    <div id="div">
        <input type="button" value="选项卡1" name="">
        <input type="button" value="选项卡2" name="">
        <input type="button" value="选项卡3" name="">
        <div>111</div>
        <div>222</div>
        <div>333</div>
    </div>
</body>
<script type="text/javascript">
    //面向过程的选项卡切换(用循环而不用每个元素设置id)
    window.onload = function(){
        var div = document.getElementById("div");
        var btn = div.getElementsByTagName("input");
        // alert(btn.length);
        var content = div.getElementsByTagName("div");
        for(var i = 0,Len = btn.length;i < Len;i++){
            // alert(btn[i]);
            //将每次加载DOM元素的onlcik事件时,把赋给btn的index属性
            btn[i].index = i;
            // console.log(i);
            btn[i].onclick = function(){
                for(var j = 0,Len2 = content.length;j < Len2;j++){
                    content[j].style.display = "none";
                }
                content[this.index].style = "blcok";
                //此时,i=3,因为已加载完三个onclick事件,所以当点击事件时,i=3;
                // console.log(i);
            };
        }
    };
    //面向对象写法:组合使用构造函数模式和原型模式
    function tabSwitch(id){
        this.div = document.getElementById(id),
        this.btn = div.getElementsByTagName("input"),
        this.content = div.getElementsByTagName("div");
        tabSwitch.prototype.tab = function(){
            for(var i = 0,Len = this.btn.length;i < Len;i++){
                this.btn[i].index = i;
                //在事件中,this指向执行此事件的对象,因此将原来指向新对象的this赋给_this
                _this = this;
                this.btn[i].onclick = function(){
                    for(var j = 0,Len2 = _this.content.length;j < Len2;j++){
                        _this.content[j].style.display = "none";
                        // console.log(_this);
                    }
                    _this.content[this.index].style = "block";
                }
            }
        }
        console.log(tabSwitch.prototype);//指向原型
        console.log(tabSwitch.prototype.constructor);//指向构造函数
    }
    window.onload = function(){
        var tab = new tabSwitch("div");
        tab.tab();
        console.log(tab.__proto__);//指向原型
    }
</script>

面向过程写法简单,但用起来不方便,面向对象写法效率高,用起来方便

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,055评论 25 709
  • 认识你是在十七岁,高三的实验班。你总是眯着眼哈哈大笑,走路带风。你不算漂亮(你可以表示反对),但绝对是很耀眼...
    尛尛七阅读 3,297评论 2 3
  • -Xmn12800m:设置新生代空间初始值、最小值及最大值为12800m-Xms16g:设置jvm初始分配堆内存大...
    沧行阅读 5,281评论 0 1
  • 跑步13圈 早上体重113.9 今天一觉睡醒已快七点,收拾完跟三个室友去吃早餐,我决定吃一顿很丰富的早餐,非常满足...
    芳華里阅读 1,384评论 0 0
  • ——2007年6月23日《南方都市报》 佛珠 删除原因:以前信佛可能就是去烧烧香、拜拜佛,然后碰到初一十五吃个斋,...
    hugh_diary阅读 4,014评论 0 1