1. 程式人生 > >面向物件總結(01傳參形式)

面向物件總結(01傳參形式)

我一直相信實踐是掌握理論知識的最好方法,看十遍概念不如自己動手做一遍。

直接在程式碼中分析啦~ 

//  這是一個答題的移動端網站,點選abc三個選項,選擇答案是對的就頁面展示對號圖示提示選擇正確,使用者看到對錯之後頁面自動跳轉至下一題
//  應該考慮到的問題有,當用戶點選了其中一個選項之後,頁面中的所有選項不可以再點選
//  第二,設定一個count值,計算使用者答對的題數
    var count=0;
//	面向物件的方式
//  我採用的傳參的方式,下方括號中就是我需要用到的資料,明明通俗易懂不再介紹
	function xuanze(rightxuanze,failxuazne01,failxuazne02,righticon,failicon01,failicon02,yemian){
	    this.rightxuanze = $(rightxuanze);//因為我傳的的class類名,所以用jquery中$轉化成可操作物件
	    this.failxuanze01=$(failxuazne01);
	    this.failxuanze02=$(failxuazne02);
	    this.righticon=$(righticon);
	    this.failicon01=$(failicon01);
	    this.failicon02=$(failicon02);
	    this.yemian=$(yemian);
	    this.init();
	}
	xuanze.prototype={//物件原型,在這裡可以定義事件函式
	    init:function(){//init方法中一般做一些事件繫結,介面初始化的工作
	        this.bindEvents()
	    },
	    bindEvents:function(){//事件函式,具體時間具體填寫
	        var that = this;//注意這裡尤其重要,that和this可看文章最後具體分析
	        this.rightxuanze.on('click',function(){//點選正確的選項,count++,對號圖示顯示
	        	count++;
	            that.righticon.show();
	            that.yemian.css("pointer-events","none");//此css就是設定頁面不能再點選
	            console.log(count,mySwiper.activeIndex+1);
	            delay();
	        });
	        this.failxuanze01.on('click',function(){//點選錯誤的選項,count不加一,錯號圖示顯示
	            that.failicon01.show();
	            that.yemian.css("pointer-events","none");
	            console.log(count,mySwiper.activeIndex+1);
	            delay();
	        });
	        this.failxuanze02.on('click',function(){//點選錯誤的選項,count不加一,錯號圖示顯示
	            that.failicon02.show();
	            that.yemian.css("pointer-events","none");
	            console.log(count,mySwiper.activeIndex+1);
	            delay();
	        });
	    }
	}
	//物件例項化,物件不例項化不能應用,括號中的命名就是傳到上邊形參的具體資料,有了具體資料,就能具體操作了
	var pg3=new xuanze('.pg3>.first','.pg3>.second','','.pg3>.right','.pg3>.wrong','','.pg3');
	var pg4=new xuanze('.pg4>.first','.pg4>.second','','.pg4>.right','.pg4>.wrong','','.pg4');
	var pg5=new xuanze('.pg5>.second','.pg5>.first','.pg5>.third','.pg5>.right','.pg5>.wrong01','.pg5>.wrong02','.pg5');
	var pg6=new xuanze('.pg6>.second','.pg6>.first','.pg6>.third','.pg6>.right','.pg6>.wrong01','.pg6>.wrong02','.pg6');
	var pg7=new xuanze('.pg7>.first','.pg7>.second','.pg7>.third','.pg7>.right','.pg7>.wrong01','.pg7>.wrong02','.pg7');
	var pg8=new xuanze('.pg8>.second','.pg8>.first','','.pg8>.right','.pg8>.wrong','','.pg8');
	var pg9=new xuanze('.pg9>.first','.pg9>.second','','.pg9>.right','.pg9>.wrong','','.pg9');
	var pg10=new xuanze('.pg10>.first','.pg10>.second','','.pg10>.right','.pg10>.wrong','','.pg10');
	var pg11=new xuanze('.pg11>.third','.pg11>.first','.pg11>.second','.pg11>.right','.pg11>.wrong01','.pg11>.wrong02','.pg11');
	var pg12=new xuanze('.pg12>.third','.pg12>.first','.pg12>.second','.pg12>.right','.pg12>.wrong01','.pg12>.wrong02','.pg12');
	var pg13=new xuanze('.pg13>.first','.pg13>.second','.pg13>.third','.pg13>.right','.pg13>.wrong01','.pg13>.wrong02','.pg13');
	var pg14=new xuanze('.pg14>.third','.pg14>.first','.pg14>.second','.pg14>.right','.pg14>.wrong01','.pg14>.wrong02','.pg14');
	var pg15=new xuanze('.pg15>.second','.pg15>.first','.pg15>.third','.pg15>.right','.pg15>.wrong01','.pg15>.wrong02','.pg15');
	var pg16=new xuanze('.pg16>.third','.pg16>.first','.pg16>.second','.pg16>.right','.pg16>.wrong01','.pg16>.wrong02','.pg16');

關於上述的的this和that 

先看this控制檯打印出來的

顯而易見在繫結的這個事件中this打印出來的是被點選的img元素,只是一張圖片,這樣他是沒有辦法對物件的failicon進行操作的。

再看that控制檯打印出來的

而that打印出來的是建立的物件,因此,taht.failicon才可以成立,進而進行操作。 

具體情況具體分析啦~,面向物件定義方法有很多種,有空就都可以聯絡一下。

總之還是一句話,程式設計和練習是密不分家的,多挖坑多填坑才能進步,加油

我也是剛學習,如果哪位大神可以指教一二,甚是感激。