JavaScript设计模式学习
博客专区 > iPhone 的博客 > 博客详情
JavaScript设计模式学习
iPhone 发表于3年前
JavaScript设计模式学习
  • 发表于 3年前
  • 阅读 15
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: JavaScript设计模式之接口是实现的三种方式之一

JavaScript设计模式之接口是实现的三种方式之一

// 用注释描述接口interface.js
/*
在这里定义两个接口,内部是接口要实现的方法,当然这样的语法在JS下是无法执行的,所以把注释,下同
interface Composite{
	function add(child);
	function remove(child);
	function getChild(index);
}

interface FormItem{
	function save();
}
*/

//这里定义一个实现类(function),既该方法要实现接口定义的方法,这里把这些方法定义在prototype里
var CompositeForm=function(id,data){
	this.id=id;
	this.data=data
}

var findchild=function (_array,child) {
	for(var i=0;i<_array.length;i++){
		if(_array[i]===child)
			return i;
	}
	return null;
}

CompositeForm.prototype.add=function(child){
	this.data.push(child);
	return this.data;
}
CompositeForm.prototype.remove=function(child){
	var index=findchild(this.data,child)
	if(index){
		this.data.splice(index,1);
	}
    return this.data;
}
CompositeForm.prototype.getChild=function(index){
	return this.data[index];
}
CompositeForm.prototype.save=function(){
	console.log("save");
}

function log(str){
	console.log(str);
}
//测试
var form=new CompositeForm(1,[1,'hello','world',{asd:"123"}]);
log(form.add('hello'));
log(form.data);
log(form.remove("world"));
log(form.data);
log(form.getChild(2));
form.save();
// log(form.findchild('hello'))

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="interface.js"></script>
</head>
<body>
</body>
</html>

控制台输出结果


这种方式表面上看CompositeForm类(Function)实现的规定的接口方法,但是,这仅仅是作为文档(书面)的形式下完成的,全靠自觉,如果写错了或者漏了根本不会报错,没有相应的提示让它作为接口来说意义太小

共有 人打赏支持
粉丝 0
博文 7
码字总数 2946
×
iPhone
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: