面向对象的三大特征:封装、继承、多态；以下案例注释地方(script内)有这些特征的运用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表的增删和移动</title>
<style>
.list{font-family:微软雅黑;font-size:15px;
margin:auto;background:#ddd;width:450px;padding:20px;}
.list-option{padding:6px 0px;}
.list-input{width:250px;}
.list-ul{list-style:none;padding:0px;margin:0px;}
form{padding-left:0px;}
.list-add{color:orange;font-weight:bold;}
.list-add-show{color:orange;font-size:15px;}
.list-add-show:hover{text-decoration:underline;cursor:pointer;}
.list-up:hover,.list-down:hover,.list-del:hover{cursor:pointer;text-decoration:underline;}
.list-hide{display:none}
</style>
</head>
<body>
<form>
<div class="list">
<ul class="list-ul">
<li class="list-option">
<input class="list-input" type="text" name="list[]">
<span class="list-btn">
<span class="list-up">[上移]</span>
<span class="list-down">[下移]</span>
<span class="list-del">[删除]</span>
</span>
</li>
</ul>
<div class="list-bottom">
<span class="list-add">+</span>
<span class="list-add-show">添加项目</span>
<div class="list-add-area list-hide">
添加到列表:
<input class="list-add-input" type="text" name="list[]">
<input class="list-add-add" type="button" value="添加">
<input class="list-add-cancel" type="button" value="取消">
</div>
</div>
</div>
</form>
<script>
(function(window){
var SmartList=function(prefix,defList){
Find.prototype.prefix=prefix;
var find=new Find(document.getElementsByClassName(prefix)[0]);
var list=new List(find.className('option'));
for(var i in defList){
list.add(defList[i]);
}
var add={
'show':find.className('add-show'),
'area':find.className('add-area'),
'input':find.className('add-input'),
'add':find.className('add-add'),
'cancel':find.className('add-cancel')
};
add.show.onclick=function(){
add.area.classList.remove(prefix+'-hide');
};
add.add.onclick=function(){
list.add(add.input.value);
};
add.cancel.onclick=function(){
add.area.classList.add(prefix+'-hide');
};
};
function List(tmp){
this.tmp=tmp;
this.obj=tmp.parentNode;
this.obj.removeChild(tmp);
}
//封装add方法,为List的原型添加add方法,List也继承了该方法,当new一个List的实体对象后，该实体对象可以直接调用add方法,体现封装和继承特征List.prototype.add=function(value){
var tmp=this.tmp.cloneNode(true);
var find=new Find(tmp);
find.className('input').value=value;
var obj=this.obj;
find.className('up').onclick=function(){
var prev=find.prev();
if(prev){
obj.insertBefore(tmp,prev);
}else{
alert('已经是第1个');
}
};
find.className('down').onclick=function(){
var next=find.next();
if(next){
obj.insertBefore(next,tmp);
}else{
alert('已经是最后1个');
}
};
find.className('del').onclick=function(){
if(confirm('您确定要删除?')){
obj.removeChild(tmp);
}
};
this.obj.appendChild(tmp);
}
function Find(obj){
this.obj=obj;
}
//封装className,prev,next等方法,为Find的原型添加这些,Find也继承了这些方法,当new一个Find的实体对象后，该实体对象可以直接调用Find方法,体现封装和继承特征
Find.prototype.prefix='';
//执行相同的方法,传入的className不同,得到的元素不同,体现多态特征Find.prototype.className=function(className){
return this.obj.getElementsByClassName(this.prefix+'-'+className)[0];
};
Find.prototype.prev=function(){
var node=this.obj.previousSibling;
while(node){
if(node.nodeType===Node.ELEMENT_NODE){
break;
}
node=node.previousSibling;
}
return node;
};
Find.prototype.next=function(){
var node=this.obj.nextSibling;
while(node){
if(node.nodeType===Node.ELEMENT_NODE){
break;
}
node=node.nextSibling;
}
return node;
}
window['SmartList']=SmartList;
})(window);
SmartList('list',['PHP','JavaScript']);
</script>
</body>
</html>
