面向物件總結(01傳參形式)
阿新 • • 發佈:2018-12-25
我一直相信實踐是掌握理論知識的最好方法,看十遍概念不如自己動手做一遍。
直接在程式碼中分析啦~
// 這是一個答題的移動端網站,點選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才可以成立,進而進行操作。
具體情況具體分析啦~,面向物件定義方法有很多種,有空就都可以聯絡一下。
總之還是一句話,程式設計和練習是密不分家的,多挖坑多填坑才能進步,加油
我也是剛學習,如果哪位大神可以指教一二,甚是感激。