王厕所

coder的自我修养

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

神马是接口?简单点的说,接口是规定了某个实现了他的类,必须具备某些方法或属性。

因为javascript没有impletes与interface关键字,所以javascript中搞接口,只能借助自定义辅助类,再显式的检查来模仿java等面向对象语言中的接口概念。

本文可以算是《javascript设计模式》的读书笔记吧。

书上介绍了3种模仿的接口的方法

1.注释法  2.属性检查法  3.填鸭方式检查

第一种注释法

其实没有太大意义,只不过是加了段注释,告诉该具备哪些方法,后面还要手动去添加这些方法,就算没有添加某个方法,也不会有任何的提示信息,这样就不能保证在后期运用到某个类的时候不出错。

第二种属性检查法

首先看代码:

 1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>test interFace in javascript</title>
5 <script type="text/javascript">
6 function classA(){
7 this.impleteInterFace = ['interFace1','interFace2'];//这里定义该类必须实现的接口名
8 }
9
10 function checkInterFace(cl,interFaces){
11 var hasInterFaceDoNotImplete = compareInterFace(cl,interFaces);
12 if(hasInterFaceDoNotImplete.length!=0){
13 alert('接口'+hasInterFaceDoNotImplete.join(',')+'未实现')
14 }else{
15 alert('所有接口均已实现');
16 }
17 }
18
19 function compareInterFace(cl){
20 var interFace_ARR = arguments[1];
21 var doNotImplete_ARR = [];
22 for(var i=0;i<interFace_ARR.length;i++){
23 var implete = false;
24 for(var j=0;j<cl.impleteInterFace.length;j++){
25 if(interFace_ARR[i]===cl.impleteInterFace[j]){
26 implete = true
27 }
28 }
29 if(!implete){
30 doNotImplete_ARR.push(interFace_ARR[i]);
31 }
32 }
33 return doNotImplete_ARR;
34 }
35 addEvent(window,'load',function(){
36 addEvent(document.getElementById('checkImplete1'),'click',function(){
37 checkInterFace(new classA(),['interFace1','interFace2','interFace3']);
38 });
39 })
40 function addEvent(obj,type,fn){
41 if(obj.addEventListener){
42 obj.addEventListener(type,fn,false);
43 }else{
44 obj.attachEvent('on'+type,fn);
45 }
46 }
47
48 </script>
49 </head>
50 <body>
51 <input type="button" id="checkImplete1" value="点我检查接口是否实现(属性检查法)">
52 </body>
53 </html>

这种方法只能检查某个类实现了哪些接口,却没办法保证接口中的方法他都实现了。

第三种填鸭式检查

 1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>test interFace in javascript</title>
5 <script type="text/javascript">
6 function classA(){
7 //构造函数,没有像属性检查法那样在此定义所需时间的接口。
8 }
9 function addEvent(obj,type,fn){
10 if(obj.addEventListener){
11 obj.addEventListener(type,fn,false);
12 }else{
13 obj.attachEvent('on'+type,fn);
14 }
15 }
16 Function.prototype.method = function(name,fn){
17 this.prototype[name]=fn;
18 return this;
19 }
20 addEvent(window,'load',function(){
21 addEvent(document.getElementById('checkImplete2'),'click',function(){
22 var obj = new classA();
23 obj['deletes'] = function(){alert('deletes')}//在此处才给classA的一个实例添加了deletes方法
24 interFace.checkInterFaceAndMethod(obj,interFace1,interFace2);//此处表示classA的实例必须实现这2个接口。检查结果也是通过的。若上面那行没有就会提示有方法没实现。
25 })
26 })
27 classA.method('add',function(){
28 alert('add');
29 }).method('select',function(){
30 alert('select');
31 }).method('update',function(){
32 alert('update');
33 })//此处未给classA添加deletes方法
34
35 function interFace(name,methods){
36 this.name = name;
37 this.methods = methods;
38 }
39 interFace.checkInterFaceAndMethod = function(obj){
40 var unImplete = [];
41
42 for(var i=1;i<arguments.length;i++){
43 var interFace = arguments[i];
44 for(var j=0;j<interFace.methods.length;j++){
45 var methodName = interFace.methods[j];
46 if(obj[methodName]===undefined){//在这里检查对象是否实现接口中的所有方法。
47 unImplete.push(interFace.name+'.'+methodName);
48 }
49 }
50 }
51 if(unImplete.length==0){
52 alert('实现所有接口及方法');
53 return true;
54 }else{
55 alert('未实现的方法:'+unImplete.join(','));
56 return false;
57 }
58 }
59
60 var interFace1 = new interFace('interFace1',['add','select','update']);//创建接口
61 var interFace2 = new interFace('interFace2',['deletes']);//创建接口
62 </script>
63 </head>
64 <body>
65 <input type="button" id="checkImplete2" value="点我检查接口是否实现(填鸭式)">
66 </body>
67 </html>

此方法就完全检查了每个接口中的每个方法是否被实现,本例中未去验证方法的参数的正确性。

实际书中的interFace类中做了很多的参数类型的判断,这样更能保证程序的稳定性。

本章节是看完了,但是还是不太理解为什么要模仿接口,或许看完后面依赖接口的几种设计模式才能理解。

很依赖接口的几种设计模式:
1、工厂模式
2、组合模式
3、装饰者模式
4、命令模式

posted on 2011-09-28 17:02  王厕所  阅读(1008)  评论(0编辑  收藏  举报