JavaScript设计模式-12.门面模式

  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>