1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript高级语法12-门面模式</title> 6 </head> 7 <body> 8 <a id="btn" href="#">click</a> 9 <script> 10 /*用途比较广，通过一个简单的例子引出门面模式 11 * 简化类的接口体现门面的好处。 12 * 13 * 门面模式作用：1.简化类的接口 2.消除类和使用本类的客户端的代码耦合 14 * 3.通过构建一个简单的门面代码让系统变得更简单 15 */ 16 function demo1(){ 17 /*各种浏览器对于DOM事件的注册是不一样的(那么每一个浏览器会被看成一个子系统) 18 程序员如果天天和这些问题打交道的话，那么重点就偏离了原本的业务 19 * */ 20 function addEventFacade(el,type,fn){ 21 if(window.addEventListener){ 22 //使用火狐浏览器 23 el.addEventListener(type,fn,false); 24 }else if(window.attachEvent){ 25 //适用于IE的 26 el.attachEvent("on"+type,fn); 27 }else{ 28 el["on"+type] = fn; 29 } 30 } 31 var ele = document.getElementById("btn"); 32 addEventFacade(ele,"click",function(){ 33 alert("ok"); 34 }) 35 36 } 37 // demo1(); 38 39 //接口 40 var Interface = function(name,methods){ 41 if(arguments.length != 2){ 42 alert("interface must have two paramters..."); 43 } 44 this.name = name;//这个是接口的名字 45 this.methods = [];//定义个空数组来转载函数名 46 for (var i = 0; i < methods.length; i++) { 47 if(typeof methods[i] != "string"){ 48 alert("method name must is String ...") 49 }else{ 50 this.methods.push(methods[i]) 51 } 52 } 53 } 54 //定义接口的一个静态方法来实现接口与实现类的直接检验 55 //静态方法不要写成Interface.prototype.* 因为这是写到接口原型连上的 56 //我们要把静态的函数直接写到类层次上 57 Interface.ensureImplements = function(object){ 58 if(arguments.length<2){ 59 alert("必须最少是2个参数"); 60 return false; 61 } 62 //遍历 63 for (var i = 1; i < arguments.length; i++) { 64 var inter = arguments[i]; 65 //如果你是接口就必须是Interface类型的 66 if(inter.constructor != Interface){ 67 throw new Error("if is interface class must is Interface type"); 68 } 69 //遍历函数集合并分析 70 for (var j = 0; j < inter.methods.length; j++) { 71 var method = inter.methods[j]; 72 //实现类中必须有方法名字 和 接口中所有的方法名项目 73 if(!object[method] || typeof object[method] != "function"){ 74 throw new Error("实现类并且没有完全实现接口中的所有方法..."); 75 } 76 } 77 } 78 } 79 function demo2(){ 80 /*用2个DAO体现门面模式 81 */ 82 //人员类 83 var PersonDao = new Interface("PersonDao",["getInfo","learn","merry"]); 84 var Person = function(){ 85 this.name = "zhangsan"; 86 this.address = "beijing"; 87 this.getInfo = function(){ 88 return "名字"+this.name+" 地址"+this.address; 89 } 90 this.learn = function(){ 91 document.write("学习"); 92 } 93 this.merry = function(){ 94 } 95 //验证实现的接口 96 Interface.ensureImplements(this,PersonDao); 97 } 98 //dog Dao 99 var DogDao = new Interface("DogDao",["call","run","getInfo"]); 100 var Dog = function(){ 101 this.name = "dahuang"; 102 this.getInfo = function(){ 103 return "狗的名字："+this.name; 104 } 105 this.run = function(){} 106 this.call = function(){} 107 //验证接口 108 Interface.ensureImplements(this,DogDao); 109 } 110 //需求是现在需要给养的狗办理相应的宠物领养证件。需要人和狗的信息 111 //1.不用门面 112 function action(person,dog){ 113 var r = "GG" + new Date().getDate() + Math.floor(Math.random()*11); 114 var str = "办证成功：编号" +r + "<br>主人信息："+person.getInfo()+"<br>狗的信息"+ 115 dog.getInfo(); 116 document.write(str); 117 } 118 //action(new Person(),new Dog()); 119 120 //使用门面模式 复杂的事 交给门面来做 121 function facade(person,dog){ 122 var r = "GG" + new Date().getDate() + Math.floor(Math.random()*11); 123 var str = "办证成功：编号" +r + "<br>主人信息："+person.getInfo()+"<br>狗的信息"+dog.getInfo(); 124 this.action = function(){ 125 return str; 126 } 127 128 } 129 130 function action2(person,dog){ 131 document.write(new facade(person,dog).action()); 132 } 133 action2(new Person(),new Dog()); 134 135 //用了门面模式，客户端代码变得简单了。 136 } 137 demo2(); 138 </script> 139 </body> 140 </html>