JavaScript 面向对象写法

2018-07-20sad creeper

面向对象:黑盒子,可以在不了解原理的情况下,使用它的功能,例如:Date,Array

对象组成:属性和方法

对象特点:抽象(类似建模),封装,继承

多重继承:一个孩子多个爹

方法一:工厂方式(构造函数法)

function User(name, age, sayName){
this.name = name
this.age = age
this.sayName = function(){
alert(this.name)
}
}
var sadcreeper = new User('sadcreeper', 26)
sadcreeper.sayName() //sadcreeper

缺点:函数重复,资源浪费

改进后的方法二:

//构造函数加属性
function User(name, age, sayName){
this.name = name;
this.age = age;
}
//原型加方法
User.prototype.sayName = function(){
alert(this.name);
}
var sadcreeper = new User('sadcreeper', 26)
sadcreeper.sayName() //sadcreeper

例子一:面向对象写法实现选项卡

// html


<div id="tab1" class="tab">
<input class="active" type="button" name="" value="选项一">
<input type="button" name="" value="选项二">
<input type="button" name="" value="选项三">
<div class="" style="display:block">
选项一
</div>
<div class="">
选项二
</div>
<div class="">
选项三
</div>
</div>
<div id="tab2" class="tab">
<input class="active" type="button" name="" value="选项一">
<input type="button" name="" value="选项二">
<input type="button" name="" value="选项三">
<div class="" style="display:block">
选项一
</div>
<div class="">
选项二
</div>
<div class="">
选项三
</div>
</div>




// css


.tab input {
background: white;
}
.tab input.active{
background: gray;
}
.tab div {
width: 200px;
height: 200px;
background: #CCC;
display: none;
}




// js 面向过程的写法:


window.onload = function () {
var oDiv = document.getElementById('tab1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');


for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function(){
fnClick(aBtn, aDiv, this);
}
}


var oDiv2 = document.getElementById('tab2');
var aBtn2 = oDiv2.getElementsByTagName('input');
var aDiv2 = oDiv2.getElementsByTagName('div');


for (var i = 0; i < aBtn2.length; i++) {
aBtn2[i].index = i;
aBtn2[i].onclick = function(){
fnClick(aBtn2, aDiv2, this);
}
}
};
function fnClick(aBtn, aDiv, oBtnClicked){
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className = ''
aDiv[i].style.display = 'none';
}
oBtnClicked.className = 'active';
aDiv[oBtnClicked.index].style.display = 'block';
}




// js 面向对象的写法


window.onload = function(){
var tab1 = new Tab('tab1');
var tab2 = new Tab('tab2');
}


function Tab(id) {
var that = this;
var oDiv = document.getElementById(id);
this.aBtn = oDiv.getElementsByTagName('input');
this.aDiv = oDiv.getElementsByTagName('div');


for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i;
this.aBtn[i].onclick = function(){
that.fnClick(this);
};
}
};
Tab.prototype.fnClick = function(oBtn){
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].className = ''
this.aDiv[i].style.display = 'none';
}
oBtn.className = 'active';
this.aDiv[oBtn.index].style.display = 'block';
}

截图:

例子二:用面向对象的写法实现一个 ul 的 li 的删除

// html 


<ul id="ul1">
<li>我是第一条</li>
<li>我是第二条</li>
<li>我是第三条</li>
<li>我是第四条</li>
</ul>
<ul id="ul2">
<li>我是第一条</li>
<li>我是第二条</li>
<li>我是第三条</li>
<li>我是第四条</li>
</ul>




// js


window.onload = function(){
var ul1 = new Ul('ul1');
var ul2 = new Ul('ul2');
}


function Ul(id){
var that = this;
this.oUl = document.getElementById(id);
for (var i = 0; i < this.oUl.children.length; i++) {
oBtn = document.createElement('button');
oBtn.innerHTML = '删除';
oBtn.onclick = function(){
that.delete(this.parentNode)
}
this.oUl.children[i].appendChild(oBtn);
}
}
Ul.prototype.delete = function(oLi){
this.oUl.removeChild(oLi);
}

例子三:对象继承实现的 拖拽

// html


<div id="div1">
拖拽
</div>
<div id="div2">
限制范围的拖拽
</div>




// css


#div1{
width: 200px;
height: 200px;
background-color: gray;
position: absolute;
}
#div2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
}




// js


window.onload = function () {
var drag = new Drag('div1');
var drag2 = new DragLimit('div2');
}


function Drag(id) {
let that = this;
this.oDiv = document.getElementById(id);


this.oDiv.onmousedown = function () {
that.fnDown();
return false;
};
}
Drag.prototype.fnDown = function (ev) {
let that = this;
let oEvent = ev||event;


this.disX = oEvent.clientX-this.oDiv.offsetLeft;
this.disY = oEvent.clientY-this.oDiv.offsetTop;


document.onmousemove = function () {
that.fnMove();
};
document.onmouseup= function () {
that.fnUp();
}
}
Drag.prototype.fnMove = function (ev) {
let oEvent = ev||event;


this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top = oEvent.clientY-this.disY+'px';
}
Drag.prototype.fnUp = function (ev) {
document.onmousemove= null;
document.onmousemove=null;
}


function DragLimit(id){
Drag.call(this, id);
}
for (var i in Drag.prototype) {
DragLimit.prototype[i] = Drag.prototype[i];
}
DragLimit.prototype.fnMove = function (ev) {
let oEvent = ev||event;
let l = this.oDiv.style.left = oEvent.clientX-this.disX;
let t = this.oDiv.style.top = oEvent.clientY-this.disY;
if (l < 0) {
l = 0;
}else if (l > document.documentElement.clientWidth-this.oDiv.offsetWidth) {
l = document.documentElement.clientWidth-this.oDiv.offsetWidth;
}
if (t < 0) {
t = 0;
}
this.oDiv.style.left = l+'px';
this.oDiv.style.top = t+'px';
}

阅读 306 评论