JavaScript设计模式3---代理设计模式、责任链设计模式、命令设计模式

最新推荐文章于 2021-07-09 20:48:00 发布

wenmin1987

最新推荐文章于 2021-07-09 20:48:00 发布

阅读量146

点赞数

分类专栏： JavaScript设计模式文章标签：代理设计模式命令设计模式责任链设计模式

本文链接：https://blog.csdn.net/wenmin1987/article/details/106878447

版权

JavaScript设计模式专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>JavaScript设计模式3</title>
   </head>
   <body>
       <script type="text/javascript">

//八、代理设计模式：十分实用的模式买家和卖家之间的  物流  可以理解为一个代理
//
var me={//买家
    shop:undefined,
    buy:function(){
        console.log("网购"+this.shop.delever());
    }
}
var computerShop = {//卖家，computerShop不会自己去实现delever方法，交由代理对象（logistics）实现
//这样代理对象和卖家进行解耦，并且买家卖家代理三方都可以灵活组合，例如，买家可以选择其他的网店对象，只要其有delever方法
//同样，网店也可以灵活的搭配物流商，由具体的代理对象来完成送货功能
delegate:undefined,
    delever:function(){
        return this.delegate.delever()
    }
}
var logistics={//物流（代理）
    delever:function(){
        return "德邦物流正在送货"
    }
}

me.shop=computerShop; //买家可以任选卖家，这里指定的是computerShop
computerShop.delegate=logistics; //给物流代理实现送货的方法 delever（）
me.buy();//网购德邦物流正在送货
       </script>
   <script type="text/javascript">

//九、责任链设计模式：用来连接处理任务的一连串节点，
//使用责任链设计模式可以将复杂的处理过程拆分成多个负责方，并且灵活替换和修改
//开发一处房产，可能需要多个政府部门的批准与检查，每个部门对自己所管辖的范围负责
//举例：实现校验网址功能
   var typeCheck = {//第一个节点，用来校验传入的数据是否为字符串类型
       nextHandler:undefined,
       handle:function(obj){
           if(typeof obj!=="string"){
               console.log('必须为字符串');
               return false
           }
           if(this.nextHandler!==undefined){
               this.nextHandler.handle(obj)
           }else{
               console.log('校验成功');
               return true
           }
       }
   }
   var emptyCheck = {//第二个节点，校验字符串是否为空字符串
       nextHandler:undefined,
       handle:function(obj){
           if(obj.length===0){
               console.log('字符串不能为空');
               return false
           }
           if(this.nextHandler!==undefined){
               this.nextHandler.handle(obj)
           }else{
               console.log('校验成功');
               return true
           }
       }
   }
   var vaildCheck = {//第三个节点用来进行网址的正则匹配
       nextHandler:undefined,
       handle:function(obj){
           if(!/^(www\.).+(\.com)$/.test(obj)){
               console.log('字符串不合规');
               return false
           }
           if(this.nextHandler!==undefined){
               this.nextHandler.handle(obj)
           }else{
               console.log('校验成功');
               return true
           }
       }
   }
   //链中使用了3个节点来进行校验，链中任何一个节点失败都会中断后面的校验
   typeCheck.nextHandler=emptyCheck;
   emptyCheck.nextHandler=vaildCheck;
   typeCheck.handle('www.ws.com');
   //这种责任链十分容易扩展，如果需要将校验规则改成邮箱，只需要在vaildCheck后面再添加一个邮箱校验的节点即可
   </script>
   <script type="text/javascript">

//十、命令设计模式：常常用来进行复杂功能实现与使用的解耦
//核心：将功能的调用封装成命令，对使用方来说，只需提供正确的命令和参数即可
//应用广泛，如在使用ajax进行网络请求时，许多第三方的封装都会采用命令模式进行请求配置
var Calc = {
    perporm:function(p){//调用命令对象的方法
        this.run(p.type,p.params)
    },
    run:function(command,params){
        this[command](...params);
    },
    add:function(a,b){
        console.log('a+b=',a+b)
    },
    sub:function(a,b){
        console.log('a-b=',a-b)
    },
    mul:function(a,b){
        console.log('a*b=',a*b)
    },
    div:function(a,b){
        console.log('a/b=',a/b)
    },
}
//创建命令对象，type指定四则运算的类型，params参数用来设计运算的数值
var p={
    type:'add',
    params:[10,5]
}
var p1={
    type:'sub',
    params:[10,5]
}
var p2={
    type:'mul',
    params:[10,5]
}
var p3={
    type:'div',
    params:[10,5]
}
// 使用命令对象
Calc.perporm(p);
Calc.perporm(p1);
Calc.perporm(p2);
Calc.perporm(p3)
   </script>
   </body>
</html>

wenmin1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript设计模式3---代理设计模式、责任链设计模式、命令设计模式

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JavaScript设计模式3</title> </head> <body> <script type="text/javascript">//八、代理设计模式：十分实用的模式买家和卖家之间的物流...
复制链接

扫一扫