面向对象
对象 : (黑盒子)不了解内部结构, 知道表面的各种操作.
面向对象 : 不了解原理的情况下 会使用功能 .
面向对象是一种通用思想,并非编程中能用,任何事情都能用.
编程语言的面向对象的特点：
封装 : 看不到里面的东西 , 用好表面功能.
继承 : 从父类继承一些方法 , 属性 , 子类又有一些新的特性.
多态
抽象 ： 抽取一个功能里面多个核心的功能模块。
思想： 高内聚、低耦合
低耦合 ：每个功能模块之间耦合度要低
高内聚 ：模块内部要紧密相连
面向对象的风格 都是 从 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>