照猫画虎"/>
照猫画虎
在父类中定义一组操作算法骨架，而将一些实现不走延迟到子类中，使子类可以不盖被父级的算法结构的同时可以重新定义算法中某些实现步骤以下实现的效果比较简单实际中应该会更复杂的
基础类:
var Alert = function(data) {//如果没有数据返回，防止后面程序执行if (!data) {return false;}this.content = data.content;this.ce = function(elem) {return document.createElement(elem);}//创建提示框面板this.panel = this.ce("div");//创建内容组件this.contentNode = this.ce("p");//创建确定按钮组件this.confirmBtn = this.ce("span");//创建关闭按钮组件this.closeBtn = this.ce("b");//为提示框面板添加类this.panel.className = "alert";//为关闭按钮添加类this.closeBtn.className = "a-close";//为确认按钮添加类this.confirmBtn.className = "a-confirm";//为确定按钮添加文案this.confirmBtn.innerHTML = data.confim || "确认";//为提示内容添加文本this.contentNode.innerHTML = this.content;//点击关闭按钮执行方法this.fail = data.fail || function() {};this.success=data.success||function(){};};
Alert.prototype = {//创建方法init: function() {//生成提示框this.panel.appendChild(this.closeBtn);this.panel.appendChild(this.contentNode);this.panel.appendChild(this.confirmBtn);//插入页码中document.body.appendChild(this.panel);this.bindEvent();//显示提示框this.show();},bindEvent: function() {var me = this;//关闭按钮点击事件this.closeBtn.onclick = function() {me.fail();me.hide();}//确定按钮点击事件this.confirmBtn.onclick = function() {//执行关闭确认方法me.success();me.hide();}},//隐藏弹层方法hide: function() {this.panel.style.display = "none";},//显示弹层方法show: function() {this.panel.style.display = "block";}
}子类：
//根据模板创建类
//右侧按钮提示框--------------------------------------
var RightAlert=function(data){//继承基本提示框构造函数Alert.call(this,data);//确认按钮添加right类设置位置居右this.confirmBtn.className=this.confirmBtn.class+"right";
}
//接触基本提示框的原型方法
RightAlert.prototype=new Alert();
//实现标题提示框-----------------------------------------
var TitleAlert=function(data){//基础基本提示框构造函数Alert.call(this,data);//设置标题内容this.titleNode=this.ce("h3");//标题组件中写入标题内容this.title=data.title;this.titleNode.innerHTML=this.title;}
//基础提示框的原型方法
TitleAlert.prototype=new Alert();
//对基本提示框创建方法拓展
TitleAlert.prototype.init=function(){//插入标题this.panel.insertBefore(this.titleNode,this.panel.firstChild);//基础提示框的init方法Alert.prototype.init.call(this);}子类也可以用来做模板类：
//继承类也可以作为模板*****************************************
var CanelAlert=function(data){//继承标题提示框构造函数TitleAlert.call(this,data);//取消按钮文案this.cancel=data.cancel;//创建取消按钮this.cancelBtn=this.ce("span");//为取消按钮添加类this.cancelBtn.className="canel";//设置取消按钮内容this.cancelBtn.innerHTML=this.cancel||"取消";}
//继承标题提示框原型方法
CanelAlert.prototype=new Alert();
CanelAlert.prototype.init=function(){//继承标题提示框创建方法TitleAlert.prototype.init.call(this);this.panel.appendChild(this.cancelBtn);
}
CanelAlert.prototype.bindEvent=function(){var me=this;//标题提示框板凳事件方法继承TitleAlert.prototype.bindEvent.call(this);this.cancelBtn.οnclick=function(){me.fail();me.hide();}
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.alert{width:200px;min-height: 200px;border: 1px solid #000;position: relative;}.a-close{position: absolute;width: 30px;height: 30px;line-height: 30px;text-align: center;right:0;top:0;}.a-close:after{content: "X";display: inline-block;}h3{border-bottom: #eee solid 1px;padding:0 20px;}p{padding: 0 20px;}span{width: 40px;height: 30px;line-height: 30px;text-align: center;background: #eee;padding:10px;}span+span{margin-left: 20px;}</style>
</head>
<body><script src="template.js"></script><script>new CanelAlert({title:"提示标题",content:"提示内容",success:function(){console.log("ok")},fail:function(){console.log("cancel")}}).init();</script>
</body>
</html>下一篇文章继续:
更多推荐
照猫画虎
发布评论