js - 面向對象 - 小案例：輪播圖、隨機點名、選項卡、鼠標拖拽
面向對象
對象 : (黑盒子)不瞭解內部結構, 知道表面的各類操做.javascript
面向對象 : 不瞭解原理的狀況下 會使用功能 .java
面向對象是一種通用思想,並不是編程中能用,任何事情都能用.編程
編程語言的面向對象的特色：
封裝 : 看不到裏面的東西 , 用好表面功能.app
繼承 : 從父類繼承一些方法 , 屬性 , 子類又有一些新的特性.dom
多態編程語言
抽象 ： 抽取一個功能裏面多個核心的功能模塊。函數
思想： 高內聚、低耦合this
低耦合 ：每一個功能模塊之間耦合度要低spa
高內聚 ：模塊內部要緊密相連prototype
面向對象的風格 都是 從 new 開始的
js對象的分類：
宿主對象、內置對象 （Math）、內部對象（ new ）
構造函數: 經過 new 調用的
對象是經過構造函數構建出來的，對象用來存儲數據
構造函數 -> 對象 -> 存儲數據
爲了區分構造函數與普通函數： 構造函數的首字母 大寫
構造函數 與 普通函數的區別
普通函數若是內部沒有return的時候 , 返回的是undefined
構造函數內部沒有return返回值的時候，返回的構造出來的對象。
構造函數內部的this指向，指向的是當前對象。
總結：構造函數在new的時候構建對象，會在內部自動返回一個this 指向構造的對象。
面向對象實現流程:
1. 全局變量做爲屬性
2. 把對象的方法放在prototype
3. new實例化對象
4. this指向
function 構造函數名稱 首字母大寫(){
this.屬性 = 屬性值
//調用初始化方法
this.init();
}
構造函數名稱 首字母大寫 .prototype = {
//初始化方法 : 整合各個功能模塊
init : function(){
//調用綁定事件模塊
this.eventBind();
},
fn1 : function(){
},
fn2 : function(){
},
eventBind : function(){
}
}
new 構造函數名稱 首字母大寫 ();
面向對象實現簡版輪播圖
分析：
功能模塊拆分
1: 圖片移動
2：下一張的功能
3：上一張的功能
4：事件綁定模塊
// 構造Banner函數
function Banner(){
this.oimgbox = document.querySelector('.imgbox'),
this.oimg = document.querySelectorAll('img'),
this.obtn = document.querySelectorAll('span'),
this.distance = this.oimg[0].offsetWidth,
this.count = 0 ;
//調用初始化模塊
this.init();
}
//
Banner.prototype = {
//初始化模塊
init : function(){
this.oimgbox.style.width = this.oimg.length * this.distance + 'px';
this.eventBind();
},
//圖片移動模塊
toimg : function(){
move(this.oimgbox,{'left': -this.distance * this.count})
},
//下一張
next : function(){
if(this.count >= this.oimg.length - 1){
this.count = 0;
}else{
this.count++;
}
this.toimg();
},
//上一張
pre : function(){
if(this.count <= 0 ){
this.count = this.oimg.length - 1;
}else{
this.count--;
}
this.toimg();
},
//事件綁定模塊
eventBind : function(){
addEventListener(this.obtn[1],'click',this.next.bind(this));
addEventListener(this.obtn[0],'click',this.pre.bind(this));
}
}
new Banner();
面向對象實現選項卡效果
function Tab(){
this.obtn = document.querySelectorAll('span');
this.oarticle = document.querySelectorAll('article');
this.init();
}
Tab.prototype = {
init : function(){
this.eventBind();
},
// 清除類名
clearClass : function(){
for(let i = 0 ,k = this.obtn.length; i < k; i++){
this.obtn[i].className = '';
this.oarticle[i].className = '';
}
} ,
addClass :function(index){
this.clearClass();
this.obtn[index].className = 'active';
this.oarticle[index].className ='show';
},
eventBind : function(){
for(let i = 0, k = this.obtn.length; i<k; i++){
// this.obtn[i].addEventListener('click',this.addClass.bind(this,i));
this.obtn[i].addEventListener('click',this.addClass.bind(this,i));
}
}
}
new Tab();
隨機點名
<div class="box">隨機點名</div>
<span class="btn">開始</span>
1.初始化
2.文字變化 定時器
3.開始
4.結束
5.判斷何時開始,何時結束
6.控制flag
6.事件綁定
<script>
var arr =['黃子韜','白敬亭','範世錡','黃景瑜','秦霄賢','彭昱暢','汪蘇瀧','侯明昊','秦凱旋'];
function RandomName(){
this.box = document.querySelector('.box');
this.btn = document.querySelector('.btn');
this.flag = false;
this.init();
}
RandomName.prototype = {
init : function(){
this.eventBind();
},
textChange : function(){
var _this = this;
clearInterval(this.timer);
this.timer = setInterval(function(){
//每隔一段事件生成一個下標
let num = parseInt(Math.random() * arr.length);
//根據隨機的下標 取到名字 而後交給 box；
_this.box.innerHTML = arr[num];
//添加隨機顏色
_this.box.style.color = randomColor();
},100)
},
//開始
startTxt : function(){
this.btn.innerHTML = '開始';
},
//暫停
stopTxt : function(){
this.btn.innerHTML = '暫停';
},
//判斷是否開始
isStart : function(){
if(this.flag){
this.textChange();
this.stopTxt();
}else{
clearInterval(this.timer);
this.startTxt();
}
},
//控制flag
controlFlag : function(){
this.flag = this.flag ? false : true;
//用flag控制 開始 或 暫停
this.isStart();
},
//evntBind:
eventBind : function(){
this.btn.addEventListener('click',this.controlFlag.bind(this));
}
}
new RandomName();
</script>
鼠標拖拽
function Drag(){
this.div = document.querySelector('div');
//定義一個空變量
this.fn = null;
this.init();
}
Drag.prototype ={
init : function(){
this.eventBind();
},
//鼠標按下 獲取位置
Down : function(e){
e = e || window.event;
this.x = e.offsetX;
this.y = e.offsetY;
//綁定鼠標移動事件 fn 調用 move()
document.addEventListener('mousemove',this.fn = this.Move.bind(this));
document.addEventListener('mouseup',this.Up.bind(this));
},
//鼠標移動
Move : function(e){
e = e || window.event;
let
l = e.clientX - this.x,
t = e.clientY - this.y;
this.div.style.left = l +'px';
this.div.style.top = t + 'px';
},
//鼠標擡起 綁定事件不移動
Up : function(){
document.removeEventListener('mousemove',this.fn);
},
eventBind : function(){
//鼠標按下
this.div.addEventListener('mousedown',this.Down.bind(this));
}
}
new Drag();
面向對象實現完整版輪播圖
<script>
function Banner(){
this.oimgbox = document.querySelector('.imgbox');
this.oimg = document.getElementsByTagName('img');
this.obtn = document.querySelectorAll('span');
this.ocricle = document.querySelector('.circlebox');
this.osection = document.querySelector('section');
this.timer = null;
this.distance = this.oimg[0].offsetWidth;
this.count = 0;
this.init();
}
Banner.prototype = {
//初始化
init : function(){
this.clone();
this.autoplay();
this.setWidth();
this.addLi();
this.addClass();
this.eventBind();
},
setWidth : function(){
this.oimgbox.style.width = this.oimg.length * this.distance +'px';
},
//克隆圖片
clone : function(){
this.firstimg = this.oimg[0].cloneNode();
this.oimgbox.appendChild(this.firstimg);
},
// 圖片移動
toImg : function(){
move(this.oimgbox,{'left' : -this.distance * this.count});
},
//下一張
next : function(){
if(this.count >= this.oimg.length -1){
this.oimgbox.style.left = 0;
this.count = 1;
}else{
this.count++;
}
this.toImg();
this.clearClass();
this.oli[this.count >= this.oimg.length -1 ? 0:this.count].className = 'active';
},
//上一張
pre : function(){
if(this.count <= 0){
this.oimgbox.style.left = -this.distance *(this.oimg.length - 1) + 'px';
this.count = this.oimg.length -2;
}else{
this.count--;
}
this.toImg();
this.clearClass();
this.oli[this.count].className = 'active';
},
//定時器
autoplay : function(){
var _this = this;
clearInterval(this.timer);
this.timer = setInterval(() => {
_this.next();
}, 3000);
},
//清除定時器
clearTimer : function(){
clearInterval(this.timer);
},
//添加圓點
addLi : function(){
for(let i = 0 ;i < this.oimg.length -1; i++){
this.createLi = document.createElement('li');
this.ocricle.appendChild(this.createLi);
}
this.oli = document.getElementsByTagName('li');
this.oli[0].className = 'active';
},
//清除類名
clearClass : function(){
for(let i = 0 ,k = this.oli.length;i<k;i++){
this.oli[i].className = '';
}
},
addClass : function(){
for(let i = 0,k = this.oli.length;i<k;i++){
addEventListener(this.oli[i],'mouseover',()=>{
this.clearClass();
this.oli[i].className = 'active';
this.count = i;
this.toImg();
})
}
},
//事件調用
eventBind : function(){
addEventListener(this.obtn[0],'click',this.next.bind(this));
addEventListener(this.obtn[1],'click',this.pre.bind(this));
addEventListener(this.osection,'mouseover',this.clearTimer.bind(this));
addEventListener(this.osection,'mouseout',this.autoplay.bind(this));
}
}
new Banner();
</script>
相關文章
- 1. js 選項卡 輪播圖
- 2. js面向對象輪播圖寫法
- 3. js鼠標拖拽事件
- 4. 面向對象--拖拽
- 5. 面向對象的拖拽
- 6. 選項卡（面向對象）
- 7. 鼠標拖拽小知識
- 8. JS拖拽系列--多元素拖拽，面向對象，es6拖拽
- 9. 面向對象-選項卡
- 10. 鼠標點擊拖拽方式截圖
- 更多相關文章...
- • PHP 面向對象 - PHP教程
- • Rust 面向對象 - RUST 教程
- • 漫談MySQL的鎖機制
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js 選項卡 輪播圖
- 2. js面向對象輪播圖寫法
- 3. js鼠標拖拽事件
- 4. 面向對象--拖拽
- 5. 面向對象的拖拽
- 6. 選項卡（面向對象）
- 7. 鼠標拖拽小知識
- 8. JS拖拽系列--多元素拖拽，面向對象，es6拖拽
- 9. 面向對象-選項卡
- 10. 鼠標點擊拖拽方式截圖